你值得了解的JavaScript“继承之jquery”使用方法（代码详解）

第你值得了解的JavaScript“继承之jquery”使用方法（代码详解）假如不用，学习下还是可以的

本文粗燥的实现jquery的ready、each、bind、``$.fn.extend、$.extend

初始化$

(function(win){

var_$=function(selector,context){

*通常咱们定义一个函数varFun=function(){}

*然后定义一个Ftotype.init=function(){}

*那么咱们调用init的时候得先要实例化对象varf=newFun()

*然后f.init()

*这里就省去了var$=new$()

returnnew_$.prototype.Init(selector,context);

_$.prototype={

//初始化$

Init:function(selector,context){

this.elements=[];

*传入的类型是function就执行ready事件，如果是document就将document对象插入到this.elements

*主要就是判断$(document).ready和$(function(){})这两种的ready事件的写法

if(typeofselector===function){

this.elements.push(document);

this.ready(selector);

}else{

varcontext=context||document;

varisDocument=(ele)=

Ototype.toString.call(ele)==[objectHTMLDocument]||

[objectDocument]

if(isDocument(selector)){

this.elements.push(selector);

}else{

*如果是字符串的话就查询该节点$(.class)|$(#id)

if(context.querySelectorAll){

vararr=context.querySelectorAll(selector);

for(vari=0;iarr.length;i++){

this.elements.push(arr[i]);

//实现each

each:function(callback){},

//实现ready

ready:function(callback){},

//实现bind

bind:function(type,callback){},

*让两个作用域不一样的对象共享一个方法，让他们的原型指向一致，即Itotype=_$.prototype

*那么原型一致之后就可以共享this.elements属性了。

_$.prototype.Itotype=_$.prototype;

window.$=_$;

})(window||global);

ready

//实现ready

ready:function(callback){

varisDocument=(ele)=Ototype.toString.call(ele)==[objectHTMLDocument]||[objectDocument]

//如果已经取得了节点

if(isDocument(this.elements[0])){

if(document.addEventListener){//判断火狐、谷歌

*DOM树构建完成的时候就会执行DOMContentLoaded

*页面上所有的DOM，样式表，脚本，图片，flash都已经加载完成了，才会触发window.onload

*这也就是$(document).ready()比window.onload执行早的原因

*arguments.callee博客里面有一篇文章[js-递归]里面专门讲到了，这里不再解释了

document.addEventListener(DOMContentLoaded,function(){

document.removeEventListener(DOMContentLoaded,arguments.callee,false)

callback()

},false)

}elseif(document.attachEvent){//判断IE

document.attachEvent(onreadystatechange,function(){

if(document.readyState==complete){

document.detachEvent(onreadystatechange,arguments.callee);

callback()

}elseif(document.lastChild==document.body){//body已经加载完了，就直接回调了

callback()

},

each

//实现each

each:function(callback){

if(this.elements.length0){

for(vari=0;ithis.elements.length;i++){

callback.call(this,this.elements[i],i);

},

bind

//实现bind

bind:function(type,callback){

if(document.addEventListener){//判断火狐、谷歌

this.each(function(item,i){

item.addEventListener(type,callback,false)

}elseif(document.attachEvent){//判断IE

this.each(function(item,i){

item.attachEvent(on+type,callback)

}else{

this.each(function(item,i){//其他浏览器egg:item.onclick=function(){}

item[on+type]=callback

}

$.fn.extend/$.extend

$.fn.extend是为查询的节点对象扩展方法，是基于$的原型扩展的方法

$.extend是扩展常规方法，是$的静态方法

官方给出解释：

jQuery.extend():Mergethecontentsoftwoormoreobjectstogetherintothefirstobject.（把两个或者更多的对象合并到第一个当中）

jQuery.fn.extend():MergethecontentsofanobjectontothejQueryprototypetoprovidenewjQueryinstancemethods.（把对象挂载到jQuery的prototype属性，来扩展一个新的jQuery实例方法）

$.fn.extend方法的初衷是我们扩展之后可以用$().newMetod()这样访问，实际上就是给$原型加一个extend方法。这中间的fn其实类似于命名空间的作用，没什么实际的意义。为的是和$.extend作区分

$.fn.extend

;(function(win){

_$.prototype.Itotype=_$.prototype;

_$.fn=_$.prototype;//把对象挂载到jQuery的prototype属性

varisObj=(o)=Ototype.toString().call(o)===[objectObject]

$.fn.extend=function(obj){

if(isObj(obj)){

for(variinobj){

this[i]=obj//注意这里的this指向是$.prototype

}

$.extend

varisObj=(o)=Ototype.toString().call(o)===[objectObject]

_$.extend=function(obj){

if(isObj(obj)){

for(variinobj){

this[i]=obj[i];//注意这里的this指向是$

}

这俩看上去一模一样啊，没啥区别，注释里面已经说了，this指向不同。咱们来看个例子：

!DOCTYPEhtml

html

head

titlejQuery.extend()与jQuery.fn.extend()区别/title

metacharset=utf-8/

scripttype=text/javascriptsrc=jquery.js/script

!--开始扩展--

scripttype=text/javascript

(function($){

$.extend({

sayHello:function(){

console.log(Hello

$.fn.extend({

sayHello:function(){

console.log(Hello

})(jQuery);

/script

!--调用--

scripttype=text/javascript

$(document).ready(function(){

//$.extend扩展调用

$.sayHello();

//$.fn.extend扩展调用

$(#test).sayHello();

/script

/head

body

divid=test/div

/body

/html

这样以来就看的很明白了。jQuery.extend(object);为扩展jQuery类本身，为自身添加新的方法。$.xxx()

jQuery.fn.extend(object);给jQuery对象添加方法$(#test).xxx()

$.extend常见用法

//在jquery全局对象中扩展一个net命名空间。

$.extend({net:{}});

//方法扩展到之前扩展的Jquery的net命名空间中去。

$.extend($.net,{

sayHello:function(){

console.log(Hello

//extend方法还有一个重载原型

//extend(boolean,dest,src1,src2,src3...),第一个参数boolean代表是否进行深度拷贝

vara={protocol:http,hash:{a:1,b:2}};

varb={host:,hash:{b:1,c:2}};

varresult=$.extend(true,{},a,b);

console.log(result);//{protocol:http,host:,hash:{a:1,b:1,c:2}}

varresult=$.extend(false,{},a,b);

console.log(result);//{protocol:http,host:,hash:{b:1,c:2}}

完整代码

(function(win){

var_$=function(selector,context){

*通常咱们定义一个函数varFun=function(){}

*然后定义一个Ftotype.init=function(){}

*那么咱们调用init的时候得先要实例化对象varf=newFun()

*然后f.init()

*这里就省去了var$=new$()

returnnew_$.prototype.Init(selector,context);

_$.prototype={

//初始化$

Init:function(selector,context){

this.elements=[];

*传入的类型是function就执行ready事件，如果是document就将document对象插入到this.elements

*主要就是判断$(document).ready和$(function(){})这两种的ready事件的写法

if(typeofselector===function){

this.elements.push(document);

this.ready(selector);

}else{

varcontext=context||document;

varisDocument=(ele)=

Ototype.toString.call(ele)==[objectHTMLDocument]||

[objectDocument]

if(isDocument(selector)){

this.elements.push(selector);

}else{

*如果是字符串的话就查询该节点$(.class)|$(#id)

if(context.querySelectorAll){

vararr=context.querySelectorAll(selector);

for(vari=0;iarr.length;i++){

this.elements.push(arr[i]);

//实现each

each:function(callback){

if(this.elements.length0){

for(vari=0;ithis.elements.length;i++){

callback.call(this,this.elements[i],i);

//实现ready

ready:function(callback){

varisDocument=(ele)=

Ototype.toString.call(ele)==[objectHTMLDocument]||

[objectDocument]

//如果已经取得了节点

if(isDocument(this.elements[0])){

if(document.addEventListener){

//判断火狐、谷歌

*DOM树构建完成的时候就会执行DOMContentLoaded

*页面上所有的DOM，样式表，脚本，图片，flash都已经加载完成了，才会触发window.onload

*这也就是$(document).ready()比window.onload执行早的原因

*arguments.callee博客里面有一篇文章js-递归里面专门讲到了，这里不再解释了

document.addEventListener(

DOMContentLoaded,

function(){

document.removeEventListener(

DOMContentLoaded,

arguments.callee,

false

callback();

false

}elseif(document.attachEvent){

//判断IE

document.attachEvent(onreadystatechange,function(){

if(document.readyState==complete){

document.detachEvent(onreadystatechange,arguments.callee);

callback();

}elseif(document.lastChild==document.body){

//body已经加载完了，就直接回调了

callback();

//实现bind

bind:function(type,callback){

if(document.addEventListener){

//判断火