ArticleDirectory
- The main advantages are as follows:
Aveon has been extracted from the mass framework without any dependencies.
The main advantages are as follows:
- Simple to use, add bindings in HTML, define viewmodel with avron. Define in JS, and then call the avron. scan method, it will work!
- Compatible with IE6
- No dependency, only 77 K, 22 K after compression
- Supports MPs queue style filtering functions to facilitate formatting and output.
- The granularity of partial Refresh has been refined to a text node, feature node
- The node to be operated is bound to the view refresh function during the first scan and cached. Therefore, there is no room for the selector to appear.
- Allow Dom operationsCodeAlmost extinct
- The overlapping overwrite mechanism similar to CSS is used to make each viewmodel partition render the page alternately.
- When a node is removed, the corresponding view refresh function is intelligently uninstalled to save memory.
- All available accessors are used to notify the upper layers of the two-way binding chain in a timely and targeted manner (composite computed attribute, monitoring array, and evaluation function compiled based on bound values, view refresh function ).
Comparison with other frameworks
- It is smaller in size, in the main several mvvm frameworks (having two-way binding mechanism), Knockout is more than three thousand lines, angularjs 16 thousand, tens of thousands of lines of emberjs2-3, winjs is several M, kendoui is several M!
- Compatibility, kendoui and knockoutjs IE6, angularjs IE7, emberjs IE8, winjs ie9
- Make the User write less code (see my Todos)
- It is more difficult to get started than knockout, but it is easier to get started with angularjs.
- Like knockoutjs, angular, and winjs, dynamic templates are used to ensure that the data on the first screen is authentic and Seo-friendly.
- The source code is also the easiest to read. Simple code also means easy extension debugging.
The following describes how to implement a tabs using aveon.
<Div MS-controller = "tabs"> <Div MS-each-tab = "tabs" class = "triggers"> <a href = "###" class = "Trigger "Ms-class-selected =" activated = $ Index "MS-click =" Activate ">{{ tab. title }}</A> </div> <Div MS-each-tab = "tabs"> <Div class = "Panel" MS-visible = "activated ===$ index "> {tab. panel }}</div> </div>
aveon. ready (function () {aveon. define ("tabs", function (a) {. tabs = [{Title: "aaaa", panel: "AAAA panel" },{ title: "BBBB", panel: "ffffffffffffffffff" },{ title: "CCCC ", panel: "CCCC panel"}]. activated = 0. activate = function () {. activated = This. $ scope. $ index ;}}) aveon. scan () ;})
{Tab. Title }{{ tab. Panel }}
For more examples and introductions, see here
