abstract：全局變量寫法這種寫法完全沒有約束，基本所有人都會，完全沒啥技巧：// html <input type="text" id="input"/> // javascript var input = document.getElementById("input"
全局變量寫法
這種寫法完全沒有約束，基本所有人都會，完全沒啥技巧：
// html
<input type="text" id="input"/>
// javascript
var input = document.getElementById("input");
function getValue(){
return input.value;
}
function render(){
var value = getValue();
if(!document.getElementById("show")){
var append = document.createElement('span');
append.setAttribute("id", "show");
input.parentNode.appendChild(append);
}
var show = document.getElementById("show");
if(/^[0-9a-zA-Z]+$/.exec(value)){
show.innerHTML = 'Pass!';
}else{
show.innerHTML = 'Failed!';
}
}
input.addEventListener('keyup', function(){
render();
});缺點自然不用多說，變量沒有任何隔離，嚴重污染全局變量，雖然可以達到目的，但極不推薦這種寫法。
對象隔離作用域
鑒于以上寫法的弊端，我們用對象來隔離變量和函數：
var obj = {
input: null,
// 初始化并提供入口調用方法
init: function(config){
this.input = document.getElementById(config.id);
this.bind();
//鏈式調用
return this;
},
// 綁定
bind: function(){
var self = this;
this.input.addEventListener('keyup', function(){
self.render();
});
},
getValue: function(){
return this.input.value;
},
render: function(){
var value = this.getValue();
if(!document.getElementById("show")){
var append = document.createElement('span');
append.setAttribute("id", "show");
input.parentNode.appendChild(append);
}
var show = document.getElementById("show");
if(/^[0-9a-zA-Z]+$/.exec(value)){
show.innerHTML = 'Pass!';
}else{
show.innerHTML = 'Failed!';
}
}
}
window.onload = function(){
obj.init({id: "input"});
}相對于開放式的寫法，上面的這個方法就比較清晰了。有初始化，有內部函數和變量，還提供入口調用方法。
新手能實現上面的方法已經很不錯了，還記得當初做百度前端學院題目的時候，基本就是用對象了。
不過這種方法仍然有弊端。obj 對象中的方法都是公開的，并不是私有的，其他人寫的代碼可以隨意更改這些內容。當多人協作或代碼量很多時，又會產生一系列問題。
函數閉包寫法
var fun = (function(){
var _bind = function(obj){
obj.input.addEventListener('keyup', function(){
obj.render();
});
}
var _getValue = function(obj){
return obj.input.value;
}
var InputFun = function(config){};
InputFun.prototype.init = function(config){
this.input = document.getElementById(config.id);
_bind(this);
return this;
}
InputFun.prototype.render = function(){
var value = _getValue(this);
if(!document.getElementById("show")){
var append = document.createElement('span');
append.setAttribute("id", "show");
input.parentNode.appendChild(append);
}
var show = document.getElementById("show");
if(/^[0-9a-zA-Z]+$/.exec(value)){
show.innerHTML = 'Pass!';
}else{
show.innerHTML = 'Failed!';
}
}
return InputFun;
})();
window.onload = function(){
new fun().init({id: 'input'});
}函數閉包寫法的好處都在自執(zhí)行的閉包里，不會受到外面的影響，而且提供給外面的方法包括 init 和 render。比如我們可以像 JQuery 那樣，稍微對其改造一下：
var $ = function(id){ // 這樣子就不用每次都 new 了
return new fun().init({'id': id});
}window.onload = function(){
$('input');
}還沒有涉及到原型，只是簡單的閉包。
基本上，這已經是一個合格的寫法了。
面向對象
雖然上面的方法以及夠好了，但是我們的目的，是為了使用面向對象。面向對象一直以來都是被認為最佳的編程方式，如果每個人的代碼風格都相似，維護、查看起來就非常的方便。
但是，我想在介紹面向對象之前，先來回憶一下 JS 中的繼承（實現我們放到最后再說）。
提到繼承，我首先想到的就是用 new 來實現。還是以例子為主吧，人->學生->小學生，在 JS 中有原型鏈這么一說，__proto__ 和 prototype ，對于原型鏈就不過多闡述，如果不懂的可以自己去查閱一些資料。
在這里，我還是要說明一下 JS 中的 new 構造，比如 var student = new Person(name)，實際上有三步操作：
var student = {};
student.__proto__ = Person.prototype;
Person.call(student, name)得到的 student 是一個對象，__proto__執(zhí)行 Person 的 prototype，Person.call 相當于 constructor。
function Person(name){
this.name = name;
}
Person.prototype.Say = function(){
console.log(this.name + ' can say!');
}
var ming = new Person("xiaoming");
console.log(ming.__proto__ == Person.prototype) //true new的第二步結果
console.log(ming.name) // 'xiaoming' new 的第三步結果
ming.Say() // 'xiaoming can say!' proto 向上追溯的結果利用 __proto__ 屬性的向上追溯，可以實現一個基于原型鏈的繼承。
function Person(name){
this.name = name;
}
Person.prototype.Say = function(){
console.log(this.name + ' can say!');
}
function Student(name){
Person.call(this, name); //Person 的屬性賦值給 Student
}
Student.prototype = new Person(); //順序不能反，要在最前面
Student.prototype.DoHomeWork = function(){
console.log(this.name + ' can do homework!');
}
var ming = new Student("xiaoming");
ming.DoHomeWork(); //'xiaoming can do homework!'
ming.Say(); //'xiaoming can say!'大概剛認識原型鏈的時候，我也就只能寫出這樣的水平了，我之前的文章。
打開調試工具，看一下 ming 都有哪些東西：
ming name: "xiaoming" __proto__: Person DoHomeWork: () name: undefined //注意這里多了一個 name 屬性 __proto__: Object Say: () constructor: Person(name) __proto__: Object
當調用 ming.Say() 的時候，剛好 ming.__proto__.__proto__ 有這個屬性，這就是鏈式調用的原理，一層一層向下尋找。
這就是最簡單的繼承了。
面向對象進階
來看一看剛才那種做法的弊端。
沒有實現傳統(tǒng)面向對象該有的 super 方法來調用父類方法，鏈式和 super 方法相比還是有一定缺陷的；
造成過多的原型屬性（name），constructor 丟失（constructor 是一個非常重要的屬性，MDN）。
因為鏈式是一層層向上尋找，知道找到為止，很明顯 super 直接調用父類更具有優(yōu)勢。
// 多了原型屬性
console.log(ming.__proto__) // {name: undefined}為什么會多一個 name，原因是因為我們執(zhí)行了 Student.prototype = new Person();，而 new 的第三步會執(zhí)行一個 call 的函數，會使得 Student.prototype.name = undefined，恰好 ming.__proto__ 指向 Student 的 prototype，用了 new 是無法避免的。
// 少了 constructor console.log(ming.constructor == Person) //true console.log(ming.constructor == Student) // false
這也很奇怪，明明 ming 是繼承與 Student，卻返回 false，究其原因，Student.prototype 的 constructor 方法丟失，向上找到了Student.prototype.__proto__ 的 constructor 方法。
再找原因，這句話導致了 Student.prototype 的 constructor 方法丟失：
Student.prototype = new Person();
在這句話之前打一個斷點，曾經是有的，只是被替換掉了：
找到了問題所在，現在來改進：
// fn 用來排除多余的屬性(name)
var fn = function(){};
fn.prototype = Person.prototype;
Student.prototype = new fn();
// 重新添上 constructor 屬性
Student.prototype.constructor = Student;用上面的繼承代碼替換掉之前的 Student.prototype = new Person()
面向對象的封裝
我們不能每一次寫代碼的時候都這樣寫這么多行來繼承吧，所以，于情于理，還是來進行簡單的包裝：
function classInherit(subClass, parentClass){
var fn = function(){};
fn.prototype = parentClass.prototype;
subClass.prototype = new fn();
subClass.prototype.constructor = subClass;
}
classInherit(Student, Person);哈哈，所謂的包裝，就是重抄一下代碼。
進一步完善面向對象
上面的問題只是簡單的解決了多余屬性和 constructor 丟失的問題，而 supper 問題仍然沒有改進。
舉個栗子，來看看 supper 的重要，每個人都會睡覺，sleep 函數是人的一個屬性，學生分為小學生和大學生，小學生晚上 9 點睡覺，大學生 12 點睡覺，于是：
Person.prototype.Sleep = function(){
console.log('Sleep!');
}
function E_Student(){}; //小學生
function C_Student(){}; //大學生
classInherit(E_Student, Person);
classInherit(C_Student, Person);
//重寫 Sleep 方法
E_Student.prototype.Sleep = function(){
console.log('Sleep!');
console.log('Sleep at 9 clock');
}
C_Student.prototype.Sleep = function(){
console.log('Sleep!');
console.log('Sleep at 12 clock');
}對于 Sleep 方法，顯得比較混亂，而我們想要通過 supper，直接調用父類的函數：
E_Student.prototype.Sleep = function(){
this._supper(); //supper 方法
console.log('Sleep at 9 clock');
}
C_Student.prototype.Sleep = function(){
this._supper(); //supper 方法
console.log('Sleep at 12 clock');
}不知道對 supper 的理解正不正確，總感覺怪怪的，歡迎指正！
來看下 JQuery 之父是如何 class 的面向對象，原文在這，源碼如下。
/* Simple JavaScript Inheritance
* By John Resig http://ejohn.org/
* MIT Licensed.
*/
// Inspired by base2 and Prototype
(function(){
// initializing 開關很巧妙的來實現調用原型而不構造，還有回掉
var initializing = false, fnTest = /xyz/.test(function(){xyz;}) ? /\b_super\b/ : /.*/;
// The base Class implementation (does nothing)
// 全局，this 指向 window，最大的父類
this.Class = function(){};
// Create a new Class that inherits from this class
// 繼承的入口
Class.extend = function(prop) {
//保留當前類，一般是父類的原型
var _super = this.prototype;
// Instantiate a base class (but only create the instance,
// don't run the init constructor)
//開關 用來使原型賦值時不調用真正的構成流程
initializing = true;
var prototype = new this();
initializing = false;
// Copy the properties over onto the new prototype
for (var name in prop) {
// Check if we're overwriting an existing function
//對函數判斷，將屬性套到子類上
prototype[name] = typeof prop[name] == "function" &&
typeof _super[name] == "function" && fnTest.test(prop[name]) ?
(function(name, fn){
//用閉包來存儲
return function() {
var tmp = this._super;
// Add a new ._super() method that is the same method
// but on the super-class
this._super = _super[name];
// The method only need to be bound temporarily, so we
// remove it when we're done executing
//實現同名調用
var ret = fn.apply(this, arguments);
this._super = tmp;
return ret;
};
})(name, prop[name]) :
prop[name];
}
// 要返回的子類
function Class() {
// All construction is actually done in the init method
if ( !initializing && this.init )
this.init.apply(this, arguments);
}
//前面介紹過的，繼承
Class.prototype = prototype;
Class.prototype.constructor = Class;
Class.extend = arguments.callee;
return Class;
};
})();這個時候就可以很輕松的實現面向對象，使用如下：
var Person = Class.extend({
init: function(name){
this.name = name;
},
Say: function(name){
console.log(this.name + ' can Say!');
},
Sleep: function(){
console.log(this.name + ' can Sleep!');
}
});
var Student = Person.extend({
init: function(name){
this._super('Student-' + name);
},
Sleep: function(){
this._super();
console.log('And sleep early!');
},
DoHomeWork: function(){
console.log(this.name + ' can do homework!');
}
});
var p = new Person('Li');
p.Say(); //'Li can Say!'
p.Sleep(); //'Li can Sleep!'
var ming = new Student('xiaoming');
ming.Say(); //'Student-xiaoming can Say!'
ming.Sleep();//'Student-xiaoming can Sleep!'
// 'And sleep early!'
ming.DoHomeWork(); //'Student-xiaoming can do homework!'除了 John Resig 的 supper 方法，很多人都做了嘗試，不過我覺得 John Resig 的實現方式非常的妙，也比較貼近 supper 方法，我本人也用源碼調試了好幾個小時，才勉強能理解。John Resig 的頭腦真是令人佩服。
在 JS 中，class 從一開始就屬于關鍵字，在 ES6 終于可以使用 class 來定義類。比如：
class Point {
constructor(x, y){
this.x = x;
this.y = y;
}
toString(){
return '(' + this.x + ',' + this.y + ')';
}
}
var p = new Point(3, 4);
console.log(p.toString()); //'(3,4)'和用 ES5 實現的真的沒有什么差別，反而現在流行的一些庫比 ES6 的 class 能帶來更好的效益。
那么，說了這么多面向對象，現在回到最開始的那個組件的實現——如何用面向對象來實現。
還是利用 John Resig 構造 class 的方法：
var JudgeInput = Class.extend({
init: function(config){
this.input = document.getElementById(config.id);
this._bind();
},
_getValue: function(){
return this.input.value;
},
_render: function(){
var value = this._getValue();
if(!document.getElementById("show")){
var append = document.createElement('span');
append.setAttribute("id", "show");
input.parentNode.appendChild(append);
}
var show = document.getElementById("show");
if(/^[0-9a-zA-Z]+$/.exec(value)){
show.innerHTML = 'Pass!';
}else{
show.innerHTML = 'Failed!';
}
},
_bind: function(){
var self = this;
self.input.addEventListener('keyup', function(){
self._render();
});
}
});
window.onload = function(){
new JudgeInput({id: "input"});
}但是，這樣子，基本功能算是實現了，關鍵是不好擴展，沒有面向對象的精髓。所以，針對目前的情況，我們準備建立一個 Base 基類，init 表示初始化，render 函數表示渲染，bind 函數表示綁定，destory 用來銷毀，同時 get、set 方法提供獲得和更改屬性：
var Base = Class.extend({
init: function(config){
this._config = config;
this.bind();
},
get: function(key){
return this._config[key];
},
set: function(key, value){
this._config[key] = value;
},
bind: function(){
//以后構造
},
render: function(){
//以后構造
},
destory: function(){
//定義銷毀方法
}
});基于這個 Base，我們修改 JudgeInput 如下：
var JudgeInput = Base.extend({
_getValue: function(){
return this.get('input').value;
},
bind: function(){
var self = this;
self.get('input').addEventListener('keyup', function(){
self.render();
});
},
render: function(){
var value = this._getValue();
if(!document.getElementById("show")){
var append = document.createElement('span');
append.setAttribute("id", "show");
input.parentNode.appendChild(append);
}
var show = document.getElementById("show");
if(/^[0-9a-zA-Z]+$/.exec(value)){
show.innerHTML = 'Pass!';
}else{
show.innerHTML = 'Failed!';
}
}
});
window.onload = function(){
new JudgeInput({input: document.getElementById("input")});
}比如，我們后期修改了判斷條件，只有當長度為 5-10 的時候才會返回 success，這個時候能很快定位到 JudgeInput 的 render 函數：
render: function(){ var value = this._getValue();
if(!document.getElementById("show")){
var append = document.createElement('span');
append.setAttribute("id", "show");
input.parentNode.appendChild(append);
} var show = document.getElementById("show"); //修改正則即可
if(/^[0-9a-zA-Z]{5,10}$/.exec(value)){
show.innerHTML = 'Pass!';
}else{
show.innerHTML = 'Failed!';
}
}以我目前的能力，只能理解到這里了。
總結
從一個組件出發(fā)，一步一步爬坑，又跑去介紹 JS 中的面向對象，如果你能看到最后，那么你就可動手一步一步實現一個 JQuery 了，純調侃。
關于一個組件的寫法，從入門級到最終版本，一波三折，不僅要考慮代碼的實用性，還要兼顧后期維護。JS 中實現面向對象，剛接觸 JS 的時候，我能用簡單的原型鏈來實現，后來看了一些文章，發(fā)現了不少問題，在看 John Resig 的 Class，感觸頗深。還好，現在目的是實現了，共勉！