微前端的需求有哪些？微前端的原理是怎么样的？为什么这么设计，及微前端的应用场景是什么？对有些客户，前端的重要性高于后端

微前端（Micro Frontends）是将前端应用拆分成多个独立、可部署的部分，每个部分可以由不同的团队独立开发、测试、部署和维护。这种架构类似于微服务在后端的应用，是为了应对复杂前端应用的维护和扩展问题而提出的。

来龙去脉

背景

随着前端技术的发展，前端应用变得越来越复杂和庞大。单体前端应用（Monolith Frontend）在开发和维护过程中面临以下问题：

  • 开发效率低：多个团队在同一个代码库中工作，容易产生冲突。
  • 部署风险高：每次部署都需要部署整个应用，任何部分的错误都会影响整个系统。
  • 技术债务：随着时间推移，不同部分可能采用不同的技术栈，难以统一和升级。
  • 可维护性差：代码库庞大，难以理解和维护。

微前端的出现

为了解决上述问题，微前端架构应运而生。微前端借鉴了微服务的思想，将一个大应用拆分为若干小的前端应用，每个应用可以独立开发、部署和运行。这些小应用通过某种方式集成在一起，形成最终的用户界面。

微前端的原理

微前端的核心思想是将前端应用拆分为多个独立的模块，这些模块可以独立开发、测试、部署和运行。具体原理包括以下几个方面：

  1. 独立开发和部署：每个微前端模块可以由不同的团队独立开发和部署，模块之间通过明确的接口进行通信。
  2. 独立运行环境：每个模块可以有自己的运行环境和技术栈，互不干扰。
  3. 模块加载和渲染：通过主应用（或称为壳应用）动态加载和渲染各个微前端模块，可以使用iframe、JavaScript动态加载等技术。
  4. 通信机制：通过事件总线、全局状态管理、URL路由等方式实现模块之间的通信和数据共享。

设计原因

微前端的设计主要是为了应对以下问题：

  • 团队独立性：不同团队可以独立开发和部署自己的模块，减少团队之间的依赖和冲突。
  • 技术多样性：不同模块可以使用不同的技术栈，允许团队选择最适合的技术。
  • 增量升级：可以逐步迁移和升级模块，而不需要一次性重构整个应用。
  • 降低风险：每个模块的发布和更新都是独立的，降低了全局部署的风险。

应用场景

微前端适用于以下场景：

  1. 大型企业应用：适用于需要多个团队协作的大型企业级应用。
  2. 需要频繁更新的应用：适用于需要频繁发布和更新的应用，可以降低发布风险。
  3. 多技术栈共存的应用：适用于需要同时使用多种前端技术的应用。
  4. 渐进式迁移：适用于需要逐步从老旧系统迁移到新系统的场景。

当然，关于微前端，还有很多内容可以深入探讨。以下是一些更详细的方面：

微前端的架构模式

微前端架构有多种实现方式，每种方式都有其优缺点，适用于不同的场景。

1. 基于iframe的架构

通过iframe将不同的微前端应用嵌入到主应用中。每个iframe加载一个独立的前端应用。

  • 优点：

    • 隔离性强：iframe天生具有隔离性，可以有效避免样式和脚本的冲突。
    • 独立性高：每个iframe可以独立开发、部署和运行。

  • 缺点：

    • 性能问题：iframe的加载和渲染性能较差，影响用户体验。
    • 通信复杂：iframe之间的通信较为复杂，需要使用postMessage等机制。

2. 基于JavaScript的动态加载

通过JavaScript动态加载微前端模块，通常使用模块联邦（Module Federation）等技术。

  • 优点：

    • 性能较好：可以优化加载和渲染，提高性能。
    • 灵活性高：可以根据需要动态加载和卸载模块。

  • 缺点：

    • 隔离性较弱：需要额外处理样式和脚本的冲突问题。
    • 复杂度高：需要处理模块加载、依赖管理等问题。

