JavaScript 模块化

模块定义：完成特定功能的一组方法
一：

utils.js:
function fn1(){
    //……
}
function fn2(){
    //……
}

<script src='utils.js' />

缺点：命名冲突

二：

var utils = {
    name : 'utils',
    fn1 : function (){
        //……
    },
    fn2 : function (){
        //……
    }
}
// utils.fn1()
// utils.fn2()

缺点：内部参数可以被修改

三：

var utils = (function(){
    var name = 'utils',
    fn1 = function (){
        //……
    };
    fn2 = function (){
        //……
    };
    return {
        fn1 : fn1,
        fn2 : fn2
    }
})()
// utils.fn1()
// utils.fn2()

** 独立性

四：

var $ = (function ($){
    $.fn1 = function (){
        //……
    }
    fn2 = function (){

    }
    return {
        $ : $,
        fn2 : fn2
    }
})(jQuery || {})

举个栗子：

//http.js:
var http = (function (){
    setRequest = function (){//设置请求头}
    checkResponce = function (res){//检查status,code，处理默认行为}
    return {
        setRequest : setRequest,
        checkResponce : checkResponce
    }
})()

//api.js:
var api = (function (_$,_http){
        post:function(url,params,callBack){
            _$.ajax({
            type: "POST",
            data: params,
            beforSend : _http.setRequest(),
            complete:function (res){
                callBack(_http.checkResponce(res))
            }
        })
    }
})(jQuery,http)

规范

CommonJS

require 和 module

//http.js:
module.exports = {
    setRequest : function (){}
    checkResponce : function (){}
}

//api.js:
var _http = require('./http.js')
var _$ = require('./jQuery.js')

function post (url,params,callBack){
    _$.ajax({
        type: "POST",
        data: params,
        beforSend : _http.setRequest(),
        complete:function (res){
            callBack(_http.checkResponce(res))
        }
    })
}
module.exports={
    post : post
}

require 结果是值的拷贝（缓存）

AMD

require.js

//指定页面主程序
<script src="./require.js" defer async data-main="./js/main"></script>

//主程序（业务）main.js:
require(['./js/api','jQuery'], function (_api, $){
    //_api.post('xxxx')
});

//远程模块配置链接
require.config({
    paths : {
        "jquery" : ["http://libs.baidu.com/jquery/2.0.3/jquery"]   
    }
})

//模块语法
define(function (){
    var name = '嗨喽';
    var fn1 = function (){//……}
    return {
        name : name,
        fn1 : fn1
    }
})

//api.js:
define(['jQuery','./js/http'], function ($, _http){
    var post = function (_url, _params, _callback){
        //……
    }
    return {
        post : post
    }
})

//配置非模块使用
require.config({
    path:{
        "oldModule" : "http://****.js"
    },
    shim : {
        "oldModule" : {
            deps : ['jQuery'],
            exports : 'oldModule'
        }
    }
})

require插件：
domready : 让回调函数在页面DOM结构加载完成后再运行s
text、image : 允许require.js加载文本和图片文件
……

ES6 Module

export:

person.js:

export let name = '老铁'
export function setName (_name){ 
    name = _name 
}

或者

let name = '老铁'
let setName = function (_name){
    name = _name
}
export {name, setName}

错误用法：

//错误
export '老铁'

//错误
let name = '老铁'
export name

//错误
let setName = function(){}
export setName

import:

import {name, setName} from './person.js'
console.log(name)// '老铁'
setName('你个老6')
console.log(name)// '你个老6'

　　　　　　
** import 引入相当于 const 声明
** ES6 Module是编译加载，所以不能使用表达式和变量
** ES6 Module是单例模式，多次引用同一模块，指向同一个内存地址

export default:

• 一个模块只能有一个默认导出
• import无需{}
• export default后面可以直接跟值

export from:

转发

export {name, setName} from './person.js'
//类似
import {name, setName} from './person.js'
export {name, setName}

import()

动态加载

async function getModule() {
    let Person = await import('./person.js')
}