手写题系列第二篇：字符串反转、数组扁平化、数组去重，以及一道结合缓存的工具类设计题。整理时顺手修正了原笔记里的两处笔误（递归函数名写错、漏写 return）。

字符串反转

三种写法，从 API 组合到递归：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

// Array.reverse()
function reverseString(str) {
  return str.split('').reverse().join('');
}

// for 循环倒序拼接
function reverseString(str) {
  let reversedStr = '';
  for (let i = str.length - 1; i >= 0; i--) {
    reversedStr += str[i];
  }
  return reversedStr;
}

// 递归：每次取第一个字符放到末尾
function reverseString(str) {
  if (str === '') {
    return '';
  } else {
    return reverseString(str.substr(1)) + str.charAt(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
26
27
28
29
30
31
32
33
34

// 1. 原生 flat
arr.flat(Infinity);

// 2. 扩展运算符：只要还有嵌套就拍一层
function flatten1(arr) {
  while (arr.some((item) => Array.isArray(item))) {
    arr = [].concat(...arr);
  }
  return arr;
}

// 3. reduce 递归
function flatten2(arr) {
  return arr.reduce((prev, cur) => {
    if (Array.isArray(cur)) {
      return prev.concat(flatten2(cur));
    } else {
      return prev.concat(cur);
    }
  }, []);
}

// 4. 基础递归
function flatten3(arr) {
  let res = [];
  for (let i = 0; i < arr.length; i++) {
    if (Array.isArray(arr[i])) {
      res = res.concat(flatten3(arr[i]));
    } else {
      res.push(arr[i]);
    }
  }
  return res;
}

数组去重

四种方式，追问点通常是各自的适用场景（NaN、对象引用、性能）：

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

// Set：最简洁，NaN 也能正确去重
const newArr = [...new Set(arr)];

// for + indexOf： indexOf 找到的是第一个位置，等于当前 index 说明首次出现
function unique(arr) {
  const newArr = [];
  for (let i = 0; i < arr.length; i++) {
    if (arr.indexOf(arr[i]) === i) {
      newArr.push(arr[i]);
    }
  }
  return newArr;
}

// for + includes：结果顺序稳定
function unique(arr) {
  const newArr = [];
  for (let i = 0; i < arr.length; i++) {
    if (!newArr.includes(arr[i])) {
      newArr.push(arr[i]);
    }
  }
  return newArr;
}

// filter 写法
function unique(arr) {
  return arr.filter((item, index) => arr.indexOf(item) === index);
}

注意 indexOf 内部用严格相等（===），所以 NaN 永远查不到自身（[NaN].indexOf(NaN) === -1），只有 Set 方案能对 NaN 去重。

设计题：按 id 批量取数，优先走缓存

写一个通用工具类，通过 id 集合获取数据集合；先查缓存，未命中再调服务查询并写入缓存，最后返回数据集合。

考察点：缓存数据结构选型（Map）、批量流程编排、边界处理：

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

const api = {
  getDataById: (id) => {
    return 'dataFromService';
  },
};

class DataFetch {
  constructor() {
    this.cache = new Map();
  }

  getDataList(idList) {
    const dataList = [];
    idList.forEach((id) => {
      if (this.cache.has(id)) {
        dataList.push(this.cache.get(id));
      } else {
        const data = api.getDataById(id);
        if (data) {
          this.cache.set(id, data);
          dataList.push(data);
        }
      }
    });
    return dataList; // 原笔记漏了这行 return
  }
}

可以延伸的方向：把同步的 api.getDataById 换成异步接口（Promise.all 并行请求未命中的 id）、加缓存容量上限（LRU）。

两篇整理完，原始代码归档在 code-question-bank。

把早期积攒在手写题仓库里的题目整理成系列发出来，这一篇覆盖函数工具与设计模式：防抖节流、深拷贝、发布订阅、观察者模式。每道题保留当时的实现思路，适合面试前快速过一遍。

防抖与节流

两者都是为了减少函数的调用频率：

• 防抖（debounce）：短时间内多次触发同一事件，只执行最后一次——把频繁触发的函数延迟处理
• 节流（throttle）：一定时间窗口内只触发一次

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

function debounce(fn, delay) {
  let timer = null;

  return function (...args) {
    if (timer) {
      clearTimeout(timer);
    }

    timer = setTimeout(() => {
      fn.apply(this, args);
    }, delay);
  };
}

function throttle(fn, delay) {
  let timer = null;

  return function (...args) {
    if (timer) {
      return;
    }

    timer = setTimeout(() => {
      fn.apply(this, args);
      timer = null;
    }, delay);
  };
}

典型应用：防抖用于搜索框输入、窗口 resize；节流用于滚动监听、按钮防连点。

深拷贝

难点在循环引用和特殊对象（Date、RegExp、不可枚举属性）。用 WeakMap 记录已拷贝对象解决循环引用，用 Object.getOwnPropertyDescriptors 保留属性描述符：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

const isComplexDataType = (obj) =>
  (typeof obj === 'object' || typeof obj === 'function') && obj !== null;

const deepClone = function (obj, hash = new WeakMap()) {
  if (obj.constructor === Date) return new Date(obj);
  if (obj.constructor === RegExp) return new RegExp(obj);
  if (hash.has(obj)) return hash.get(obj); // 循环引用直接返回缓存
  let allDesc = Object.getOwnPropertyDescriptors(obj);
  let cloneObj = Object.create(Object.getPrototypeOf(obj), allDesc); // 继承原型链
  hash.set(obj, cloneObj);
  for (let key of Reflect.ownKeys(obj)) {
    cloneObj[key] =
      isComplexDataType(obj[key]) && typeof obj[key] !== 'function'
        ? deepClone(obj[key], hash)
        : obj[key];
  }
  return cloneObj;
};

验证时可以构造一个含循环引用的对象：obj.loop = obj，拷贝后修改 cloneObj.arr 不会影响原对象即通过。

发布订阅模式

与观察者的区别：发布订阅有一个事件中心（调度中心）解耦发布者和订阅者，双方互不感知；观察者模式中主题直接持有观察者引用。

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

const pubsub = {
  subscribers: {},

  subscribe: function (eventName, callback) {
    if (!this.subscribers[eventName]) {
      this.subscribers[eventName] = [];
    }
    this.subscribers[eventName].push(callback);
  },

  unsubscribe: function (eventName, callback) {
    if (this.subscribers[eventName]) {
      const index = this.subscribers[eventName].indexOf(callback);
      if (index !== -1) {
        this.subscribers[eventName].splice(index, 1);
      }
    }
  },

  publish: function (eventName, data) {
    if (this.subscribers[eventName]) {
      this.subscribers[eventName].forEach((callback) => {
        callback(data);
      });
    }
  },
};

前端里的典型落地：EventBus、Vue 早期的事件总线、消息通知中心。

观察者模式

主题（Subject）维护观察者列表，状态变化时统一通知：

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

class Subject {
  constructor() {
    this.observers = [];
  }

  addObserver(observer) {
    this.observers.push(observer);
  }

  removeObserver(observer) {
    const index = this.observers.indexOf(observer);
    if (index > -1) {
      this.observers.splice(index, 1);
    }
  }

  notifyAll() {
    this.observers.forEach((observer) => {
      observer.update();
    });
  }
}

class Observer {
  update() {
    console.log('Observer updated');
  }
}

系列下一篇整理数组与字符串类手写题。

机器人基本知识

定义

国际标准化组织1987年对工业机器人的定义：

工业机器人是一种具有自动控制操作和移动功能的，能够完成各种作业的可编程操作机器。

国家标准GB/T 12643-2013将工业机器人定义为：

自动控制的、可重复编程、多用途的操作机，可对三个或三个以上轴进行编程。可以是固定式或移动式、在工业自动化中使用。

系统组成

主要参数

如何进行人机交互

相关概念

机器人奇点

机器人零点

机器人几种坐标系的介绍与标定

机器人坐标系

法兰坐标系

工具坐标系

用户坐标系

机器人编程

运动编程：

代表指令：

关节运动

直线运动

圆弧运动

圆周运动

逻辑编程

赋值语句

贝塞尔曲线

职责

Code review 不应该承担发现代码错误的职责。Code Review主要是审核代码的质量，如可读性，可维护性，以及程序的逻辑和对需求和设计的实现。

如何审查代码

1.关注代码风格规范： 包括但不限于：命名规范、代码缩进、注释和文档等等
2.关注代码调用是否破坏了当前代码架构
3.代码逻辑中的异常处理、资源处理、线程、安全
4.关注业务实现逻辑
5.是否有优化空间： 重复代码、过长函数等等

Code Review时该关注的

1.体系结构和代码设计

• 代码复用: 根据“三振法”, 如果代码被复制一次，虽然不喜欢这种方式，但通常没什么问题。但如果再一次被复制，就应该通过提取公共的部分来重构它。
• 用更好的代码: 如果在一块混乱的代码做修改，添加几行代码也许更容易，但建议更进一步，用比原来更好的代码。
• 潜在的bugs: 是否会引起的其他错误？循环是否以我们期望的方式终止？
• 错误处理: 错误确定被优雅的修改？会导致其他错误？如果这样，修改是否有用？
• 效率: 如果代码中包含算法，这种算法是否是高效？ 例如，在字典中使用迭代，遍历一个期望的值，这是一种低效的方式。
• 新代码与全局的架构是否保持一致？
• 基础代码是否有结合使用了一些标准或设计样式，新的代码是否遵循当前的规范？代码是否正确迁移，或参照了因不规范而淘汰的旧代码？
• 代码的位置是否正确？比如涉及订单的新代码是否在订单服务相关的位置？
• 新代码是否重用了现存的代码？新代码是否可以被现有代码重用？新代码是否有重复代码？如果是的话，是否应该重构成一个更可被重用的模式，还是当前还可以接受？
• 新代码是否被过度设计了？是否引入现在还不需要的重用设计？

2、可读性和可维护性

• 字段、变量、参数、方法、类的命名是否真实反映它们所代表的事物, 是否能够望文生义?
• 是否可以通过读代码理解它做了什么？
• 是否理解测试用例测了什么？
• 测试是否很好地覆盖了用例的各种情况？它们是否覆盖了正常和异常用例？是否有忽略的情况？
• 错误信息是否可被理解？ log打的是否正确和足够?
• 不清晰的代码是否被文档、注释或容易理解的测试用例所覆盖？具体可以根据团队自身的喜好决定使用哪种方式。

3.功能

• 代码是否真的达到了预期的目标？如果有自动化测试来确保代码的正确性，测试的代码是否真的可以验证代码达到了协定的需求？
• 代码看上去是否包含不明显的bug，比如使用错误的变量进行检查，或误把and写成or？
• 作者是否需要创建公共文档或修改现存的帮助文档？
• 是否检查了面向用户的信息的正确性？
• 是否有会在生产环境中导致应用停止运行的明显错误？代码是否会错误地指向测试数据库，是否存在应在真实服务中移除的硬编码的stub代码？
• 你对性能的需求是什么，你是否考虑了安全问题？
• 这个新增或修复的功能是否会反向影响到现存的性能测试结果
• 外部调用很昂贵(a. 数据库调用. b. 不必要的远程调用. c. 移动或穿戴设备过频繁地调用后端程序)

4.其他方面

• 是否合理地释放了资源
• 是否存在内存泄漏?
• 是否存在内存无限增长? 例如, 如果审查者看到不断有变量被追加到list或map中, 那么就要考虑下这个list或map什么时候失效, 或清除无用数据
• 代码是否及时关闭了连接或数据流?
• 资源池配置是否是否正确? 有没有过大或者过小?
• 异常情况是否能够正确处理?
• 超时是否能够正确处理?
• 调用接口出错的时候, 是否有出错处理逻辑, 并且处理正确?
• 进程意外重启后, 是否能够恢复到崩溃前的环境?

如何提高 Code Review 的效率

1.合并信息规范：[序号]. [类型]: [内容] [禅道号]
2.每次只 review 少量代码，即发起的 MR 代码量要少，也就是说要小步提交
问题：怎么设计分支管理与开发阶段的合并请求?

参考

https://blog.csdn.net/zhang_yin_liang/article/details/113876208

关键词：工作流程、规范、文档、自动化、工具、效率、生产力、规范硬编码、强制执行

介绍

前端工作流设计是什么

前端工作流设计是指设计和优化前端开发的流程和工具，旨在提高团队的效率和质量，使得开发过程更加规范化和可靠化。

常见的工作流设计有哪些：

• 代码管理：使用版本控制工具（如Git）来管理代码，使得代码可以被跟踪和回溯，并且多人协作开发时能够更加顺畅。
• 构建工具：使用构建工具（如Webpack、Rollup等）来打包和压缩代码，使得前端项目可以在生产环境中更快地加载，同时还能够处理一些依赖关系、模块化、ES6转义等问题。
• 自动化测试：使用自动化测试工具（如Jest、Mocha等）来测试代码，确保代码的质量和稳定性，并且可以提前发现和修复潜在的问题。
• 部署工 具：使用部署工具（如Jenkins、Travis CI等）来自动化部署代码到服务器或云平台，避免手动操作带来的错误和不可靠性。
• 文档管理：使用文档管理工具（如JSDoc、Swagger等）来自动生成API文档和代码注释，使得代码更加易于理解和维护。

如何使前端开发流程更加规范

通过对前端工作流的设计和优化，可以使得前端开发人员能够更加专注于业务逻辑的开发和优化，同时也能够提高开发效率和代码质量，从而提高整个项目的价值和竞争力。

基础规范的制定

要保证代码的可读性，可从以下几个方面进行约束。

• 规范代码组织结构：代码组织决定了应用架构，我们应该按照与架构相似的方式来编写代码。
• 代码检查与统一代码风格： 可使用 prettier 代码风格工具结合 Lint 工具来统一代码风格。
• 组件、函数命名规范:
  常见命名方式有：驼峰式命名、下划线命名法；
  css可遵照bem命名法；
• 开发工具规范
  统一编辑器配置；
  统一lint插件等；
  统一格式化工具；

创建 README 搭建指南

包含的内容应该有：
1.支持运行的环境
2.必要的依赖准备，如何搭建
3.项目的安装指南
4.线上的示例
5.相关的文档链接
6.相关人员的联系方式，讨论群

其他文档

1.绘制架构图：架构图一般展示的是各个子系统之前如何通信，如果是简单系统，可以是项目的技术栈组成。
2.可编辑文档库-提升协作性
3.轻量级架构决策记录
4.可视化文档
5.看板工具-统一管理业务知识：可追溯历史需求与变更

提交信息：每次代码提交文档化

项目方式：结合项目特点定制提交信息规范，使得提交有意义，能真正作为变更记录的重要参考；建议小步提交，可防止修改维护困难
开源项目方式：开源库需要有对应的 CHANGELOG.md 文件，可通过git提交记录自动化生成CHANGELOG文件。

通过流程化提高代码质量

1.设置提交拦截/远程提交拦截：结合pre-commit 钩子 和 lint-staged 实现
2.代码review 团队review/pull Request

测试策略

• 引入单元测试：
  工作中常见的测试范围为：
  1.通用、公用的Utils函数
  2.复杂交互操作逻辑
  对于隐藏在模板中的逻辑，单元测试很难覆盖，因此在编写业务逻辑的时候，尽可能把代码写在js或ts中；
  可以在项目中采用驱动测试开发，以测试来驱动业务逻辑。

设计自己的工作流

实验项目：inktank-core
目标：

1. 代码要符合项目规范
2. CR 后的代码都是能准确执行的
   目标1： 通过Code Review
   目标2：需要测试功能

illustrate v.举例；(用例子,图解等)说明；举例证明；加上插图[图解]

美: [ˈɪləˌstreɪt] 英: [ˈɪləstreɪt]

palette n. 调色板；（画家使用的）主要色彩

美: [ˈpælət]
英: [‘pælət]
网络 调色盘；画板；面板
eg.Command Palette

iteration n. 迭代；（计算机）新版软件

美: [ˌɪtəˈreɪʃ(ə)n]
英: [.ɪtə’reɪʃ(ə)n]
网络 反复；叠代；反覆

为什么要进行国际化

国际化（i18n）是指将应用程序设计为可以轻松地适应不同语言、地区和文化的能力，更好的在海外推广国内产品。

国际化功能要点

1.多语言支持：包括界面和文档翻译、本地化应用等
2.多语言环境切换：切换后，读取相应的语言包内容

如何实现国际化（步骤）

1.将所有需要翻译的字符串放在单独的消息文件中。如 json 格式文件，每个文件对应一个语言。
2.使用国际化框架或库如vue-i18n，这些框架可帮助管理不同语言的消息文件。
3.根据用户的语言环境动态加载适当的消息文件。

结合自身项目特点实现国际化

我们的产品为多项目架构，主项目基于 vscode 源码实现，包含 vscode 扩展项目、webview 界面，包含三种情况：

vscode 原生项目国际化

安装时可选环境

• 设置默认语言环境
  初始安装时：默认语言环境为本机语言环境、若没有相应的语言包，默认为 en

• 扩展中文包消息字段
  语言包目录：extensions\ms-ceintl.vscode-language-pack-zh-hans-1.55.1\translations\main.i18n.json

  1 2 3

  "vs/workbench/browser/parts/headerbar/modelLibraryView": { "loadModel": "载入模型" }

• 本地化应用

1
2
3
4
5
6
7
8
9
10
11
12

import * as nls from 'vs/nls';

const test1: IAction = {
  id: '1',
  label: nls.localize('loadModel', 'load model'), // 本地化
  run: async () => {
    console.log('载入模型 run');
    this.loadModelToScene(item);
    rename;
  },
  dispose() {},
};

• 语言环境切换方法
  可以通过使用Configure Display Language命令显式设置 VS Code 显示语言来覆盖默认 UI 语言，按Ctrl+Shift+P调出命令面板 > 键入“display” > 显示Configure Display Language命令

底层实现：

1
2
3
4
5
6
7
8
9
10
11
12
13
14

// src\vs\workbench\contrib\localizations\browser\localizationsActions.ts
if (selectedLanguage) {
await this.jsonEditingService.write(this.environmentService.argvResource, [{ path: ['locale'], value: selectedLanguage.label }], true); // 写入运行时配置文件中 路径：C:\Users\userName\.modouide-oss
const restart = await this.dialogService.confirm({
type: 'info',
message: localize('relaunchDisplayLanguageMessage', "A restart is required for the change in display language to take effect."),
detail: localize('relaunchDisplayLanguageDetail', "Press the restart button to restart {0} and change the display language.", this.productService.nameLong),
primaryButton: localize('restart', "&&Restart")
});

if (restart.confirmed) {
this.hostService.restart();
}
}

基于vscode的子项目国际化

语言切换需要重启项目才可生效
browerview项目可通过界面查询字符获取locale值
扩展项目可通过通信访问配置文件中的locale值

vue 项目国际化

1.使用 vue-i18n 插件实现
2.切换语言环境:可以使用 $i18n.locale 属性来切换语言

问题

后端返回的数据仅中文，如何兼容？

前瞻技术

此处临时存放一些工作中没怎么用到，但比较感兴趣的前端概念，供我扫除知识盲点

• service workers 离线缓存
• 微前端架构
• 低代码平台
• SSR
• 微服务
• 计算机图形学
• 计算机运动学
• webGL
• 线性代数
• 算法
• 数据结构
• 可视化大屏适配

使用mockjs模拟请求数据

Mock.js 是一个前端数据模拟库，它可以拦截前端代码中的 XMLHttpRequest 请求，并返回模拟的数据；在前端开发中，使用 Mock 数据可以帮助我们模拟后端接口数据，提高开发效率，同时也可以减少对后端接口的依赖。

示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

// 引入 Mock.js
import Mock from 'mockjs'

// 使用 Mock.js 模拟数据
Mock.mock('/api/users', 'get', {
  code: 200,
  message: '请求成功',
  'data|10-20': [{
    'id|+1': 1,
    name: '@cname',
    age: '@integer(20, 50)',
    'gender|1': ['男', '女'],
    address: '@county(true)',
    avatar: '@image("100x100")'
  }]
})

使用 webpack-dev-server 的 proxy 功能将ajax请求转发到后端服务中

Mock.js 和 devServer 代理的作用方式不同，所以它们的拦截顺序也不同。在默认情况下，Mock.js 会比 devServer 代理先执行，即 Mock.js 可以拦截前端请求并返回模拟数据，而不会将请求转发到后端服务器。如果想让 devServer 代理先执行，可以通过配置 before 选项将其放到 Mock.js 之前执行。

• 流程图
  
• 实现

  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

  // main.js process.env.VUE_APP_MOCK === 'true' && require('@/mock/index') // .env.mock # just a flag ENV = 'mock' # base api VUE_APP_MOCK = true VUE_APP_BASE_API = '/api' VUE_APP_PROXY_API='http://your.service.com' // vue.config.js devServer: { proxy: { '/api': { target: process.env.VUE_APP_PROXY_API, pathRewrite: { '^/api': '' } } } }

封装axios请求

axios是一个基于promise的http请求库，可以用于浏览器和node环境。

为什仫要对axios进行二次封装

1.封装通用功能：二次封装可以封装通用的功能，比如请求头添加token、统一处理错误信息等，这样可以减少重复的代码，提高开发效率。
2.方便维护：通过二次封装可以将请求和处理逻辑分离，使得代码结构更加清晰，方便维护。
3.接口升级：在接口升级的情况下，如果没有二次封装，那么所有调用该接口的地方都需要进行修改，如果使用了二次封装，那么只需要修改封装的代码即可。
4.更好的可扩展性：通过二次封装，我们可以根据业务需求进行定制化的处理，比如统一添加loading效果、处理特殊的请求参数等。
5.更好的适应性：二次封装可以根据不同的业务场景进行定制，比如不同的请求方式、不同的请求地址等，使得代码更加灵活、适应性更强。

如何实现axios二次封装

我们可以创建一个request.ts文件，在该文件中实现axios的二次封装。

• 1.封装 Axios 的基本配置：这包括设置请求的默认 URL、HTTP 方法、请求头、响应数据格式等等。

1
2
3
4
5
6
7
8
9
10
11

import axios from 'axios';

const instance = axios.create({
  baseURL: 'http://your-api-base-url.com',
  timeout: 1000,
  headers: {
    'Content-Type': 'application/json'
  }
});

export default instance; // 导出axios实例

• 2.处理请求参数和响应数据：对于一些通用的数据处理操作，比如请求参数的转换或响应数据的处理，避免在每个请求中都写相同的代码。

  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

  // 我们可以使用 instance.interceptors.request.use() 方法来添加请求拦截器 instance.interceptors.request.use( config => { // 处理请求参数 config.params = { ...config.params, api_key: 'xxxxxxxxxxxxxx', }; return config; }, error => { // 处理请求错误 throw error; }); // 类似地，我们也可以使用 instance.interceptors.response.use() 方法来添加响应拦截器 instance.interceptors.response.use( response => { // 处理响应数据 return response.data; }, error => { // 处理响应错误 throw error; } );

• 3.处理请求错误：在请求过程中可能会发生错误，比如请求超时或网络错误。针对这些错误，需要进行适当的处理，比如进行重试或提示用户错误信息,可通过拦截器第二个参数配置，可参照第二个例子。

• 4.统一处理请求返回数据格式：如果项目要求返回数据格式一致，可以在封装中统一处理，而不是在每个请求中处理。

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

  // 假设与后端约定返回的字段为 // { // "code": 200, // "message": "", // "data": {} // } // 我们可以在响应拦截中判断响应数据的 code 字段是否为 200，如果是，就返回 data 字段，否则就抛出一个异常 instance.interceptors.response.use( response => { const { data } = response; if (data.code === 200) { return data.data; } else { // 处理异常情况 throw new Error(data.message || '未知错误'); } }, error => { // 处理请求错误 throw error; } );

• 5.处理接口鉴权：如果项目需要接口鉴权，可以在二次封装中进行处理，统一添加鉴权信息。

  1 2 3 4 5 6 7 8 9 10 11 12

  instance.interceptors.request.use( config => { const token = localStorage.getItem('token'); // 获取存储在本地的 token if (token) { config.headers.Authorization = `Bearer ${token}`; // 在请求头中添加鉴权信息 } return config; }, error => { return Promise.reject(error); } );

• 6.处理请求取消：在一些场景下，用户可能需要取消正在进行的请求，比如在搜索框中输入关键字时，用户很可能会多次发送请求，此时需要取消前一次的请求，只保留最后一次请求的结果。

1
2
3
4
5
6
7
8
9
10
11
12
13

import axios from 'axios';

const { CancelToken } = axios;
const source = CancelToken.source();

const request = axios.create({
baseURL: process.env.VUE_APP_BASE_API,
timeout: 5000,
cancelToken: source.token //将source.token属性作为cancelToken参数传递给axios
});

source.cancel('请求已被取消！'); // 取消请求

• 7.处理并发请求：在一些场景下，需要同时发送多个请求并等待所有请求都完成后再进行下一步操作，可以使用 Axios 提供的并发请求功能来处理，以便更好地控制网络流量。

  1 2 3 4 5

  const instance = axios.create({ baseURL: 'https://api.example.com', timeout: 5000, maxContention: 3, // 限制并发请求数量 });

封装api方法

• 创建一个api.js文件，并在其中封装api方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

import request from './request.js';

export const getUserList = (params) => {
  return request.get('/api/users', {
    params,
  });
};

export const getUserInfo = (id) => {
  return request.get(`/api/users/${id}`);
};

export const addUser = (data) => {
  return request.post('/api/users', data);
};

export const updateUser = (id, data) => {
  return request.put(`/api/users/${id}`, data);
};

export const deleteUser = (id) => {
  return request.delete(`/api/users/${id}`);
};

• 使用api方法

  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 41

  import { getUserList, addUser, updateUser, deleteUser } from './api'; getUserList({ page: 1, size: 10, }) .then(data => { console.log(data); }) .catch(error => { console.error(error); }); addUser({ name: 'Tom', age: 18, }) .then(data => { console.log(data); }) .catch(error => { console.error(error); }); updateUser(1, { name: 'Jerry', age: 20, }) .then(data => { console.log(data); }) .catch(error => { console.error(error); }); deleteUser(1) .then(data => { console.log(data); }) .catch(error => { console.error(error); });

《如何阅读一本书》在我的书架上放了有两年多的时间，一直想要好好的阅读，之前几次翻开都由于没有集中精力的原因，最后不了了之。现在我又翻开了它…

部分摘抄

• 阅读是个复杂的的活动，要达到良好的阅读效果，就要更主动的阅读，在阅读的每一种活动中参与更多的阅读技巧。
• 阅读的艺术包括了所有非辅助型自我发现学习的技巧，敏锐的观察，灵敏可靠的记忆，想象的空间，再者，当然就是训练有素的分析，省思能力。
• 我们的成人教育要完全依赖书籍本身的时候，我们就不能再有老师的帮助了，如果我们打算继续学习与发现我们就要懂得如何让书本来教导我们。

阅读的四个层次

阅读的四个层次分别是基础阅读、检视阅读、分析阅读、主题阅读。

基础阅读

基础阅读的四个阶段

• 第一阶段：阅读准备阶段（七岁之前）：身体、智力、语言、个人都要发育到一定程度;
• 第二阶段：学习读一些简单的读物：着重练习发音，理解文字含义，可通过看图识字学习；
• 第三阶段：快速建立词汇,根据上下文含义可联想不熟悉字眼；
• 第四阶段：精炼与增进前三个阶段,消化阅读经验，能够举一反三；

检视阅读

第一个子层次：由系统的略读或粗读

目的：有限的时间内快速的了解书的基本信息（是怎样的书，重点是什么），确定是否有阅读价值。
如何略读或粗读一本书？

• 1.看书名，看序言。注意副标题与主旨，为书归类。
• 2.看目录，了解书店基本结构。
• 3.看索引，评估书涵盖的议题范围，关注重点词汇与重点词汇相关的内文。
• 4.看书衣，读介绍，读宣传文案。
• 5.挑选与主题相关的篇章阅读，优先读摘要部分。
• 6.来回翻一翻全书，读一两段或连续读几页，随时寻找主要论点，留意主题脉动。

第二个子层次粗浅的阅读

对一些难读的书通读一遍，遇到难懂的地方也不要停下，只关注能理解的地方。

关于阅读速度

理想的阅读速度不只要能读得快，还要能用不同的速度来阅读。

提升阅读速度的建议

用手指着讲要阅读的文字，顺着一行一行的字移动，速度比眼睛感觉的还要快点，强迫眼睛跟着首部的动作移动。

如何做一个自我要求的读者？

• 主动阅读的基础：一个阅读者要提出四个基本问题–1.这本书讲的什么？2.作者细说了什么，怎么说的？？3.你觉得作者的观点对吗？部分对还是全部对？4.这本书跟我有什么关系？
• 主动阅读的核心就是在阅读时提出问题来，在阅读的过程中，自己去回答问题

阅读的好习惯

在阅读时，手中有一支笔会更好的记录问题和回答问题，也是提醒我们记录问题的讯号。

• 做笔记的方法：
  1.画底线
  2.画底线处的栏外再加画一道线，做重点描述
  3.在空白处做星号或其他符号
  4.在空白处编号
  5.在空白处记下其他的页码
  6.将关键字或句子圈出来
  7.在树叶的空白处做笔记

• 做笔记的三种方式：
  1.结构笔记-检视阅读
  2.概念笔记-分析阅读
  3.概念/辩证笔记-主题阅读

• 要养成习惯，除了不断地运作练习之外别无他法。

  • 照着规则联系，就可以培养出一种技巧或技能的习惯。
  • 由许多规则中养成一个习惯
  • 对每一个步骤或规则都熟练后，才能将所有不同的步骤连结起来，变成一个复杂却和谐的动作，然后养成习惯

ajax与fetch请求的区别

关于前端样式主题化

基于websocket的消息通信

参考elementPlus源码实现自己的svg图标库

参考elementPlus源码实现全局组件方法

如何把js项目迁移为typescript项目

使用prettier、eslint、husky、lintstage定制开发规范

关于前端样式主题化

关于静态文档网站那些事儿

关于如何提升打包效率

electron 嵌入项目嵌入web界面的几种方式

桌面应用的几种数据存储方式

登录功能的实现

关于码垛流程仿真

码垛有哪些流程

一般码垛流程
1.物料准备：码垛前需要准备好要码垛的物料，通常是已经包装好的成品或半成品，要保证物料的尺寸和重量符合要求。
2.码垛规划：根据物料的尺寸、重量和码垛的要求，制定码垛方案，包括堆垛层数、堆垛方式等。
3.堆垛机械运作：使用自动化的堆垛机械将物料按照码垛方案堆垛起来。常用的堆垛机械包括自动堆垛机、机械手等。
4.码垛质检：在码垛完成后，需要对堆垛的物料进行质检，确保码垛的质量符合要求。
5.包装：对已经完成码垛的物料进行包装，保护物料，以便运输和储存。
6.输送：将已经完成包装的物料输送到指定的地点，例如仓库或运输车辆。
码垛流程仿真
我们这里只对码垛流程中的前三个阶段进行仿真应用，且使用的自动化堆垛机械为机械手，主要功能包括：工件的输送、工件的搬运、垛型设置、机器人路径及逻辑指令设置。以下为仿真过程。
1.仿真项目默认存在一个空白3D场景
2.向3D场景中添加码垛应用使用到的机械设备，机械设备包含机器人、传送带、工件、托盘、传感器、夹爪/吸盘
3设置工件运输流程：通过设置传送带运动速度、运动方向、绑定工件、上料点位置、上料频率等属性参数，获取3D运动参数，在传送带末端设置传感器，当工件运动至与传送带末端时会与传感器物体碰撞，此时传送带停止运输工件，等待机器人搬运。
4.设置托盘垛型：载入托盘后，可自主设置托盘垛层，设置垛层绑定的工件，依次在托盘上码放绑定工件，也可自定义码放的工件顺序与层数
5：工件搬运流程：3D场景载入机器人并为机器人设置合适位置，设置机器人的运动路径即夹爪的起始位置、抓取工件位置、工件码放位置等，若传送带停止运输工件，则触发机器人按照规定路径运动，若工件被机器人抓走后，传送带可重新启动运输下一个工件

threejs 在码垛场景中的应用

1.初始化场景: 创建基本的3D场景，场景中包含基本的光照、相机等元素，绑定控制器并使用webgl渲染器渲染到指定dom上
2.对于添加到场景中的物体，采用的是threejs 提供的模型加载器，也可结合threejs提供的创建几何体的方式添加
3.3D物体的运动效果可以结合threejs中的矩阵变换函数和3D缓动库tweenjs来实现（平移、旋转、缩放等效果），对于更复杂的运动需要结合相关运动学算法来实现
4.关于模型的压缩，可以使用draco算法以及LOD（levels of detail 多细节层次）技术或者酌情减少模型顶点进行优化

关于工业3D仿真

其实接触工业3D仿真业务已经有近一年的时间了，因为不是3D业务主要负责人，平时的业务侧重点并不在3D那一块，但它确实是我们的核心业务，加上我对web 3D很有渊源，来上海后的第一份工作也是对web 3D的研发，我想我很有必要对这个领域的知识进行梳理和分析。

背景：为什么而来，解决什么问题

工业仿真是一个比较宽泛的概念，有数据3D模型搭建、过程仿真等环节。在我们的业务场景中3D仿真指的是工业流程仿真。仿真技术的加持能有效提高企业开发效率，加强数据采集、分析、处理能力，减少决策失误并降低企业风险。我们公司主要的产品是工业机器人，提供产线系统集成服务。在系统集成作业中存在大量的人工作业，完全依赖人工调节，产品线遇到问题维护成本很高，且相关技术人员紧缺、培养成本高；基于此，公司想要做出一套能够模拟产线上机器人系统集成的可视化交互工具，甚至可结合机器人编程实现拓展为一个跨平台工业仿真+工业机器人离线编程系统平台，可为作为整个工业机器人行业的一套解决方案。

目标：要做成什么样的东西

我们要做一套集工业业务仿真与离线编程与一体的集成开发平台

实现思路：

开源的代码编辑器-vscode + threejs + vue

技术生态：

1.魔改vscode实现自己的登录功能、模型库、tab切换、头部工具栏
2.实现vscode业务功能扩展项目：3D仿真，rpl语言解析
3.实现基于vscode的内嵌界面：账户与资源管理项目、3D编辑器项目
4.实现3D组件库、树状菜单组件库
5.实现组件库文档项目搭建与自动化部署

技术栈：

1.vue3
2.threejs
3.electron
4.nodejs
5.typescript
6.elementPlus
7.webpack、vite、rollup
8.prettier、eslint
9.vitepress、vuepress
10.jest、vue-test

今天是清明节，对我这打工族来说也就是居家休息的一天，距离上一篇工作日志已经过去了一个周末和两个工作日，虽然偷懒没有记录工作上的内容，但也没有完全偷懒到没有任何作为，周末两天是舒缓的两天，我观看了公司内部发布的两篇关于《回归价值本质-我们在做一个怎样的产品》与《企业战略规划洞察》的课程，这让一直埋头实现技术工作的我对公司与行业发展多了一些思考。两个工作日也没有投入特别好的状态，因为邻近项目发版，做的一些代码检查与功能联调的工作，不过对于项目中涉及的web CSP（content safe protocol）内容安全协议很感兴趣，做了一些了解。

关于《回归价值的本质-我们在做一个怎样的产品》

确切的说这是关于介绍产品特性、如何度量我们的产品价值、如何促进产品交易以及如何提升产品价值的宏观讨论。下面是课程主要讲述的内容：

（1）什么情况下会促进商品交易？

    商品价格高于卖方的成本价格，低于买方的预期的价格

（2）我们的商品是什么？特性是什么？

    我们的商品是机器人，本质是一种生产工具，所产生的价值是显性可度量的。根据这样的特点引申出我们的所面对的挑战-比拼硬实力。

（3）我们产品的终端用户是？

    以盈利为目的的制造型企业，关心的点在于引入机器人生产工具所带来的经济回报。

（4）促进交易的简单公式

如果产品的投资回报年限小于企业预期的投资回报年限，即商品价格小于买方的预期价格，则我们的终端用户是很乐意购买我们的产品的。

商品投资回报年限 = （系统集成一次性投入+机器人产品购置价格）/ 价值增量

机器人产品价值增量 = 机器人产品直接创造的价值 - 机器人使用带来的额外成本-机器人购置带来的成本

（5）关于国内高端制造装备企业如何与国外同行竞争市场？

提升产品力：产品力提高至可与国外同等产品竞争，中国市场会选择国产品牌，销量增加后成本会有一定降低，价格也会下降从而产生交易的良性循环。

为了提升生产力，企业可内部聚焦局部优势，外部借助融资以及政府支持。

总结：这篇课程简单说明了只有聚焦做好一个产品，才能为企业以及国内市场带来价值，这也是我们企业的最终目标。作为一个小小的技术人员，也许目前没有那样的技术力，但依然期望在未来的个人发展中能出这样的一份力。以上关于《回归价值的本质-我们在做一个怎样的产品》课程的学习记录也只是简单的对行业和机器人产品的一个基础了解，还没有涉及到更深入的思考，希望通过这段文字能带给我更多关于行业的思考。

关于《企业战略规划洞察》

这一课程分享的是在企业战略规划时用到的BLM模型–（Business leadership model，业务领先模型）中的市场洞察。BLM模型并不是课程要分享的重点，只需要知道它是一个给企业制定战略规划的思考框架，是以市场为导向，从市场结果中分析业绩差距和机会差距，进而指导企业的战略设计和执行。该课程重点在于市场洞察，分别从宏观/趋势洞察、市场/行业洞察、客户洞察、竞争/对手洞察、洞察自身等方面进行了分析。

（1）宏观趋势

    我们的机器人行业属于中国制造业重要的产业，是政策性非常强的行业，制造业是立国之本，机器人是通用核心装备。在2021年下半年国家陆续出台多个与机器人行业直接或间接相关的产业规划。其中’十四五机器人产业发展规划‘明确指出到2025年我国要成为全球机器人技术创新策源地、高端制造集聚地、集成应用新高地，并提出对国产机器人高品质发展的定位：’两标准，一评测‘，与此同时根据对中国机器人装机总量预测，在未来的几年，中国市场对机器人的需求量将成倍数上升。

根据中国机器人市场整体销售规模变化曲线来看，从2012年27200台销售量到2022年280000台的增长曲线看到未来对机器人需求的涨势。

根据对机器人装备成本与人力成本关系图可知，人力成本在逐步上升，机器人装备成本在逐步下降，当人力成本大于机器人装备成本时，机器人市场将进一步打开，根据目前估算机器人的市场拐点将会提前。

所以从市场与政策上来讲，机器人行业有很好的前景。

（2）市场行业

行业目前处于起步期：存量市场有限，但持续扩展、缺乏系统性的行业标准、机器人行业巨头为国外企业，国内企业过于弱小、行业人才基础薄弱，但资本和人才逐步进入、国家政策扶持

根据行业的现状，可以说发展较为困难，但机遇并存，其中可以切入的点是扩展机器人增量市场、扎住行业标准作为壁垒和控制点、发挥中国市场的特点吃透中国市场、抓住政策红利，抢得先机。

（3）客户

客户可以分为存量市场客户与增量市场客户。

存量市场客户如：汽车、汽车零部件、3C、半导体等。

增量市场客户如：光伏、锂电、钢结构、轨道交通，集装箱、物流、家具家居、五金陶瓷建材等。

客户的基本诉求即为对机器人的可靠性和性能，对于部分增量市场还具有功能诉求，国产品牌想要提升竞争力可以从价格和服务来实现国产替换策略。

（4）竞争

了解第一类全谱系行业四巨头（ABB、发那科、安川、库卡）的技术积累与业务范围。

了解其他应用类或技术类行业代表企业。

我们要做什么样类型的机器人公司？

以平台化机器人公司进行架构，强调平台和技术点的复用性，形成战略纵深；

补强核心能力（产品和技术点）时按特定战略行业和应用进行牵引有序拓展，在一定时间段形成在某些核心能力上的聚焦。

（5）自己

进行SWOT分析。

S（strengths）：更贴近中国这个终端市场、相对进口品牌，历史包袱少，具有后发优势、相对大多数国产品牌，有一定技术积累

W（weaknesses）：相对进口品牌技术团队弱小、起步晚、积累少、成本控制能力弱、缺乏清晰的产品战略以及产品型组织保证

O（opportunities）：增量市场显现、政策支持、互联网和人工智能技术兴起、有一定知名度

T（threats）：竞争大、行业噪音对国产机器人品牌有伤害

SO（用优势去抓住机会）：利用政策、成本、服务去抓住增量市场，利用新技术形成功能差异化，利用规模效应降低成本、夯实产品力、提升品牌影响力

WO（通过机会消除弱点）：利用政策聚焦细分市场，通过高速增长的增量市场拉动销量并带动核心技术平台和部件的孵化

ST（用优势抵抗威胁）：聚焦产品优势、强调专业性、快速形成客户关系、技术、标准壁垒，利用影响力形成行业标杆、与低端国产品牌拉开差距。

WT（最小化弱点和风险）：利用市场化薪资与激励政策保留核心人才，明确产品和技术路标，坚定产品型思维和产品力的底线思维，评出低价低劣带来的低毛利低投入的恶性循环。

总结：以上的信息纯属于行业科普，并没有过多的行业思考，对于一个底层的开发人员来说，了解这些行业信息与动向貌似对我们的日常开发没有太大关系，实则不尽然也，这是对我们要做一个什么样的产品的基本了解，这也是为我们在开发的过程中能有一定的产品思维的，而不是成为一个麻木的开发工具人。

今天的记录先到这里吧，休息一下，更好的迎接明天。

今天依然处理了一整天的vitepress项目构建问题。

从昨天负责编写公共库的同事反馈文档项目无法构建起，我已经排查并解决了一系列的问题，其中主要是：

（1）构建所依赖的外部包版本问题；

（2）vitepress 服务端渲染（SSR）兼容问题

（3）多工作区项目之间的引用问题

对于问题（1）构建所依赖的外部包版本问题

最终的解决方案是比对了ElementPlus文档项目（我们的文档项目，是基于elementPlus文档项目的实现）中使用的包版本，跟其保持一致。问题出在我们的文档项目所使用的vite依赖包高于elementPlus

对于问题（2）

原因是文档项目所引入的内部人员开发的公共依赖库存在对SSR不友好操作，比如在文档导入时即操作了dom，在不好修改所依赖的对SSR不友好三方库的情况下，vitepress官方提供了一些ssr兼容方案，其中一些方案需要升级vitepress版本，由于改动较大，临时使用动态导入三依赖包的方案。

对于问题（3）

虽然目前我们的文档项目和另外的几个公共库项目放在同一级目录下，但并未采用多工作区的源码管理策略(吐槽：模块引用混乱，构建繁琐，建议架构人员学习下element的源码管理，好好设计下源码结构)；

文档项目所参与的文档及Demo编写人员起初是通过设置相对路径别名引用了公共组件库源文件，这种引用方案导致构建文档时会连带组件库源文件的构建，难以实现自动化部署，所以需要全部替换为引入外部依赖包的方式；

（3.1）由于vitepress在构建期间使用vue的服务端渲染功能在node.js中预渲染应用程序，我们的web公共组件库至少需要构建为es、cjs两种格式的包文件，此处又了解了组件库构建配置、包文件路径映射等内容

到此，三个问题解决完毕后，我的文档项目已成功构建并配合运维人员实现了自动化部署工作。

后续问题

在顺手配置了公共组件库以构建出SSR兼容的包文件后，出现了两个问题：

（1）负责编写公共组件库的同事反馈在文档启动开发服务运行项目后，动态导入的内容为undefined，

（2）在业务项目中使用公共组件库的同事反馈构建的包抛出很多错误

对于问题（1）

我启动文档本地服务后，确实发现了此问题，我联想到是包文件映射的问题，因为动态导入时es语法，只有基于es语法的包文件才能正确导入，若导入的是其他包文件，大概率会产生这个错误，检查公共组件库的package.json文件后，exports.import映射的路径非es module包文件，修正后，打包，手动copy到docs项目中的node_modules目录下后，重新运行项目，发现错误仍然存在，在又尝试了一次后我陷入了迷惑；后来我再构建好的文件中埋点，运行测试发现并未执行我的新增代码，我终于了解到是包缓存问题，我又了解到了vite的依赖预构建机制，在手动删除vite缓存后，再次执行，结果是成功导入了正确的es包文件，问题解决了。

对于问题（2）

我运行了业务项目，看到了抛出的问题，经过分析很快就发现是依赖包版本不一致导致的问题。原因如下：

我们的公共组件库引用的three包的版本是0.125.1，而业务项目中也引入了three包，版本是0.150，当业务项目中用yarn去安装依赖的时候，由于依赖包版本不一致，公共组件库和业务项目在各自目录下装了不同版本的three依赖包，引发了兼容问题，导致了一些ts类型报错。

目前的解决方案是：在公共组件库中的package.json文件中删除three依赖项，这样在业务项目中引入公共组件库时只会安装一份three，就暂时不会产生兼容问题。

我终于明白为什么我运行公共组件库时项目明明引入了three，package.json中却没有相关依赖项。我对此种方案无法接受（但是由于我不是主要负责人，而且很晚了，暂时没有过多去查找其他解决方案），因为我想到在其他情况下会产生的问题，比如：

1.如果我们有了新的业务项目，当前业务项目无需引入three包，但需要引入当前的公共组件库，由于没有在package.json中生命依赖包，到导致三方公共库报错。

2.如果我们的新业务项目中引用了three包，但是比公共组件库高或低很多个版本，那势必会与组件库中的three依赖产生兼容性问题。

今天的问题虽然处理完了，但是也留下了一些疑问，此时夜已经很深了，就留给明天去探索吧！

今天的工作很零碎，也没有技术上太值得讨论的问题，今天的任务主要是检查在即将发布的项目迭代中我负责的功能模块的代码，把遗留的一点小问题处理掉并合并代码。

上午处理了的问题是：

（1）业务项目中，依赖的公共组件包存在类型问题

（2）昨天配合运维同事实现的自动构建失败问题

对于问题（1）

原因是负责开发公共组件的同事没有为对外抛出的方法提供正确的参数类型，导致我的项目编译报错，至于之前为什么没错误，那是因为没有在vue 项目中启用ts（同事写法，提醒后才加--||），回到参数类型报错的问题，我确定在早几天已经与公共组件开发同事约定过函数的传参及返回值，无类型检查时运行完全没有问题，经协作同事检查后回复逻辑代码中确实使用了之前约定的参数，由于同事没时间处理我的问题，先在我的业务代码中显示修改为any类型（项目紧急，问题多多，显得代码规范都不算什么问题了 --||），我设想了内部用的ts编写的代码的话，不应该逻辑与类型不一致的情况，如果出现这样的问题，那应该是js实现的代码，然后手写了一份与js匹配的声明文件，拉了同事分支阅读源码后，确实如此，考虑到职责及还有其他工作要做的问题，最终并未帮同事解决这个小问题，而是暂时用any保证项目的正常运行。

思考了下由于公共组件库项目，由于历史原因，部分源码基于js实现，为了兼容ts，为这些js添加了类型声明文件，一旦改变代码逻辑，就要手动维护声明文件，还是有些维护成本的。至于为什么不能替换为ts文件，我猜测也是因为同事们对typescript的了解不够深入吧，或者对开发过程中的问题有不一样的容忍度吧。篇幅所限，有机会再好好去体会typescript的强大之处吧。

对于问题（2）

这个问题的原因实在是因为主观上对自己的行为有点自信，理由很简单，我认为我发布了包，但实际上未发布，所以获取的包是有问题的。但在一开始遇到这个问题时，我首先排除了发布包的问题，分别排除了vite缓存的问题，以及安装包时使用的npm镜像地址问题，才意识的是自己的盲目自信。

下午处理了一些样式问题后，发起了提交请求，但注意到之前在vscode源码的渲染进程中请求了dev环境的接口，当时发现vscode配置了CSP(内容安全协议)，不允许请求http协议接口，当时简单的开放了此安全配置，此操作降低了安全等级，不是合适的处理方案，了解csp相关知识后，经人提醒，可以在csp配置参数中指定我们的域名，例如connect-src: http://example.com.cn，这样对安全等级上影响不大，目前我认为此方案更合适。

一周过得好快啊，已经周五了，打算过个轻松充实的周末，也不能忘记要努力提升自己的技术力！

语法高亮指南

语法高亮决定了在Visual Studio 代码编辑器中显示的源代码的颜色和风格。 它负责为 if 或 for 着色以区别于字符串、注释和变量名等其他JavaScript关键字。

语法高亮由两部分组成：

• 令牌化: 将文本分解为令牌列表
• 主题化: 使用主题或用户设置将令牌映射到特定颜色和样式

在深入了解细节之前， 一个良好的开端是使用 范围检查器 工具来探索源文件中存在什么样的令牌以及它们匹配的主题规则。 要看到语义和语法令牌，请在TypeScript 文件上使用一个内置的主题 (例如，Dark+)。

令牌化

文本的令牌化就是将文本分解为段，并用标记类型对每个段进行分类。

VS Code的令牌华引擎由TextMate 语法驱动。 TextMate 语法是一个结构化的正则表达式集，作为插件(XML) 或JSON文件写成的。 VS Code扩展可通过 语法 贡献点贡献语法。

TextMate令牌化引擎与渲染器运行在相同的进程中，令牌随着用户类型的变化而更新。 令牌用于语法高亮，但也用于将源代码划分为注释、字符串、正则表达式区域。

从版本1.43开始，VS 代码也允许扩展通过 语义令牌提供商 提供令牌化。 语义提供者通常由语言服务器实现，这些语言服务器对源文件有更深的了解，并且可以在项目中解析符号。 例如，一个常量变量名可以在整个项目中使用常量高亮来呈现，而不仅仅是在其声明的地方。

基于语义令牌的高亮被视为基于 TextMate 的语法高亮的补充。 语义高亮显示在语法高亮上。 由于语言服务器可能需要一段时间来加载和分析一个项目，语义标记高亮显示可能会在短时间延迟后出现。

这篇文章着重于基于 TextMate 的令牌化。 语义令牌化和主题化在 语义高亮指南 中进行了解释。

TextMate 语法

VS Code使用 TextMate 语法 作为语法令牌化引擎。 TextMate 编辑器创造以来， 由于大量的语言包被被开源社区创建和维护，许多其他的编辑器和IDE都采用了这些准则。

TextMate 语法依靠 Oniguruma 正则表达式 并且通常都是作为插件或 JSON 编写的。 您可以在这里找到 TextMate 语法 很好的简介， 并且你可以看看现有的 TextMate 语法来更多地了解它们是如何工作的。

TextMate 令牌和范围

令牌是一个或多个字符，是同一个程序元素的一部分。 示例令牌包括操作符，如 + 和*, 变量名如 myVar, 或字符串如 "my string"。

每个令牌都与定义令牌上下文的范围相关联。 作用域是一个点分隔的标识符列表，用于指定当前标记的上下文。 例如，JavaScript中的 + 操作符作用域为 keyword.operator.arithmetic.js。

主题将作用域映射到颜色和样式以提供语法高亮。 TextMate为许多主题目标提供了常用作用域列表 。 为了使您的语法得到尽可能广泛的支持，请尝试在现有范围基础上进一步发展，而不是确定新的范围。

作用域嵌套，以便每个令牌也与父作用域列表相关联。 下面的示例使用范围检查器在一个简单的JavaScript函数中显示 +操作符的范围层次结构。 最具体的范围列在顶部，较一般的父范围列于下面：

父范围信息也用于主题化。 当主题以一个作用域为目标时，所有带有该父作用域的令牌都将被着色，除非主题还为它们各自的作用域提供更具体的着色。

贡献基本语法

VS Code支持 json TextMate 语法。 这些都是通过 语法 贡献点 贡献的。

每个语法贡献具体指：语法所适用语言的标识符。 语法标记的顶级范围名称和语法文件的相对路径。 下面的例子展示了一个虚构的abc语言的语法贡献

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

{
  "contributes": {
    "languages": [
      {
        "id": "abc",
        "extensions": [".abc"]
      }
    ],
    "grammars": [
      {
        "language": "abc",
        "scopeName": "source.abc",
        "path": "./syntaxes/abc.tmGrammar.json"
      }
    ]
  }
}

语法文件本身由顶层规则组成。 这通常分为列出程序顶层元素的 patterns 部分和定义每个元素的 repository。 语法中的其他规则可以通过 repository 使用 { "include": "#id" }来引用元素。

示例 abc 语法标记字母 a, b, 和 c 作为关键词和括号内嵌套表达式。

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

{
  "scopeName": "source.abc",
  "patterns": [{ "include": "#expression" }],
  "repository": {
    "expression": {
      "patterns": [{ "include": "#letter" }, { "include": "#paren-expression" }]
    },
    "letter": {
      "match": "a|b|c",
      "name": "keyword.letter"
    },
    "paren-expression": {
      "begin": "\\(",
      "end": "\\)",
      "beginCaptures": {
        "0": { "name": "punctuation.paren.open" }
      },
      "endCaptures": {
        "0": { "name": "punctuation.paren.close" }
      },
      "name": "expression.group",
      "patterns": [{ "include": "#expression" }]
    }
  }
}

语法引擎将尝试对文档中的所有文本依次应用 表达式规则。 对于一个简单的程序，例如：

1
2
3
4
5
6
7
8
9
10
11
12
13

a
(
    b
)
x
(
    (
        c
        xyz
    )
)
(
a

示例语法生成以下作用域(从左到右从最特定的作用域到最不特定的作用域列出)

1
2
3
4
5
6
7
8
9
10
11
12
13

a               keyword.letter, source.abc
(               punctuation.paren.open, expression.group, source.abc
    b           keyword.letter, expression.group, source.abc
)               punctuation.paren.close, expression.group, source.abc
x               source.abc
(               punctuation.paren.open, expression.group, source.abc
    (           punctuation.paren.open, expression.group, expression.group, source.abc
        c       keyword.letter, expression.group, expression.group, source.abc
        xyz     expression.group, expression.group, source.abc
    )           punctuation.paren.close, expression.group, expression.group, source.abc
)               punctuation.paren.close, expression.group, source.abc
(               punctuation.paren.open, expression.group, source.abc
a               keyword.letter, expression.group, source.abc

注意，当前作用域中包含了不被任何规则匹配的文本，例如字符串xyz。 文件末尾的最后一个括号是expression.group的一部分，即使结束规则不匹配，因为在结束规则之前找到了文档结束。

嵌入式语言（Embedded languages）

如果您的语法在父语言中包含嵌入式语言，例如HTML中的CSS样式块，你可以使用embeddedLanguages贡献点告诉VS Code将嵌入式语言与父语言区别对待。 这确保括号匹配、注释和其他基本语言特性在嵌入式语言中按预期工作。

embeddedLanguages贡献点将嵌入式语言中的作用域映射到顶级语言作用域。 在下面的例子中，meta.embedded.block.javascript作用域中的任何令牌都将被视为JavaScript内容：

1
2
3
4
5
6
7
8
9
10
11
12
13

{
  "contributes": {
    "grammars": [
      {
        "path": "./syntaxes/abc.tmLanguage.json",
        "scopeName": "source.abc",
        "embeddedLanguages": {
          "meta.embedded.block.javascript": "javascript"
        }
      }
    ]
  }
}

现在，如果你试图评论代码或触发代码片段在标记为 meta.embeded.block.javascript的令牌集合中, 他们将得到正确的 // JavaScript 风格的评论和正确的 JavaScript 代码片段。

开发新的语法扩展

快速创建一个新的语法扩展， 使用 VS Code’s Yeoman templates 来运行 yo code 并选择 New Language 选项：

Yeoman将通过一些基本问题带你去搭建新的扩展。 创建新语法的重要问题是：

• Language id - 您的语言的唯一标识符。
• Language name - 为您的语言提供一个人类可读的名称。
• Scope names - 语法的根TextMate作用域名称.

生成器假设您想要为该语言定义一种新语言和一种新语法。 如果您正在为现有语言创建语法，只需用目标语言的信息填充这些语法，并确保删除生成的package.json中的languages贡献点。

在回答所有问题后，Yeoman将创建一个结构性的新扩展：

记住，如果你要为VS Code已经知道的语言贡献语法，一定要删除生成的package.json中的languages贡献点。

转换现有的 TextMate 语法

yo code 也可以帮助将现有的 TextMate 语法转换为 VS 代码扩展。 同样，首先运行yo code并选择语言扩展。 当被问到一个现有的语法文件时，给它一个.tmLanguage或.json TextMate语法文件的完整路径：

使用 YAML 书写语法

随着语法变得越来越复杂，将其作为json来理解和维护可能会变得困难。 如果您发现自己正在编写复杂的正则表达式，或者需要添加注释来解释语法的各个方面，那么可以考虑使用yaml来定义语法。

Yaml语法具有与基于json的语法完全相同的结构，但允许您使用Yaml更简洁的语法，以及多行字符串和注释等特性。

VS Code只能加载json语法，所以基于yaml的语法必须转换成json。 js-yaml包和命令行工具使这变得很容易。

1
2
3
4
5

# 将js-yaml安装为扩展中的开发依赖项
$ npm install js-yaml --save-dev

# 使用命令行工具将yaml语法转换为json
$ npx js-yaml syntaxes/abc.tmLanguage.yaml > syntaxes/abc.tmLanguage.json

注入语法（Injection grammars）

注入语法允许您扩展现有的语法。 注入语法是一种常规的TextMate语法，它被注入到现有语法中的特定范围中。 注入语法的实例应用：

• 在评论中突出TODO等关键字。
• 在现有语法中添加更具体的范围信息。
• 为Markdown围栏代码块添加新语言的高亮显示。

创建一个基本的注入语法

就像常规语法一样，注入语法通过 package.json 所提供。 然而，注入语法不指定语言，而是使用injectTo来指定要将语法注入到其中的目标语言作用域列表。

对于本例，我们将创建一个简单的注入语法，将TODO突出显示为JavaScript注释中的关键字。 为了在JavaScript文件中应用我们的注入语法，我们在injectTo中使用source.js目标语言作用域：

1
2
3
4
5
6
7
8
9
10
11

{
  "contributes": {
    "grammars": [
      {
        "path": "./syntaxes/injection.json",
        "scopeName": "todo-comment.injection",
        "injectTo": ["source.js"]
      }
    ]
  }
}

除了最顶层的injectionSelector条目外，语法本身是标准的TextMate语法。 injectionSelector是一个范围选择器，它指定应该在哪个范围中应用注入的语法。 在我们的例子中，我们想要在所有的//注释凸显单词TODO。 使用scope inspector，我们发现JavaScript的双斜杠注释具有comment.line.double-slash范围，所以我们的注入选择器是L:comment.line.double-slash：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

{
  "scopeName": "todo-comment.injection",
  "injectionSelector": "L:comment.line.double-slash",
  "patterns": [
    {
      "include": "#todo-keyword"
    }
  ],
  "repository": {
    "todo-keyword": {
      "match": "TODO",
      "name": "keyword.todo"
    }
  }
}

注入选择器中的 L： 意味着注入被添加到现有语法规则的左边。 这基本上意味着我们注入的语法规则将在任何现有语法规则之前应用。

嵌入式语言（Embedded languages）

注入语法也可以为父级语法提供嵌入语言。 就像普通语法一样，注入语法可以使用embeddedLanguages将范围从嵌入式语言映射到顶级语言范围。

例如，在JavaScript字符串中突出显示SQL查询的扩展可以使用embeddedLanguages来确保标记为meta.embedded.inline.sql的字符串中的所有令牌都被视为SQL，以实现基本的语言功能，如括号匹配和代码片段选择。

1
2
3
4
5
6
7
8
9
10
11
12
13
14

{
  "contributes": {
    "grammars": [
      {
        "path": "./syntaxes/injection.json",
        "scopeName": "sql-string.injection",
        "injectTo": ["source.js"],
        "embeddedLanguages": {
          "meta.embedded.inline.sql": "sql"
        }
      }
    ]
  }
}

令牌类型和嵌入语言

对于注入语言嵌入式语言还有一个额外的复杂性: 默认情况下，VS Code将字符串中的所有标记视为字符串内容，将带有注释的所有标记视为标记内容。 由于括号匹配和自动关闭对等功能在字符串和注释中被禁用，如果嵌入式语言出现在字符串或注释中，这些嵌入式语言中的功能也将被禁用。

要覆盖此行为，可以使用meta.embedded.*范围重置VS Code标记为字符串或注释内容。 将嵌入式语言封装在meta.embedded.*范围中是个好主意，以确保VS Code正确的处理嵌入式语言。

如果您不能添加 meta.embeded. 范围到您的语法中， 您也可以在语法的贡献点中使用 tokenTypes 将特定范围映射到内容模式。 下面的 tokenTypes 部分确保了 my.sql.template.string 范围中的任何内容被当作源代码处理：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

{
  "contributes": {
    "grammars": [
      {
        "path": "./syntaxes/injection.json",
        "scopeName": "sql-string.injection",
        "injectTo": ["source.js"],
        "embeddedLanguages": {
          "my.sql.template.string": "sql"
        },
        "tokenTypes": {
          "my.sql.template.string": "other"
        }
      }
    ]
  }
}

主题

主题化是为令牌分配颜色和样式 主题规则在颜色主题中指定，但用户可以在用户设置中自定义主题规则。

TextMate 主题规则在 tokenColors 中定义，并且与普通的 TextMate 主题具有相同的语法。 每个规则都定义一个 TextMate 范围选择器和由此产生的颜色和风格。

在评估令牌的颜色和样式时，将根据规则的选择器匹配当前令牌的作用域，为每个样式属性(前景色、粗体、斜体、下划线) 找到最具体的规则。

颜色主题指南 描述了如何创建一个颜色主题。 语义令牌的主题在 语义高亮指南 中作了解释。

范围检查器（Scope inspector）

VS Code的内置范围检查工具有助于调试语法和语义标记。 它在文件中当前位置显示令牌和语义语义令牌的范围，以及关于应用于该令牌的主题规则的元数据。

在命令面板使用Developer: Inspect Editor Tokens and Scopes或create a keybinding命令可触发范围检查器：

1
2
3
4

{
  "key": "cmd+alt+shift+i",
  "command": "editor.action.inspectTMScopes"
}

范围检查器显示以下信息：

1. 当前令牌。
2. 关于令牌的元数据和关于其计算外观的信息。 如果您使用的是嵌入式语言，那么这里的重要条目是language和token type。
3. 当语义令牌提供程序可用于当前语言且当前主题支持语义高亮显示时，将显示语义令牌部分。 它显示了当前的语义标记令牌和修饰符，以及与语义令牌类型和修饰符匹配的主题规则。
4. TextMate部分显示了当前TextMate令牌的作用域列表，最具体的作用域位于顶部。 它还显示与范围相匹配的最具体主题规则。 这只显示负责令牌当前样式的主题规则，不显示被覆盖的规则。 如果存在语义令牌，则仅当主题规则与匹配语义令牌的规则不同时才显示主题规则。

git 合并方法介绍

方法一：git merge

把两个父节点及其提交记录包含起来生成一个新的节点

方法二：git rebase

复制被rebase的提交记录到当前分支

记录一次rebase操作

我要进行合并啦，记录下问题

步骤一：合并之前分支更新到最新

dev分支 add-account-view分支

步骤二：login rebase dev

遇到冲突

步骤三：解决冲突后，git add，然后 rebase –continue

若依然存在冲突，则重复步骤三，冲突解决完毕后，结果如下：

错误提示 当前add-account-view的状态为，需要拉取39个提交，以及推送67个提交， 按理来说我们正确的合并了dev分支，并解决了相应冲突。 那么问题为什么会出现呢？以及怎么解决这个问题呢？

若根据git状态拉取，则需继续解决冲突，此时冲突跟之前遇到的一样

继续解决重复冲突，完毕后如下

回到dev分支，继续rebase

依然存在同样冲突： 继续解决冲突，完毕，依然需要pull，重新解决冲突，此时问题跟在add-account-view分支上问题一模一样。

通过在网上查找资料，参考别人操作： 得知，正确步骤为：

步骤四 直接执行 git push –force

步骤五 成功rebase

原理分析

个人理解

1. rebase之后，相对远程分支而言，本地基底发生了变化，引发了需要pull一下的提示
2. 如果确保没问题是可以强制 push的

举例

相当于变基之后本地提交是： C1，C2’，C3’,C4,C5;（C2‘ C3’为目标合并分支的提交记录） 远程提交时： C1，C4，C5

分析

本地提交的前三个提交跟远程的前三个提交不一致，就会提示拉取代码，此时拉取代码会把C4，C5再拉取一下 如果拉取就相当于跟我新合并的代码又冲突，还得解决一次，而且git pull默认是merge合并 git pull之后，就相当于又merge合并了一次： 把提交记录变成了： C1，C4，C5，C2’,C3’ ,C4,C5,可能后边还有其他的合并提交 同名的后一个只是副本这种，还会造成其他的合并提交 先强推下account分支，然后dev再rebase account分支，不然如果同时有其他同事也在提交，那就会被覆盖掉。