如何組織一個模塊代碼

前言：在日常咱們實現代碼的過程當中可能有一塊功能能單獨成爲一個模塊包含幾個方法或是幾個參數。爲了有更好的代碼組織結構和讓程序耦合度更低咱們能夠嘗試的把他組織成一個模塊。

關於IIFE：在把功能模塊化以前，咱們先來了解一個概念IIFE(當即調用函數表達式)，看一下下面這兩段程序。

console.time()
var s = 0;
for (var i = 0; i < 1000000; i++) {
    s += i;
};
console.log(s);
console.timeEnd();

console.time();
(function x() {
    var s = 0;
    for (var i = 0; i < 1000000; i++) {
        s += i;
    };
    console.log(s);
})();
console.timeEnd();

測試結果：

default: 17.2ms;
default: 3.9ms;

運行兩個程序，能夠很明顯的發現第二種比第一種的速度快不少，由於第二種IIFE調用，避免了全局變量，畢竟全局變量的查找是比較耗時的，而且下降了程序的耦合度。

進入正題，假設咱們要實現一我的的功能（自我介紹，穿。。。）如今咱們來編寫這模塊。

var person = (function() {
    var name = '',
        age = 0;
    //初始化
    function init(username, userage) {
        name = username;
        age = userage;
    }
    //自我介紹
    function selfintro() {
        console.log('我是' + name + '今年' + age);
    }
    //吃
    function eat(food) {
        console.log('我是' + name + '我在吃' + food);
    }
    //方法集成爲一個對象
    var personAPI = {
        init : init,
        selfintro : selfintro,
        eat : eat
    };
    //暴露對外接口
    return personAPI;
})();
//調用，先對這我的進行初始化，在調用行爲函數
person.init('cws', 18);
person.selfintro();
person.eat('西瓜');

測試結果：

我是cws今年18
 我是cws我在吃西瓜

這樣是否是把咱們的人的模塊獨立出來了，讓程序更加的清晰，下降了耦合度。
這只是比較簡單的一個功能，我把一個原生的大圖滾動用模塊化封裝了一下，具體可參考：原生實現大圖滾動模塊化demo