Learn Zepto.js (Hello world)

Zepto is a lightweight JavaScript library for modern advanced browsers, which has a similar API to jquery. If you can use jquery, you'll also use Zepto.

Heard yesterday Zepto.js, just recently also relatively busy, so learn about this famous Dom operation library, because I just contact this, but do not want to simply say how to use, so I will follow the API sequence to explain how to use the method and try to write the understanding of the source code;

$():

Almost the same as jquery's $ (), but the Zepto selector is directly used by native Queryselectorall (), so some jquery custom selectors are not supported, but you can add a selector.js module to add 10 (yes, I checked) Commonly used pseudo-class selectors;

There are five ways to use the $ () selector:

$ (selector, [optional contextual environment, default document])

$ ("#id");/*document.getElementById ("id")*/$("#id Time");/*Document.queryselectorall ("#id time")*/$("#id", $ ("head"));/*if $ (' head ') has only one element, then press Head[0].queryselectorall ("#id") to fetch, otherwise loop $ (' head ') takes, return is Zepto object, you can pass in the DOM object*/$("<span>hello world</span>");/*a span label will be created,*/$("<span>", {text: ' Hello ', id: ' Span-ele ', Css:{color: ' Red '}})/*Create an ID of Span-ele, display a value of Hello, a red span label*//*These are the methods used as selectors*/$(function () {     //Do ... Used jquery should know that this is the domcontentloaded event of the binding})

When a $ variable already exists, such as a reference to jquery, then the Zepto global object will not point to $, but always point to window. Zepto

Next, look at how the internal code is implemented;

The Zepto function ultimately returns a $ sign, $ () that describes the $ object as a function, so it finds the code in the

The $ function returns the execution result of the Zepto.init () function in, receives two parameters, the first is the selector (selector), the second is the context,

If selector is empty at the time of invocation, a Zepto object is returned directly,

If selector is a string, remove both spaces first, and then determine if selector is a string containing HTML tags.

If yes, a DOM object is generated by the fragment method and returned,

When validating selector as a DOM selector, further determine if the context is empty,

does not empty when the context is wrapped as a Zepto object after the Find method is executed,//the role of the wrapper context here is that the incoming contexts might be a DOM object, perhaps a Zepto object, The purpose of calling the. Find method is to be compatible with a number of objects under the Zepto object array, in fact find is also a loop call QSA (Zepto encapsulated Query method, the bottom will say)

When empty, the query method is called directly through the document.

When validating selector as a function object, the method is bound to the Domcontentloaded event,

The Zepto.isz function is used to verify if it is a Zepto object, and if it is returned directly, no processing is done.

The rest of the situation basically belongs to the operation of wrapping the base type as a Zepto object. But one thing I do not understand is why I added such a repetitive logic at the end, and I want to know the students to tell the next.

The last variable returned is a Zepto constructor that is transformed into a Zepto object.

Now let's talk about some of the other functions used in the constructor;

Methods such as those that are called by Zepto objects can be called in other places through $ (zepto). zepto[method name], such as $.ZEPTO.QSA ();

As defined by $.FN, custom plug-ins are also done through $.FN, and a closer look at the code will find this sentence

A method defined as a prototype by the $.fn[method name];

A class method defined by the $[method name];

Fragment ():

This method is used to generate a DOM node and return

This method receives a maximum of three parameters,

The first is an HTML value that can be just a label, such as ("<span>"), or an HTML fragment, such as ("<span>hello</span>");

The second is an identifier that is used to determine the label type, which is primarily used to perform some special processing of the table class elements to generate a temporary parent node (which would be said below);

The third is some attribute values, is a JSON structure, but to pay attention to the Hump name method, because the zepto is streamlined, so do not want jquery that kind of tolerance.

First, the method internally determines whether the HTML is a label:

If yes, generate the label directly;

If not, the self-closing label is converted to a normal label by the Replace method, and the contents of the Tagexpanderre regular object are as follows

Then determine if the name variable is empty, and if it is empty, remove the value in the tag angle bracket by the regular. Fragmentre content is as follows:

Next, loop through the array containers to see if the label is a label for the table class, and if not give a "*", the temporary parent container of "*" is a div.

Containers is an array of several createelement methods that are stored in an array:

You can see that this is basically done for the table--(I guess because if the innerhtml value of the DIV is assigned to "<tr></tr>", it will automatically generate tbody,table labels on the outside.) Too lazy to try, should be yes ... ）；

Then you create the temporary parent container and plug in the HTML variables directly.

Next is a way to make my messy call ... (Why is it so??? ）

Loops through $.each all child nodes of the parent container, then remove the node, and Dom.removechild () returns the node. ($.each--) The () method returns an array, so the DOM node is created indirectly. (really feel read source up posture);

Determine if the properties are a simple object, as follows:

Then iterate over the object, put the attribute into the DOM element, that judgment is not much to explain, because some properties are zepto into the method, so call the method directly, which is why the call $ ("", {text: ' displayed value '}), You can use the text setting to display the value, you need to do some style processing you can write

$ ("", {css:{color: ' Red ', BackgroundColor: ' Blue '}})/* because the style will have more than one, the value of the CSS must be a JSON* /

You can return the DOM element when you are finished.

QSA ():

Skip the Find Method--say it later ... ；

QSA (abbreviation for queryselectorall);

　　

The method receives two parameters, context, selector;

The $ () method is called by default if it does not pass in the context.

ZEPTO.QSA (Document,selector)

By default, document is passed in as context;

As a person who can understand three sentences in the 10 sentences of the American drama, one can see the meaning of the maybeid,maybeclass variable at a glance-;

About Simpleselectorre This regular is not affixed, is a judge whether there are spaces in the middle of the string. That is to say does not contain sub-selectors;

The above several variables are used to judge, below is a large string of ternary operators, looking quite faint, but listen to my explanation, will certainly understand ( perhaps more dizzy );

First,

Determines that the context object supports the getElementById method, which does not contain a child selector and that the selector starts with a # number, which means that the person wants a id:xxx tag.

If this is the case, call getElementById and put the returned result in an array, which is why the jquery object is returned with an array of length 1 even through the ID selector, and an empty array is returned if the element is not obtained;

If the condition is not met, the context is determined to be a label node, a Document object node, or a document fragment node. If it weren't for these three, then he wouldn't support some of the selector methods below. Returns an empty array directly (wayward ~);

But if the condition is met, continue to judge, the selector is not to contain the sub-selector (get√), and is not selected by the ID (get√), and Support Getelementsbyclassname (get√), OK continue to judge ...

Mabeyclass (perhaps a class selector), let's take it through Getelementsbyclass;

Maybenot (without this variable), then it is taken by Getelementbytagname; (It's only two of them).

And then here is the process of not satisfying the condition

The Queryselectorall () method is called directly from the context, which supports the sub-selectors. (But jquery is not, at least, because jquery has its own pseudo-class, zepto is not);

　　

About the Slice.call () just to put the DOM object returned inside an array.

Write so little first, almost 10 o'clock, a little bit sleepy;

I heard yesterday, only to begin to touch it today, if there is any wrong to write, please also point out. Thank you!

　　　　

Learn Zepto.js (Hello world)