3. 基于Web Components

使用Web Components（如Custom Elements、Shadow DOM）将每个微前端模块封装成独立的组件。

  • 优点：

    • 标准化：基于Web标准的组件，具有良好的兼容性和可维护性。
    • 隔离性好：Shadow DOM提供了样式隔离，避免样式冲突。

  • 缺点：

    • 学习成本：需要学习和掌握Web Components相关技术。
    • 浏览器兼容性：需要考虑对旧版浏览器的支持。

4. 基于Server-Side Includes (SSI)

通过服务端模板引擎在服务器端组合不同的微前端模块，生成完整的页面。

  • 优点：

    • 性能好：在服务器端完成组合，减少客户端的加载时间。
    • 安全性高：避免了客户端的跨域问题。

  • 缺点：

    • 灵活性差：需要在服务器端进行配置和管理，灵活性较低。
    • 开发复杂：需要处理服务端和客户端的协同问题。

微前端的技术栈

微前端并不限制使用特定的技术栈，可以根据实际需求选择合适的技术。常见的技术栈包括：

  • JavaScript框架：React、Vue、Angular、Svelte等。
  • 模块打包工具：Webpack、Rollup、Parcel等。
  • 状态管理：Redux、MobX、Vuex等。
  • 路由管理：React Router、Vue Router等。
  • 通信机制：Event Bus、Custom Events、Shared State等。

微前端的实施步骤

实施微前端架构通常需要以下几个步骤：

  1. 需求分析：确定应用的需求和微前端的适用性。
  2. 架构设计：选择合适的微前端架构模式和技术栈。
  3. 模块划分：将应用划分为若干独立的模块，每个模块有明确的功能边界。
  4. 开发和测试：独立开发和测试每个模块，确保模块的独立性和稳定性。
  5. 集成和部署：通过主应用集成各个模块，并进行统一的部署和运维。

微前端的挑战

尽管微前端有很多优点，但在实际应用中也面临一些挑战：

  • 性能优化：需要优化模块的加载和渲染，避免影响用户体验。
  • 通信和状态管理：需要设计高效的模块间通信机制和全局状态管理方案。
  • 样式和资源管理：需要处理模块间的样式冲突和资源共享问题。
  • 安全性：需要确保不同模块间的隔离性，避免安全漏洞。
  • 运维和监控：需要建立完善的运维和监控体系，保障系统的稳定性和可靠性。

当然，让我们深入探讨微前端的更多细节，包括实际的实施经验、最佳实践，以及一些具体的工具和框架。

微前端的最佳实践

1. 明确的模块边界

确保每个微前端模块有明确的功能边界和责任划分。模块之间的依赖和通信需要通过明确的接口和协议来实现。

  • 功能划分：根据业务功能、页面结构或用户角色划分模块。
  • 接口设计：设计清晰的API接口，确保模块之间的低耦合。

2. 独立开发和部署

每个微前端模块应独立开发、测试和部署，确保模块的独立性和可维护性。

  • 独立代码库：每个模块使用独立的代码库和版本控制。
  • 独立CI/CD：每个模块有独立的持续集成和持续部署流程。

3. 高效的模块加载

优化模块的加载和渲染，确保用户体验。

  • 懒加载：根据需要动态加载模块，减少初始加载时间。
  • 缓存策略：利用浏览器缓存和CDN优化资源加载。
  • 预加载：根据用户行为预加载即将使用的模块。

4. 统一的状态管理

设计统一的状态管理方案，确保各个模块之间的数据一致性。

  • 全局状态管理：使用Redux、MobX等全局状态管理库。
  • 模块间通信：通过事件总线、消息队列等方式实现模块间的通信。

5. 样式隔离

确保各个模块的样式互不干扰，避免样式冲突。

  • CSS Modules：使用CSS Modules实现样式的局部作用域。
  • Shadow DOM：使用Web Components的Shadow DOM实现样式隔离。
  • 命名规范：制定统一的样式命名规范，避免全局样式污染。

