Introduction to QWrap: dom_retouch-NodeW warrior armor

In QWrap Introduction: NodeW --- Node Packaging
I have already introduced NodeW in this article. However, it is like he has no equipment.
NodeW is a warrior. It must be armor before it can become a real warrior.
QWrap already has many "A" types, including NodeH, EventTargetH, JssTargetH, and ArrayH.
It can be said that the QWrap built by Helper is just a tool set, similar to YUI2. We can also use tools to do things, but it seems a little stiff. We can also invite a warrior to use these tools, and we will command the warrior.
One of the main tasks of js/dom/dom_retouch.js is to armor the NodeW warrior.

Okay. Now that we understand this, let's look at the recommended core_retouch. The section related to NodeW is as follows:

    NodeW.pluginHelper(NodeH, NodeC.wrapMethods, NodeC.gsetterMethods);
    NodeW.pluginHelper(EventTargetH, 'operator');
    NodeW.pluginHelper(JssTargetH, NodeC.wrapMethods, {jss: ['', 'getJss', 'setJss']});

var ah = QW.ObjectH.dump(QW.ArrayH, NodeC.arrayMethods);
    ah = methodize(ah);
    ah = rwrap(ah, NodeW, NodeC.wrapMethods);
    mix(NodeW.prototype, ah); 

The first three sentences are equipped with NodeH, EventTargetH, and JssTargetH for NodeW.
The following sentence describes how to configure ArrayH for NodeW so that the ArrayLike function of NodeW can be obtained from ArrayH.
Here we use two things that have not been introduced before. NodeW. pluginHelper and NodeC. What are they?

NodeW. pluginHelper is a static method of NodeW. Its function is to "insert a Helper for Node in NodeW". Its code is also very simple, as follows:

/**
* Add a Node-specific Helper to NodeW.
* @ Method pluginHelper
* @ Static
* @ Param {helper} helper must be a Helper for Node (element)
* @ Param {string | json} wrapConfig wrap Parameter
* @ Param {json} gsetterConfig (Optional) gsetter Parameter
* @ Return {NodeW}
*/

NodeW. pluginHelper = function (helper, wrapConfig, gsetterConfig ){
Var HelperH = QW. HelperH;

Helper = HelperH. mul (helper, wrapConfig); // The first parameter supported is array.

Var st = HelperH. rwrap (helper, NodeW, wrapConfig); // wrap the returned values
If (gsetterConfig) {// if there is a gsetter, You need to convert the expression method to gsetter.
St = HelperH. gsetter (st, gsetterConfig );
}

Mix (NodeW, st); // static method applied to NodeW

Var pro = HelperH. methodize (helper, 'core ');
Pro = HelperH. rwrap (pro, NodeW, wrapConfig );
If (gsetterConfig ){
Pro = HelperH. gsetter (pro, gsetterConfig );
}
Mix (NodeW. prototype, pro );
};

The following is a simple example to describe its functions:

    var myHelper={
        getValue:function(el){return el.value;},
        setValue:function(el,value){el.value=value;}
    };
    NodeW.pluginHelper(
        myHelper,
        {
            getValue:'getter_first_all',
            setValue:'operator'
        }, {
            val: ['getValue', 'setValue']
        }
    );

They produce the following results:
NodeW. prototype has the following series of methods:
GetValue. Usage example: W ('input'). getValue (); // return the value of the first input.
GetValueAll. Usage example: W ('input'). getValueAll (); // returns a group composed of values of all input elements.
SetValue. Usage example: W ('input'). setValue (1); // all input values are assigned to 1.
Val is a gsetter, that is, a mixture of getter_first and setter. The number of parameters determines whether it is getter_first or setter. Usage example:
W ('input'). val (); // return the value of the first input.
W ('input'). val (1); // all input values are assigned to 1.
Of course, as a setter, it will return itself and you can continue the operation. For example:
W ('input'). val (1). val (); // set the value first and then obtain the first value.
In addition to the above usage similar to jquery, it also produces static usage. Static usage saves some time by writing a bracket. For example, if we already know el = an INPUT element, the following two rows have the same function:
W. val (el );
W (el). val ();
Some may think that the usage is too much annoying, so you can ignore the static usage.

Have you had a perceptual knowledge of NodeH. pluginHelper?
Let's review what pluginHelper has done:
1 mul: The getValue/setValue parameter of the array is not supported in myHelper.
2. Processing is different between static and prototype.
Static rendering: first decide whether to wrap and wrap the form according to the configuration, then pair some methods to form gsetter, and then render these static functions to NodeW.
Prototype rendering: The method is first implemented, and then the packaging and packaging form are determined based on the configuration. Then, some methods are paired to form gsetter according to the configuration, and then these methods are rendered to NodeW. prototype.

