模块化

比眉伴天荒 2022-04-23 13:48 312阅读 0赞

1.什么是模块化？

> 它是将一个复杂的系统分解为多个模块，方便编码。

2.为什么要用模块化？

> 降低复杂性，降低代码的耦合度，部署方便，提高效率

3.模块化的好处？

> 1.避免命名冲突，减少变量空间污染  
> 2.更好的分离代码，按需加载  
> 3.更高复用性  
> 4.更高可维护性

4.模块化规范  
4-1.什么是CommonJs

> 据CommonJs规范规定每一个Js文件都可以看做一个模块，其内部定义的变量是属于这个模块的，不会对外暴露，也就是说不会污染全局变量。该规范最初是用在服务端的node环境中。  
> CommonJs采用同步加载不同模块文件，适用于服务端的。因为模块文件都存在服务端的各个硬盘上，读取加载时间快，适合服务端，不适应浏览器。  
> 浏览器不兼容CommonJs,原因是浏览器缺少module, exports, require,global四个环境变量。如要使用需要工具转换(可以通过工具转换browserify 就可以在浏览器中使用 browserify main.js -o bundle.js)。  
> CommonJs的核心思想就是通过require方法来同步加载所需依赖的其他模块，然后通过exports或者module.exports来导出需要暴露的接口。  
> 暴露接口方式：  
> module.exports = value;  
> [exports.xxx][] = value;  
> 暴露的模块是什么（exports的本质是什么？）：  
> exports本质是一个空对象。  
> 引入模块var m1 = require(’./module/xxx’);

4-2.什么是AMD

> AMD规范则是异步加载模块，允许指定回调函数。等模块异步加载完成后即可调用回调函数。AMD得意的产物就是require.js  
> AMD的核心思想就是通过define来定义一个模块，通过return …暴露出去，然后使用require来加载一个模块。AMD规范的使用依赖于require.js

需要一个主入口文件main.js，放到index.html
    <script src='require.js' data-main='main.js'></script>
    //main.js
    <script>
    	(function(){
    		require.config({
    			paths:{
    				index:'../module/index',//引入所有用到的模块
    				module1:'../module/modul1'
    			}
    		});
    		require(['index'],function(index){
    	
    		})
    	})();
    </script>
    //index.js
    <script>
    	define(moudleId,['module1'],function(m1){
    		return {
    		}
    	})
    </script>

4-3.CMD规范

> CMD异步加载，跟AMD的主要区别在于，AMD依赖前置，提前加载依赖。而CMD就近加载，按需加载。主要产物是seaJs，CMD的核心思想就是通过define来定义一个模块，然后使用require来加载一个模块。

需要一个主入口文件，放到index.html
    <script>seajs.use('main.js')</script>
    //module1
    define(function(require,exports,module){
    	var arr = [1,2,4];
    	exports.module1 = arr;
    })
    //main.js
    define(function(require){
    	var module1 = require('module1.js');
    	
    })

[exports.xxx]: http://exports.xxx