枫叶白
0%

发表于 分类于

  1. 避免重复打包公共依赖
    将 Vue/React 等设为 external，主应用通过 CDN 注入：

    1
    2
    3
    4
    5
    6
    // vue.config.js 或 webpack.config.js
    externals: {
    vue: 'Vue',
    react: 'React',
    'react-dom': 'ReactDOM',
    }

  2. 预加载子应用资源

    1
    2
    3
    start({
    prefetch: true, // 开启资源预加载
    });

  3. 缓存子应用
    在主应用中缓存子应用实例，避免每次进入都重新 mount。

  4. 异步加载子应用脚本

    1
    <script src="child-app.js" defer></script>

  5. 全局事件通信 bus

    1
    2
    3
    4
    5
    6
    7
    // 主应用通信工具
    import mitt from 'mitt';
    export const eventBus = mitt();

    // 子应用中通信示例
    eventBus.emit('login-success', userInfo);
    eventBus.on('set-theme', (theme) => { ... });

发表于 分类于

有个公司需求是在前端页面，点击按钮能成功跳到公司的APP。跟原生同事联调时候，记得让他们把URL scheme://告诉你。下面的脚本是通过jquery方式去判断当前手机是android还是ios，展示对应的跳转按钮；然后监听按钮的点击事件，通过iframe的方式试图打开APP，如果能正常打开，会直接切换到APP，并自动阻止a标签的默认行为。否则会alert提示用户下载。

脚本部分：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<body>
  <div id="btn"> 
    <!-- <button onclick="submitFn()">打开app</button> --> 
     <a href="安卓配置" class="a-btn" style="display: none">安卓</a> 
     <a href="苹果URL scheme://" class="i-btn" style="display: none">苹果</a> 
     </div>
 </body> 
 <script src="http://m-cdn.saclub.com.cn/app/2.4/js/jquery-1.11.3.min.js"></script> 
 <script type="text/javascript"> 
 var ua = navigator.userAgent.toLowerCase(); 
 var isWeixin = ua.indexOf('micromessenger') != -1; 
 var isAndroid = ua.indexOf('android') != -1; 
 var isIos = (ua.indexOf('iphone') != -1) || (ua.indexOf('ipad') != -1); 
 
 var d = new Date(); var t0 = d.getTime(); 
 $(function(){ if(isAndroid){ $(".a-btn").show(); }else{ $(".i-btn").show(); } });  
 $(".a-btn").click(function(){  openApp("安卓下载链接"); }); $(".i-btn").click(function(){  openApp("IOS App Store下载链接"); }); 
 function openApp(src) {  
   var delay = setInterval(function(){ 
    var d = new Date(); var t1 = d.getTime(); 
    if( t1-t0<3000 && t1-t0>2000){ alert('请下载APP'); window.location.href =src; } 
    if(t1-t0>=3000){ clearInterval(delay); } 
    },2000); } 
</script>

发表于 更新于 分类于

在前端面试和日常业务中，Promise.race 是一个非常常见但又容易被忽略的 API。它的规则很简单：

多个 Promise 同时“赛跑”，谁先落地（fulfilled 或 rejected），整体 Promise 就跟着落地。

这篇文章我们会：

  • 先讲清楚 Promise.race 的行为与典型使用场景
  • 再手写一个 myPromiseRace
  • 最后补充边界情况、优化点与面试常考问题

1. Promise.race 是什么？

Promise.race(iterable) 接收一个可迭代对象（通常是数组），返回一个新的 Promise：

  • 只要 任意一个 Promise 先 fulfilled，结果 Promise 就 fulfilled
  • 只要 任意一个 Promise 先 rejected，结果 Promise 就 rejected
  • 它不会等待全部结束，也不会“取消”其他 Promise（它们仍然会继续执行）

2. 常见使用场景

2.1 超时控制（最常见）

比如请求接口超过 3 秒就当作超时处理：

  • fetch(url) vs timeoutPromise(3000)
  • 谁先结束就用谁的结果

2.2 多源请求兜底

