js模块化[1]
「这是我参与2022首次更文挑战的第27天，活动详情查看：2022首次更文挑战」
理解
什么是模块/模块化
将一个复杂的程序按照一定的规范，封装成几个块(文件)，并进行组合在一起。 这些模块，最好都做到可复用性，比如可以在多个文件中使用处理时间的模块。
image.png
还有，块的内部数据/实现是私有的，只向外部暴露一些接口(方法)与外部其它模块进行通信。
模块化的进化史
最早
最早，我们的js是写到一个文件中，想怎么写怎么写。
var gl = 'gl'
function a(){
gl = 'glb'
}
console.log(gl) // 'glb'
function b(){
}Namespace模式
简单的封装，把一部分属性放到对象中。通过对象.属性调用。 减少Global全局上的变量数目，但本质是对象，完全可以被改掉，不安全。
var wrap = {
foo:function(){console.log(1)},
sec:function(){}
}
wrap.foo = function(){alert(11)}
wrap.foo() // 就会弹出11IIFE模式
立即执行函数。进来就执行，全局是看不到这个函数里面的数据。因此也操作不了它。
var Moudle = (fucntion(){
var _private = 'safe';
var foo = function(){
console.log(_private)
}
return {
foo:foo
}
})()
Module.foo()
Module._private; // undefined引入依赖
JQuery的最外层，其实就是一个立即执行函数。这就是模块模式，也是现代模块实现的基石。
var Moudle = (function(){
var _$body = $('body');
var foo = function(){
console.log(_$body)
}
return {
foo:foo
}
})(jQuery)
Moudle.foo()为什么要模块化
- 降低复杂度
- 提高解耦性
- 方便部署。比如不需要轮播图的模块，我们不需要引入 模块化的好处
- 避免命名冲突(减少命名空间污染)
- 更好的分离，按需加载
- 更高复用性
- 高可维护性
页面引入script
当我们需要引入多个js文件。需要写多个标签。如下，如果1.js中用到jquery.js中的内容，这个加载顺序是不可以换的。并且，引入多少个<script>标签，我们就需要发送多少次请求
<script src='jquery.js'></script>
<script src='1.js'></script>
<script src='2.js'></script>
<script src='3.js'></script>
<script src='4.js'></script>所以就带来了如下的问题
- 请求过多
- 依赖模糊
- 难以维护
因此也就需要模块化规范
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2022-02-24，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录