6. 安全性

确保模块之间的隔离性，避免安全漏洞。

  • 内容安全策略（CSP）：使用CSP策略限制模块的资源加载和执行。
  • 跨域资源共享（CORS）：配置CORS策略，确保资源的安全加载。
  • 身份认证和授权：设计统一的认证和授权机制，确保用户数据的安全性。

7. 运维和监控

建立完善的运维和监控体系，保障系统的稳定性和可靠性。

  • 日志记录：记录各个模块的运行日志，便于问题排查。
  • 性能监控：监控模块的加载和运行性能，及时发现和优化性能瓶颈。
  • 错误处理：设计统一的错误处理机制，及时捕获和处理运行时错误。

微前端的工具和框架

1. Single-SPA

Single-SPA 是一个用于构建微前端架构的框架，支持多个框架并存（如React、Vue、Angular等），通过注册应用和路由，实现多个微前端应用的加载和渲染。

  • 优点：灵活性高，支持多种前端框架，易于集成。
  • 缺点：需要一定的学习成本，配置较为复杂。

2. qiankun

qiankun 是基于Single-SPA的微前端框架，由阿里巴巴开发。它提供了更加开箱即用的API和工具，简化了微前端的实现。

  • 优点：易用性高，提供了丰富的功能和文档。
  • 缺点：与Single-SPA类似，仍需要一定的学习和配置。

3. Module Federation

Module Federation 是Webpack 5引入的一种模块加载技术，允许在应用之间动态加载代码，实现微前端模块的共享和加载。

  • 优点：与Webpack无缝集成，高性能，灵活性强。
  • 缺点：与Webpack的依赖较强，学习曲线较陡。

4. Bit

Bit 是一个组件驱动的开发平台，支持将前端组件独立化，实现微前端的组件化开发。

  • 优点：组件化强，易于复用和分享。
  • 缺点：需要适应组件驱动的开发模式。

当然，我们继续深入探讨微前端的更多细节和工具。

5. Piral

Piral 是一个用于构建微前端架构的框架，专注于提供一个灵活和可扩展的解决方案。Piral允许开发者创建一个门户应用（piral instance），其中可以嵌入多个微前端模块（pilet）。

  • 优点：

    • 强大的插件系统，提供许多开箱即用的功能。
    • 灵活性高，支持多种前端技术栈。
    • 良好的文档和社区支持。

  • 缺点：

    • 学习曲线较陡，特别是对于新手。
    • 生态系统相对较小，需要社区的持续发展。

6. Open Components

Open Components 是一种微服务风格的微前端架构，专注于组件的发布和消费。它允许开发者创建独立的组件服务，并通过HTTP API进行消费。

  • 优点：

    • 组件化强，易于独立开发和部署。
    • 支持多种语言和框架，灵活性高。

  • 缺点：

    • 依赖服务端的支持，前后端协同工作。
    • 需要额外的运维和部署管理。

微前端的实施案例

1. 大型电商平台

在大型电商平台中，通常有多个团队负责不同的功能模块，如首页、商品详情页、购物车、用户中心等。通过微前端架构，每个团队可以独立开发和部署自己的模块，提升开发效率和部署灵活性。

  • 实施方式：可以采用Single-SPA或qiankun等框架，结合模块联邦技术，实现动态加载和渲染。
  • 挑战：需要处理模块间的通信和状态管理，确保用户体验一致性。

2. 企业级管理系统

在企业级管理系统中，通常涉及多个子系统，如人力资源管理、财务管理、供应链管理等。通过微前端架构，可以将这些子系统拆分为独立的微前端模块，便于独立开发和维护。

  • 实施方式：可以采用iframe或Web Components等技术，实现模块的嵌入和隔离。
  • 挑战：需要考虑样式隔离和性能优化，确保系统的稳定性和可维护性。