比如同一个资源从 CDN1/CDN2 同时拉取，谁先成功就用谁。

2.3 首屏竞速

首屏数据、降级数据、缓存数据同时读取，谁先返回就先渲染。

3. 手写 myPromiseRace

你这版实现非常接近原生行为：

  • 校验 iterable
  • 遍历输入
  • 用 Promise.resolve 兼容非 Promise 值
  • 谁先 settle 就 resolve/reject
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function myPromiseRace(promises) {
  return new Promise((resolve, reject) => {
    // 检查输入是否为可迭代对象
    if (!promises || typeof promises[Symbol.iterator] !== 'function') {
      return reject(new TypeError('Argument is not iterable'));
    }

    // 遍历每个 Promise / 值
    for (const promise of promises) {
      // 用 Promise.resolve 包一层，确保 thenable / 普通值都能被处理
      Promise.resolve(promise)
        .then(resolve)   // 谁先 fulfilled，整体就 fulfilled
        .catch(reject);  // 谁先 rejected，整体就 rejected
    }
  });
}

4. 关键点拆解（为什么要 Promise.resolve？）

Promise.race 的参数里不一定都是 Promise，可能是：

  • 普通值：Promise.race([1, 2, 3])
  • thenable：{ then(resolve) { resolve(123) } }

使用 Promise.resolve(x) 的好处是：

  • 普通值会立刻变成 fulfilled Promise
  • thenable 会被吸收并按 Promise 规则执行

这也是符合原生 Promise.race 的行为。

5. 更完整的版本：处理空 iterable

原生 Promise.race([]) 会返回一个永远 pending 的 Promise。

你现在的实现遇到空数组也会返回 pending（因为 for 循环不执行），这符合原生。

如果你想更明确一点，可以加个计数，但不是必须。

6. 更多测试用例

6.1 测试（先 reject）

1
2
3
4
5
6
7
const p1 = new Promise(res => setTimeout(() => res('p1'), 1000));
const p2 = new Promise(res => setTimeout(() => res('p2'), 500));
const p3 = new Promise((res, rej) => setTimeout(() => rej('p3 error'), 300));

myPromiseRace([p1, p2, p3])
  .then(console.log)
  .catch(console.error); // 输出: p3 error

6.2 普通值参与竞速（会立刻赢）

1
2
3
4
myPromiseRace([Promise.resolve('A'), 123, new Promise(res => setTimeout(() => res('B'), 10))])
  .then(console.log)
  .catch(console.error);
// 输出：123（普通值最快）

6.3 空数组：永远 pending

1
2
3
const p = myPromiseRace([]);
setTimeout(() => console.log('still pending...'), 1000);
// 1 秒后输出 still pending...，race 本身没有结果

7. 实战：用 race 做请求超时

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function timeout(ms) {
  return new Promise((_, reject) => {
    setTimeout(() => reject(new Error(`Timeout after ${ms}ms`)), ms);
  });
}

async function fetchWithTimeout(url, ms = 3000) {
  return myPromiseRace([fetch(url), timeout(ms)]);
}

// 用法
fetchWithTimeout('https://example.com/api', 2000)
  .then(res => res.json())
  .then(data => console.log('data:', data))
  .catch(err => console.error('error:', err.message));

8. 面试常问点（加分项）

  • Q：race 能取消其他 Promise 吗？
    不能。Promise 本身不支持取消，除非你用 AbortController（fetch）或自己设计可取消任务。

  • Q：race 里放普通值会怎样？
    会被 Promise.resolve 包装成 fulfilled Promise，通常会立刻“获胜”。

  • Q：race 和 any/allSettled 有什么区别？

    • race：谁先 settle 用谁
    • any：谁先 fulfilled 用谁（全部 rejected 才 rejected）
    • allSettled：等全部结束，返回每个结果状态

9. 总结

手写 Promise.race 的核心只有一句话：

遍历 iterable，把每个元素 Promise.resolve 后接上同一个 resolve/reject，谁先 settle 就定局。

发表于 更新于 分类于

