JS模块化

commonjs

服务器端
    - 暴露module.exports对象
        - module.exports = {}
        - module.exports = function (){}
        - module.exports.xxx = 
    - 引用 let module = require('path')
浏览器端
    - npm i browserify -g
    - 编译打包
        - browserify js/src/app.js -o js/dist/bundle.js //>是写入文件
        - <script>引入bundle.js即可

AMD(require.js)

用于浏览器端异步加载多个js模块
　　- 异步加载
　　- 防止顺序错乱

下载rerquire.js
    - 无依赖模块
    define(function (){
            return //return回暴露的模块
    })
    - 有依赖模块
    define(['moduleName'], function (moduleName){
        return
    })
    - 主模块
    (function () {
        requirejs.config({
            baseurl: 'js/', //以哪个相对的路径为根据
            path: {
                moduleName1: './modules/module1', //后缀无.js
                moduleName2: './modules/module2'
            }
        })
        requirejs(['moduleName'], function (moduleName) {
        })
    })()
    - <script data-mian = 'js/app.js' src = 'js/libs/require.js'>
        - 引入require和主页面
引用第三方模块
    - 支持AMD的(如jquery)
    - 不支持的
    path: {
        moduleName: 'path'
    }
    shim: {
        moduleName:{
            exports: moduleName
        }
    }

 CMD(Seajs)

模块引入
    define(function (require, exports, module) {
        var moduleName1 = require('path1') //同步引用
        require.async('path2', function (moduleName2) {}) //异步加载
    })

主模块
    define(function (require) {})

标签
    <script type = 'text/javascript' src = 'js/libs/sea.js'></script>
    <script type = 'text/javascript'>seajs.use('./js/src/app.js')</script>

ES6

配置打包工具
    - npm i babel-cli browserify -g
    - npm i babel-preset-es2015 --save-dev
        - babel-cli  //cli:command line interface
        - babel-preset-es2015 //ES6转换为ES5的包
        - browserify
    - .babelrc{"presets":["es2015"]}
执行
    - babel js/src -d js/libs  
    - browserify js/libs/app.js -o js/lib/bundle.js 
ES6暴露方式
    - 常规暴露
        - export value或 export {fun}   //可直接暴露多次
        - import {value} from 'path' //直接暴露的必须解构方式引用
    - 默认暴露
        - export default value 
        - import module from 'path' //可直接使用

 

转载于:https://www.cnblogs.com/liqunblog/p/9801482.html