3. 多品牌网站

在多品牌网站中，不同品牌可能有不同的前端需求和设计风格。通过微前端架构，可以为每个品牌创建独立的前端模块，并通过主应用进行统一管理和集成。

  • 实施方式：可以采用Piral或Open Components等框架，实现模块化和组件化开发。
  • 挑战：需要确保品牌间的样式和功能一致性，避免用户体验的割裂。

微前端的未来趋势

1. 标准化和规范化

随着微前端架构的普及，行业内将逐步形成一套标准化和规范化的解决方案，减少开发者的学习和实施成本。

  • 标准化协议：制定统一的模块通信和加载协议，确保模块的互操作性。
  • 最佳实践：总结和推广微前端的最佳实践，提升开发和运维效率。

2. 工具和框架的成熟

现有的微前端工具和框架将不断发展和完善，提供更多开箱即用的功能和更好的开发体验。

  • 集成开发环境：提供一体化的开发、测试和部署工具，简化微前端的实施流程。
  • 性能优化：通过更好的模块加载和渲染技术，提升微前端应用的性能。

3. 生态系统的扩展

微前端的生态系统将不断扩展，涵盖更多的前端技术和应用场景。

  • 多技术栈支持：支持更多的前端框架和技术，满足不同团队的需求。
  • 跨平台应用：扩展到移动端、桌面端等更多平台，实现全方位的应用支持。

4. 自动化和智能化

通过自动化和智能化技术，进一步提升微前端的开发和运维效率。

  • 自动化测试：提供自动化的测试工具和框架，确保模块的稳定性和可靠性。
  • 智能化运维：通过智能化的运维和监控工具，及时发现和处理系统问题，保障系统的平稳运行。

微前端的具体实现

让我们更详细地探讨一些常见的微前端实现技术和步骤。

1. Single-SPA 实现示例

Single-SPA 是一个流行的微前端框架，支持将多个前端框架集成到一个应用中。以下是一个简单的使用 Single-SPA 的示例：

步骤 1：安装 Single-SPA

首先，安装 Single-SPA CLI 工具：

npm install -g create-single-spa
步骤 2：创建主应用和微前端应用

使用 CLI 工具创建主应用：

npx create-single-spa

根据提示选择创建一个 root-config 项目。然后，创建微前端应用（例如 React 应用）：

npx create-single-spa --moduleType app-parcel --template react
步骤 3：配置主应用

在主应用的 single-spa-config.js 文件中，注册微前端应用：

import { registerApplication, start } from "single-spa";

registerApplication(
  'react-app',
  () => import('react-app'),
  location => location.pathname.startsWith('/react-app')
);

start();
步骤 4：运行和测试

启动主应用和微前端应用，并在浏览器中访问相应路径，验证微前端应用的加载和渲染。

2. qiankun 实现示例

qiankun 是基于 Single-SPA 的微前端框架，简化了微前端的实现。以下是一个使用 qiankun 的示例：

步骤 1：安装 qiankun

在主应用中安装 qiankun：

npm install qiankun
步骤 2：配置主应用

在主应用的入口文件中配置 qiankun：

import { registerMicroApps, start } from 'qiankun';

// 注册微前端应用
registerMicroApps([
  {
    name: 'react-app',
    entry: '//localhost:7100',
    container: '#container',
    activeRule: '/react-app',
  },
  // 其他微前端应用
]);

// 启动 qiankun
start();
步骤 3：配置微前端应用

在微前端应用中，导出生命周期函数：

// src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

function render() {
  ReactDOM.render(<App />, document.getElementById('root'));
}

if (!window.__POWERED_BY_QIANKUN__) {
  render();
}

export async function bootstrap() {
  console.log('React app bootstraped');
}

export async function mount() {
  render();
}