在 JavaScript 中，new运算符是面试和日常开发中都会频繁遇到的知识点。
很多人会用new，但不理解它的真正原理。

下面通过手写new，一步步拆解new运算符的底层逻辑，帮助你真正掌握 JavaScript 对象创建机制。

一、new 运算符到底做了什么？

当我们执行下面这行代码时：

1
const person = new Person('Alice', 25);

JavaScript 实际上在背后做了 4 件事情：

  1. 创建一个新的空对象
  2. 将新对象的原型指向构造函数的 prototype
  3. 执行构造函数，并将 this 绑定到新对象
  4. 如果构造函数返回的是对象，则返回该对象；否则返回新对象

理解这 4 步，是理解 new 的关键。

二、为什么要手写 new？

手写 new 的好处有三点：

  • 加深对 原型链 和 this 指向 的理解
  • 几乎是 前端面试高频题
  • 有助于理解框架中对象创建的底层逻辑

接下来我们直接上代码。

三、手写 new 的完整实现

1
2
3
4
5
6
7
8
9
10
11
function myNew(constructor, ...args) {
  // 1. 创建一个新对象，并将其原型指向构造函数的 prototype
  const obj = Object.create(constructor.prototype);

  // 2. 执行构造函数，将 this 绑定到新对象
  const result = constructor.apply(obj, args);

  // 3. 如果构造函数返回的是对象，则返回该对象
  //    否则返回我们创建的新对象
  return result instanceof Object ? result : obj;
}

这段代码完整复现了 new 运算符的核心行为。

四、逐行拆解实现逻辑

1. Object.create 的作用

1
const obj = Object.create(constructor.prototype);

这一步等价于：

1
obj.__proto__ === constructor.prototype

也就是说：

  • 新对象可以访问构造函数原型上的方法
  • 原型链关系得以建立

2. constructor.apply(obj, args)

1
const result = constructor.apply(obj, args);

这一步做了两件事：

  • 执行构造函数
  • 将构造函数内部的 this 指向新创建的对象

也就是：

1
2
this.name = name;
this.age = age;

实际上是在给 obj 添加属性。

3. 为什么要判断返回值？

1
return result instanceof Object ? result : obj;

这是很多人容易忽略的一点。

来看一个例子：

1
2
3
4
5
6
7
function Test() {
  this.a = 1;
  return { b: 2 };
}

const t = new Test();
console.log(t); // { b: 2 }

如果构造函数 显式返回一个对象，new 会返回这个对象，而不是 this。

所以我们在 myNew 中必须处理这种情况。

五、测试手写的 myNew

1
2
3
4
5
6
7
8
9
10
function Person(name, age) {
  this.name = name;
  this.age = age;
}

const p1 = myNew(Person, 'Alice', 25);

console.log(p1.name); // Alice
console.log(p1.age);  // 25
console.log(p1 instanceof Person); // true

结果完全符合原生 new 的行为。

六、myNew 与 new 的对比总结

行为 new myNew
创建新对象 ✅ ✅
绑定原型 ✅ ✅
绑定 this ✅ ✅
处理返回对象 ✅ ✅

可以说，myNew 已经实现了 90% 的 new 运算符行为，足以应付面试和深入理解 JS 原理。

七、常见面试追问

Q1：为什么不能直接 const obj = {}？

因为 {} 创建的对象原型是 Object.prototype，
而 new 创建的对象原型必须是 构造函数的 prototype。

Q2：constructor.apply 能不能换成 call？

可以，只是参数形式不同：

1
constructor.call(obj, ...args);

Q3：instanceof 是如何工作的？

1
p1 instanceof Person

本质是沿着原型链查找：

1
Person.prototype 是否在 p1 的原型链上

八、总结

  • new 并不是魔法，而是一套明确的执行流程
  • 手写 new 是理解 原型链 + this + 构造函数 的最佳方式
  • 掌握这个知识点，对学习 Vue、React、Node.js 都有帮助

发表于 更新于 分类于

