JavaScript的設計模式(二)- 模塊化模式

在JS模塊化中我們可以分爲

1. 對象表示法

2. AMD模塊

3. CommonJS

4. ECMAScript Harmony

5. 模塊化模式

一.對象表示法

在對象字面值的標記裏，一個對象被描述爲一組以逗號分隔的名稱/值對括在大括號（{}）的集合

在對象裏面 我們可以存儲很多東西 字符串 ，數字 ， 數組 ，方法 ，通過鍵值對的方法存放在對象中

let obj = {
    string : '我是一個字符串',
    number : 12,
    array : ['1','2'],
    fun : ()=>{
       console.log('我是一個方法');
       return false;
    }
}
console.log(obj.string); //我是一個字符串
console.log(obj.number); //12
console.log(obj.array);  //[ '1', '2' ]
console.log(obj.fun());  // 打印我是一個方法 並返回false

二.模塊化模式

在JavaScript中，模塊化模式用來進一步模擬類的概念，因爲在ES6以前是類的概念  都是通過創建對象來實現 加上 閉包來實現代碼的公共/私有的方法和變量 從而從全局範圍中屏蔽特定的部分。這個結果是可以減少我們的函數名稱與在頁面中其他腳本區域定義的函數名稱衝突的可能性。

let selfObj = (()=>{
    /* 在這裏可以創建一個方法，在外部只能調用 不可修改 */
    let obj = {

    }

    let _selfFn = ()=>{
         console.log('私有方法');
         return false;
    }

    return {
        fn : _selfFn,
    }
})()

console.log(selfObj); // 在這裏我們可以拿到一個方法
console.log(selfObj.fn()); //通過模塊可以方法到這個方法 
console.log(fn()); //fn is not defined  在外部是拿不到這個方法的

/* 
有時候我們想要修改內容的一些東西 或者是 需要外部的一些參數，我們可以通過參數的方法傳入到內部去
*/
let gObj = ((window)=>{
    console.log(window,'111');
    /* 在內部可以通過參數外部需要的值 */
})('window');
console.log(gObj);

三.AMD模式加載

在 modal.js
let model = (()=>{
    let obj = {

        getName : ()=>{
            
            return '我是名字';
        }

    };
    return obj;
})();


export {
    model,
}

在其他的頁面 兩個引入
let obj = require('./modal');
console.log(obj.model.getName()); //我是名字

import { name } from './modal.js';
console.log(name,'dddd');