早期代碼的組織形式
1.全局函數
2.命名空間
3.IIFE(立即可執行函數)
模塊化需要實現的功能
1.解決命名沖突
2.依賴管理
3.模塊化合并
commonjs
1.定義模塊：一個js文件為一個模塊
//定義模塊
function main(){}
function demo(){}
//對外提供接口
方法一：
module.exports = {
main:main,
demo:demo
}
方法二：
exports.main = main;
exports.demo = demo;
2.依賴
--導入到index.js文件的依賴，路徑全部以index.js的位置作參照
require("以index.js的位置為準");
--導入到其他js文件的依賴，全部以自身這個模塊的位置作參照
var tools = require("自身模塊的位置為準);
3.合并模塊(打包)
使用browserify來合并模塊
--npm init -y //初始化
--npm i browserify --save-dev(或者-g) //本地或全局安裝browserify
--browserify 以終端前面的命令的路徑為參照找到index.js -o 合并后的模塊的目標位置和目標文件的命名
browserify ./js/index.js -o ./js/main.js
--將生成的目標文件放進index.html中即可
npm的具體操作參照另一篇文章--http://www.lxweimin.com/p/ca5c5b95536a
ES6模塊化
1.定義模塊：一個js文件為一個模塊
//定義模塊
function main(){}
function demo(){}
//對外提供接口 2.依賴(路徑參照與commonjs相同)
方法一：
export funtion main(){} import {標識(函數名)} from "url";
export function demo(){}
方法二：
export = { import * as 命名空間 from "url";
main,
demo
}
方法三：
export default = { import 命名空間 from "url";
main,
demo
}
3.合并模塊(打包)
使用webpack來合并模塊
--npm init -y //初始化
--npm i webpack --save-dev(或者-g) //本地或全局安裝webpack
--webpack 以終端前面的命令的路徑為參照找到index.js 空格 合并后的模塊的目標位置和目標文件的命名
webpack ./js/index.js ./js/main.js
--將生成的目標文件(main.js)放進index.html中即可
注意：使用ES6模塊化，導入的代碼必須在所有代碼之前，也就是不能在其他代碼塊中插入import,在其他模塊中的代碼必須先聲明后使用，因為打包時會將當前模塊中的全局變量變為模塊化后的局部變量。
