一款超好用輕量級JS框架——Zepto.js(上)

   前  言

絮叨絮叨

　　　以前咱們介紹過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裏面的原型方法，天天學一點，天天進步一點~~~