自己也能封裝jquery,寫自己的jquery

標籤：style   io   ar   for   sp   on   cti   ad   ef   

//現在大大多項目都是用jquery開發的，Jquery 很好用，不妨自己寫一下自己的jquery ，瞭解Jquery內部實現的原理。 //和上篇隨筆一樣,採用物件導向的方法封裝自己的js庫.

1.和jquery 一樣,jquery $()方法裡面.能傳四種不同的參數如:

　　$("")一個字串

　　　　　字串的形式有三種情況:$("#id"),$(".class"),$("p");　

     $(function(){}),函數,

　　　　只有一情況,就是window.onload

      $(this),對象

function XQuery(vArg){

　　this.elements = [];//用來儲存選中的數組。

　　switch(typeof vArg){ 　　　case "function": 　　　　　　bindEvent(window,"load",vArg); 　　　　break; 　　case "string": 　　　　switch(vArg.charAt(0)){ 　　　　case "#"://id選取器

　　　　　　var obj = document.getElementById(vArg.substring(1)); 　　　　　　this.elements.push(obj); 　　　　break; 　　　　case"."://類別選取器 　　　　　　this.elements = getElementsByClassName(document,vArg.substring(1)); 　　　　break; 　　　　default://標籤選取器 　　　　　　this.elements = document.getElementsByTagName(vArg); 　　　　break; 　　} 　　break; 　　case "object": 　　　　this.elements.push(vArg); 　　break; 　　}

}

 

//寫一個類似Jquery的$方法

function $(vArg){

　　return new xQuery(vArg);

}

 

//下面來通過原型的方法給xQuery對象添加各種方法:

xQuery.prototype = {

　　click : function(fn){

　　　　var i = 0;

　　　　for(i=0;i<this.elements.length;i++){

　　　　　　bindEvent(this.elements[i],"click",fn);

　　　　}

　　　　i = null;//通過js的範圍我們知道,這時候i還有值的,i = this.elements.length;,所以我們需要手動釋放i;

　　　　//為了實現jquery的鏈式操作,我們需要返回當前對象

　　　　return this;

　　},

 　　hover :  function(fnOver,fnOut){

　　　　var i =0 ;

　　　　for(i = 0; i < this.elements.length; i++){

　　　　　　if(fnOver){ 　　　　　　　　bindEvent(this.elements[i],"mouseover",fnOver); 　　　　　　} 　　　　　　if(fnOut){ 　　　　　　　　bindEvent(this.elements[i],"mouseout",fnOut); 　　　　　　} 　　　　}

　　　　return this; 　　},

　　css : function(attr,value){

　　　　　if(arguments.length == 2){//傳兩個參數的時候,設定樣式　　　　　

　　　　　　for(var i = 0;i < this.elements.length;i++){ 　　　　　　　　this.elements[i].style[attr] = value;    　　　　　　}

　　　　　} 　　　　　else{ //傳進來一個參數.又分兩種情況,一種是字串,一種是json的形式 　　　　　　　　if(typeof attr == "string"){ 　　　　　　　　　　return getStyle(this.elements[0],attr) 　　　　　　　　} 　　　　　　　　else{//以json的形式傳進來的 　　　　　　　　　　for(var i = 0;i < this.elements.length;i++){ 　　　　　　　　　　　　for(var a in attr){ 　　　　　　　　　　　　　　this.elements[i].style[a] = attr[a]; 　　　　　　　　　　　　} 　　　　　　　　　　} 　　　　　　　　　　return this; 　　　　　　　　} 　　　　 } 　　}, 　　extend : function(name,fn){ //xQuery 外掛程式擴充 　　　　xQuery.prototype[name] = fn; 　　},//....好了就寫這麼多,其它的方法的實現都差不多, };

//傳統的js頁面只能有一個window.onload = function(){};

//要想要多個的話得用事件綁定的方式.

function bindEvent(obj, ev, fn){ 　　if(obj.addEventListener){ 　　　　obj.addEventListener(ev, function(e){ 　　　　　　if(!fn.call(obj)){//當方法具有傳回值的時候. 　　　　　　　　e.cancelBubble = true;//阻止冒泡 　　　　　　　e.preventDefault();//阻止預設事件 　　　　　　} 　　　　}, false); 　　} 　　else{//低版本的IE用的是attchEvent; 　　　　obj.attachEvent(‘on‘+ev, function(){ 　　　　if(!fn.call(obj)){ 　　　　　　event.cancelBubble = true;//阻止冒泡 　　　　　　return false;    //阻止預設事件 　　　　　} 　　　　}) 　　} }

//擷取樣式 function getStyle(obj,attr){ 　if(obj.currentStyle){ 　　　return obj.currentStyle[attr]; 　}   else{ 　　　return getComputedStyle(obj,false)[attr];　 　} }

//總結:xQuery 只是實現了一很小部分的JQuery功能,以此勉勵自己在用別人的架構的同時,要明白基原理,不能做傻瓜式開發.

自己也能封裝jquery,寫自己的jquery