Implement component-based development by using aveon MS-UI binding

To make the day easier, you must keep the code abstract. For this lofty purpose, everything in avron is to break in-operate data, that is, operate Dom, and stay away from Dom for front-end development. Javascript has been idle for the last 10 years because developers are afraid of these compatibility issues. In the past 10 years, people used very low-level native DOM methods and JS methods for programming, causing inefficiency. With the advent of prototype. JS, jquery and other libraries, almost all the packages can be encapsulated, and our life will become better. However, jquery is rarely used to develop an internal enterprise management system. Everyone loves to use the out-of-the-box ext UI framework. The UI component is undoubtedly a higher degree of abstraction and encapsulation than the DOM operation objects such as jquery. However, the component is usually poorly formulated. For example, ztree is used for extension. For the solutions currently provided by the industry, how does aveon do?

First, MS-class, MS-Hover, and MS-on are actually in jquery. The difference is that they do not rely on the sizzle-driven selector engine with thousands of rows, instead, scan and convert the binding attributes. The binding property will convert a evaluate function. The evaluate function is internally linked to the viewmodel, so it can be instantly synchronized. The external function is nested with a DOM operation function, such as MS-class, toggleclass is called based on the true and false values returned by the evaluate function, while MS-Hover is toggleclass by binding mouseenter and mouseleave. MS-checked is the checked attribute for processing form elements, MS-visible is responsible for element display and hiding, and MS-if is responsible for removing or inserting elements into Dom ...... A single binding attribute contains very high-density Dom operations, which are more write less, do more, and do simple than jquery! Someone has already used my aveon in this garden, which is a good reflection. Of course, I have made a lot of suggestions for improvement.

The second is the component layer. Like angular, aveon provides component-oriented development, but it is much easier to use than angular. For more information, see the bootstrap UI library developed by Twitter and use the data-* attribute for feature customization (of course, it also has other configuration methods ). In addition, just like Bootstrap, if JS is introduced and MS-UI = "component name" is added to related elements, the element node will be converted to the UI component, and you do not need to write a line of code.

MS-UI binding can bring us the following benefits: to minimize the binding attributes on elements, you only need to add MS-UI = "component name ", or you can add up to data-id = "XXX" to minimize HTML interference. That is to say, the division of labor between the artist and the front-end is very clear. The value in data-ID corresponds to the viewmodel ID. We can use this ID to obtain the viewmodel in aveon. Models [ID], so that the operation data is the operation Dom.

Based on components, our presentation layer is formed by building blocks. The page rules turn to how to coordinate the operations of these components, rather than staring at each element node. But aveon has done most of it for you. For example, a basic URL remotely requests different resources, converts them to viewmodel, and generates a page area. There is also a message center (also called the Event Center), because viewmodel is originally implemented in the Observer mode, a living message center, you do not need to recreate the wheel. With the deepening of our projects, we have accumulated more and more building blocks. That is, the easier our work is, the higher our work efficiency is.

Unlike other UI libraries, it is too simple and convenient to write the UI in aveon, thanks to its powerful bidirectional binding mechanism.

Let's take the source code of the aveon. Tabs component as an example:

