常规的通过构造函数创建实例的方法如下:
var A = function(selector, context) {
......
}
A.prototype = {
name: function(){},
age: function(){}
}
var a = new A();
a.name();
而使用jQuery的方法创建实例则是
$().ready();
$().noConflict();
来看看jQuery是如何通过不需要new就能创建一个新的实例:
这是jQuery的实现源码:
(function(window, undefined) {
var
// ...
jQuery = function(selector, context) {
return new jQuery.fn.init(selector, context, rootjQuery);//返回实例
},
jQuery.fn = jQuery.prototype = {
init: function(selector, context, rootjQuery) {
return this;//this指向实例
}
}
jQuery.fn.init.prototype = jQuery.fn;//显性地将init方法的原型定义为jQuery.fn,也就是jQuery.prototype(jQuery的原型)
})(window);
这样每次使用jQuery的时候就会产生一个新的实例。
定义window.$ = window.jQuery
就能够用$代替jQuery。
在jQuery中,可以对方法进行链式调用。使用链式调用可以节约代码,提高效率。
$('div').removeClass('active').addClass('hello');
要能够进行链式调用,必须在第一个方法的调用后返回对象本身。
比如:
$('div').removeClass('active').addClass('hello');
分解
a = $('div');
a.removeClass('active');
a.addClass('hello');
实现链式的基本条件就是实例this的存在,并且是同一个。
A.prototype = {
init: function() {
return this;
},
name: function() {
return this;
}
}
jQuery给开发者提供了可以为jQuery添加属性和方法的接口
使用jQuery.fn.extend()来为对象添加方法。
在jQuery的源码中可以看到,jQuery.extend和jQuery.fn.extend其实是指向同一个方法的不同引用。
jQuery.extend = jQuery.fn.extend = function() {
......
}
jQuery.extend 对jQuery本身的属性和方法进行了扩展
jQuery.fn.extend 对jQuery.fn的属性和方法进行了扩展,也就是jQuery的原型进行扩展
以上两种扩展都不会破坏jQuery的原有的方法和属性。
它们的官方解释是:
1)jQuery.extend(): 把两个或者更多的对象合并到第一个当中,
2)jQuery.fn.extend():把对象挂载到 jQuery 的 prototype 属性,来扩展一个新的 jQuery 实例方法。
通过一开始保存全局变量的 window.jQuery 以及 windw.$ 。
当需要处理冲突的时候,调用静态方法 noConflict(),让出变量的控制权。
让出了这两个符号之后,是否就不能在我们的代码中使用 jQuery 或者呢 $ 呢?其实,还是可以使用的:
// 让出 jQuery 、$ 的控制权不代表不能使用 jQuery 和 $ ,方法如下:
var query = jQuery.noConflict(true);
(function($) {
// 插件或其他形式的代码,也可以将参数设为 jQuery
})(query);
// ... 其他用 $ 作为别名的库的代码
参考文章1
参考文章2
参考文章3