枫叶白
0%

发表于 分类于 
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
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包装，确保处理的是Promise
      Promise.resolve(promise)
        .then(resolve)  // 任何一个Promise解决，立即解决
        .catch(reject); // 任何一个Promise拒绝，立即拒绝
    }
  });
}

// 测试
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)  // 不会执行，因为p3会先拒绝
  .catch(console.error); // 输出: p3 error

发表于 分类于 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
function myNew(constructor, ...args) {
  // 1. 创建一个新对象，并将其原型指向构造函数的原型
  const obj = Object.create(constructor.prototype);
  
  // 2. 执行构造函数，并将this绑定到新创建的对象
  const result = constructor.apply(obj, args);
  
  // 3. 如果构造函数返回了一个对象，则返回该对象，否则返回新创建的对象
  return result instanceof Object ? result : obj;
}

// 测试
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

发表于 分类于

  1. 输入验证和过滤：对用户输入的数据进行严格验证和过滤，确保用户输入的内容不包含恶意脚本。可以使用正则表达式、HTML编码等方式来过滤用户输入。

  2. 使用安全的API：避免直接在前端代码中操作敏感数据，尽量使用后端API来处理用户输入和返回数据，以减少XSS攻击的可能性。

  3. 使用内容安全策略（CSP）：通过在网页中添加CSP头部，限制浏览器加载外部资源的方式，可以有效减少XSS攻击的风险。CSP可以限制哪些资源可以被加载，从而减少恶意脚本的注入。

  4. 使用HttpOnly标记：在设置Cookie时，使用HttpOnly标记可以防止JavaScript访问Cookie，从而减少XSS攻击对Cookie的窃取。

  5. 定期更新和维护第三方库：确保使用的第三方库和插件没有已知的安全漏洞，及时更新到最新版本，以减少XSS攻击的风险。

  6. 安全编程实践：避免在前端代码中直接拼接用户输入到HTML标签中，使用安全的方法来动态生成DOM元素，如使用createElement()等方法。

发表于 分类于

最近遇到一个问题，如何把已经弄好的react移动端项目打包成apk呢？可以使用capacitor。
首先，可以先将依赖全部添加进去项目里面。

1
2
3
npm add @capacitor/core @capacitor/cli
npm install  @capacitor/android
npm install @capacitor/ios

接着，可以先把自己的app初始化

1
2
3
npx cap init MyApp com.example.myapp   #MyApp是app名字，com.example.myapp是包名
npx cap add android    #这条命令会生成android文件夹
npx cap sync ios

然后把项目进行打包，再通过npx cap copy命令让打包后的产物放进去android目录里面

1
2
npm run build
npx cap copy

紧接着可以通过命令去android平台啦

1
npx cap open android

默认自动打开android studio后，通过File -> Sync Project with Gradle Files, 或者熟悉android studio的人可以通过右上角的按钮去同步。
如果发现Gradle失败，有可能是拉取gradle版本的包失败了，可以找到gradle-wrapper.properties文件，然后把distributionUrl的路径改为distributionUrl=https://mirrors.cloud.tencent.com/gradle/gradle-8.11.1-all.zip，然后重新点击sync按钮就可以啦。

等sync 成功后，可以自己运行起来看效果，也可以直接用Build -> Generate APP Bundles or APKs,选择 Generate APKs,就能成功打包apk包了。

发表于 分类于

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是同步的，更低开销、并发的。

发表于 更新于 分类于

Next版本为7.8.0，找到 /themes/next/_config.yml 文件，搜索 font 关键词，这里注意一定要将 font 里面的 enable 设置为true, 因为默认为false，然后设置 family 为自己想要的，如果family在其他平台找的，就需要修改host。(只是修改了family， 没修改enable就会不生效，所以一定一定要记得)

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
37
38
39
40
font:
  enable: true

  # Uri of fonts host, e.g. https://fonts.googleapis.com (Default).
  host: 

  # Font options:
  # `external: true` will load this font family from `host` above.
  # `family: Times New Roman`. Without any quotes.
  # `size: x.x`. Use `em` as unit. Default: 1 (16px)

  # Global font settings used for all elements inside <body>.
  global:
    external: true
    family: Noto Serif SC
    size:

  # Font settings for site title (.site-title).
  title:
    external: true
    family: Noto Serif SC
    size:

  # Font settings for headlines (<h1> to <h6>).
  headings:
    external: true
    family: Noto Serif SC
    size:

  # Font settings for posts (.post-body).
  posts:
    external: true
    family:  Noto Serif SC

  # Font settings for <code> and code blocks.
  codes:
    external: true
    family: Source Code Pro


代码可复制，还是上面同一个文件，找到以下代码段，将copy_button的enable设置为true，启用就可以啦。show_result设置true后，复制完会显示一个勾。style对应的copy_button不同的样式，看个人喜好来～

1
2
3
4
5
6
7
8
9
10
11
12
codeblock:
  # Code Highlight theme
  # Available values: normal | night | night eighties | night blue | night bright | solarized | solarized dark | galactic
  # See: https://github.com/chriskempson/tomorrow-theme
  highlight_theme: night eighties
  # Add copy button on codeblock
  copy_button:
    enable: true
    # Show text copy result.
    show_result: true
    # Available values: default | flat | mac
    style: mac