函数封装
function fn1() {
statement
}
function fn2() {
statement
}
需要时加载函数所在文件并调用函数就可以了。
缺点：加载多个模块时变量名可能冲突，污染全局变量
对象
var module1 = {
var1: 1,
var2: 2,
fn1: function() {
statement
},
fn2: function() {
statement
}
}
同样加载模块文件后module1.fn1();就可以调用。这样只要保证模块名唯一，就不会产生全局污染了
缺点：暴露了所有成员
立即执行函数
var module = (function() {
var var1 = 1;
var var2 = 2;
function fn1() {
statement
}
function fn2() {
statement
}
return {
fn1: fn1,
fn2: fn2
}
})();
这样我们只能引用module.fn1()/module.fn2(),达到了封装细节的目的
当模块依赖其他模块时：
var module = (function(a, b) {
statement
})(A, B);
如果一个页面引用了过多的js，我们不仅要保证js加载的顺序来确保模块间的依赖关系正确；同时过多的js同步加载又严重影响页面的渲染。
1、在script标签上加上async/defer属性来达到异步加载的效果
async会在加载完后立即执行；defer会推迟到页面加载后执行
2、利用现有的模块化规范来达到异步加载和控制模块依赖的目的
CommonJS规范
根据CommonJS规范，一个单独的文件就是一个模块。每一个模块都是一个单独的作用域，也就是说，在该模块内部定义的变量，无法被其他模块读取，除非定义为global对象的属性
模块只有一个出口，module.exports对象，我们需要把模块希望输出的内容放入该对象
加载模块使用require方法，该方法读取一个文件并执行，返回文件内部的module.exports对象
//A.js
statement
module.exports = {
fn1: fn1,
fn2: fn2
}
//B.js
var a = require('A')
a.fn1()
缺点：由于加载依赖模块是同步的，所有依赖以外的代码也只能等待执行。如果是应用在如nodejs服务端，那没什么问题，硬盘读取时间很短；但如果是在浏览器端，那就是不可忍受的加载时长了
AMD规范，代表requireJS
Asynchronous Module Definition，异步模块定义
它采用异步方式加载模块，不影响它后面语句的执行，所有依赖模块的语句，都定义在回调函数中。require([module], callback);
//require.js引入时可以指定入口文件
<script src="path/require.js" data-main="path/main"></script>
//main.js
//可将模块路径自定义
require.config({
[baseUrl: 'path',]
paths: {
'jquery': 'path/jquery.min',
'moduleA': 'path/moduleA'
}
});
//加载模块
require(['jquery', 'moduleA'], function ($, a){
a.fn1();
statement
});
//定义模块moduleA.js
define(function() {
var fn1 = function(a) {
return a++;
}
return {
fn1: fn1
};
});
//依赖其他模块
define(['moduleB', 'moduleC'], function(mb, mc) {
var fn1 = function() {
return mb.fn1();
}
return {
fn1: fn1
};
});
如果函数库不符合了AMD的规范，我们需要先配置shim再使用：
require.config({
[baseUrl: 'path',]
paths: {
'jquery': 'path/jquery.min',
'moduleA': 'path/moduleA',
'ta': 'path/TestA',
'tb': 'path/TestB',
'jquery.scroll'： 'path/jquery.scroll'//jquery插件
},
shim: {
'ta': {
exports: 'TestA'//js输出的变量名
},
'tb': {
deps: ['jquery'],//依赖的模块
exports: 'TestB'
},
'jquery.scroll': { //简写成：'jquery.scroll': ['jquery']
deps: ['jquery'],
exports: 'jQuery.fn.scroll'
}
}
});
CMD规范，代表SeaJS，基于CommonJS
Common Module Definition，通用模块定义
和AMD最大的区别在模块定义方式和依赖模块加载时机：
- AMD推崇依赖前置，在定义模块的时候就要声明其依赖的模块
- CMD推崇就近依赖，只有在用到某个模块的时候再去require
//引用
<script src="../sea-modules/sea.js"></script>
//seajs的简单配置
seajs.config({
base: "../sea-modules/",
alias: {
"jquery": "jquery.js"
}
})
//定义模块module.js
define(function(require, exports, module) {
var $ = require('jquery');//通过require引入依赖
var mb = require('path/moduleb');
var fn1 = function() {}
//通过exports对外提供接口
exports.fn1 = fn1;
//或者通过module.exports提供接口
module.exports = {fn1: fn1};
//导出方式谁在后谁起作用，最终都是通过全局的module.exports
//通常返回单一方法或属性时用exports，返回复杂结构时用module.exports
});
//加载模块
seajs.use(['module.js'], function(mo){
statement
});
