读者福利
========
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
由于篇幅过长，就不展示所有面试题了，想要完整面试题目的朋友（另有小编自己整理的2024大厂高频面试题及答案附赠）
此时，JS模块的一个重要特性展现出来：低耦合
即每个JS模块都只完成特定功能，而不是完成所有功能，我们在设计JS模块时，尽量往粒度小的方向设计，便于后期复用和整改。
但是此时又出现了新问题，比如引入的js出现了重复的变量定义，会发生覆盖，以及污染全局变量
// common1.js
var a = 1
// a.js
var a = 2
// a.html
这些问题的原因就是，通过script标签引入的js文件中代码，相当于在全局作用域下，所以每个JS文件中定义在顶层的变量都会变成全局变量，即污染了全局变量
为了解决这个问题，只能为每个JS模块定义一个单独的作用域，让JS模块内部变量不会影响全局变量，所以自然而然想到了函数，因为ES6之前除了全局作用域就是函数作用域。
这里的函数有两种选择：
1、普通函数
2、立即执行函数
而我们一般会选择立即执行函数，因为普通函数还需要一行调用代码，这样才能保证在script标签引入JS模块后，执行JS模块中代码，对应的普通函数才能执行。而立即执行函数会在script标签引入JS模块后立即执行。
// common1.js
(function(){
var a = 1
})()
// a.js
(function(){
var a = 2
})()
// a.html
这就解决了JS模块变量污染全局的问题，且又提出了一个模块的重要特性：
模块需要具备自身的模块作用域，即高内聚，或者说封装性。模块内部设计不对外开放。
而说到封装性，自然而然又想到了getter和setter，即模块不能自己玩自己的，它需要和外部交流，它需要提供入口接收外部信息，需要提供出口反馈处理结果
当这个实现不难，因为现在JS模块当前是一个立即执行函数，函数的特点就是可以接收外部参数，可以返回值
// common1.js
var moduleC = (function(window){
var a = 1
return {a}
})(window)
// a.js
var moduleA = (function(window){
var a = 2
return {a}
})(window)
以上就是一种实现方案，即立即执行函数接收window，返回一个对象
我们需要思考的是，为什么需要接收window,如果不接受window的话，立即执行函数内部可以拿到window吗？
当然可以，我们知道被script标签引入的JS代码，都处于全局作用域下，所以此时立即执行函数也相当于在全局作用域下，如果立即执行函数内部需要window,则可以沿着作用域链找到全局作用域拿到window，但是这样比较浪费性能。
最好地方式就是在全局作用域下调用立即执行函数时传入window作为立即执行函数的参数，这样的效率要比沿着作用域链查找快。
其次我们需要思考的是，为什么立即执行函数返回的是一个对象，而不是变量本身？
这其实取决于你的模块到底需要返回什么，如果你的模块返回值确实只是单个变量，则return a没有问题，但是大部分情况下，模块返回都不是一个简单的变量，可能是多个变量，或多个变量和函数以及对象，以及模块后期拓展功能，相应的返回值也需要拓展，而对象的拓展性要比变量和函数好的多，所以绝大数情况下，我们将一个对象作为模块的返回值。
最后，我们思考下，将模块的返回值赋值给一个全局变量，会不会造成全局变量污染？
会，但是这是没有办法的，因为模块对外暴露时，总要有个载体，且能被外部访问到，所以只能将模块返回值定义到一个全局变量上，此时我们只能尽量避免在全局代码中使用模块对外暴露的变量，另一方面，我们对于模块暴露的变量命名需要尽可能的特殊化，不要使用常规变量名，最著名的例子就是jQuery的$符号
以上完成了模块的输入输出定义，那么模块的输入是否可以是另一个模块呢？
答案是可能的，因为模块之间的依赖的很普遍的行为，比如模块a 依赖于模块b，模块b 依赖于 模块c，所以必须要先产生c模块，才能产生b模块，最后才能产生a模块
所以模块之间想要依赖，则必须要先产生模块。
而浏览器端，JS模块产生，只有一个途径，script标签导入JS文件，所以模块的依赖和script标签导入JS文件的顺序形成了强关联。
上面引入顺序一旦发生改变，则会报错，比如
在script引入a.js时就会报错，找不到b（b.js的输出）
以上示例，说明一个问题：模块之间的依赖，无法写在模块中，只能在一个HTML文件的script标签实现。
这就导致了一个致命的问题：
一旦HTML文件引入了较多的JS文件，你将无法从中显示地识别出模块之间依赖关系，只能依靠自身经验来发现依赖关系，且非常容易通过变更script引入js文件地顺序导致模块依赖报错。
结束
一次完整的面试流程就是这样啦，小编综合了腾讯的面试题做了一份前端面试题PDF文档，里面有面试题的详细解析，分享给小伙伴们，有没有需要的小伙伴们都去领取！
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
494
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