在 Web 开发中，其实存在很多安全漏洞，其中跨站脚本攻击是最常见、危害也非常大的安全漏洞之一。
一旦网站存在 XSS 漏洞，那么攻击者就会在用户浏览器中执行恶意脚本，进而窃取 Cookie、劫持会话、篡改页面内容，甚至控制用户账号。

下面将从 原理 + 实战防御手段 的角度，系统讲解前端和全栈开发中 如何有效防御 XSS 攻击

一、什么是 XSS 攻击？

XSS 的本质是：

攻击者将恶意 JavaScript 注入到网页中，并在其他用户的浏览器里执行。

常见的 XSS 攻击类型包括：

  • 反射型 XSS：恶意脚本来自 URL 参数
  • 存储型 XSS：恶意脚本被存储在数据库中
  • DOM 型 XSS：前端 JS 逻辑直接操作不可信数据

不论是哪种形式，核心问题都在于：
👉 用户输入被当作代码执行了

二、输入验证和过滤（最基础也是最重要）

永远不要相信用户输入。

1. 前端层面的基本校验

在前端可以做一些基础校验，例如：

  • 限制输入长度
  • 限制输入格式（如邮箱、手机号）
  • 过滤明显的危险字符

示例（仅用于基础校验）：

1
2
3
function sanitizeInput(input) {
  return input.replace(/[<>]/g, '');
}

⚠️ 注意：
前端校验只能作为用户体验优化，不能作为最终安全防线。

2. 后端必须做严格校验（关键）

光是前端做个过滤是远远不够的，后端也需要做处理：

  • 校验数据类型
  • 校验长度
  • 拒绝不符合业务规则的输入
  • 对 HTML 内容进行转义或白名单过滤

推荐策略：

  • 默认拒绝
  • 白名单优先

三、对输出进行编码（比过滤更重要）

很多 XSS 漏洞并不是输入有问题，而是输出方式不安全。

1. HTML 转义输出

在将用户输入输出到页面时，应进行 HTML 编码：

原字符 转义后
< &lt;
> &gt;
" &quot;
' &#39;

很多模板引擎（如 Vue、React、Handlebars）默认会做转义，不要轻易关闭。

2. 避免危险 API

尽量避免以下写法：

1
element.innerHTML = userInput;

推荐安全方式：

1
element.textContent = userInput;

或者：

1
2
3
const el = document.createElement('div');
el.textContent = userInput;
container.appendChild(el);

四、使用安全的 API 和框架机制

现代前端框架本身已经内置了大量 XSS 防护机制。

1. React / Vue 的默认保护

  • JSX / 模板语法默认转义
  • 明确标注危险行为（如 v-html、dangerouslySetInnerHTML）

⚠️ 一旦使用这些 API，就必须 100% 确保内容可信

2. 避免在前端拼接 HTML 字符串

错误示例：

1
container.innerHTML = `<div>${userInput}</div>`;

正确做法：

1
2
3
const div = document.createElement('div');
div.textContent = userInput;
container.appendChild(div);

五、使用内容安全策略（CSP）

CSP（Content Security Policy） 是防御 XSS 的“终极武器”之一。

1. CSP 能做什么？

  • 禁止内联脚本执行
  • 限制脚本来源
  • 阻止恶意第三方资源加载

示例 HTTP 头：

1
2
3
4
Content-Security-Policy:
  default-src 'self';
  script-src 'self';
  object-src 'none';

即使攻击者成功注入脚本，只要 CSP 生效，浏览器也会拒绝执行。

2. 为什么 CSP 非常重要？

因为它属于：

  • 浏览器层面的安全防护
  • 就算代码有疏漏，也能兜底

1. HttpOnly 的作用

设置 Cookie 时加上 HttpOnly：

1
Set-Cookie: sessionId=xxx; HttpOnly;

这样可以：

  • 防止 JavaScript 读取 Cookie
  • 即使发生 XSS，也能降低会话被盗风险

2. 配合 Secure 和 SameSite

推荐同时使用：

  • Secure
  • SameSite=Strict 或 Lax

