模組化(切記：學習思想)

如果不用模組化編寫程式碼，那麼會具有以下問題：

• 程式碼雜亂無章，沒有條理性，不便於維護，不便於複用
• 很多程式碼重複、邏輯重複
• 全域性變數汙染
• 不方便保護私有資料(閉包)

模組化的基本實現：閉包的自呼叫函式

    //日期控制元件
    var DatePicker = (function(){
        return {
            init(){

            }
        }
    })();

    //Header
    //  tabbar
    //  login

    //Content
 

    //  sidebar
    //  table

    //Footer

    var KTV=(function(){
        return {
            pay(){

            },
            xiaofei(){

            }
        }
    })()

AMD模組化 -->requireJS

• AMD：async module define：非同步模組定義
• AMD其實就是requireJS實現的模組化解決方案

其他模組化解決方案：

• CommonJS：Node中使用的模組化解決方案
• CMD（common module define）：seajs中提出來的模組化解決方案
  • 其實CMD可以認為是CommonJS的前端實現
  • seajs由阿里的（玉帛）編寫
  • seajs在2，3年前比較火，從去年開始已經停止更新
    • vue 、angular、react已經集成了各自的模組化
    • es6模組化
    • webpack也有模組化的解決方案

vue、angular、react已經將模組化的思想植入在裡面

AMD和CMD的不同之處：

• amd需要依賴前置，cmd需要依賴就近
• 匯入匯出方式不同：
  • amd通過define定義，return匯出；
  • cmd通過不需要定義，只需要最後通過module.exports、exports匯出

requireJS —— AMD規範

中文網：http://www.requirejs.cn/docs/api.html#jsfiles

基本用法

    //1、通過script標籤匯入requirejs原始檔
    //2、編寫模組檔案，基本格式如下：
    //cart.js
    define([],function(){
        console.log('cart模組');
    })
    //product.js
    define([],function(){
        console.log('product模組');
    })
    //3、首頁呼叫模組：
    require(["cart.js","product.js"],function(){
        //編寫後面的邏輯程式碼
    })
    //等價於：
    require(["cart","product"],function(){
        
    })

入口檔案

配置

    require.config({
        //baseUrl
        //paths
        
    })

定義模組的返回值（返回值相當於模組的入口）

    //cart.js：
    define([],function(){

        return {
            init(){

            },
            addProduct(){

            }
        }
    })

    //首頁：
    require(["cart"],function(cart){
        cart.init();
        cart.addProduct();
    })

• 注意：一般在匯入模組的時候，需要將有返回值的模組在[前面]匯入，無返回值的模組在[後面]匯入

案例——模組依賴子模組

    //productAdd.js
    define([],function(){
        return {
            init(){
                console.log("新增商品");
            }
        }
    })

    //productEdit.js
    define([],function(){
        return {
            init(){
                console.log("編輯商品");
            }
        }
    })

    //product.js
    define(["productAdd","productEdit"],function(productAdd,productEdit){
        return {
            init(){
                console.log("商品列表");
            },
            add(){
                productAdd.init();
            },
            edit(){
                productEdit.init();
            }
        }
    })

    //首頁：
    require(["product"],function(product){
        product.init();

        product.add();

        product.edit();

    })
    

檢測第三方庫是否支援AMD規範

    if ( typeof define === "function" && define.amd ) {
        define([], function() {
            return jQuery;
        } );
    }

• 類似的還有：echarts

常用的模組、資料夾路徑的配置

• 一般用於配置第三方模組，比如jquery、bootstrap、zepto等等

    require.config(
        paths:{
            jquery:"js/lib/jquery-1.11.min",
            zepto:"js/lib/zepto.min",
            bootstrap:"assets/bootstrap/js/bootstrap.min"
        }
    )

    define(["jquery","zepto"],function($,$$){

    })

    require(["jquery","bootstrap"],function($){

    })

外掛

• 外掛列表：https://github.com/requirejs/requirejs/wiki/Plugins
• i18n 國際化
• text 載入檔案（.html檔案。。。）
  • 外掛github地址：https://github.com/requirejs/text

requirejs和vuejs淺顯的比較

• requirejs是一個庫
  • 相當於：一個房間
  • 相當於：一個底盤
  • 功能：只是一種模組化的解決方案
• vue是一個框架
  • 相當於：一棟樓
  • 功能：1、不僅僅是模組化的解決方案

  •  2、減少了DOM的操作(-->jquery的功能)
    

  •  3、。。。。。。
    

requirejs解決迴圈依賴

• a已經依賴了b
• b中先新增require模組的依賴，然後再新增a的依賴，但是並不要去通過回撥函式的形參獲取返回值
  • define(["require","a"],function(require){})
  • 在需要執行a模組程式碼的時候，require("a")()

node中的模組化

• require(“http”).createServer()
• require(“fs”).readFile()
• require(“common/type”).doSth()

前端路由的意義

• 1、通過路由將各個功能從url上面就分辨出來了
  • /user/list
  • /user/3
  • /user/edit/3
• 2、路由還可以進行前進、後退等導航操作

前端路由的實現方式

• 1、監聽window物件的hashchange事件
  • hash值：通過location.hash獲取，獲取的值以#開頭
  • 也可以通過location.hash來設定hash值，當然設定的新hash也應該以#開頭
• 2、history物件:popState/pushState

ES6模組化

瀏覽器除錯

    <script type="module">
        //匯入模組
    </script>

基本用法

    //cart.js
    export default {
        name:"張三",
        age:18
    }

    //index.js
    import cart from "./cart.js"
    cart.name
    cart.age

匯出模組

    //cart.js
    export const age = 18;
    export function f1(){
        console.log("f1函式");
    }
    //預設返回值
    export default {
        init(){
            console.log("初始化");
        }
    }

    //index.js
    import cart,{ age,f1 } from "./cart.js"
    cart.init();
    age,
    f1();

匯入模組

    //index.js
    import cart as cartIndex from "./cart.js"
    import { age as AGE } from "./product.js"

    //使用變數：cartIndex
    //使用變數：AGE

另外一篇前端模組化文章：前端模組化：CommonJS,AMD,CMD,ES6