一、CommonJS
1、规范
-
说明
每一个文件都可以当做一个模块
在服务器端：模块的加载是运行时同步加载的
在浏览器端：模块需要提前编译打包处理。（因为浏览器不认识其引入的语法，所以需要事先编译打包成浏览器能够认识的语法才能够运行） -
基本语法
暴露模块：
module.exports=value
exports.xxx=value
暴露的本质是exports这个对象。exports原本是一个空对象，通过暴露为其添加新的属性值。引入模块：
require(xxx)
引入第三方模块时，xxx为模块名；引入自定义模块时，xxx为模块文件路径
2、实现
-
服务端实现步骤
（1）下载安装node.js
（2）创建项目结构
/-modules /-module1.js /-module2.js /-module3.js /-app.js /-package.json（3）下载第三方模块（可选）
npm install uniq --save（4）进行模块化编码
-
浏览器端实现步骤
（1）创建项目结构
/-js /-dist //打包生成文件的目录 /-src //源码所在的目录 /-module1.js /-module2.js /-module3.js /-app.js //应用主源文件 /-index.html /-package.json（2）下载browserify
先全局安装：
npm install browserify -g再局部安装：
npm install browserify --save-dev（3）进行模块化编码
（4）打包处理js
browserify js/src/app.js -o js/dist/build.js
上面的命令意思是将app.js文件进行编译，输出为build.js文件（5）页面引入
<script src="./js/dist/build.js"></script>
二、AMD
AMD（Asynchronous Module Definition，异步模块定义），专门用于浏览器端，模块的加载是异步的。
1、基本语法
（1）定义暴露模块
-
定义没有依赖的模块
define(function(){ return 模块 })
-
定义有依赖的模块
define(["module1","module2"],function(m1,m2){ return 模块 })
（2）引入暴露模块
require(["module1","module2"],function(m1,m2){
使用m1/m2
})
2、实现步骤
（1）下载require.js
官网：https://requirejs.org/
将require.js引入到项目中：js/libs/require.js
（2）创建目录结构
/-js
/-libs
/-require.js
/-modules
/-alerter.js
/-dataService.js
/-main.js
/-index.html
（3）定义require.js的模块代码
三、CMD
CMD（Common Modules Definition，通用模块定义），专门用于浏览器端，模块的加载是异步的，模块在使用时才会加载。这种方式在开发中用的比较少。
1、基本语法
（1）定义暴露模块
-
定义没有依赖的模块
define(function(require,exports,module){ exports.xxx=value; module.exports=value; })
-
定义有依赖的模块
define(function(require,exports,module){ //引入依赖模块（同步） var module2=require("./module2"); //引入依赖模块（异步） require.async("./module3",function(m3){ }); //暴露模块 exports.xxx=value; })
（2）引入暴露模块
define(function(require){
var m1=require("./module1");
var m2=require("./module2");
m1.show();
m2.show();
})
2、实现步骤
（1）下载sea.js并引入
官网：https://seajs.github.io/seajs/docs/#intro
将sea.js导入项目：js/libs/sea.js
（2）创建项目模块
/-js
/-libs
/-sea.js
/-modules
/-module1.js
/-module2.js
/-module3.js
/-main.js
/-index.html
（3）定义sea.js的模块代码
四、ES6
1、创建目录结构
/-js
/-src
/-module1.js
/-module2.js
/-module3.js
/-index.html
/-package.json
2、安装babel-cli, babel-preset-es2015 和 browserify:
第一步：全局安装 npm install babel-cli browserify -g
(cli: command line interface 命令行接口工具)
第二步：局部安装 npm install babel-preset-es2015 --save-dev
注：如果已经安装了browserify，可以在第一步中去除browserify
3、创建.babelrc文件（给babel指定具体的任务）
文件内容如下：
{
"presets":["es2015"]
}
4、编码
- 分别暴露
/*js/src/module1.js*/
export let data="dexter";
export function demo(){
console.log("我是module1中的demo函数",data.toLocaleUpperCase());
}
export function test(){
console.log("我是module2中的test函数",data.toLocaleLowerCase());
}
- 统一暴露
/*js/src/module2.js*/
export {demo2,test2}
let arr=[1,2,3,4,5]; //私有数据
function demo2(){
console.log("我是module2中的demo2函数",arr);
}
function test2(){
console.log("我是module2中的test2函数",arr);
}
- 默认暴露
/*js/src/module3.js*/
export default{
name:"peiqi",
age:18,
speak(){
console.log("我的名字是${this.name},我的年龄是${this.age}");
}
}
5、模块的引入
-
分别暴露与统一暴露的引入方式
import {foo,bar} from "./module1"; import {fun1,fun2} from "./module2"; -
默认暴露的引入方式
import module3 from "./module3"; -
第三方模块引入方式
import $ from "jquery";
6、编译源代码
首先要确保已经进入ES6-Babel-Browserify所在的文件夹
第一步：使用Babel将ES6编译为ES5代码
命令为：babel js/src -d js/build ，表示编译src文件夹下的所有js文件，保存到build文件中
第二步：使用Browserify编译js上一步生成的js
命令为：browserify js/build/app.js -o js/build/build.js
注：第一步操作后Babel将es6的模块化语法转换成了CommonJS模块化语法（浏览器不识别），因此需要执行第二步对进过babel编译的app.js文件通过browerify进一步编译才可以执行。
7、html文件载入
<script src="./js/build/appbuild.js"></script>
网友评论