提升整体安全等级。

七、定期更新第三方库和依赖

现实中的 XSS 漏洞，大量来自第三方依赖：

  • 旧版本 UI 组件
  • 不再维护的插件
  • 存在漏洞的 npm 包

建议：

  • 定期更新依赖
  • 使用 npm audit
  • 关注安全公告

八、良好的安全编程习惯

最后，防御 XSS 不是“某一个技巧”，而是一整套习惯：

  • 不信任任何外部输入
  • 不随意使用 innerHTML
  • 不忽略安全警告
  • 安全优先于“图方便”

九、总结

  • XSS 是最常见、也是最危险的 Web 安全问题之一
  • 真正有效的防御需要 前端 + 后端 + 浏览器策略 三层配合
  • 输入校验只是开始，安全输出和 CSP 才是关键
  • 养成良好的安全编程习惯，比任何补丁都重要

对于前端开发者来说，
懂得如何防御 XSS，是走向专业的重要一步。

发表于 更新于 分类于

centos8使用yum失败，切换镜像源，更改镜像源文件，尝试清除缓存并重新建立

1
2
3
4
5
6
wget -O /etc/yum.repos.d/CentOS-Base.repo https://mirrors.aliyun.com/repo/Centos-8.repo

sudo yum clean all

sudo yum makecache

Centos8已不维护，只能找

puppeteer报错下载依赖 参考链接：https://www.cnblogs.com/ilizhu/p/14504049.html
报错sandbox：

1
2
#添加启动参数
const browser = await puppeteer.launch({args: ['--no-sandbox', '--disable-setuid-sandbox']});

发表于 更新于 分类于

有个需求是根据一个表格的所有子表，同步到另个表格（包含子表）的数据，用google sheets里面的扩展程序里的apps 脚本功能，编写脚本。为什么要同步呢？因为原表默认是不可编辑的，打算同步过来后再进行编辑。sourceSpreadsheetId跟targetSpreadsheetId为google sheet 表格地址栏d后面的一串字符。具体的实现方式如下图方法所示：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
function synchronizeSheetsToAnotherFile() {
  const sourceSpreadsheetId = "id1";
  const targetSpreadsheetId = "id2"; # 比如：1NOtSSvDwXrca8vqyZW6OqQJwGaCICMVguSz1-i72oqg

  const sourceSpreadsheet = SpreadsheetApp.openById(sourceSpreadsheetId);
  const targetSpreadsheet = SpreadsheetApp.openById(targetSpreadsheetId);

  const sourceSheets = sourceSpreadsheet.getSheets();

  sourceSheets.forEach(sheet => {
    const sheetName = sheet.getName();
    let targetSheet = targetSpreadsheet.getSheetByName(sheetName);

    if (!targetSheet) {
      targetSheet = targetSpreadsheet.insertSheet(sheetName);
    } else {
      targetSheet.clear(); 
    }

    const range = sheet.getDataRange();
    const displayValues = range.getDisplayValues(); 
    const formats = range.getBackgrounds();        
    const fontWeights = range.getFontWeights();    

    const targetRange = targetSheet.getRange(1, 1, displayValues.length, displayValues[0].length);
    targetRange.setValues(displayValues); 
    targetRange.setBackgrounds(formats); 
    targetRange.setFontWeights(fontWeights);

  
  });
}




发表于 更新于 分类于
  • 通过Props和Props回调：用于父子组件的通信，子组件通过props接收父的数据，父组件将回调函数传给子组件，子组件调用这个回调函数，传数据给父组件。
  • 通过Context API：可以共享状态的API，不需要按层级去传递。
  • Redux或Mobx：对于复杂的应用，可以用状态库来实现组件通信。
  • 事件订阅模式：使用EventEmitter或者第三方库来实现跨组件的事件发布订阅。
  • Hooks：React的一些Hooks，比如useState，能实现不同组件的共享逻辑跟状态。

发表于 更新于 分类于

