文章 jQuery诞生记-原理与机制 读后感
要点总结：
-
关于new： （原文出处：详解new function(){}和function(){}()）
- 只要new表达式之后的constructor返回（return）一个引用对象（数组，对象，函数等），都将覆盖new创建的匿名对象（我的理解：this还是那个this，但new以后的返回却不是那个this）;
- 如果返回（return）一个原始类型（无return时其实为return原始类型undefined），那么就返回new创建的匿名对象（我的理解：返回的是this）。
关于第1种情况的代码示例：
var o = new function() {return "圆心"};
alert(o); //将返回显示“[object object] ”
关于第2种情况的代码示例：
var o = new function() {return new String("圆心")};
alert(o); //返回的是“圆心”
-
关于jQuery原理
总体思路：
- 原生的获取对象或对对象的处理都太繁琐，用函数将其包装，使其简单化。
- 将对元素的处理方法通过原型继承的方式进行定义。
原文中有一段文字表述可能有问题：
上面代码显然是有问题的，new的是$.fn.init, $.fn.init的返回值是this. 也就是$()的返回值是$.fn.init的原型对象，尼玛$.fn.init的prototype原型现在就是个光杆司令啊，哟，正好，$.fn对应的原型方法，除了init没用外，其他hide(), each()就是我们需要的。因此，我们需要加上这么一行：
我觉得应该改为：
上面代码显然是有问题的，new的是$.fn.init, $.fn.init的返回值是this. 也就是$()的返回值是$.fn.init的this对象，$()的这个返回值没法访问hide和each方法，why？因为这个返回值的原型对象是$.fn.init.prototype，也就是F.prototype.init.prototype，而hide和each方法是定义在$.fn，也就是F.prototype上，所以根据原型链的查找机理，$()的这个返回值是访问不到hide和each方法的。 因此，我们需要加上这么一行：
好了，现在我们用代码的方式进行演进讲解：
- 原生
var button = document.getElementById("button")
var image1 = document.getElementById("image1")
var image2 = document.getElementById("image2")
button.onclick = function() {
image1.style.display = "none";
image2.style.display = "none";
};
- 化繁为简，进行包装
var $ = function(id) {
return document.getElementById(id);
};
$("button").onclick = function() {
$("image1").style.display = "none";
$("image2").style.display = "none";
};
- 样式处理还是繁琐，继续简化，封装一个方法到元素对象上去
var $ = function(id) {
return document.getElementById(id);
};
HTMLElement.prototype.hide = function() {
this.style.display = "none";
};
$("button").onclick = function() {
$("image1").hide();
$("image2").hide();
};
- IE6~IE8浏览器不认识HTMLElement，上述方法不通用。改进思路：Function的原型扩展大家都认识，创建一个函数，然后通过new这个函数返回HTML元素，再将hide方法绑定到该函数的原型上。
var F = function(id) {
return document.getElementById(id);
};
F.prototype.hide = function() {
this.style.display = "none";
};
new F("button").onclick = function() {
new F("image1").hide();
new F("image2").hide();
};
-
上述方案有问题，原因请参见文章开头关于new的解释：
new F()返回的不是this对象了，而是DOM对象。其原型对象是构造函数.prototype，而该构造函数已经不是F了。所以new F()的返回值根本访问不到hide方法。 -
那就用this来做桥接，new F()还是返回this，DOM对象以属性的方式绑定到this上。原型对象上的hide方法可以通过点的方式访问到DOM对象
var F = function(id) {
this.element = document.getElementById(id);
};
F.prototype.hide = function() {
this.element.style.display = "none";
};
new F("button").element.onclick = function() {
new F("image1").hide();
new F("image2").hide();
};
- 上面的方法，元素的获取直接在F方法中，但是，实际情况，考虑到兼容性实现，元素获取可能会相当复杂，同时方法私有，不能重利用。因此，可以把元素获取方法放在原型上，便于管理和重用。代码如下：
var F = function(id) {
return this.getElementById(id);
};
F.prototype.getElementById = function(id) {
this.element = document.getElementById(id);
return this;
};
F.prototype.hide = function() {
this.element.style.display = "none";
};
new F("button").element.onclick = function() {
new F("image1").hide();
new F("image2").hide();
};
- 能不能不用new
var F = function(id) {
return this.getElementById(id);
};
F.prototype.getElementById = function(id) {
this.element = document.getElementById(id);
return this;
};
F.prototype.hide = function() {
this.element.style.display = "none";
};
var $ = function(id) {
return new F(id);
};
$("button").element.onclick = function() {
$("image1").hide();
$("image2").hide();
};
- 获取元素不仅仅只用id，还有class等其他方式
var F = function(selector, context) {
return this.getNodeList(selector, context);
};
/**
替换掉特殊的getElementById，使用通用的获取list的方式
*/
F.prototype.getNodeList = function(selector, context) {
context = context || document;
this.element = context.querySelectorAll(selector);
return this;
};
var $ = function(selector, context) {
return new F(selector, context);
};
/**
以下代码有些问题，因为现在是操作list了。不过可以用来理解流程。
*/
$("button").element.onclick = function() {
$("image1").hide();
$("image2").hide();
};
- 解决上面提出的问题，遍历list
var F = function(selector, context) {
return this.getNodeList(selector, context);
};
F.prototype.getNodeList = function(selector, context) {
context = context || document;
this.element = context.querySelectorAll(selector);
return this;
};
F.prototype.each = function(fn) {
var i=0, length = this.element.length;
for (; i<length; i+=1) {
fn.call(this.element[i], i, this.element[i]);
}
return this;
};
F.prototype.hide = function() {
this.each(function() {
this.style.display = "none";
});
};
var $ = function(selector, context) {
return new F(selector, context);
};
$("button").element[0].onclick = function() {
$("img").hide();
};
- $("button").element[0] 看上去不爽
var F = function(selector, context) {
return this.init(selector, context);
};
//这个方法已经不是获取list了，应该将名字getNodeList换成更准确的init
F.prototype.init = function(selector, context) {
var nodeList = (context || document).querySelectorAll(selector);
this.length = nodeList.length;
for (var i=0; i<this.length; i+=1) {
/**
每一个DOM对象都以 属性：对象 的方式保存在了this中;
这个属性名=nodeList中每个DOM对象的索引值
*/
this[i] = nodeList[i];
}
return this;
};
F.prototype.each = function(fn) {
var i=0, length = this.length;
for (; i<length; i+=1) {
fn.call(this[i], i, this[i]);
}
return this;
};
F.prototype.hide = function() {
this.each(function() {
this.style.display = "none";
});
};
var $ = function(selector, context) {
return new F(selector, context);
};
//这时可以不用$("button").element[0]了
$("button")[0].onclick = function() {
$("img").hide();
};
- F名字看着不爽，能不能换一个：F → $.fn
var $.fn = function(selector, context) {
return this.init(selector, context);
};
$.fn.prototype.init = function(selector, context) {
var nodeList = (context || document).querySelectorAll(selector);
this.length = nodeList.length;
for (var i=0; i<this.length; i+=1) {
this[i] = nodeList[i];
}
return this;
};
$.fn.prototype.each = function(fn) {
var i=0, length = this.length;
for (; i<length; i+=1) {
fn.call(this[i], i, this[i]);
}
return this;
};
$.fn.prototype.hide = function() {
this.each(function() {
this.style.display = "none";
});
};
var $ = function(selector, context) {
return new $.fn(selector, context);
};
$("button")[0].onclick = function() {
$("img").hide();
};
- 每次扩展新方法，都要 $.fn.prototype.functionName=function(){} 吗？作为插件，每次扩展方法都要访问高级属性prototype好吗？插件应该把这一类难的高级的帮我们隐藏掉，那我们给他们重新起个名字吧，就让 $.fn = F.prototype 吧
var F = function(selector, context) {
return this.init(selector, context);
};
var $ = function(selector, context) {
return new F(selector, context);
};
$.fn = F.prototype;
$.fn.init = function(selector, context) {
var nodeList = (context || document).querySelectorAll(selector);
this.length = nodeList.length;
for (var i=0; i<this.length; i+=1) {
this[i] = nodeList[i];
}
return this;
};
$.fn.each = function(fn) {
var i=0, length = this.length;
for (; i<length; i+=1) {
fn.call(this[i], i, this[i]);
}
return this;
};
$.fn.hide = function() {
this.each(function() {
this.style.display = "none";
});
};
$("button")[0].onclick = function() {
$("img").hide();
};
- 我们看这段代码
var F = function(selector, context) {
return this.init(selector, context);
};
var $ = function(selector, context) {
return new F(selector, context);
};
明显可以合并简化
var $ = function(selector, context) {
return new $.fn.init(selector, context);
};
然后我们再重新审视整段代码发现，除了在其他地方用到了 F.prototype，F在其他地方没有任何使用，也就是说F可以随便定义，那我们可以用把F.prototype改成$.prototype，然后把原来的F定义删除，于是代码变成了
var $ = function(selector, context) {
return new $.fn.init(selector, context);
};
$.fn = $.prototype;
$.fn.init = function(selector, context) {
var nodeList = (context || document).querySelectorAll(selector);
this.length = nodeList.length;
for (var i=0; i<this.length; i+=1) {
this[i] = nodeList[i];
}
return this;
};
$.fn.each = function(fn) {
var i=0, length = this.length;
for (; i<length; i+=1) {
fn.call(this[i], i, this[i]);
}
return this;
};
$.fn.hide = function() {
this.each(function() {
this.style.display = "none";
});
};
$("button")[0].onclick = function() {
$("img").hide();
};
- 但是这个时候我们发现
var $ = function(selector, context) {
return new $.fn.init(selector, context);
};
这段代码是有问题的，问题解释请看我这篇文章开始处这段文字
上面代码显然是有问题的，new的是$.fn.init, $.fn.init的返回值是this. 也就是$()的返回值是$.fn.init的this对象，$()的这个返回值没法访问hide和each方法，why？因为这个返回值的原型对象是$.fn.init.prototype，也就是F.prototype.init.prototype，而hide和each方法是定义在$.fn，也就是F.prototype上，所以根据原型链的查找机理，$()的这个返回值是访问不到hide和each方法的。 因此，我们需要加上这么一行：
那怎么办呢？在指回去不就得了 $.fn.init.prototype = $.fn
于是整段代码变成了现在这样
var $ = function(selector, context) {
return new $.fn.init(selector, context);
};
$.fn = $.prototype;
$.fn.init = function(selector, context) {
var nodeList = (context || document).querySelectorAll(selector);
this.length = nodeList.length;
for (var i=0; i<this.length; i+=1) {
this[i] = nodeList[i];
}
return this;
};
$.fn.init.prototype = $.fn;
$.fn.each = function(fn) {
var i=0, length = this.length;
for (; i<length; i+=1) {
fn.call(this[i], i, this[i]);
}
return this;
};
$.fn.hide = function() {
this.each(function() {
this.style.display = "none";
});
};
$("button")[0].onclick = function() {
$("img").hide();
};
- 在init方法中，判断第一个参数，如果是节点，直接 this[0] = this_node
- 每个扩展方法都要 $.fn.functionName, 太繁琐
$.fn.extend({
css: function() {},
attr: function() {},
data: function() {},
// ...
});
网友评论