The configuration of NodeC is described above. Let's take a look at the View Code of js/dom/node. c. js.

(Function (){
Var queryer = 'queryer ',
Operator = 'operator ',
Getter_all = 'getter _ all ',
Getter_first = 'getter _ first ',
Getter_first_all = 'getter _ first_all ';

QW. NodeC = {
GetterType: getter_first,
ArrayMethods: 'map, forEach, toarray'. split (','),
// Some Array methods will also be integrated into NodeW
WrapMethods :{
// The packaging result of queryer "return value"
// If operator is a static method, return the packaging of the first parameter. If it is a prototype method, return itself
// If getter_all is an array, execute each operation and return
// If getter_first is an array, the return value of the first execution is returned.
// Getter_first_all is the same as getter. Two methods are generated, one is getterFirst and the other is getterAll.
// NodeH Series
G: queryer,
One: queryer,
Query: queryer,
GetElementsByClass: queryer,
OuterHTML: getter_first,
HasClass: getter_first,
AddClass: operator,
RemoveClass: operator,
ReplaceClass: operator,
ToggleClass: operator,
Show: operator,
Hide: operator,
Toggle: operator,
IsVisible: getter_first,
GetXY: getter_first_all,
SetXY: operator,
SetSize: operator,
SetInnerSize: operator,
SetRect: operator,
SetInnerRect: operator,
GetSize: getter_first_all,
GetRect: getter_first_all,
NextSibling: queryer,
Previussibling: queryer,
AncestorNode: queryer,
ParentNode: queryer,
FirstChild: queryer,
LastChild: queryer,
Contains: getter_first,
InsertAdjacentHTML: operator,
InsertAdjacentElement: operator,
Insert: operator,
Inserator: operator,
AppendChild: operator,
InsertSiblingBefore: operator,
InsertSiblingAfter: operator,
InsertBefore: operator,
InsertAfter: operator,
ReplaceNode: operator,
ReplaceChild: operator,
RemoveNode: operator,
Empty: operator,
RemoveChild: operator,
Get: getter_first_all,
Set: operator,
GetAttr: getter_first_all,
SetAttr: operator,
RemoveAttr: operator,
GetValue: getter_first_all,
SetValue: operator,
GetHtml: getter_first_all,
SetHtml: operator,
EncodeURIForm: getter_first,
IsFormChanged: getter_first,
CloneNode: queryer,
GetStyle: getter_first_all,
GetCurrentStyle: getter_first_all,
SetStyle: operator,
BorderWidth: getter_first,
PaddingWidth: getter_first,
MarginWidth: getter_first,

// TargetH Series
//......
// JssTargetH Series
GetOwnJss: getter_first_all,
GetJss: getter_first_all,
SetJss: operator,
RemoveJss: operator,

// ArrayH Series
ForEach: operator
},
GsetterMethods: {// The method in this json will be a mixture of getter and setter
Val: ['getvalue', 'setvalue'],
Html: ['gethtml ', 'sethtml'],
Attr: ['', 'getattr ', 'setattr'],
Css: ['', 'getcurrentstyle', 'setstyle'],
Size: ['getsize', 'setnersize'],
Xy: ['getxy', 'setxy']
}
};

}());

The Configuration Rules of wrapMethods are as follows:
// The packaging result of queryer "return value"
// If operator is a static method, return the packaging of the first parameter. If it is a prototype method, return itself
// If getter_all is an array, execute each operation and return
// If getter_first is an array, the return value of the first execution is returned.
// Getter_first_all is the same as getter. Two methods are generated, one is getterFirst and the other is getterAll.
Except getter_all, it is useless in practice.
In the example above, if you set getValue to getter_all, W ('input'). getValue () returns an array composed of the values of all input elements. The result is the same as that of NodeList in YUI3 and different from that of jquery.
In fact, getValue configures get_first_all. Therefore, it produces two methods:
W ('input'). getValue () // return the value of the first input.
W ('input'). getValueAll () // returns an array consisting of values of all input Elements
The former is consistent with jquery, and the latter is consistent with YUI3's NodeList.
We didn't change the code of NodeH, but changed the configuration of NodeC to satisfy jquery's pursuit and yui3's pursuit.
This is exactly the embodiment of qwrap's retouch mechanism's flexibility: a rigorous and rigid tool set that uses retouch to produce personalized, easy-to-use, and spiritual products.

In dom_retouch.js, in addition to NodeW armor, a new QW is also generated. dom namespace, which combines static methods of DomU, NodeH, EventTargetH, and JssTargetH. This is very similar to the Dom of YUI2 and is a static method set related to Dom, users that meet YUI2's habits.

In addition, there are two sections in dom_retouch.js that are slightly controversial and will be adjusted in the near future, which can be ignored.

Appendix: QWrap Web site: http://www.qwrap.com