(Function (aveon) {var defaults = {active: 0, event: "click", // you can use click, Mouseover collapsible: false, bottom: false, removable: false }; aveon. UI. tabs = function (element, ID, vmodels, opts) {var El, tabsparent, tabs = [], tabpanels = []; var $ element = aveon (element ); // 1. Set the parameter object Options = defaults + opts + $ element. data () var Options = aveon. mix ({}, defaults); If (typeof opts = "object ") {Aveon. mix (options, opts. $ JSON | opts);} aveon. mix (options, $ element. data (); $ element. addclass ("UI-Tabs UI-widget-content UI-corner-all"); // 2, clear all internal nodes and collect their content, construct two Arrays: tabs and tabpanels while (El = element. firstchild) {If (! Tablist & (El. tagname = "Ul" | el. tagname = "ol") {tabsparent = El;} If (El. tagname = "Div") {tabpanels. push (El. innerhtml);} element. removechild (EL);} For (VAR I = 0; El = tabsparent. children [I ++];) {tabs. push (El. innerhtml );} // 3 set the dynamic template var tablist = '<ul class = "UI-Tabs-nav UI-helper-Reset UI-helper-Clearfix UI-widget-header"' + 'Ms -Class-ui-corner-All = "! Bottom "MS-class-ui-corner-Bottom =" bottom "MS-each-tab =" tabs "> '+' <li class =" UI-state-Default "' + 'Ms-class-ui-corner-Top = "! Bottom "'+ 'Ms-class-ui-corner-Bottom =" bottom "' + 'Ms-class-ui-Tabs-active =" active = $ Index "'+ 'Ms-class-ui-state-active = "active = $ Index" '+ 'Ms-' + options. event + '= "Activate"' + 'Ms-Hover = "UI-state-Hover" '+ // float: Left; margin: 0.4em 0.2em 0 0; cursor: pointer; in this way, jquery UI is not encapsulated into '>{{ tab | HTML }}< SPAN class = "UI-Icon UI-icon-Close" style = "float: Left; margin: 0.4em 0.2em 0 0; cursor: Po Inter; "MS-If =" true "MS-click =" Remove "> </span> </LI> </ul> '; vaR panels = '<Div MS-each-Panel = "tabpanels"> <Div class = "UI-Tabs-panel UI-widget-content"' + 'Ms-class-UI -Corner-Bottom = "! Bottom "'+ 'Ms-visible =" active = $ Index ">{{ panel | HTML }}</div> </div> '; // 4 construct the viewmodel VAR model = aveon. define (ID, function (VM) {VM. active = options. active; VM. collapsible = options. collapsible; VM. tabs = tabs; VM. tabpanels = tabpanels; VM. removable = options. removable; VM. activate = function (e) {e. preventdefault (); VM. active = This. $ scope. $ index;}; VM. remove = function (e) {e. preventdefa Ult (); var Index = This. $ scope. $ index; VM. tabs. removeat (INDEX); VM. tabpanels. removeat (INDEX); aveon. nexttick (function () {VM. active = 0 ;}) ;}; VM. bottom = options. bottom;}); aveon. nexttick (function () {// 5 when this wave of scanning comes, insert the constructed Dom structure into the DOM tree, bind the MS-* attribute, and then start scanning the element. innerhtml = options. bottom? Panels + tablist: tablist + panels; element. setattribute ("MS-class-ui-Tabs-collapsible", "collapsible"); element. setattribute ("MS-class-Tabs-bottom", "bottom"); aveon. scan (element, model) ;}); Return Model ;}}) (window. aveon );

It is basically divided into five steps. First, how can we transmit five parameters to you? element is the element node bound with MS-ui, and ID is the value of data-id, no framework generates a random opts for you. This is a parameter of MS-ui-optsname = "uiname". opts is the parameter object that the framework uses to operate on various viewmodels through hasownerproperty. Then, the first step is to set the configuration object, which consists of ults + opts + $ element. Data (), which should be highly formulated and flexible.

Step 2: process the internal nodes of element elements. Sometimes they also have binding attributes, but we do not need to process them immediately-the scanner scans them from top to bottom, scans them, and then removes them, so the best way to prevent them from being scanned at this time is to remove them from the DOM tree. This process may require some operations, as you like.

Step 3: Compile the HTML structure of the UI.

Step 4: Define viewmodel. Its ID is the parameter passed above.

Step 5: Start scanning again, but at this moment, we do not need to scan the entire page, just starting from this element.

The example of this tabs can be viewed here.

There are two key points here: scanning. Scanning is always from top to bottom, from left to right, and there are three methods to prevent it from being scanned: MS-Skip, which is almost permanent. MS-important, this region is only available for viewmodel matching. The last one is to remove the DOM tree. Scanning is not only used to store the key nodes in order to convert and bind the nodes (even if these nodes are bound, it means they need to be processed through Js. In the past, these nodes were all done through the selector engine, however, generally, jqueryer seldom consciously caches them and re-selects them every time they are used to traverse the DOM tree ). The second is the building of the viewmodel of the UI component, which is the key for us to stay away from Dom programming. It has all the key parameters and methods, which are equivalent to the backend xml configuration file. Of course you can do nothing, and defaults has already debugged everything.