前 言
絮叨絮叨
之前我們介紹過JQuery怎么自定義一個插件，但沒有詳細介紹過JQuery，那么今天呢。。。。我們還是不說JQuery，哈哈哈哈
但是今天我們介紹一款和JQuery超級像的一款框架——Zepto。
之所以說Zepto和JQuery超級像，是因為他們的用法一樣，除了有那么一點不同之外，基本沒有任何區別，如果你會用JQuery，那么，你就會用Zepto。
但是相比較之下，Zepto是比JQuery更加輕量級的一款JavaScript庫，更加傾向於應用的開發。
那么所以呢，今天就先說一部分——Zepto里面的原型方法。
| Zepto的原型方法 |
zepto里邊的原型方法,就是通過$.進行調用的方法,也是可以通過$.fn進行擴展的方法
1$.camelCase()
方法接收一個字符串,將連字符格式的字符串轉為駝峰格式的字符串:
$.camelCase("login-name"); // ->loginName $.camelCase("loginName"); // ->不作處理
zepto中的原型方法都是通過將匿名函數賦值給變量的方式來進行聲明的,而直接使用function聲明的函數在外部是獲取不到的，是因為原型方法都有一個原型的引用，而那些普通函數沒有做這個引用
2$.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
3$.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都是可以的,但是合理的命名能讓其他看到這段代碼的同學明白你要做的事情;
4$.extend
該方法用來繼承,也是擴展插件所需的方法,方法有效執行須接收兩個以上的參數,第一個參數為目標對象,第二個以后的為來源,來源會覆蓋目標的原有屬性,默認為淺復制,如果想要深度復制,則將第一個參數設為true,然后是目標對象.來源...
var target = {}; $.extend(traget, {name:'niko'});//淺復制 $.extend(true, target, {name:'niko'});//深度復制()
方法的執行過程為先將除了第一個參數以外所有的參數取出作為來源值(默認認為是淺復制),然后判斷target是否為boolean類型的值,如果是,則將deep變量賦值為target,並將target賦值為來源值數組中的第一個([].shift(),將數組中第一個元素從數組中刪除並返回);接下來循環來源值,調用extend方法;
extend方法接收三個參數,第一個為目標對象,第二個為來源值,第三個是標識是否深度復制的.
方法將會枚舉來源值,並判斷是否為深度復制以及值是否為一個Object對象或數組,如果是的話,將會新創建一個Object或數組,然后遞歸調用extend方法,脫離引用關系(注:自定義對象將不會脫離引用關系);
否則就執行普通的復制;
5$.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對象
}
});
6$.grep()
作用與Array.filter類似(其實就是調用的filter方法- -)
通過傳入兩個參數,第一個為類數組的對象,第二個為用來執行判斷的函數;
var array = [1,2,3,4,5];
var even = $.grep(array,function (value) {
return value % 2 === 0;
});
console.log(even); // --> [2,4]
函數可以接收到三個傳遞來的參數,上邊只接收了一個,第二個是當前item在array中的下標,從0開始- -,第三個是array本身;
7$.inArray()
接收兩到三個參數,第一個是item(中文不知道該如何形容,子項?就是),第二個是一個數組對象,第三個是可選的開始下標,該方法用來檢查第一個參數是否存在與自身.返回值是一個下標,從0開始的.
如果沒有找到,就會返回-1;
$.inArray("aaa",["aaa","bbb","ccc"]); // -->0
$.inArray("aaa",["aaa","bbb","ccc","ccc","aaa"],3) // -->4
inArray方法也是直接調用了Array的idnexOf方法,這些都是ES5的新方法,在zepto里邊是沒有做兼容處理的,只是簡單的call方法,畢竟是為了移動端而生的;
8$.isArray()
該方法只接收一個參數,一個對象,用來判斷該對象是否為Array,返回一個boolean值,
$.isArray([]); // --> true
該方法是做了一個兼容處理的,如果Array存在isArray方法,則直接調用,否則賦值為自定義的一個函數:
9$.isFunction
方法只接收一個參數,一個對象,判斷是否為function對象,別看這方法只是用來檢查參數是否為function,里邊衍生出的幾個變量和方法還是挺有意思的.
function test1 () {}
var test2 = function (){};
console.log($.isFunction(test1)); // -->true
console.log($.isFunction(test2)); // -->true
10$.isPlainObject()
該方法判斷傳入對象是否為一個純潔粹的對象,就是一個通過"{}"或者 new Object 來創建的對象.
$.isPlainObject({});// ..> true
$.isPlainObject(new Object());// --> true
$.isPlainObject(1);// --> false
11$.map()
該函數返回一個數組,傳入兩個參數,第一個是要遍歷的對象,可以使一個類數組,也可以是一個對象,第二個參數是一個回調函數,在回調函數返回的值,會被存入集合並通過$.map來返回,返回的是一個數組;
$.map({name:'niko', age : 18}, function (value, key) {
if (key === 'age') return value;
}) // --> [18]
$.map([1,2,3,4], function (item, index) {
return item * 2;
}) // --> [2,4,6,8]
還有幾個方法就不說了，比如$.trim和$.parseJSON，因為這兩個都屬於原生函數的別名而已.
今天大體就先說這些吧，都是Zepto里面的原型方法，每天學一點，每天進步一點~~~