模块化

小熊苗苗

模块化总结

最近重新复习的模块化的相关知识,总结一下,仅供自己理解和大家参考。

模块化的优点

  1. 可维护性:根据定义,每个模块都是独立的。良好设计的模块会尽量与外部的代码撇清关系,以便于独立对其进行改进和维护。维护一个独立的模块比起一团凌乱的代码来说要轻松很多。

  2. 命名空间:在JavaScript中,最高级别的函数外定义的变量都是全局变量(这意味着所有人都可以访问到它们)。也正因如此,当一些无关的代码碰巧使用到同名变量的时候,我们就会遇到“命名空间污染”的问题。

模块化规范

现在比较流行的模块化规范主要有commomJS,AMD, CMD ,ES6 ,现在逐一说明一下.

commonJS

commonJS 是服务器端的模块化规范,node.js就是参照commonJS规范实现的。commonJS中有一个全局的方法require() 用来加载模块。

function myModule(){
    this.hello = function(){
        return "hello";
    }
    this.goodbye = function(){
        return "gooodbye!";
    }
}
module.exports = myModile;

其实module变量代表当前模块.

这样就可以在其他模块中使用这个模块

var myModule = require('myModule');

var myModuleInstance = new myModule();
myModuleInstance.hello();
myModuleInstance.goodbye();

关于commonJS的更多,见CommonJS规范


AMD

commonJS 定义模块的方式和引入模块的方式还是比较简单的,但不适合浏览器端,因为commonJS是同步加载的。而AMD是异步加载的,下面我们来说说AMD的书写规范。

通过define()来定义模块

//main.js
define(['mylib'],function(mylib){
    function foo(){
        mylib.doSomething();
    }
    return {
        foo:foo;
    }
})

define的第一个参数是依赖的模块,必须是一个数组。通过return来暴露接口。

通过require()来加载模块,模块的名字默认为模块加载器请求的指定脚本的名字。

require(['main'],function(main){
    alert(main.foo());
})

require.js就是根据AMD规范实现的,优点为:

  1. 实现js文件的异步加载,避免网页失去响应;

  2. 管理模块之间的依赖性,便于代码的编写和维护。


CMD

CMD是国内玉伯大神在开发SeaJS的时候提出来的,也是异步模块定义。
CMDAMD的区别:
CMD相当于按需加载,定义一个模块的时候不需要立即制定依赖模块,在需要的时候require就可以了,比较方便;而AMD则相反,定义模块的时候需要制定依赖模块,并以形参的方式引入回调函数中。

// CMD
define(function(require, exports, module) {
var a = require('./a')
a.doSomething()
// 此处略去 100 行
var b = require('./b') // 依赖可以就近书写
b.doSomething()
// ... 
})
 // AMD 默认推荐的是
define(['./a', './b'], function(a, b) { // 依赖必须一开始就写好
a.doSomething()
// 此处略去 100 行
b.doSomething()
...
}) 

关于 require.jssea.js 的区别详见SeaJS与RequireJS最大的区别


ES6

ES6在语言规格的层面上,实现了模块功能,而且实现得相当简单,完全可以取代现有的CommonJSAMD规范,成为浏览器和服务器通用的模块解决方案。

ES6模块主要有两个功能:exportimport

export用于对外输出本模块(一个文件可以理解为一个模块)变量的接口

import用于在一个模块中加载另一个含有export接口的模块。

// a.js 

var sex="boy";
var echo=function(value){
  console.log(value)
}
export {sex,echo}  
// b.js
//通过import获取a.js文件的内部变量,{}括号内的变量来自于a.js文件export出的变量标识符。
import {sex,echo} from "./a.js" 
console.log(sex)   // boy
echo(sex) // boy

各种模块化方案优缺点对比

模块化方案 优点 缺点
commonJS 复用性强 ,使用简单 ,实现简单
有不少可以拿来即用的模块,生态不错
同步加载不适合浏览器
浏览器的请求都是异步加载
不能并行加载多个模块。
AMD 异步加载适合浏览器
可并行加载多个模块
模块定义方式不优雅,不符合标准模块化
ES6 可静态分析,提前编译
面向未来的标准
浏览器原生兼容性差,所以一般都编译成ES5
目前可以拿来即用的模块少,生态差

对比学习,效果更好哦~~~

阅读 2.3k

爱前端的数学宝宝
主要记录在学习前端过程中,自己对相关知识的总结、理解。

如果你的才华还实现不了你的野心,那就静下心来,埋头苦干

322 声望
17 粉丝
0 条评论

如果你的才华还实现不了你的野心,那就静下心来,埋头苦干

322 声望
17 粉丝
文章目录
宣传栏