Learning Zepto.js (prototype method)

Learn Zepto.js (prototype method) [1] Reprint

A new week, a new beginning, today to learn the Zepto inside the prototype method, is through the $. The method to invoke is also a method that can be extended by $.fn:

$.camelcase ():

method receives a string that converts a hyphen format string into a camel-formatted string:

 //- no processing 

(I found that the prototype method in Zepto is declared by assigning the anonymous function to a variable, and the function declared directly by the functions is not available externally) is not detailed, because the prototype method has a reference to the prototype, and those ordinary functions do not make this reference, It's a good distinction.

Through a regular match hyphen and a character behind it (if any);

$.contains ():

The method accepts two parameters, all of which are DOM node types, and check whether the first parameter contains the second parameter;

$.contains (document.getElementsByTagName ("html") [0],document.getelementsbytagname ("Body") [0])//
$.contains (document.getElementsByTagName ("body") [0],document.getelementsbytagname ("HTML") [0])//
$.contains (document.getElementsByTagName ("body") [0],document.getelementsbytagname ("Body") [0])// return False 

High-performance JavaScript has been mentioned in this writing, a method need to do compatible processing, written as this will save resources, rather than within the method to judge and execute, because the user in the process of using the browser is not possible to change (the exact words forget, almost that meaning.);

If there is a contains method, this is not much to explain, the browser has built-in processing methods, including true, the rest is false,

If it does not exist, then you need to do a method to achieve the same function (this should be the meaning of compatibility)

There is only one problem, if the two parameter position is reversed or the two parameters are equal, then the function will loop to the HTML element to stop (although this situation will rarely occur);

$.each ():

The Zepto method is used to loop an array or JSON, pass in two parameters, the first is the object to loop, the second is the callback function (one iteration at a time), the callback is executed by the current loop object and two parameters are passed, the first one is the subscript in the array or the key in the JSON. The second parameter is the value of the current object, which can return a bool value and, if False, terminates the current loop and returns the current object (the first argument);

$.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;  valid value is only false and the rest is ignored
});

The name in the callback function does not matter, a|b is OK, but the reasonable name can let others see this code of the students understand what you want to do;

Likearray function is not affixed, to determine whether the length property of the passed parameter is number, so say, like some nodelist and so can be assured to use the $.each without worrying about the method will walk for-in cycle, If the array order has no effect on the execution of the logic, it is recommended that you write a for loop or a while loop as follows:

var array = [for(var length = array.length-1; length >= 0; length--//var. length = while( length--//Do...}      

Diminishing performance is better than incremental performance ( speak not so absolutely, don't leave a spray point--)

$.extend ():

This method is used to inherit, but also the extension of the method required to receive more than two parameters, the first parameter is the target object, the second is the source, the source will overwrite the original property of the target, the default is shallow copy, if you want to deep copy, the first parameter is set to True, Then the target object. Source ...

var target = {}; $.extend (Traget, {name: ' Niko '});  //
$.extend (True, Target, {name: ' Niko '});  deep Copy ()  

The execution of a method is to first remove all parameters except the first argument as the source value (which is considered shallow copy by default), then determine if the target is a Boolean value, and if so, assign the deep variable to target and assign the target value to the first in the source value array ([].shift (), the first element in the array is removed from the array and returned); The next loop is the source value, calling the Extend method;

The Extend method receives three parameters, the first is the target object, the second is the source value, and the third is whether the identity is deeply copied.

The Extend method will enumerate the source values and determine if it is a deep copy and whether the value is an object or an array, and if so, a new object or array will be created, and then recursively call the method, out of the referential relationship (note: The custom object will not deviate from the referential relationship);

Otherwise, the normal copy is performed;

 var target1 ={};
var Target2 ={};
Target1.quote ={
Name: "Name",
Array: [+ +]
};
Target2.quote = {
Name: "Name",
Array: [+ +]
};

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);              

The return value of this method does not matter if it is received--the reason that the method returns the target object is for chain operation, which can be used directly after extend.

$.fn:

This is not a method, but an object that points to the prototype of the Zepto object, so that $.extend is used to enable $.fn to inherit certain methods and make the extension.

$.fn.alert =function() {
AlertThis.html ());//This points to the Zepto object that called the method
}
$ ("<span>hello</span>"). alert (); //-->hello 
/* This is to assign a value directly to the key, if there are multiple, must be combined with $.extend */
$.extend ($.fn, {alert: function () {
Alert (this.html ());  this points to the Zepto object that called the method
}, confirm: function () {
Confirm (this.html ());  this points to the Zepto object that called the method
}
});

PS: In order to match the chain operation, the extended method is best to return this;

Because it is an object, so it is not affixed to the code.

Learn a little by yourself every day.

Learning Zepto.js (prototype method)