commonjs,ADM,CMD,ES6模块规范

// 1 commonjs
特点: 
    每个js文件都可以当做一个模块
    服务端: 模块加载是同步的
    浏览器: 需要进行编译打包处理
语法: 
    暴露: 暴露的都是exports这个对象
        module.exports = value --> 相当于对exports对象重新赋值
        exports.xxx = value --> 相当于对exports对象添加属性
    引入: require(xxx)
    编译: Browserify: 编译打包工具
        使用: 全局安装: npm install -g browserify 局部安装: npm install -g browserify --save-dev
        语法: 命令行 browserify js/src/main.js -o js/dist/bundle.js  1.main.js 入口文件 2.bundle.js 输出文件
    在html中使用:
     
// 2 AMD
特点: 
    专门用于浏览器端
    模块的加载是异步的
语法: 
    暴露: 一般向外暴露一个对象
        没有依赖: define(function() {
            return 模块
        })
        有依赖: define(['module1', 'module2'], function(m1, m2) {
            注: 形参m1 = module1模块的暴露 m2 = module2模块的暴露
            return 模块
        })
    引入: require(['module1', 'module2'], function(m1, m2) {
            注: 形参m1 = module1模块的暴露 m2 = module2模块的暴露
            使用m1/m2
        })
    实现: requirejs
        定义入口文件main.js或app.js
        在入口文件的开头配置requirejs
        require.config({
            baseUrl: 'demo/', // 定义paths中模块相对地址
            paths: {
                jquery: 'lib/jquery.min', // 第三方模块建议放在lib文件夹下
                demoModel: 'modules/demoModel' // 自定义模块建议放在modules文件夹下
            }
        })
        // 引入各模块
        require([jquery, 'module2'], function($, m2) {
            //使用各模块
        })
    在html中使用
        
        其中src指向requir.js文件 data-main指向定义的入口文件
// 3 CMD
特点: 
    专用于浏览器端
    模块的加载可以是异步的
    模块使用时才会被加载
语法: 
    暴露: 理解为commonjs与AMD的组合
        // 固定写法
        无依赖
        define(function(require, exports, module) {
            // 向外暴露使用commonjs规范
            module.exports = value
            exports.xxx = value
        })
        有依赖
        define(function(require, exports, module) {
            // 同步引入
            let module1 = require("./modules/module1")
            // 异步引入
            require.async("./modules/module2", function(m2) {
                // 引入成功后的回调函数
            })
            // 向外暴露使用commonjs规范
            module.exports = value
            exports.xxx = value
        })
    引入:
        define(function(require) {
            let m1 = require("./modules/module1"); // 引入 
            m1.sayHello(); // 使用
        })
    实现: sea.js
    在html中使用:
     
     
    
// 4 ES6
特点: 
    语法简洁
    避免引入时的层层依赖
    浏览器不支持需要编译
语法:
    暴露:
        分别暴露
        export function fun() {};
        export let msg = '测试';
        export let obj = {};
        统一暴露
        function fun() {};
        let msg = '测试';
        let obj = {};
        export {
            fun,
            msg,
            obj
        }
        默认暴露
        export default 任意类型 建议暴露一个对象
    引入:
        分别暴露与统一暴露都需要解构引用
        import { fun, msg, obj } from './modules/demo.js'
        默认暴露
        import demoModel from './modules/demo.js'
        demoModel根据类型直接使用
编译: 
    使用babel进行编译
    npm i babel-cli browserify -g;
    npm i babel-preset-es2015 --save-dev
    定义.babelrc文件 该文件为json文件后缀不写 作用: 告诉babel要干什么
    {
        "babel": ["es2015"]
    }
    使用:
    1 命令行运行babel demo/src -d demo/lib 将es6转为es5
    2 使用browserify编译成浏览器可以用的文件 browserify demo/lib/main.js -o demo/dist/bundle.js
    在html中使用:
     

 

另附原视频连接: https://www.bilibili.com/video/av59715096?p=223