My mvvm framework V3 is released!

people always love to explore perfect things. The medical profession pursues the everlasting medicine, the alchemy pursues the stone of the sage, And the physicist pursues the everlasting motive ...... The programming world also has its own pursuit, perfect architecture or something, from MVC, to MVP, to mvvm ...... Of course, MVC, MVP, and mvvm have different scenarios, but mvvm has been proven to be the best solution for interface development after Microsoft test. As far as the front-end is concerned, it has always been entangled in the advantages and disadvantages of templates and components. As you all know, the question is how to integrate web pages with templates and web apps with components. The reason why a page can interact is that it is in a status. Therefore, the core issue is how to integrate these two States. There are two origins of the status, which can be obtained directly from the model, such as JSON and XML transmitted by the backend, or the PHP serialized field is restored in a tragic manner, the second type is the amount of intermediate data that is not generated when the process is controlled in the Program . We can combine the backend data or intermediate data into a data source, or fill the data as a template, or finally become its attribute as a component parameter passing. The emergence of mvvm is a good solution to this problem. Data is data, and it is best to exist as an anemia model. operations on the data and operations based on these operations are independent of the viewmodel. View is the position of designers and page reconfigurator. So we can achieve parallel development. The link between view and viewmodel is Data Binding. Ko calls it declarative binding. Binding can be broken down into bindings and corresponding parameters. They call viewmodel and operate the model by using viewmodel. The binder is usually a very thin layer and rarely mentioned, but it is significant. It implements data re-processing and event binding (WPF is called a command), so that data can be visualized and operations can be used! The entire process is very clear. Get the model, abstract the viewmodel, and declare the binding in the view. If you feel that the Framework provides insufficient functions, add a custom binder and add commands in viewmodel (it can be used as an Event Callback, or as a data filter, verification function, and format function ). The format is fixed. For example, in the backend, there are rules for which page should be taken care of by which action. This is the ultimate solution since our front-end crash.

However, the idea is that it is not easy to implement. Therefore, the front-end mvvm framework is also widely used. One or two mvvm frameworks come out every month. The open-source world is similar to the free world, which can easily lead to the Matthew effect. The stronger the strong, the weaker the weak, and the more easily monopolized. Jquery's unique advantages prove this. The chaos in the mvvm framework shows that nothing is powerful enough. Knouckoutjs, emberjs, angularjs, and backbone (it also has a Data Binding plug-in to make it a real mvvm ). I personally prefer knouckoutjs. After all, it was developed by Microsoft, the birthplace of mvvm, and is the most orthodox faction. However, its binding has been criticized and is too complicated and difficult to use. The backend WPF is supported by powerful Microsoft tools, so people do not think so. But once you write these bindings, it will be miserable. In addition, many people cannot accept this complicated usage after the front-end is baptized by the simple dsl api of jquery. Emberjs and angularjs have poor support for IE6, so they are not commercially available in the Chinese Mainland. In addition, there are too many APIs provided, and there are many corresponding concepts and the learning curve is steep. Backbone is too heavy and has nothing to do, but it has to write a lot.Code, In reverse line with jquery.

Two important references of my mvvm framework aveon V3 are knouckoutjs and rivetsjs. Get its two-way dependency chain architecture from knouckoutjs, and go through two versions from learning to digestion. The implementation of V2 is completely original. Get its declarative binding API design from rivetsjs, but its implementation is completely self-built. V3 makes some improvements to V2's two-way dependency chain architecture, as long as it is renamed, making these concepts more acceptable.

Structure of the two-way binding link of aveon v3

 
// Viewmodel framework view // attribute accessors // composite accessors → the binder zookeeper Dom accessors zookeeper data bindings // set accessors/ /command restart
 

viewmodel is an object composed of accessors and commands. The accessor is the accessor, which is derived from Ruby's attr_accessor. It is a combination of attr_writer and attr_reader to read and write a specific data. For example, if the model has an AAA attribute, viewmodel will generate a function named AAA. We can pass the parameter to modify the AAA value or obtain the AAA value from it. This is because ie9 supports object. defineproperty describes the access mechanism of the object's properties. Can it be traversed? Can it be configured? What should be returned during reading and what will be processed during writing. If the AAA attribute is associated with the BBB attribute, we can modify the BBB when accessing the AAA, directly obj. AAA = "XXX. However, to merge IE6, we only have obj. AAA ("XXX "). Emberjs builds two-way binding chains based on object. defineproperty. Therefore, it does not support ie9.

// Ie9 + ff4 +, safari5 +, opera11 +, chrome5 (IE8 only supports DOM) var OBJ ={}, avalue = 0; object. defineproperty (OBJ, "AAA", {Get: function () {return avalue;}, set: function (newvalue) {obj. BBB + = newvalue avalue = newvalue;}, enumerable: True, retriable: true}) object. defineproperty (OBJ, "BBB", {value: 10, writable: True, enumerable: True, retriable: true}); console. log (obj. AAA) // 0console. log (obj. bbb) // 10obj. AAA = 7console. log (obj. AAA) // 7console. log (obj. bbb) // 17 // IE6 + var avalue = 0, bvalue = 10; var OBJ = {AAA: function (newvalue) {If (arguments. length) {bvalue + = newvalue avalue = newvalue;} console. log ("XXXXXXXXX") return avalue}, BBB: function (newvalue) {If (arguments. length) {bvalue = newvalue;} return bvalue} console. log (obj. AAA () // 0console. log (obj. bbb () // 10obj. AAA (7) console. log (obj. AAA () // 7console. log (obj. bbb () // 17

