文章目录
前言
前端的模块化开发经过长时间的演变现在已经趋于稳定,但是模块化的演变过程对于前端开发者的学习来说也是十分重要的,所以我总结了模块化的演变过程和当下最流行的模块化方案的基本使用,希望大家能有所收获
模块化演变过程
-
基于文件的划分模块的方式
<body> <script src="module-a.js"></script> <script src="module-b.js"></script> <script> // 命名冲突 method1() // 模块成员可以被修改 name = 'foo' </script> </body>
// module-a.js var name = 'module-a' function method1 () { console.log(name + '#method1') } function method2 () { console.log(name + '#method2') }
命名冲突,污染全局作用域,模块成员可以被修改,无法管理模块依赖关系;
-
命名空间方式
每个模块只暴露一个全局对象,所有模块成员都挂载到这个对象中
<body> <script src="module-a.js"></script> <script src="module-b.js"></script> <script> moduleA.method1() moduleB.method1() // 模块成员可以被修改 moduleA.name = 'foo' </script> </body>
// module-a.js var moduleA = { name: 'module-a', method1: function () { console.log(this.name + '#method1') }, method2: function () { console.log(this.name + '#method2') } }
通过命名空间的方式会减小命名冲突的可能,但是模块成员仍然可以被修改,仍然无法管理模块依赖关系;
-
IIFE
具体做法就是将每个模块成员都放在一个函数提供的私有作用域中。
有了私有成员的概念,私有成员只能在模块成员内通过闭包的形式访问。
对于管理模块依赖关系,可以利用自执行函数的参数声明去传入依赖的模块,这样可以很清晰的看见,当前模块依赖了哪些模块。
<body> <!-- 引入jquery,这样在其他IIFE模块可以直接传入jQuery --> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"&g