Learning Zepto.js (Object method) [2]

Today, let's zepto that set of DOM operations,

Prepend,append,prependto,appendto,before,after,insertbefore,insertafter;

These eight methods are in order from the inside to the outside, from the main to the from, from the front to the back.

The parameters of these methods can be a DOM node, but also an HTML fragment, or a Zepto object;

Prepend ():

Inserts a parameter into the inside of the object's head;

Append ():

Inserts a parameter into the tail of the object;

Prependto ():

Inserts an object into the head inside the parameter (which can be understood as the object that changes the prepend parameter to the calling method, and the object becomes the parameter of the method);

AppendTo ():

Inserts an object into the tail of the parameter;

The above four are all inserts inside the element, and the next four are all inserted outside the element.

Before ():

Inserts a parameter into the front of the object;

After ():

Inserts a parameter behind the object;

InsertBefore ():

Inserts an object into the front of the parameter;

InsertAfter ():

Inserts an object behind the parameter;

The reason that these eight methods are put together is because these eight methods are generated dynamically through loops. First, you can try to understand the internal structure. When you are done, you will find that you will use it very skillfully.

The above array is the name of several operations stored, and the following foreach loop is executed in the Zepto self-executing function, that is, whether the Zepto prototype of the component creates these methods;

The Foreach method callback returns the parameter, the first one is the value, the second is the subscript of the value;

The Map method callback returns the same argument as the first parameter name in the method using _ (underscore), which means that it is not used in the function, but must be occupied (that's what a certain group of gods do), notice that the array is stored,

There are only four values (four the method name that inserts the parameter into the object [call it an active method, the original name, can be used freely, without any copyright restrictions]), and the order of the array is also very important (depending on the array order to determine the position of the insertion);

The inside variable stores whether the method is an internally inserted bool value, which is why the order of the upper array is important;

Skip the processing in the map method, do not explain much, because this is the conversion parameters for the DOM node;

The each method that is executed when the method returns,

The method first determines whether the method is an action inside the object, if it is, assigns the parent variable to the current object, or, if not, the object's outer operation, and assigns the parent to the object's parentnode;

The DOM node is then judged based on the subscript of the method name in the operation set.

Take eight actions, because these eight methods end up using the InsertBefore method,

By the way, the native InsertBefore method is used.

First call the method for the object to be inserted, receive two parameters, the first one is to insert the object, the second is to plug who's front;

Ticket office. InsertBefore (John Doe, Zhang San);

Think about why you're doing this.

After

First after is the first, after is an external operation, and is inserted behind the object that is currently called.

To use InsertBefore to implement the insertion behind an object, we need three objects, a current object, an object to insert, and a container for the current object, which is his parent;

As we enter the method, we get to the inside variable whether the method is internal, and then assign a value (itself or parent) to the object's container through the inside variable.

Here, we have all the three required variables we've got.

After execution is inserted into the current object, so say

We use the subscript to remove the DOM element that is required by the after operation to execute the object, which is the nextsibling of the object. Inserted into the object. NextSibling is the equivalent of inserting the object behind it.

(that is, more than the second place, you are the second, not around the wall);

Parent (Container). InsertBefore (The object to be inserted, the next node of the current object); The same DOM node in a DOM tree does not occur two times, that is, the moving object belongs to the cut operation, not the copy operation.

This is why the method does not judge whether the calling method of the object is multiple, if there are multiple, you need to copy the object;

Prepend

The second is that Prepend,prepend is an internal insert that inserts parameters into the inner front of the object, opposite to the append (append is inserted into the inner tail);

Because it is internal, the parent will take itself. Then we can judge the subscript to get the prepend. Then we remove the DOM element that is used to determine the position, which is the first child node of the object, before inserting it into the node to become firstchild (kill the Panda, I am a national treasure);

The method of invocation is:

The parent (here is the object itself). InsertBefore (The first child node of the current object to insert the object);

Before

Before, before inserting into the object (external operation), this is nothing to explain. InsertBefore is doing this.

Append

Append, inserted into the end of the object, in fact, the core of the distinction between these methods is here, if the InsertBefore method is executed, the second parameter is NULL, the first element will be inserted directly to the last of the container, equivalent to the native AppendChild method.

About the four methods below, do not do long explanation.

Simply dropped the object and the argument (height);

If let me to implement these eight methods, I may write a switch, better point may be dynamic judge internal and external insertion, inside will use appendchild and so on a series of methods, but never think of this writing, so say, read the source really learn the quickest way.

Write here today, eight Dom insert method, oneself also digest a bit. Inside perhaps said is also a little not too detailed, if have what do not understand, welcome message, everybody discuss together.

Tomorrow's interview, pray for blessings

Learning Zepto.js (Object method) [2]