jquery Technology Insider Electronic version 5

4. Convert HTML code to DOM elements

First create a document fragment DocumentFragment, and then call Method Jquery.clean (Elems, Context, frag-ment, scripts) to convert the HTML code to a DOM element and store it in the created document fragment.

There may be three cases when!fragment is true: the HTML code does not meet the caching criteria. The HTML code conforms to the cache condition, but at this point it is the first conversion and there is no corresponding cache. The HTML code conforms to the cache condition, but this is the second conversion, and the corresponding cache value is 1.

5. Put the converted DOM element into the cache object jquery.fragments

• The conversion process is always performed if the HTML code does not meet the caching criteria. • If the HTML code conforms to the caching criteria, set the cache value to 1 after the first conversion, set to the document fragment after the second conversion, and read from the cache the third time.

6. Return the document fragment and cache status {fragment:fragment, cacheable:cacheable}

Summary

2.5 Jquery.clean (Elems, context, fragment, scripts)

2.5.1 Implementation principle

The method first creates a temporary div element, inserts it into a secure document fragment, and assigns the HTML code to the innerHTML attribute of the div element, which automatically generates the DOM element and finally parses the sub-elements of the DIV element to get the converted Dom element

If the HTML code contains child tags that need to be wrapped in the parent tag, for example, child tags <option> need to wrap in parent tag <select>, Method Jquery.clean () will first add the parent tag and close the tag before and after the HTML code. After the innerHTML attribute of the temporary div element is set to generate the DOM element, the parent element of the package is stripped and the DOM element corresponding to the HTML code is removed.

If the HTML code contains <script> tags, in order to be able to execute the JavaScript code contained in the <script> tag or the referenced JavaScript file, After the Inner-html property of the temporary DIV element is set to generate a DOM element, the method Jquery.clean () extracts the script element into the array scripts. After the resulting DOM element is inserted into the document tree, the script elements in the array scripts are executed manually.

2.5.2 Source Code Analysis

1. Definition Jquery.clean (elems, context, fragment, scripts)

2. Fix Document Object context

Since the method Jquery.buildfragment () has carefully modified the Document object doc and passed it to the method Jquery.clean (), why do you want to make a similar correction again?

This is to facilitate the direct invocation of Jquery.clean () to convert HTML code to DOM elements.

3. Traverse the array of HTML code to be converted Elems

In the 1th part of the For statement, the loop variable elem is declared, the 2nd part of the For statement is taken out Elems[i] assigned to Elem, and the validity of the elem is judged. In addition, to determine the validity of the Elem is "! =", so that you can filter both null and undefined, but do not filter the integer number 0, if Elem is a numeric type, by letting the Elem add an empty string, the Elem is converted to a string.

If!elem is true, that is, Elem can be converted to false, then the loop is skipped and the next loop is executed. This line of code is used to filter the empty string case. If Elem is an integer number 0, because it has been converted to the string "0" in the previous code, it is easy to judge!elem

If Elem is a string, that is, the HTML code, start converting the HTML code to the DOM element

(1) Creating a text node

Use regular rhtml to detect if the HTML code contains a tag, character code, or numeric code, the regular definition code

The native Method Document.createtextn-ode () is used to create a text node, but the string parameter passed to it does not escape parsing, that is, the method does not correctly parse and create a string that contains a character code or numeric code. And the innerHTML mechanism of the browser can

(2) Fix self-closing label

Match the self-closing label in the HTML code with regular Rxhtmltag and replace it with a paired label by means of replace ()

Regular Rxhtmltag is the key to correcting self-closing tags

jquery Technology Insider Electronic version 5