export async function unmount() {
  ReactDOM.unmountComponentAtNode(document.getElementById('root'));
}
步骤 4：运行和测试

启动主应用和微前端应用，并在浏览器中访问相应路径，验证微前端应用的加载和渲染。

微前端的通信机制

在微前端架构中，各个模块需要进行通信以保持数据一致性和交互性。常见的通信机制包括：

1. 事件总线

使用事件总线（Event Bus）在不同模块之间传递消息。可以使用库如 mitt 或者 eventemitter3：

// eventBus.js
import mitt from 'mitt';
const eventBus = mitt();
export default eventBus;

// 在模块中使用
import eventBus from './eventBus';

// 发送事件
eventBus.emit('eventName', eventData);

// 监听事件
eventBus.on('eventName', (eventData) => {
  // 处理事件
});

2. 全局状态管理

使用全局状态管理工具（如 Redux 或 MobX）在不同模块之间共享状态：

// store.js
import { createStore } from 'redux';

const initialState = {
  data: null,
};

function reducer(state = initialState, action) {
  switch (action.type) {
    case 'SET_DATA':
      return { ...state, data: action.payload };
    default:
      return state;
  }
}

const store = createStore(reducer);
export default store;

// 在模块中使用
import store from './store';

// 获取状态
const state = store.getState();

// 订阅状态变化
store.subscribe(() => {
  const state = store.getState();
  // 更新视图
});

