【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代码规范是不抱希望了，只有多写注释才是王道！