模块化JavaScript

---

早期代码的组织形式

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,在其他模块中的代码必须先声明后使用，因为打包时会将当前模块中的全局变量变为模块化后的局部变量。