學習zepto.js(原型方法)[1]

新的一週,新的開始,今天來學習一下zepto裏邊的原型方法,就是經過$.進行調用的方法,也是能夠經過$.fn進行擴展的方法:

$.camelCase():

方法接收一個字符串,將連字符格式的字符串轉爲駝峯格式的字符串:

$.camelCase("login-name"); // ->loginName $.camelCase("loginName"); // ->不做處理

(本人發現zepto中的原型方法都是經過將匿名函數賦值給變量的方式來進行聲明的,而直接使用function聲明的函數在外部是獲取不到的)解釋的不詳細，是由於原型方法都有一個原型的引用，而那些普通函數沒有作這個引用，好區分而已

經過一個正則匹配連字符及後邊的一個字符(若是有的話);

$.contains():

方法接受兩個參數,均爲Dom節點類型,檢查第一個參數是否包含第二個參數;

$.contains(document.getElementsByTagName("html")[0],document.getElementsByTagName("body")[0])// 返回true 
$.contains(document.getElementsByTagName("body")[0],document.getElementsByTagName("html")[0])// 返回false 
$.contains(document.getElementsByTagName("body")[0],document.getElementsByTagName("body")[0])// 返回false

高性能JavaScript裏邊曾經提到過這種寫法,一個方法須要作兼容處理時,寫成這樣會比較節省資源,而不是在方法內部判斷並執行,由於用戶在使用的過程當中不可能更換瀏覽器(原話忘記了,差很少就是這意思.);

若是存在contains方法,這個就很少作解釋了,瀏覽器內置了處理方法,包含爲true,其他爲false,

若是不存在,那麼就須要本身去作一個方法來實現一樣的功能(這應該就是兼容的意義所在吧)

只有一個問題,若是將兩個參數位置顛倒或兩個參數相等,則函數會循環至html元素纔會中止(雖然說這種狀況會不多出現);

$.each():

方法用於循環數組或json,傳入兩個參數,第一個是要循環的對象,第二個是回調函數(每次循環都會執行一次迭代),zepto會經過當前循環對象執行回調並傳入兩個參數,第一個是數組中的下標或者json中的key,第二個參數爲當前對象的值,回調中能夠返回一個bool值,若是返回false,則會終止當前循環並返回當前對象(第一個參數);

$.each([123], function (index, item) { 
　　console.log(this+"|"+index+"|"+item) ;//123|0|123 
}); 
$.each({name:'niko',age:18}, function (key, value) { 
　　console.log(this+"|"+key+"|"+value) ;//niko|name|niko 

}); 
$.each([123,233], function () { 

　　if(this === 233) return false;//有效值僅僅爲false,其他均忽視 
});

//回調函數中的命名是無所謂的,a|b都是能夠的,可是合理的命名能讓其餘看到這段代碼的同窗明白你要作的事情;

 

likeArray函數就不貼了,判斷傳入參數的length屬性是否爲number,因此說,像一些nodeList之類的也是能夠放心使用$.each而不用擔憂方法會走for-in循環,若是數組順序對邏輯的執行沒有影響仍是推薦本身寫一個for循環或while循環,以下:

var array = [1,2]; for (var length = array.length - 1; length >= 0; length--) { //do..  } var length = array.length; while (length--) { //do...  }

//遞減的性能要比遞增的性能好點(說話不說那麼絕對,不留下一個噴點- -)

$.extend():

該方法用來繼承,也是擴展插件所需的方法,方法有效執行須接收兩個以上的參數,第一個參數爲目標對象,第二個之後的爲來源,來源會覆蓋目標的原有屬性,默認爲淺複製,若是想要深度複製,則將第一個參數設爲true,而後是目標對象.來源...

var target = {}; $.extend(traget, {name:'niko'});//淺複製 
$.extend(true, target, {name:'niko'});//深度複製()

方法的執行過程爲先將除了第一個參數之外全部的參數取出做爲來源值(默認認爲是淺複製),而後判斷target是否爲boolean類型的值,若是是,則將deep變量賦值爲target,並將target賦值爲來源值數組中的第一個([].shift(),將數組中第一個元素從數組中刪除並返回);接下來循環來源值,調用extend方法;

extend方法接收三個參數,第一個爲目標對象,第二個爲來源值,第三個是標識是否深度複製的.

方法將會枚舉來源值,並判斷是否爲深度複製以及值是否爲一個Object對象或數組,若是是的話,將會新建立一個Object或數組,而後遞歸調用extend方法,脫離引用關係(注:自定義對象將不會脫離引用關係);

不然就執行普通的複製;

 var target1 = {}; 
var target2 = {}; 
target1.quote = { 
　　name : "name", 
　　array : [1,2,3] 
}; 
target2.quote = { 
　　name : "name", 
　　array : [1,2,3] 
}; 

var copy = {}; 
var copy_deep = {}; 
$.extend(copy,target1); 
$.extend(true, copy_deep,target2); 
copy.quote.name = "change"; 
copy_deep.quote.name = "change"; 
copy.quote.array.push(4); 
copy_deep.quote.array.push(4); 
console.log(target1.quote); 
console.log(target2.quote);

該方法返回值接收不接收是無所謂的- -方法返回目標對象的緣由是爲了鏈式操做,通過extend之後直接使用便可.

$.fn:

這個不是一個方法,而是一個對象,指向Zepto對象的prototype,因此說,使用$.extend來使$.fn繼承某些方法,進行擴展插件.

$.fn.alert = function () { 
　　alert(this.html());//this指向調用該方法的Zepto對象 
} 
$("<span>hello</span>").alert();//-->hello 
/*這種是直接給key賦值,若是有多個,須結合$.extend使用*/
 $.extend($.fn, { alert : function () { 
　　　　alert(this.html());//this指向調用該方法的Zepto對象 
　　}, confirm : function () { 
　　　　confirm(this.html());//this指向調用該方法的Zepto對象  
　　} 
});

PS:爲了配合鏈式操做,擴展的方法最好將this返回;

由於是個對象,因此就不貼碼了.

今天先寫這麼點兒,快下班了.收工.天天自學一點.