2021年12月日志

一、12/1

• npm、yarn、pnpm

• npm和yarn的区别：

  1. yarn比npm运行速度快，虽然两者都采用了缓存，但是yarn需互联网连接就能安装本地缓存的依赖项，它提供了离线模式
  2. yarn比npm确定性更高，因为npm除了做了基本的SHA1哈希之外不执行任何完整性检查，这给安装系统程序带来了安全风险，每个yarn安装都会生成一个类似于npm-shrinkwrap.json的yarn.lock文件，而且它是默认创建的。除了常规信息之外，yarn.lock文件还包含要安装的内容的校验和，以确保使用的库的版本相同，虽然npm中提供了shrinkwrap命令,即使存在npm-shrinkwrap.json这个文件，npm也只会锁定库的版本，而不是库的内容。即便npm现在也能阻止用户多次重复发布库的同一版本
  3. yarn workspace工作区也是和npm的主要区别之一

• only-arrow，统一包管理器

二、12/2

• vue修改状态后不刷新的几种情况
• 关于useDeepCompareEffect的封装，利用lodash/isEqual进行深比较

三、12/3

• vite和webpack的区别
  1. 由于现代浏览器本身就支持ES Module，会自动向依赖的Module发出请求。vite充分利用这一点，将开发环境下的模块文件，就作为浏览器要执行的文件，而不是像webpack那样进行打包合并
  2. 由于vite在启动的时候不需要打包，也就意味着不需要分析模块的依赖、不需要编译，因此启动速度非常快。当浏览器请求某个模块时，再根据需要对模块内容进行编译。这种按需动态编译的方式，极大的缩减了编译时间，项目越复杂、模块越多，vite的优势越明显。
  3. 在HMR（热更新）方面，当改动了一个模块后，仅需让浏览器重新请求该模块即可，不像webpack那样需要把该模块的相关依赖模块全部编译一次，效率更高
  4. 由于vite利用的是ES Module，因此在代码中（除了vite.config.js里面，这里是node的执行环境）不可以使用CommonJS

三、12/4

• vue3 sugar
• mst修改state，可通过actions直接修改，但是在进行ui交互时不能直接修改，因为是不可变数据，需要深度clone
• PureComponent、useEffect……浅比较，例如在处理数组时，如果使用push操作，这不会造成更新，以为并没有返回新引用，那么换言之则说明浅比较对于比较同一个数组是无能为力的，避免使用值可能会突变的属性或状态应该用concat重写成，我们必须保证浅比较时数组的指针是不相同的

五、12/6

• webpack打包优化，例如只打包对应引用的图片，通过test判断加载路径

  {
    test: /\.(png|jpe?g|gif|webp)(\?.*)?$/,
    oneOf: [
      {
        test: /node_modules(\/|\\)@zoom(\/|\\)zoom-ui(\/|\\).*(\/|\\)country-select(\/|\\).*\.(png|jpe?g|gif|webp)(\?.*)?$/i,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 1,
              fallback: {
                loader: 'file-loader',
                options: {
                  name: 'img/[name].[hash:8].[ext]'
                }
              }
            }
          }
        ]
      }
    ],
    use: [
      {
        loader: 'url-loader',
        options: {
          limit: 4096,
          fallback: {
            loader: 'file-loader',
            options: {
              name: 'img/[name].[hash:8].[ext]'
            }
          }
        }
      }
    ]
  }

  • 模块化、组件化（高类聚、低耦合）
  • 在原生js中也可以实现组件化（Web Components(https://developer.mozilla.org/zh-CN/docs/Web/Web_Components)）
  • 类数组和数组的区别（isArray、instanceof、constructor 、Object.prototype.toString.call）
  • json-server

六、12/7

• 复习web框架express，mvc概念
• nodejs数据库项目的搭建、工厂模式

七、12/8

• 中间件 洋葱模型:因为很多时候我们在一个app里面有好多中间件，有些中间件需要依赖其他中间件的结果，那么如果没有洋葱模型就可能会出错

八、12/9

• VO AO作用域

九、12/13

• React 中 State 和 Props 的理解

• super和super(props)的区别

• React 中的事件：React 中的事件叫合成事件:React 底层使用事件委托的方式对真实 DOM 事件进行了封装,使合成事件具有更好的浏览器兼容性和性能

  十、12/15

• sentry

十一、12/16

• 通过css选择器实现朋友圈照片响应式布局

• 好用的mock工具

• promise的场景的错误

  1. then的回调地狱
  2. promise中使用try...catch因为promise自带catch方法
  3. 在 Promise 块内使用异步函数，当捕获副作用时会有点影响
  4. 当一个Promise被创建时，回调被立即执行,可以使用函数包裹）

• vuex5和pinia一模一样，store采用了模块化，打包时只会打包对应用到的store

• .d.ts声明文件的重要性，有时候打包时会报错显示此文件没有声明，在项目更目录添加d.ts文件，一定要在tsconfig.json中include

  "include": ["typings.d.ts", "src"]

• file-loader 返回的是文件的路径

• url-loader 返回的是文件的base64编码，内部对file-loader做过封装，通过limit来划分大小，文件大小小于limit参数，url-loader将会把文件转为DataURL，大于limit，url-loader会调用file-loader进行处理，参数也会直接传给file-loader。

十二、12/20

• sourceMap

• babel

• :global在组件内部修改全局样式

十三、12/22

• 项目中使用json-server
• 通过在package.json中添加配置信息，来发布组件（最好提供脚手架）

十四、12/23

• CDN combo 把多个资源文件合并引用，减少请求次数
• Bundleless模式可以充分利用浏览器自主加载的特性，跳过打包的过程，使得我们能在项目启动时获取到极快的启动速度，在本地更新时只需要重新编译单个文件。

十五、12/24

• CSS Modules和scope css的区别

• useEffect中return里面回调函数的执行时机，当useEffect有第二个参数的时候，update或者卸载的时候最先执行return里面的函数，如果第二个参数是空数组，则卸载的时候执行

• records和tuples提案

十六、12/27

• BI和低代码的概念
• 组件的正交设计

十七、12/28

• npm6.9以上支持新功能package alias对包重命名
• @vue/shared工具的封装方法

十八、12/29

• Array新提案拓展新方法（at()，groupBy()，groupByToMap（），findLast（），为ArrayBuffer增加transfer）