《if-elif条件语句》逐字稿

  同学们，老师刚才留意到班级上的值日表，周一到周五有好多勤劳的小蜜蜂呀。老师想问下周一值日的同学有哪些举下手？诶，老师看见了。那么同学们记住这些周一值日的同学了吗？是的，总共有六位。那如果以三个班为单位，给你一个名字，你能快速给出这名同学是星期几值日吗？你们有什么好办法吗？请你，对了，可以自己用绕口令等方式背下来。还有更好的办法吗？请你，对了，可以利用程序的方式输出出来。那该使用什么语句来表示多个条件呢？今天我们就一起来学习python中的另一种条件语句if-elif-else

  现在请大家同桌两人为一小组，先来分析if-elif-else怎么实现同学名字对应星期几值日的问题，时间是8分钟。开始吧，时间到了，刚才在巡视的过程中，大家都在认真的讨论，那哪个小组代表想来分享你们的成果，你来说，你说想要判断同学是哪天值日的，只要输入他的名字，根据名字找到对应星期几输出就行了。还有补充的吗？第五小组，你们来说，他说可以弄五个数组对应星期一到星期五，把每个人的名字放进去对应的数组里，然后判断输出。你补充的非常关键。请坐。非常好，请坐，大家分析的很正确，说明大家有充分预习本节课的内容。

  接下来我们就综合大家的分析，请同学们自主思考，并画出流程图，时间是5分钟，开始吧，时间到了，请这位同学来展示你的流程图，你说首先输入学生的名字，假如小花在星期一的数组里，那么输出星期一，依次类推。现在请大家尝试写出多分支结构的语句，老师提示一下，条件子句的如果需要用elif来表示。我们请这位同学将他的答案写到黑板上，请同学们来看跟你写的一样吗？哪些地方需要修改？你说将最后一个elif应该写成else，是表达都不满足条件的话，执行else后面的语句。你说要注意缩进和冒号。大家观察的很仔细，希望同学们写的时候一定要认真。请大家利用学到的if-elif语句去编写刚才你们设计的算法。我看到大家都能准确的写出来了，并且都避免了刚才的问题。

  语句我们已经写出来了，那他的执行过程是什么呢？现在请同学们以同桌两人为一小组，进行讨论，一会我们请一名小组代表展示讲解，时间是7分钟，开始吧，我看到有同学在小声的讨论，时间到了，第二小组，请你们讲一讲执行过程，他结合流程图告诉我们，执行过程是依次判断输入的同学姓名符合哪个条件，如符合则输出，若都不符合则输出错误。他用图文的形式讲解，非常的直观。那现在我们就可以就着大屏幕上的流程图，总结出if-elif语句的执行过程是从if行开始依次对条件进行判断，如果正确则执行改条件下面的语句块，然后跳出if语句，如果不正确则对下一个条件进行判断，如果所有条件都不成立，则执行else下面的语句块。

  新知识我们已经学完了，现在请大家编写完整程序，实现上述的执行过程，学有余力的同学，请自己思考生活中有哪些需要对多个条件进行检测的事情，自主进行编写。我们请这些同学来进行展示，他们中有的从数学出发，编写了比较三个数，求最大数问题，还有的是从生活出发，编写了出租车计费的问题。大家编写的语句和格式都很规范。

  这堂课已经接近尾声了，这节课你都有哪些收获呢？大家说学会了if-elif的格式和执行过程，看来这节课的知识同学们都掌握了。其实编程离咱们的生活和学习很近，并且也没有想象中的那么难，老师希望同学们以后都可以像今天一样在课堂上积极思考，表达想法。
  最后布置一个小作业，请同学们对比三种if语句特点，整理成表格。
  这节课就上到这里，同学们再见。

发表于 更新于 分类于
  • Fabric：同步渲染 UI，消除 Bridge 通信瓶颈
  • TurboModules：按需加载原生模块，提升启动速度
  • JSI（JavaScript Interface）：直接调用原生代码，替代异步 Bridge, Bridge是异步的、单线程的，会带来额外的开销；而JSI是同步的，更低开销、并发的。