Zepto Source Research-zepto.js-6 (template method)

Width Height Template Method read-write Width/height

[' width ', ' Height '].foreach (function(dimension) {//turn width,hegiht into width,height for document acquisition    varDimensionproperty =Dimension.replace (/./,function(m) {returnM[0].touppercase ()}) $.fn[dimension]=function(value) {varOffset, el = This[0]      //when reading, window is obtained by Innerwidth,innerheight      if(value = = undefined)returnIsWindow (EL)? el[' inner ' +Dimensionproperty]://It's document, get it with Scrollwidth,scrollheight.Isdocument (EL)? el.documentelement[' scroll ' +Dimensionproperty]: (Offset= This. Offset ()) && Offset[dimension]//TODO: Otherwise use offsetwidth offsetheight      //Write      Else return  This. each (function(idx) {El= $( This)        //set value, support value as functionEl.css (Dimension, Funcarg ( This, value, IDX, El[dimension] ())) })    }  })

/./is a match except for the newline (\ n) all characters, without/g, will only match one character, here matches H or W

var name = "Height". Replace (/./,function (m) {Console.log (m); return M[0].touppercase ()});
Console.log (name);
H
Height

<div id= "High" style= "width:150px;height:41px;float:left;border:2px solid red;margin:10px;padding:10px; Background-color:blue; "id=" Test ">        <div style=" height:100%; " ></div> </div>$("#high"). Height ()$ ("#high") [0].offsetheight 65

$ ("#high"). Height () offsetheight contains Content,padding,border, style= "height:41px" refers to content 41px Because the default style is: Box-sizing:content-box, if Box-sizing:border-box is specified, then sthle= "height:41px" means offsetheight to 41px;

Offsetheight: Refers to the height of the element viewport.

ScrollHeight: Refers to the actual height inside the element, so it is used for document height.

Innerheight: Read-only property that declares the height and width of the window's document display, measured in pixels. The width and height do not include the height of the menu bar, toolbars, and scroll bars.

Document.documentElement.clientHeight: The same as the Window.innerheight effect

Outerheight: Read-only property that declares the height of the window, including the toolbar.

For more information, please click here: http://www.cnblogs.com/yuteng/articles/1894578.html

Note: the height () here can accept the function as a parameter

Generate the "after", "prepend", "Before", "Append", "InsertAfter", "InsertBefore", "AppendTo", and "Prependto" methods adjacencyoperators = [' after ', ' prepend ', ' before ', ' append ' ],

Adjacencyoperators = [' after ', ' prepend ', ' before ', ' append '],

Adjacencyoperators.foreach (function(operator, operatorindex) {varInside = operatorindex% 2//= = prepend, append remainder note the foreach Traversal index starts at 0$.fn[operator]=function(){      //arguments can nodes, arrays of nodes, Zepto objects and HTML strings      //nodes The DOM set generated by the HTML string      varArgtype, nodes = $.map (arguments,function(ARG) {Argtype=type (ARG)//the arguments are not object, array, or NULL, and call Zepto.fragment to generate the DOM directly.            returnArgtype = = "Object" | | Argtype = = "Array" | | arg = =NULL?arg:zepto.fragment (ARG)}),//if $ length >1, you need to clone the elements insideParent, Copybyclone = This. length > 1if(Nodes.length < 1)return  This     //is 0, no action required, direct return      //Traverse Source $, execute insert _ refers to this parameter is invalid or does not      return  This. each (function(_, Target) {parent= inside? Target:target.parentNode//prepend, append take the parent element        //convert all methods to a "before" Operation        //using InsertBefore simulation to realizetarget = Operatorindex = = 0? Target.nextsibling://After,target equals the next sibling element, and then inserts the DOM through InsertBefore into the target frontOperatorindex = = 1? Target.firstchild://prepend Target is the first element of the parent and then inserts the DOM through InsertBefore into the targetOperatorindex = = 2? Target://the before directly inserts the DOM through the InsertBefore into the target front .                    NULL                                //Append call $ (target) directly. Append        //whether the parent element is in document        varParentindocument =$.contains (document.documentelement, parent)//traversing the element to be insertedNodes.foreach (function(node) {//Cloning          if(copybyclone) node = Node.clonenode (true)          //The anchor element does not exist, cannot perform the insert operation, deletes directly, returns          Else if(!parent)return$ (node). Remove ()//after inserting the node, if the inserted node is a script, the content inside is executed and the window is set to the context          //inserting elementsParent.insertbefore (node, target)//if the parent element is in document, fix the script tag. The reason is that the script tag joins the DOM via innerHTML and does not execute. Need to execute it in a global environment          if(parentindocument) Traversenode (node,function(EL) {if(El.nodename! =NULL&& el.nodeName.toUpperCase () = = = ' SCRIPT ' &&                (!el.type | | El.type = = = ' Text/javascript ') &&!el.src) window[' Eval '].call (window, el.innerhtml) })})}//After = InsertAfter    //prepend = Prependto    //before = InsertBefore    //append = AppendTo    /** * Insert method Conversion * @param HTML * @returns {*}*/$.fn[inside? operator+ ' to ': ' Insert ' + (Operatorindex? ' Before ': ' after ')] =function(HTML) {$ (HTML) [operator] ( This)      return 
 This    }  })

Because ' after ', ' prepend ', ' before ', ' append ' are all available insertbefore, so the content format of the four functions is the same, and here you can use Factory mode to cycle through the four functions.

Here are the general procedures:

Multiple parameters can be passed including strings and objects
$.fn[operator] = function () {
    Arguments.map is processed for the array inside the arguments, converting the string items inside into objects

    The This.foreach loop corresponds to each caller target.

    Because the last thing to do is to do the parent.insertbefore operation, so here to confirm with the target in accordance with the parent operator

    Because the insertbefore is used to simulate the implementation, the corresponding reference node is selected and assigned to target uniformly.

    Execute Parent.insertbefore (node, target);

    If node is script, you must also use the contents of the script inside the Window.eval () to perform
}

Here are a few tips to say:

1:inside = Operatorindex% 2, parent = inside? Target:target.parentNode If you perform a different operation on a particular item in an array, you can take the remainder of the index because 0 in JS means false, and a positive number represents true

2:target.nextsibling represents the next sibling node of the node, which is tested and if target is the last node on the page, then target.nextsibling still returns a virtual node, as in the following example

$ ("#high") [0].nextsibling

Results: #textbaseURI:"File:///home/zhutao/Documents/lib/zepto/test/defer.html"childnodes:nodelist[0]data:↵FirstChild:NULLLastChild:NULLLength:1nextelementsibling:NULLnextSibling:NULLNodeName:"#text"NodeType:3NodeValue:↵ownerdocument:documentparentelement:div#first.testparentnode:div#first.testpreviouselementsibling:div# Highprevioussibling:div#hightextcontent:↵Wholetext:↵__proto__: Characterdata

3:node.clonenode (deep), Deep is true, the child node is also clone into, otherwise it will not clone child node, this is a clone object is a reason, the example is as follows:

$ ("#clone") [0].clonenode (true); <div id=? " Clone "Data-test=?" Test "style=?" height:?50px;? Width:? 50px;? border:?1px solid red;? Overflow:? Hidden ">? <div data-index=? " 1111 ">?clone test? </div>?</div>? $ ("#clone") [0].clonenode (); <div id=? " Clone "Data-test=?" Test "style=?" height:?50px;? Width:? 50px;? border:?1px solid red;? Overflow:? Hidden ">?</DIV>?

difference between 4:window.eval () and eval (): window.eval () = Window.eval.call (Window,script); eval () = Window.eval.call (This,script); , eval () is often used in the closure function where this refers to the environment variable of the closure. Here's an example:

 var  x = 5;  function   FN () { var  x = ' Jack ' ; Window.eval ( ' x=10; ')  // -->5  10undefined  var  x = 5;  function   FN () { var  x = ' Jack ' ; Eval ( ' x=10; ')  // -->5  5undefined  

(Example from: http://www.cnblogs.com/snandy/archive/2011/03/16/1986055.html)

Zepto Source Research-zepto.js-6 (template method)