// 分发动作
store.dispatch({ type: ''SSET_DATA', payload: newData });

### 3. **自定义事件**

利用浏览器提供的自定义事件机制，各个模块可以通过 `CustomEvent` 进行通信：

```javascript
// 发送事件
const event = new CustomEvent('eventName', { detail: eventData });
window.dispatchEvent(event);

// 监听事件
window.addEventListener('eventName', (event) => {
  const eventData = event.detail;
  // 处理事件
});

4. 共享服务

通过共享服务（Shared Service），模块之间可以共享公共逻辑和数据。这种方式通常在微前端架构中使用服务提供者模式（Service Provider Pattern）实现：

// sharedService.js
class SharedService {
  constructor() {
    this.data = null;
    this.subscribers = [];
  }

  setData(data) {
    this.data = data;
    this.notifySubscribers();
  }

  getData() {
    return this.data;
  }

  subscribe(callback) {
    this.subscribers.push(callback);
  }

  notifySubscribers() {
    this.subscribers.forEach(callback => callback(this.data));
  }
}

const sharedService = new SharedService();
export default sharedService;

// 在模块中使用
import sharedService from './sharedService';

// 设置数据
sharedService.setData(newData);

// 获取数据
const data = sharedService.getData();

// 订阅数据变化
sharedService.subscribe((data) => {
  // 处理数据变化
});

微前端的性能优化

在微前端架构中，性能优化是一个重要的课题，以下是一些常见的优化策略：

1. 按需加载和懒加载

通过按需加载和懒加载技术，减少初始加载时间，提高用户体验：

// React 示例
const LazyComponent = React.lazy(() => import('./LazyComponent'));

function App() {
  return (
    <React.Suspense fallback={<div>Loading...</div>}>
      <LazyComponent />
    </React.Suspense>
  );
}

2. 代码拆分

利用 Webpack 等构建工具的代码拆分功能，将应用拆分为多个小的包，按需加载：

// webpack.config.js
module.exports = {
  optimization: {
    splitChunks: {
      chunks: 'all',
    },
  },
};

3. 缓存策略

利用浏览器缓存和 CDN 缓存策略，减少资源的重复加载：

<!-- HTML 示例 -->
<link rel="stylesheet" href="styles.css" integrity="sha384-oqVuAfXRKap7fdgcCY5uykM6+R9GqQ8K/uxr+la69aL5/2eV8tqk5sIhoxl8n5Ue" crossorigin="anonymous">

4. 性能监控

通过性能监控工具，如 Lighthouse、Web Vitals 等，持续监控和优化应用的性能：

import { getCLS, getFID, getLCP } from 'web-vitals';

getCLS(console.log);
getFID(console.log);
getLCP(console.log);

微前端的安全性

微前端架构中的安全性同样不容忽视，以下是一些常见的安全措施：

1. 内容安全策略（CSP）

通过配置内容安全策略，限制资源的加载来源，防止 XSS 攻击：

<!-- HTML 示例 -->
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; img-src 'self' https://example.com; script-src 'self' https://example.com;">

2. 跨域资源共享（CORS）

配置 CORS 策略，确保资源加载的安全性：

// Node.js 示例
const express = require('express');
const cors = require('cors');
const app = express();

app.use(cors({
  origin: 'https://example.com',
  methods: 'GET,POST',
}));

app.listen(3000);

3. 身份认证和授权

通过统一的身份认证和授权机制，确保用户数据的安全性：

// 使用 JWT 进行身份认证
const jwt = require('jsonwebtoken');
const token = jwt.sign({ userId: 123 }, 'secret-key', { expiresIn: '1h' });

// 验证 JWT
jwt.verify(token, 'secret-key', (err, decoded) => {
  if (err) {
    // 认证失败
  } else {
    // 认证成功
  }
});

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mfbz.cn/a/775190.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

el-table封装点击列筛选行数据功能，支持筛选，搜索，排序功能

el-table封装点击列筛选行数据功能，支持筛选，搜索，排序功能

数据少的话&#xff0c;可以前端实现&#xff0c;如果多的话&#xff0c;建议还是请求接口比较合理父组件&#xff1a; <template> <div class"home"> <!-- <img alt"Vue logo" src"../assets/logo.png"> <HelloWorld …
阅读更多...
重塑通信边界，基于ZYNQ7000 FPGA驱动的多频段多协议软件无线电平台

重塑通信边界，基于ZYNQ7000 FPGA驱动的多频段多协议软件无线电平台

01、产品概述 本平台是基于高性能ZYNQ-7000系列中的XC7Z045处理器构建的多频段多协议软件无线电解决方案&#xff0c;集成了AD9364芯片——一款业界领先的1x1通道RF敏捷收发器&#xff0c;为无线通信应用提供了强大支持。其存储架构包括2路高速4GB DDR3内存、1路32GB EMMC存储以…
阅读更多...
springboot dynamic配置多数据源

springboot dynamic配置多数据源

pom.xml引入jar包 <dependency><groupId>com.baomidou</groupId><artifactId>dynamic-datasource-spring-boot-starter</artifactId><version>3.5.2</version> </dependency> application配置文件配置如下 需要主要必须配置…
阅读更多...
ASUS/华硕飞行堡垒8 FX506L FX706L系列 原厂win10系统 工厂文件 带F12 ASUS Recovery恢复

ASUS/华硕飞行堡垒8 FX506L FX706L系列 原厂win10系统 工厂文件 带F12 ASUS Recovery恢复

华硕工厂文件恢复系统 &#xff0c;安装结束后带隐藏分区&#xff0c;一键恢复&#xff0c;以及机器所有驱动软件。 系统版本&#xff1a;Windows10 原厂系统下载网址&#xff1a;http://www.bioxt.cn 需准备一个20G以上u盘进行恢复 请注意&#xff1a;仅支持以上型号专用…
阅读更多...
【收藏级神丹】Liae384_刘亦菲_直播可用，平衡度最高的原创神丹，独家珍稀资源

【收藏级神丹】Liae384_刘亦菲_直播可用，平衡度最高的原创神丹，独家珍稀资源

Liae384_刘亦菲_DFL神丹&#xff1a;点击下载 此丹较重&#xff0c;小卡可以使用但不能训练&#xff0c;实测复训适合24G卡8G、12G、16G卡下载练好的专丹直接使用即可384的Liae对各类杂论视频兼容比较好&#xff0c;高参也能容忍高分辨率的DST复用方式: 非必要不用删除AB&…
阅读更多...
Docker：二、常用命令

Docker：二、常用命令

&#x1f341;docker常用命令 官方帮助文档&#xff1a;https://docs.docker.com/reference/ &#x1f332;帮助命令&#xff08;版本信息&#xff09; docker -v # 显示docker版本 docker version # 显示docker版本信息 docker info # 显示docker系统信息 docker 命…
阅读更多...
人工智能系列-numpy（三）

人工智能系列-numpy（三）

&#x1f308;个人主页&#xff1a;羽晨同学 &#x1f4ab;个人格言:“成为自己未来的主人~” 副本和视图 副本 副本是一个数据的完整的拷贝&#xff0c;如果我们对副本进行修改&#xff0c;它不会影响到原始数据&#xff0c;物理内存不再同一位置。副本一般发生在Pytho…
阅读更多...
Java--继承

Java--继承

1.继承的本质是对某一批类的抽象&#xff0c;从而实现对世界更好的建模 2.extends的意思是“扩展”&#xff0c;子类是父亲的扩展 3.Java中只有单继承&#xff0c;没有多继承 4.继承关系的两个类&#xff0c;一个为子类&#xff08;派生类&#xff09;&#xff0c;一个为父类…
阅读更多...
零基础学python（一）

零基础学python（一）

1. 匿名函数 常规函数&#xff1a; def fun(x, y):return x y 匿名函数&#xff1a; # lambda 空格后面是函数入参&#xff0c;冒号后面写函数体/函数逻辑 a lambda x,y: x y print(a(2,3)) 匿名函数/lambda函数的最大优点就是快速定义函数&#xff0c;使代码更精简。 …
阅读更多...
第一百四十五节 Java数据类型教程 - Java字符串类型

第一百四十五节 Java数据类型教程 - Java字符串类型

Java数据类型教程 - Java字符串类型 零个或多个字符的序列称为字符串。 在Java程序中&#xff0c;字符串由java.lang.String类的对象表示。 String类是不可变的。 String对象的内容在创建后无法修改。 String类有两个伴随类&#xff0c;java.lang.StringBuilder和java.lang.…
阅读更多...
欧科云链大咖对话：Web3原生创新静默期，科技巨头却在两极化发展

欧科云链大咖对话：Web3原生创新静默期，科技巨头却在两极化发展

出品&#xff5c;OKG Research 作者&#xff5c;Hedy Bi 上周末&#xff0c;欧科云链研究院接受FT中文的邀请&#xff0c;作为圆桌嘉宾参与了由FT中文网与上海交通大学上海高级金融学院联合主办的金融大师课。在圆桌环节&#xff0c;笔者与各位教授和金融行业科技创新前沿实践…
阅读更多...
基于aardio web.view2库和python playwright包的内嵌浏览器自动化操作

基于aardio web.view2库和python playwright包的内嵌浏览器自动化操作

通过cdp协议可以实现playwright操控webview。 新建Python窗口工程 修改pip.aardio 修改pip.aardio&#xff0c;并执行&#xff0c;安装playwright。 //安装模块 import process.python.pip; //process.python.path "python.exe";/* 安装模块。 参数可以用一个字…
阅读更多...
工地/矿区/电力/工厂/环卫视频智能安全监控反光衣AI检测算法的原理及场景应用

工地/矿区/电力/工厂/环卫视频智能安全监控反光衣AI检测算法的原理及场景应用

一、引言 随着科技的快速发展&#xff0c;特别是在智能交通和安全生产领域&#xff0c;对于夜间或弱光环境下的人员识别和安全监控需求日益凸显。反光衣作为一种重要的安全装备&#xff0c;被广泛应用于道路施工、工地作业、夜间巡逻、安全生产等场景&#xff0c;旨在提高人员的…
阅读更多...
Vue 性能革命：揭秘前端优化的终极技巧；Vue优化技巧，解决Vue项目卡顿问题

Vue 性能革命：揭秘前端优化的终极技巧；Vue优化技巧，解决Vue项目卡顿问题

目录 Vue优化路径 一、使用key 二、使用冻结对象 三、使用函数式组件 四、使用计算属性 五、使用非实时绑定的表单项 六、保持对象引用稳定 6.1、保持对象引用稳定定义 6.2、保持对象引用稳定与不稳定的例子 6.3、vue2判断数据是否变化是通过hasChanged函数实现的 ①…
阅读更多...
Spring AOP、Spring MVC工作原理、发展演变、常用注解

Spring AOP、Spring MVC工作原理、发展演变、常用注解

Spring AOP 概念 AOP全称为Aspect Oriented Programming&#xff0c;表示面向切面编程。切面指的是将那些与业务无关&#xff0c;但业务模块都需要使用的功能封装起来的技术。 AOP基本术语 **连接点&#xff08;Joinpoint&#xff09;&#xff1a;**连接点就是被拦截到的程序执…
阅读更多...
智能文档革新：合合信息智能文档处理平台上线基金合同抽取模型！

智能文档革新：合合信息智能文档处理平台上线基金合同抽取模型！

一、什么是基金合同&#xff1f; 基金合同是指具有平等地位主体的基金当事人在基金活动中&#xff0c;为规范其间的权利、义务&#xff0c;依意思表示一致而形成的契约或协议。《证券投资基金法》第五十二条规定&#xff0c;公开募集基金的基金合同应当包括下列内容: &#x…
阅读更多...
软件游戏d3dcompiler_43.dll丢失怎么办，总结几种有效的方法

软件游戏d3dcompiler_43.dll丢失怎么办，总结几种有效的方法

在使用电脑时&#xff0c;可能会碰到找不到d3dcompiler_43.dll的问题。即在使用过程中&#xff0c;突然弹出一个提示“d3dcompiler_43.dll丢失”&#xff0c;由于此文件的缺失&#xff0c;部分程序将无法启动。为恢复正常使用&#xff0c;我们需要修复此文件。接下来&#xff0…
阅读更多...
【C++】 解决 C++ 语言报错：Undefined Reference

【C++】 解决 C++ 语言报错：Undefined Reference

文章目录 引言 未定义引用&#xff08;Undefined Reference&#xff09;是 C 编程中常见的错误之一&#xff0c;通常在链接阶段出现。当编译器无法找到函数或变量的定义时&#xff0c;就会引发未定义引用错误。这种错误会阻止生成可执行文件&#xff0c;影响程序的正常构建。本…
阅读更多...
Java项目：基于SSM框架实现的中小企业人力资源管理系统【ssm+B/S架构+源码+数据库+开题报告+毕业论文】

Java项目：基于SSM框架实现的中小企业人力资源管理系统【ssm+B/S架构+源码+数据库+开题报告+毕业论文】

一、项目简介 本项目是一套基于SSM框架实现的中小企业人力资源管理系统 包含&#xff1a;项目源码、数据库脚本等&#xff0c;该项目附带全部源码可作为毕设使用。 项目都经过严格调试&#xff0c;eclipse或者idea 确保可以运行&#xff01; 该系统功能完善、界面美观、操作简…
阅读更多...
matlab 绘制高等数学中的二维函数示例

matlab 绘制高等数学中的二维函数示例

matlab 绘制高等数学中的二维函数示例 绘制高等数学中的二维函数示例绘制结果 绘制高等数学中的二维函数示例 clc,clear,close all; % 定义方程 eqn (x, y) (x.^2 y.^2).^3 - y.^4;% 绘制方程曲线和坐标轴 ezplot(eqn, [-2, 2, -2, 2]) hold on % 在同一图形中保持绘图% 绘…
阅读更多...
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站