加载笔记内容...
加载笔记内容...
微前端(Micro Frontends) 是一种将前端应用分解为独立模块的架构模式,主要实现方式包括:
方案 | 隔离性 | 通信成本 | 维护成本 | 性能开销 |
---|---|---|---|---|
iframe | ★★★★★ | ★☆☆☆☆ | ★★☆☆☆ | ★★☆☆☆ |
Web Components | ★★★★☆ | ★★★☆☆ | ★★★☆☆ | ★★★☆☆ |
qiankun | ★★★☆☆ | ★★★★☆ | ★★★☆☆ | ★★★☆☆ |
Module Fed | ★★☆☆☆ | ★★★★★ | ★★★★☆ | ★★☆☆☆ |
争议点:CSS隔离方案中,Shadow DOM可能影响全局样式覆盖,而CSS Modules需要构建工具支持。实践中常采用命名空间+构建时隔离的混合方案。
最佳实践:阿里巴巴淘宝主站采用qiankun+Webpack Module Federation混合架构,实现200+微应用的协同开发
问题定义:在二叉树中寻找从根到叶子的最小路径和,本质是动态规划问题。状态转移方程可表示为:
1dp[node] = node.val + min(dp[left], dp[right])
1function minPathSumOptimized(root) {
2 const memo = new Map();
3
4 function dfs(node) {
5 if (!node) return Infinity;
6 if (!node.left && !node.right) return node.val;
7 if (memo.has(node)) return memo.get(node);
8
9 const minSum = node.val + Math.min(dfs(node.left), dfs(node.right));
10 memo.set(node, minSum);
11 return minSum;
12 }
13
14 return dfs(root);
15}
当遇到稀疏数组表示时(存在null节点),需要调整索引计算:
1function getChildrenIndex(idx) {
2 let nextLevel = 0;
3 while (tree[idx + nextLevel] === null) nextLevel++;
4 return [2*(idx+nextLevel)+1, 2*(idx+nextLevel)+2];
5}
常见陷阱:忽略负值节点可能导致贪心算法失效,必须遍历所有路径。例如路径[-1, 2, -3]中,虽然中间节点大但整体和更小。
1class MyPromise {
2 constructor(executor) {
3 // ...初始化状态
4 try {
5 executor(resolve.bind(this), reject.bind(this));
6 } catch (e) {
7 reject.call(this, e);
8 }
9 }
10
11 then(onFulfilled, onRejected) {
12 const newPromise = new MyPromise((resolve, reject) => {
13 const microTask = () => {
14 try {
15 const x = (this.state === 'fulfilled')
16 ? (onFulfilled || (v => v))(this.value)
17 : (onRejected || (e => { throw e }))(this.reason);
18 resolvePromise(newPromise, x, resolve, reject);
19 } catch (e) {
20 reject(e);
21 }
22 };
23
24 if (this.state !== 'pending') {
25 queueMicrotask(microTask);
26 } else {
27 this.callbacks.push(microTask);
28 }
29 });
30
31 return newPromise;
32 }
33}
34
35function resolvePromise(promise, x, resolve, reject) {
36 // 处理thenable对象和循环引用
37}
争议点:部分实现使用setTimeout模拟微任务队列,在Node.js环境可能产生执行顺序差异。正确做法应区分浏览器和Node环境使用原生API。
方法 | 时间复杂度 | 空间复杂度 | 最大深度限制 |
---|---|---|---|
递归 | O(n) | O(d) | 调用栈限制 |
迭代(栈) | O(n) | O(n) | 无 |
Generator | O(n) | O(d) | 无 |
toString | O(n) | O(n) | 仅数字 |
1function flat(arr, depth = 1) {
2 const stack = [...arr.map(item => [item, depth])];
3 const result = [];
4
5 while (stack.length) {
6 const [item, currentDepth] = stack.pop();
7 if (Array.isArray(item) && currentDepth > 0) {
8 stack.push(...item.map(sub => [sub, currentDepth - 1]));
9 } else {
10 result.unshift(item); // 保持原顺序
11 }
12 }
13
14 return result;
15}
性能提示:对于超大规模数组(>1e6元素),建议采用分块处理+Web Worker避免主线程阻塞。
最新研究:2023年Chrome团队提出的Lightning CSS为微前端样式隔离提供了新的编译时解决方案,可减少30%的运行时开销。