前言
前端需要写的代码变得越来越多,所以需要模块化来解决代码分割,作用域隔离,模块之间的依赖问题。
模块化的优点
1:可维护性,方便独立更新和改进
2:命名空间,模块化封装,避免污染全局变量
3:复用代码
CommonJS
Conmmonjs的目的是让浏览器之外的javascript能够进行模块化的方式进行开发
在commonjs规范中,每个JavaScript文件就是一个独立的上下文,在这个上下文中默认创建的属性,变量,函数,类都是私有的。
Commonjs规范主要适用场景是服务器编程,采用同步加载模块策略。
模块主要实现方案主要包含require与module这两个关键字,允许某个模块对外暴露接口并且由其他模块导入使用
//sayModule.js
function SayModule () {
this.hello = function () {
console.log('hello');
};
this.goodbye = function () {
console.log('goodbye');
};
}
module.exports = SayModule;
//main.js 引入sayModule.js
var Say = require('./sayModule.js');
var sayer = new Say();
sayer.hello(); //hello
AMD异步模块定义
RequireJS是一个遵守了AMD规范的js库,下面将用RequireJS来定义模块
RequireJS文档:http://www.requirejs.cn/
<script data-main="./main.js" src="./require.js"></script> //加载require.js定义入口文件
//method.js
define({
var1: 1,
var2: 2,
methodOne: function (){
alert(this.var1);
},
methodTwo: function (){
alert(this.var2);
}
});
//main.js
define( function( require ){
var method = require( 'method' );
method.methodOne();
});
CMD 通用模块定义
SeaJS是一个遵守了CMD规范的js库,下面将用SeaJS来定义模块
SeaJS文档:https://www.zhangxinxu.com/sp/seajs/
<script src="./sea.js"></script>
<script src="./main.js"></script>
//method.js
define(function(require, exports) {
var var1 = '我是var1';
var var2 = '我是var2';
function methodOne(){
alert(var1);
}
function methodTwo(){
alert(var2);
}
// 对外提供 doSomething 方法
exports.methodOne = methodOne;
exports.methodTwo = methodTwo;
});
//main.js
seajs.use('./method',function(method){
method.methodTwo();
});
AMD和CMD的区别
1.RequireJS在主文件里是将所有的文件同时加载,然而SeaJS强调一个文件一个模块。
2.AMD推崇依赖前置,CMD推崇依赖就近。
ES6模块
Es6自动采取严格模式,严格模式主要有以下限制
- 变量必须声明后在使用
- 函数的参数不能有同名属性否则报错
- 不能使用with语句
- 不能对只读属性赋值,比如(const)常量
- 禁止this指向全局
主要是用export对外提供属性和方法,利用import引用模块
//method.js
class Method {
constructor() {
this.var1 = '我是var1';
this.var2 = '我是var2';
}
methodOne(){
alert(this.var1);
}
methodTwo(){
alert(this.var2);
}
}
export default Method;
//main.js
import methodModule from './method.js'
let method = new methodModule();
method.methodOne();