Web前端最全为什么说pnpm是最先进的包管理工具？_幽灵依赖与依赖分身(2)，前端面试前端基础

ES6

• 列举常用的ES6特性：

• 箭头函数需要注意哪些地方？

• let、const、var

• 拓展：var方式定义的变量有什么样的bug？

• Set数据结构

• 拓展：数组去重的方法

• 箭头函数this的指向。

• 手写ES6 class继承。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

微信小程序

• 简单描述一下微信小程序的相关文件类型?

• 你是怎么封装微信小程序的数据请求？

• 有哪些参数传值的方法？

• 你使用过哪些方法，来提高微信小程序的应用速度？

• 小程序和原生App哪个好？

• 简述微信小程序原理？

• 分析微信小程序的优劣势

• 怎么解决小程序的异步请求问题？

-node_module/b

> 
> 此时我们的package.json中只有a，却可以引用b
> 
> 
> 


#### 依赖分身 Doppelgangers



> 
> 由于管理方式存在的弊端，刚刚我们简述了一下什么是幽灵依赖。  
>  依赖分身问题可以说是对于幽灵依赖的继续延申，在我们把下层的依赖提到根目录的时候，其实理想化了一个因素：就是下层依赖在项目中是唯一存在的。
> 
> 
> 


举个例子，当出现重复时：

-node_module/a
-node_module/a/node_module/b@1.0.0
-node_module/c
-node_module/c/node_module/b@2.0.0

这时，依赖a和c分别依赖b的不同版本。  
 不论此刻提升@1.0.0的版本到根目录层级还是提升@2.0.0的版本到根目录层级，都会出现一个问题，将出现一个重复的依赖拷贝，这个依赖拷贝就叫作：依赖分身。


#### 2.pnpm可以解决吗？



> 
> 官方文档：https://pnpm.io/zh
> 
> 
> 


##### 创建非扁平化的node\_module文件夹


![在这里插入图片描述](https://img-blog.csdnimg.cn/4063ea87c3e04f2e82d518fceafdda31.png)


在pnpm创建非扁平化的结构过程中，这里出现了两种箭头指示：


* Hard Link
* Symbolic Link


##### 什么是Hard Link？


字面意思：硬链接



> 
> hard link 使得用户可以通过不同的路径引用方式去找到某个文件
> 
> 
> 可以看官方文档中的图片，链接指向的都是`.pnpm store`
> 
> 
> pnpm在这里存放了所有依赖的Hard Links，每个依赖可以理解为只存在一份，且在store中。
> 
> 
> 


##### 什么是Symbolic Link？


字面意思：符号链接



> 
> 可以看作为我们常规操作的快捷方式，当其他依赖需要相同依赖的时候，采用符号链接而不需重新下载。
> 
> 
> 


#### 3.功能比较


pnpm不仅解决了以上常规包管理工具的痛点


我们可以看一下下图是三者的功能比较：  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/0b5254105aca49a8a459c46450398cfd.png)





**web浏览器中的javascript**

*   客户端javascript
*   在html里嵌入javascript
*   javascript程序的执行
*   兼容性和互用性
*   可访问性
*   安全性
*   客户端框架
*   **[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.youkuaiyun.com/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**

![](https://img-blog.csdnimg.cn/img_convert/ed2c4f9602fb053965a21c047d1291e6.png)  

**window对象**

*   计时器

*   浏览器定位和导航

*   浏览历史

*   浏览器和屏幕信息

*   对话框

*   错误处理

*   作为window对象属性的文档元素

![](https://img-blog.csdnimg.cn/img_convert/81adbbfdefca6b401d7dc4e6acd9207d.png)