一個組件的誕生

你是一個新手前端工程師，今天你接到了一個需求，寫一個banner。banner嘛，大家都知道，就是一個用來展示圖片的東西，不同的圖片可以滾動切換。

你心想著這很簡單啊，于是刷刷刷寫了一個。

JS

var banner = {
    init: function() {
        this.addEvent();
    },
    addEvent: function() {
        var buttonLeft = document.querySelector(quot;.button-leftquot;);
        var buttonRight = document.querySelector(quot;.button-rightquot;);
        buttonLeft.addEventListener(quot;clickquot;, function() {
            this.switchClassName(1)
        })
        buttonRight.addEventListener(quot;clickquot;, function() {
            this.switchClassName(-1)
        })

    },
    switchClassName: function(direction) {
        // 切換Class類名
    }
}

banner.init();

HTML

lt;div class=quot;bannerquot;gt;
    lt;ligt;
        lt;img src=http://www.tuicool.com/articles/quot;1.jpgquot;gt;lt;/imggt;
    lt;/ligt;
    lt;ligt;
        lt;img src=quot;2.jpgquot;gt;lt;/imggt;
    lt;/ligt;
    lt;ligt;
        lt;img src=quot;3.jpgquot;gt;lt;/imggt;
    lt;/ligt;
    lt;div class=quot;button-leftquot;gt;lt;/divgt;
    lt;div class=quot;button-rightquot;gt;lt;/divgt;
lt;/divgt;

正當你覺得自己可以刷知乎的時候，主管把你叫到一邊，告訴你：

• 如果你這個頁面上需要有兩個banner，怎么辦呢？復制粘貼嗎?
• 如果在需要在某個時間點從頁面上移除banner，怎么辦呢？手動remove節點嗎，銷毀對象嗎？
• 如果banner中圖片的URL是從服務端API請求到的動態的數據，難道要用一個個用修改圖片的src的方法來顯示這些數據嗎？

看到這里，你的內心是崩潰的。

面向對象大法

這時，你想起了大學時學過的面向對象。你把你的組件改成了這樣：

JS

var Banner = function(options) {
    this._init(options);
}

Banner.prototype.init = function() {
    this.addEvent();
}

Banner.prototype.addEvent = function() {
    var buttonLeft = document.querySelector(quot;.button-leftquot;);
    var buttonRight = document.querySelector(quot;.button-rightquot;);
    buttonLeft.addEventListener(quot;clickquot;, function() {
        this.switchClassName(1);
    })
    buttonRight.addEventListener(quot;clickquot;, function() {
        this.switchClassName(-1);
    })
}

Banner.prototype.switchClassName = function(direction) {
    // 切換Class類名
}

Banner.prototype.destroy = function() {
    //todo:解綁事件
}

//初始化
var banner1 = new Banner();
var banner2 = new Banner();

//銷毀
banner1.destroy();
banner2.destroy();

棒，這樣就可以輕松的使用多個banner，并通過調用 init 和 destroy 等生命周期方法來初始化和銷毀組件了。

生命周期

這是組件開發中的一個術語。如果把組件比作一個生物，我們設計的API，比如 init 和 destroy 就相當于這個生物的出生和死亡。一個組件從 init 被調用時被初始化，渲染到頁面上，然后和用戶發生交互，這時調用的方法也屬于生命周期的一部分。用戶界面隨著用戶的交互而發生變化，所以組件也不是一成不變的。生命周期方法其實就是在組件的某個階段會被調用的方法。