An analysis of the dommanip of jQuery3.0

Dommanip This function has a long history, and has existed since the jquery 1.0 version, until the latest version of jquery. is an elder tool function.

The main function of Dommanip is to implement the insertion and substitution of the DOM. Total of the following 5 function services

• Internal Post-insertion (append)
• Internal front insertion (prepend)
• External front insertion (before)
• External post-insertion (after)
• Replace element (replacewith,1.9.x Previous version does not use DOMMAINP)

And one each generates another 5 functions: AppendTo, Prependto, InsertBefore, InsertAfter, ReplaceAll

Jquery.each ({appendTo: "append", Prependto: "Prepend", InsertBefore: "Before", InsertAfter: "After", ReplaceAll: " ReplaceWith "}, function (name, original) {jquery.fn[name] = function (selector) {var Elems,ret = [],insert = JQuery (s Elector), last = Insert.length-1,i = 0;for (; i <= last; i++) {Elems = i = = = last? This:this.clone (true); Jquer Y (insert[i]) [original] (elems);//Support:android <=4.0 only, Phantomjs 1 only//. Get () because push.apply (_, a Rraylike) throws on ancient webkitpush.apply (ret, elems.get ());} Return This.pushstack (ret);};} );

Internal call

Source

Append:function () {return Dommanip (this, arguments, function (elem) {if (This.nodetype = = = 1 | | this.nodetype = = 11 | | This.nodetype = = = 9) {var target = Manipulationtarget (this, elem); Target.appendchild (Elem);}}  );},prepend:function () {return Dommanip (this, arguments, function (elem) {if (This.nodetype = = 1 | | this.nodetype = = = 11 | | This.nodetype = = = 9) {var target = Manipulationtarget (this, elem); Target.insertbefore (Elem, Target.firstchild);}} );},before:function () {return Dommanip (this, arguments, function (elem) {if (This.parentnode) {This.parentNode.insert Before (Elem, this);}} );},after:function () {return Dommanip (this, arguments, function (elem) {if (This.parentnode) {This.parentNode.insertB Efore (Elem, this.nextsibling);}}  );},replacewith:function () {var ignored = [];//make the changes, replacing each non-ignored context element with the new Contentreturn Dommanip (this, arguments, function (Elem) {var parent = this.parentnode;if (Jquery.inaRray (this, ignored) < 0) {Jquery.cleandata (GetAll (this)), if (parent) {Parent.replacechild (elem, this);}} Force callback Invocation}, ignored);}

　　

The realization of Dommanip

The main function of Dommanip is to add DOM elements, because they add different locations and provide four public functions append, prepend, before, after, plus a replacewith. In short, Dommanip did two things.

1. Complete the DOM node additions first
2. If the added DOM node has a script tag, additional processing is required. For executable scripts (judged by the type attribute), the script code is executed, and the others are not executed.

An important function of Dommanip dependency is buildfragment, which improves performance for DOM insertion.

Special handling of script node elements in Dommanip

1. Script does not have a Type property and the JS script is executed by default
2. Script's type= "Text/javascript" or type= "Text/ecmascript" will execute its JS script
3. If a script has the SRC attribute, it executes the $._EVALURL request remote JS file and executes
4. Other do not execute JS script, sometimes we will use script to do HTML template, such as underscore.js,type= "Text/template" or type= "Text/plain" This, the inside of JS will not be executed

In addition datapriv.access (node, "Globaleval"), this sentence indicates that if the script has been executed, it will not be executed again. Or, after execution, a globaleval:true is set.

Dommanip internal dependence buildfragment, Restorescript, Disablescript, Jquery._evalurl, domeval These small functions, and restorescript, jQuery._ Evalurl is also used only in Dommanip.

Replace/restore the type attribute of script elements for safe DOM manipulationfunction disablescript (elem) {Elem.typ E = (Elem.getattribute ("type")!== null) + "/" + Elem.type;return Elem;} function Restorescript (elem) {var match = rscripttypemasked.exec (Elem.type), if (match) {elem.type = match[1];} els e {elem.removeattribute ("type");} return elem;} Jquery._evalurl = function (URL) {return Jquery.ajax ({url:url,//make this explicit, since user can override this Throu GH ajaxsetup (#11264) Type: "GET", DataType: "Script", Cache:true,async:false,global:false, "throws": true});

　　

Dommanip has undergone various versions of the evolution

1. The Dommanip function of the previous version of 3.0.x was hung on top of the JQuery object (JQuery.fn.domManip), that is, by $ (). Dommanip way can be accessed; after 3.0.x Dommanip is a private function that cannot be accessed externally
2. 1.2.x before the Dommanip has 4 parameters, 1.3.x ~ 1.9.x is 3 parameters; 2.x has only 2 parameters; 3.x has 4 parameters
3. Version ReplaceWith prior to 1.9.x did not use DOMMAINP

An analysis of the dommanip of jQuery3.0