JS模块化

CommonJs模块化

uniq模块

let redult = uniq(module.arr) //能对数组去重

暴露方式:

exports.test = {}

module.exports = {}

引入方式:

 require('./module1');

安装browserify模块

把代码转换成浏览器能识别的js文件

命令行执行browserify  源文件js路径  -o  输出js路径

browserify  app.js  -o  index.js

AMD

依赖require.js

<script data-main="main" src="require.js"></script>

main.js

(function(){

    require.config({

        paths:{

            "serverModule":'js/libs/server', //模块指向依赖的js文件

            "dataModule":'js/libs/data',

            jquery:'js/libs/jquery',     //第三方库引入

        }

    });

    define(['serverModule'],function(serverModule){  //引入模块依赖

        serverModule.Show()

    })

})()

ES6

在根目录下新建.babelc文件,写入代码{"presets": ["es2015"]}

暴露方式

export{foo,bar};

export  var  b = function(){console.log(456);}

以上两种使用

import { foo,bar } from './module1'

import { a,b } from './module2'

而export default function(){},使用import ms from './module3'

运行babel  js/src  -d  js/lib,将js/src的js文件es6转es5,babel会自动创建lib文件夹

再执行browserify  app.js  -o  index.js转换为浏览器能识别的js文件

CMD

依赖sea.js

<script src="sea.js"></script>   

<script>seajs.use('./main.js');</script>

main.js

define(function(require,exports,module){

    let data1 = require('./js/data1'); //引入js依赖

    data1.foo();

    let data4 = require('./js/data4');

    data4.ts();

})

data1.js

define(function(require,exports,module){

    let msg = 'data1';

    function foo(){

        console.log(msg)

    }

    module.exports = {

        foo

    }

})

引入的两种方式

let data2 = require('./data2'); //同步

require.async('./data3',function(item){ //异步

    item.test();

 })

暴露的三种方式

module.exports = bar;

module.exports = {foo};

exports.test = test;