JS的模块化编程

去追光
1,754 阅读5分钟

一、模块系统概述

模块化是将系统分离成独立功能的方法，这样我们需要什么功能，就加载什么功能。

当一个项目开发得越来越复杂时，会遇到一些问题，例如：命名冲突、文件依赖等。

文件依赖就是，A负责a.js组件的开发，B负责b.js组件的开发，在a.js文件里面可能引用了b.js里面的某一个变量，而在项目运行时a.js在b.js之前加载，这个时候就会出现一些错误信息，但是a.js和b.js本身都没有错误，这就造成了我们排错的一些困难，这种问题我们称之为文件依赖的问题。

所以使用模块化开发时，可以避免以上问题，并且提升开发效率。

怎么理解呢？在模块化开发里面，会把一个文件当做一个单独的作用域存在，它们定义的变量、函数都不会相互影响。那如果在a.js里面依赖了b.js，我们就会进行声明，通过这种方式也可以减少文件依赖带来的BUG。

而提升开发效率主要是从代码可复用性和可维护性来提升的。

总结：在生产的角度，模块化开发是一种生产方式，这种方式生产效率高，维护成本低。

二、模块化开发演变

1、全局函数

在早期的开发过程中，就是将重复的代码封装到函数中，再将一系列的函数放到一个文件中。这种方式存在一些问题：存在污染全局变量、看不出相互的直接关系。

这种方式并不能解决根本的问题：命名冲突和文件依赖，于是演变为对象命名空间。

2、对象命名空间

通过对象命名空间的形式，从某种程度上解决了变量命名冲突的问题，但是并不能从根本上解决命名冲突。存在问题：内部状态可被外部改写、命名空间越来越长。

3、私有公有成员分离

利用此种方式将函数包装成一个独立的作用域，私有空间的变量和函数不会影响到全局作用域。这种方式相当于现在写插件的形式，解决了变量命名冲突的问题，但是没有解决降低开发复杂度的问题。

4、CommonJS

CommonJS规范加载模块是同步的，也就是说，加载完成才执行后面的操作。Node.js主要用于服务器编程，模块都是存在本地硬盘中，加载比较快，所以Node.js采用CommonJS规范。

CommonJS规范分为三部分：module(模块标识)、require(模块引用)、exports(模块定义)。

  • module变量在每个模块内部，就代表当前模块；
  • exports属性是对外的接口，用于导出当前模块的方法或变量；
  • require()用来加载外部模块，读取并执行js文件，返回该模块的exports对象。

5、AMD(require.js)

AMD也就是异步模块定义，它采用异步方式加载模块，主要针对的是浏览器端的模块规范。它通过define方法去定义模块，require方法去加载模块。

AMD定义：如果这个模块还需要依赖其他模块，那么define函数的第一个参数，必须是一个数组，指明该模块的依赖。

define([tools], function(){});

AMD模块的加载：

require(['modules'], callback);

第一个参数['modules']，是一个数组，里面的成员就是需要加载的模块；第二个参数callback，则是加载成功之后的回调函数，例如加载math.js:

require(['math'], function(){});

require()异步加载math，浏览器不会失去响应；它指定的回调函数，只有前面的模块加载完成后才会运行，解决了依赖性的问题。

6、CMD(sea.js)

CMD即通用模块定义，CMD规范是国内发展出来的；正如AMD有require.js，CMD有个浏览器的实现sea.js。sea.js要解决的问题和require.js一样，只不过在模块定义方式和模块加载方式上有所不同。

在CMD规范中，一个模块就是一个文件。代码的书写格式如下：

define(function (require, exports, module) {
    // 模块代码
})

require是可以把其他模块导入进来的一个参数；exports可以把模块内的一些属性和方法导出；module是一个对象，上面存储了与当前模块相关联的一些属性和方法。CMD是按需加载，推崇依赖就近，延迟执行。文件是提前加载好的，只有在require的时候才去执行文件；

 define(function(require, exports, module){
    var math = require('./math');
    math.add();
})

7、ES6 Module

在ES6之前没有模块化，为了解决问题，提出了CommonJS，AMD，CMD；ES6模块化汲取CommonJS和AMD的优点，语法简洁，支持异步加载，未来可以成为浏览器和服务器通用的模块化解决方案。

ES6中模块的定义：ES6新增了两个关键字：export和import。export用于把模块里的内容暴露出来，import用于引入模块提供的功能。

ES6中模块的加载，import加载模块：

import{bar,foo,test,obj} from './lib'
foo();

注意：可以使用export default命令，为模块指定默认输出，一个模块只能有一个默认输出，所以export default只能使用一次。

ES6模块运行机制：ES6模块是动态引用，如果使用import从一个模块加载变量(即import foo from 'foo')，变量不会被缓存，而是成为一个指向被加载模块的引用。等脚本执行时，根据只读引用，到被加载的那个模块中去取值。

avatar
文章
阅读
粉丝