2023-01-27

[kongmingLatern]

2023-01-27

1. 你学习了哪些知识？

2. 学习过程中是否有存在的问题？

关于如何写每日任务：

如何写每日任务

[kongmingLatern]

今日学习总结

1. 包管理工具

1.1 package.json

1.1.1 dependencies 属性

• dependencies 属性是指定无论开发环境(development)还是生产环境(production)都需要依赖的包；
• 通常是我们项目实际开发用到的一些库模块 vue、vuex、vue-router、react、react-dom、axios等
• 与之对应的是 devDependencies

1.1.2 devDependencies 属性

• 一些包在生产环境是不需要的，比如 webpack、babel 等
• 这时我们会通过 npm install webpack --save-dev，将它安装到 devDenpendencies 属性中

  1.1.3 peerDependencies 属性

• 比如一些项目依赖关系是对等依赖，也就是你依赖的一个包，它必须是以另外的一个宿主包为前提的
• 比如 element-plus 是依赖于 vue3 的，ant-design 是依赖于 react、react-dom

1.1.4 version

semver 版本规范 X.Y.Z

• X主版本号( major )：当你做了不兼容的 API 修改（可能不兼容之前的版本）
• Y主版本号( minor )：当你做了向下兼容的功能性新增（新功能增加，但是兼容之前的版本）
• Z修订号( patch )：当你做了向下兼容的问题修正（没有新功能，修复了之前版本的 bug）

1.1.5 ^ 与 ~ 的区别

• x.y.z：表示一个明确的版本号；
• ^x.y.z：表示 x 是保持不变的，y 和 z 永远安装最新的版本；
• ~x.y.z：表示 x 和 y 保持不变的，z 永远安装最新的版本；

2. npm install 原理

2.1 原理图

![[Pasted image 20230127123857.png]]

3. ES Module 的解析流程

3.1 阶段一：构建

根据地址查找 js 文件，并且下载，将其解析成模块记录（Module Record）

![[Pasted image 20230127125003.png]]

3.2 阶段二：实例化

对模块记录进行实例化，并且分配内存空间，解析模块的导入和导出语句，把模块指向对应的内存地址

3.3 阶段三：运行

运行diamante，计算值，并且将值填充到内存地址中

阶段二和三示意图 ![[Pasted image 20230127125019.png]]

4. apply

Function.prototype.execFn(thisArg, otherArgs, fn) {
    // 1. 获取 thisArg，并且确保是一个对象类型
    thisArg = (thisArg === null || thisArg === undefined) 
    ? window
    : Object

    // thisArg.fn = this
    Object.defineProperty(thisArg, "fn", {
        enumerable: false,
        configurable: true,
        value: fn
    })
    thisArg.fn(...otherArgs)
    delete thisArg.fn
}
Function.prototype.myapply = function(thisArg, otherArgs) {
    this.execFn(thisArg, otherArgs)
}