There are four types of accessors, which exist in viewmodel. The simplest is the property accesser, which operates on an attribute in the model, which is equivalent to Ko's monitoring attribute. If a field consists of two or more attributes in the model, or needs to be processed to generate its value, a composite accesser is used, it is equivalent to Ko's dependency monitoring attribute, or computed in emberjs. For example, many intermediate states in a program can be abstracted into a combined accesser. In other words, the combined accessors re-combine existing things to form a monitoring function for attributes. The Set accessor is an array in the model for monitoring. If it is sorted and added or deleted, it will notify both ends of the two-way dependency chain to refresh itself. The Set accessors are special arrays and their methods are overwritten. Although they are used in the same way, they will be synchronized to the corresponding node region after being called!

There is also a command in viewmodel. For example, the binder is equivalent to the action in MVC, and the command is equivalent to helpers. It is just a common function, and the framework will no longer process it. The framework distinguishes commands from accessors by using the $ type and "$" + (new date-0) attributes. It may be a bit complicated. For example, there is an object VAR model = {AAA: 1, BBB: 1}, and then $. viewmodel (OBJ) gets its corresponding viewmodel.

Next, let's look at the binding part. Bind events. The implementation of knouckoutjs is as follows:

<Div> <Div data-bind = "Event: {Mouseover: enabledetails, mouseout: disabledetails}"> mouse over me </div> <Div data-bind = "visible: detailsenabled "> details </div> <SCRIPT type =" text/JavaScript "> var viewmodel = {detailsenabled: Ko. observable (false), enabledetails: function () {This. detailsenabled (true) ;}, disabledetails: function () {This. detailsenabled (false) ;}}; Ko. applybindings (viewmodel); </SCRIPT>
 

Avron V3 references the binding Syntax of rivetsjs and implements the following:

<Div> <Div data-on-Mouseover = "enabledetails" data-on-mouseout = "disabledetails"> mouse over me </div> <Div data-display = "detailsenabled"> details </div> <SCRIPT type = "text/JavaScript"> require ("aveon, ready ", function ($) {var Vm = $. mvvm. convert ({detailsenabled: false, enabledetails: function () {VM. detailsenabled (true) ;}, disabledetails: function () {VM. detailsenabled (false) ;}}); $. mvvm. render (VM)}) </SCRIPT>
 

To implement cyclic binding, knouckoutjs is implemented as follows:

<Table> <thead> <tr> <TH> first name </Th> <TH> last name </Th> </tr> </thead> <tbody data-bind = "foreach: people "> <tr> <TD data-bind =" text: firstname "> </TD> <TD data-bind =" text: lastname "> </TD> </tr> </tbody> </table> <SCRIPT type =" text/JavaScript "> Ko. applybindings ({People: [{firstname: 'bert ', lastname: 'bertington'}, {firstname: 'Charles ', lastname: 'charlesforth'}, {firstname: 'Denise ', lastname: 'dentiste'}]}); </SCRIPT>
 

Aveon V3 is implemented as follows: (data-each-[item]-[Index], item, index is optional, and the name can be used as long as it complies with the variable naming rules)

<SCRIPT type = "text/JavaScript"> require ("aveon, ready", function ($) {$. mvvm. render ({People: [{firstname: 'bert ', lastname: 'bertington'}, {firstname: 'Charles ', lastname: 'charlesforth'}, {firstname: 'Denise ', lastname: 'dentiste'}]});}) </SCRIPT> <Table> <thead> <tr> <TH> first name </Th> <TH> last name </Th> </tr> </thead> <tbody data-each-P = "people"> <tr> <TD data-TEXT = "P. firstname "> </TD> <TD data-TEXT =" P. lastname "> </TD> </tr> </tbody> </table>
 

The advantage of avron V3 is that it is fully DSL. We can use the DoT number to find an available accessor command in the VM as the value of data binding. It is easy to implement and does not need to compile a complicated JSON compiler like knouckoutjs. Complex things are difficult to maintain and upgrade. After binding data, I will introduce it to a series of tutorials.

In data binding, we use a special attribute to guide mvvm to work. The format is data-binding-[Param]-[Param]. Disconnect with "-", the second string is the name of the biner, and the rest is its parameter. For example, event binding, data-on-click.

In aveon V3, it provides the following default bindings, which can be accessed through $. viewmodel. bindings. V3 bridges V2's wounds and perfectly supports event binding and event proxy.

• Data-Text
• Data-html
• Data-class
• Data-CSS-[Class]
• Data-ATTR
• Data-Value
• Data-Display
• Data-on-[event]
• Data-enable
• Data-Disable
• Data-Options
• Data-each-[item]-[Index]
• Data-with-[value]-[Key]
• Data-if
• Data-unless

Avron V3 splits the name of this attribute into a binder and other parameters, and then adds its value to the corresponding accessors and commands in the VM, finally, they are built into a thing called Dom accessors, which serves as the top layer of the two-way binding chain and deals with Dom.

In the jquery era, ID is the most reliable basis for us to hit elements. This serves as the starting point for handling nodes around us. At the behavior layer, we bind events, and almost all events can be proxies. But jquery is a function-based programming. If the status is used in multiple consecutive callbacks, it should be written outside the callback. Of course, we can cache data on a node, and get the node through the selector in another callback and then re-data it out. But on the whole, jquery code is divided into segments by events, with some intermediate quantities and processing functions mixed in. Whether they work well depends entirely on the technical skills of programmers. In mvvm, Data Binding and elements are integrated, so there is no deviation. When dealing with interactions, events appear as new commands,
Callbacks are managed in a set of VMS, and their statuses are also collected in the VM. We no longer have to worry about how to organize code. All of them follow the rules, so it is easy for new users to use the relay. Mvvm reduces the dependency on selector and binds data and operations to a solid pivot.

Link address

In a few days, I will write some tutorials to introduce how to use them. Complete!