你值得了解的JavaScript“繼承之jquery”使用方法（代碼詳解）

第你值得了解的JavaScript“繼承之jquery”使用方法（代碼詳解）假如不用，學(xué)習(xí)下還是可以的

本文粗燥的實(shí)現(xiàn)jquery的ready、each、bind、``$.fn.extend、$.extend

初始化$

(function(win){

var_$=function(selector,context){

*通常咱們定義一個(gè)函數(shù)varFun=function(){}

*然后定義一個(gè)Ftotype.init=function(){}

*那么咱們調(diào)用init的時(shí)候得先要實(shí)例化對象varf=newFun()

*然后f.init()

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

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

_$.prototype={

//初始化$

Init:function(selector,context){

this.elements=[];

*傳入的類型是function就執(zhí)行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{

*如果是字符串的話就查詢該節(jié)點(diǎn)$(.class)|$(#id)

if(context.querySelectorAll){

vararr=context.querySelectorAll(selector);

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

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

//實(shí)現(xiàn)each

each:function(callback){},

//實(shí)現(xiàn)ready

ready:function(callback){},

//實(shí)現(xiàn)bind

bind:function(type,callback){},

*讓兩個(gè)作用域不一樣的對象共享一個(gè)方法，讓他們的原型指向一致，即Itotype=_$.prototype

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

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

window.$=_$;

})(window||global);

ready

//實(shí)現(xiàn)ready

ready:function(callback){

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

//如果已經(jīng)取得了節(jié)點(diǎn)

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

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

*DOM樹構(gòu)建完成的時(shí)候就會(huì)執(zhí)行DOMContentLoaded

*頁面上所有的DOM，樣式表，腳本，圖片，flash都已經(jīng)加載完成了，才會(huì)觸發(fā)window.onload

*這也就是$(document).ready()比window.onload執(zhí)行早的原因

*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已經(jīng)加載完了，就直接回調(diào)了

callback()

},

each

//實(shí)現(xiàn)each

each:function(callback){

if(this.elements.length0){

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

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

},

bind

//實(shí)現(xiàn)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是為查詢的節(jié)點(diǎn)對象擴(kuò)展方法，是基于$的原型擴(kuò)展的方法

$.extend是擴(kuò)展常規(guī)方法，是$的靜態(tài)方法

官方給出解釋：

jQuery.extend():Mergethecontentsoftwoormoreobjectstogetherintothefirstobject.（把兩個(gè)或者更多的對象合并到第一個(gè)當(dāng)中）

jQuery.fn.extend():MergethecontentsofanobjectontothejQueryprototypetoprovidenewjQueryinstancemethods.（把對象掛載到j(luò)Query的prototype屬性，來擴(kuò)展一個(gè)新的jQuery實(shí)例方法）

$.fn.extend方法的初衷是我們擴(kuò)展之后可以用$().newMetod()這樣訪問，實(shí)際上就是給$原型加一個(gè)extend方法。這中間的fn其實(shí)類似于命名空間的作用，沒什么實(shí)際的意義。為的是和$.extend作區(qū)分

$.fn.extend

;(function(win){

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

_$.fn=_$.prototype;//把對象掛載到j(luò)Query的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指向是$

}

這倆看上去一模一樣啊，沒啥區(qū)別，注釋里面已經(jīng)說了，this指向不同。咱們來看個(gè)例子：

!DOCTYPEhtml

html

head

titlejQuery.extend()與jQuery.fn.extend()區(qū)別/title

metacharset=utf-8/

scripttype=text/javascriptsrc=jquery.js/script

!--開始擴(kuò)展--

scripttype=text/javascript

(function($){

$.extend({

sayHello:function(){

console.log(Hello

$.fn.extend({

sayHello:function(){

console.log(Hello

})(jQuery);

/script

!--調(diào)用--

scripttype=text/javascript

$(document).ready(function(){

//$.extend擴(kuò)展調(diào)用

$.sayHello();

//$.fn.extend擴(kuò)展調(diào)用

$(#test).sayHello();

/script

/head

body

divid=test/div

/body

/html

這樣以來就看的很明白了。jQuery.extend(object);為擴(kuò)展jQuery類本身，為自身添加新的方法。$.xxx()

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

$.extend常見用法

//在jquery全局對象中擴(kuò)展一個(gè)net命名空間。

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

//方法擴(kuò)展到之前擴(kuò)展的Jquery的net命名空間中去。

$.extend($.net,{

sayHello:function(){

console.log(Hello

//extend方法還有一個(gè)重載原型

//extend(boolean,dest,src1,src2,src3...),第一個(gè)參數(shù)boolean代表是否進(jìn)行深度拷貝

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){

*通常咱們定義一個(gè)函數(shù)varFun=function(){}

*然后定義一個(gè)Ftotype.init=function(){}

*那么咱們調(diào)用init的時(shí)候得先要實(shí)例化對象varf=newFun()

*然后f.init()

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

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

_$.prototype={

//初始化$

Init:function(selector,context){

this.elements=[];

*傳入的類型是function就執(zhí)行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{

*如果是字符串的話就查詢該節(jié)點(diǎn)$(.class)|$(#id)

if(context.querySelectorAll){

vararr=context.querySelectorAll(selector);

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

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

//實(shí)現(xiàn)each

each:function(callback){

if(this.elements.length0){

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

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

//實(shí)現(xiàn)ready

ready:function(callback){

varisDocument=(ele)=

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

[objectDocument]

//如果已經(jīng)取得了節(jié)點(diǎn)

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

if(document.addEventListener){

//判斷火狐、谷歌

*DOM樹構(gòu)建完成的時(shí)候就會(huì)執(zhí)行DOMContentLoaded

*頁面上所有的DOM，樣式表，腳本，圖片，flash都已經(jīng)加載完成了，才會(huì)觸發(fā)window.onload

*這也就是$(document).ready()比window.onload執(zhí)行早的原因

*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已經(jīng)加載完了，就直接回調(diào)了

callback();

//實(shí)現(xiàn)bind

bind:function(type,callback){

if(document.addEventListener){

//判斷火