【JS編寫規範一】庫 || 組件：ES5書寫示慄

以下所有示慄以【JQ】爲主（白盒模式僅供參考）

---

一、書寫方式之 —— “工廠模式”

function $$(a) {
    var dom = document.getElementById(a)
    return {
        css: function(klass) {
            var css = window.getComputedStyle(dom, null)
            return css[klass]
        }
    }
}

這也是我最常用的編方式，用來編寫插件以及常規代碼的書寫，用return方式返回該函數子集對象，ES6情況下exports導出，差異不大。

$$(‘login’)

這裏返回的結果是。

$(‘#login’)

以下是JQ的返回

這當然不是我們想要的，JQ這邊應該還有個dom的節點的返回，我們在工廠模式寫return一個dom對象也不難實現，但我不想讓你直接看到我定義的所有方法這就難了。

---

二、書寫方式之 —— “混合模式”

var $$ = function(a) {
	this.dom = document.getElementById(a)
}
$$.prototype.css = function(klass) {
    var css = window.getComputedStyle(this.dom, null)
    return css[klass]
}

$$(‘login’)

以下是返回的結果

這裏成功的拿到了dom節點並把函數塞到了_ proto _下，我們試着調用.css函數

$$(‘login’).css(‘height’)

能實現，但包含了原型則必須實例化，我並不想看到這一點，則用最終以下的方式。

---

三、書寫方式之 —— “超混模式”

function $$(a) {
    var $ = function(a) {
        this.dom = document.getElementById(a)
    }
    $.prototype.css = function(klass) {
        var css = window.getComputedStyle(this.dom, null)
        return css[klass]
    }
    return new $(a)
}

$$(‘login’)

以下是返回的結果

其實也就是封裝了new的過程，這樣就成功返回了想要的結果。

---

關於

make：o︻そ╆OVE▅▅▅▆▇◤（清一色天空）

blog：http://blog.csdn.net/mcky_love

掘金：https://juejin.im/user/59fbe6c66fb9a045186a159a/posts

---

結束語

JQ的封裝遠比你看到的麻煩（例如各種兼容寫法），並且我們實現自己的庫也並非要與JQ一樣。
如今每個人寫法各異，按照需求不同，功能不同，當今的底層架構以及插件已是越寫越複雜（例如偏函數 / 柯里化 + 各種算法堆砌），所以統一JS代碼規範是不抱希望了，只有多寫註釋纔是王道！