新的一周,新的開始,今天來學習一下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傳回;
因為是個對象,是以就不貼碼了.
今天先寫這麼點兒,快下班了.收工.每天自學一點.