早期代码的组织形式
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的具体操作参照另一篇文章--https://www.jianshu.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,在其他模块中的代码必须先声明后使用，因为打包时会将当前模块中的全局变量变为模块化后的局部变量。
