commenJS(Node.js基于commenJS规范编写)
理解
- 每个文件都可以当作一个模块
- 在服务器端(Node)：模块的加载是在运行时同步加载的
- 在浏览器端(Browserify)：模块需要提前编译打包处理
基本语法
- 暴露模块（暴露出模块的本质是exports对象）
方式<1>：直接给属性赋值的写法，后边赋值的会覆盖前面的
module.exports = value
方式<2>：可以往exports对象中添加属性的写法，不存在以上方式的缺点
exports.xxx = value - 引入模块----------require()
以下例子可帮助理解
/*在node环境中运行*/
//module1.js中的代码段
module.exports = { //这种写法是暴露了一个对象出来，也就是基本语法的方式<1>
msg:"module1",
foo(){
console.log(this.msg);
}
};
//module2.js中的代码段
module.exports = function(){
console.log("module2");
};
//module3.js中的代码段
exports.foo = function(){
console.log("foo() module3");
};
exports.bar = function(){
console.log("bar() module3");
}
//主模块app.js
let module1 = require("./module1.js");
let module2 = require("./module2.js");
let module3 = require("./module3.js");
module1.foo(); //"module1"
module2(); //"module2"
module3.foo(); //"foo() module3"
module3.bar(); //"bar() module3"
Browserify模块化简单教程
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 //局部安装将依赖写到package.json中
3. 写module1.js、module2.js、module3.js中的代码（同上）
4. 写app.js中的代码（同上）
5. 打包处理js
解释： 目标文件路径 output 处理后的文件路径
browserify js/src/app.js -o js/dist/bundle.js
6. 在index.html中引入app.js
AMD(Asynchronous Module Definition)
理解
- 异步模块定义
- 专门用于浏览器端，模块的加载是异步的
基本语法
- 定义暴露模块
定义有依赖的模块：
define(['module1','module2'],function(m1,m2){
return 模块;
})
定义没有依赖的模块：
define(function(){
return 模块;
})
- 引入使用模块
require(['moodule1','module2'],function(m1,m2){
使用m1/m2
})
以下代码帮助理解记忆
- 在木有模块化规范的时候
目录结构
|-js
|-alerter.js
|-dataService.js
|-app.js
|-index.html
//dataService.js中的代码段，定义的是一个没有依赖的模块
(function(window){
let name = "dataService.js";
function getName(){
return name;
}
window.dataService = {getName}
})(window)
//定义一个有依赖的模块,alerter.js中的代码段
(fucntion(window,dataService){
let msg = "alerter.js";
funtion showMsg(){
console.log(msg);
console.log(dataService.getName());
}
window.alerter = {showMsg};
})(window,dataService)
//在主源文件app.js中
(function(alerter){
console.log(alerter,showMsg());
})(alerter)
//最后按照以下顺序依次引入js文件
1.dataService.js
2.alerter.js
3.app.js
- 使用模块化依赖require.js的简单教程
- 下载require.js并引入
- 创建目录结构
|-js
|-libs
|-require.js
|-modules
|-alerter.js
|-dataService.js
|-main.js
|-index.html
- dataService.js中代码
define(function(){
let name = "dataService.js";
function getName(){
return name;
}
return {getName};
})
- alerter.js中的代码
define(['dataService'],function(dataService){
let msg = "alerter.js";
function showMsg(){
console.log(msg,dataService.getName());
}
return {showMsg};
})
- 汇入到主模块main.js中
(function(){
requirejs.config({
//baseUrl:'js/libs', //基本路径，即会补充在下边的路径之前
paths:{
dataService: './modules/dataService' //默认会加.js后缀
alerter: './module.alerter'
//还可以添加第三方库，比如jQuery
}
})
requirejs(['alerter'],function(alerter){
alerter.showMsg();
})
})()
6. 引入require.js并指定js主文件的入口
<script data-main="js/main.js" src="js/libs/require.js"></script>
CMD(Commen Module Definition)概述
理解
- 通用模块定义，目前已经卖给国外
- 专门用于浏览器端，模块的加载时异步的
- 模块使用的时候才会进行加载执行
基本语法
- 定义暴露模块
1.定义无依赖的模块
define(function(require,exports,module){
exports.xxx = value;
module.exports = value;
})
- 定义有依赖的模块
define(function(require,exports,module){
var module2 = require('./modue2'); //同步引入模块
require.async('./module3',function(m3){ //异步引入模块
})
exports.xxx = value; //暴露模块
})
- 引入使用模块
define(function(require){
var m1 = require('./module');
var m4 = require('./module4');
m1.show();
m4.show();
})
ES6（重中之重）
理解 依赖模块需要编译打包处理
语法
1.导出模块：export
2.引入模块：import
- ES6-Babel-Browserify使用教程
1.定义package.json文件
{
"name":"es6-babel-browserify",
"version":"1.0.0"
}
2.安装babel-cli、babel-preset-es2015和browserify
npm install babl-cli browserify -g
npm install babel-preset-es2015 --save-dev
preset:预设，将es6转为es5的所有插件打包
3.定义 ./bashrc(即运行时控制文件)
{
"presets":["es2015"]
}
4.搭建目录
|-js
|-src
|-module1.js
|-module2.js
|-module3.js
|-main.js
5.------------module1.js中分别暴露模块
export function foo(){
console.log("foo() module1");
}
export funtion bar(){
console.log("bar() module1");
}
-------------module2.js中统一暴露模块
function fun(){
console.log("fun() module2");
}
function fun2(){
console.log("fun2() module2");
}
export {fun,fun2};
-------------module3.js中默认/常规暴露
export default () => {
console.log("默认");
}
6.在main.js中引入以上三个js文件模块
import module3 from './module3' //默认暴露，采用常规的即可
import {foo,bar} from './module1' //分别暴露，必须采用解构方式引入
import {fun,fun2} from './module2' //统一暴露，必须采用解构方式引入
foo();
bar();
fun();
fun2();
module3();