Mobile Mini-MVVM Framework Implementation

1, Introduction

QVM concept, a mini MVVM for the mobile side (what is MVVM?) Do not know the students themselves to understand) framework. Reference to angular and vuejs design implementation ideas, and to simplify the package, the current use of the Zepto Basic library, using the least code to achieve the basic function version.

2, why do it
in the age of PC browsers, there are troublesome compatibility issues with MVVM. In the mobile browser era, the native support of the browser allows us to implement an MVVM framework library with minimal code to minimize the development of mobile business code. It is expected that for medium to large mobile front end applications, using MVVM can reduce the business volume by at least 30% and make the project easier to maintain.

(There are still a lot of imperfections that need continuous improvement at the moment)

3, and its simple API introduction

directive: an element action instruction with the Q-start attribute defined for us

Description of the VM model structure:

{     $id: The global ID of the  823832887973495, //QVM object, one      for each QVM object $elem :  #div,  //corresponds to the view     $model:  {  //viewmodel, Working with view and model with Directive         text:{             ns: ns, //gets the namespace     of the object data or instruction         accessor: accessor, //the same external accessor, the VM modifies it to change the              key: text, //directive name              directive: [directive], //Instruction Set              setter: function, //Object Setting method              getter: function, //object Fetch Value method              tpl:  #div  //Template strings, some instructions need to be used, such as repeat             //follow-up may also increase         }    },     data: {      //corresponding model, i.e. data layer      }}

3.1 q-text Change node innerHTML

<div id= "Demo" q-text= ' text ' ></div> <script type= "Text/javascript" src= "Js/zepto.js" ></script ><script type= "Text/javascript" src= "js/qvm.js" ></script><script>var vm = Qvm.get ({selector: ' # Demo ', Data:{text: ' 
VMS.text.accessor= ' Renders the HTML, changing the innerHTML by changing the accessor.
3.2 q-class Changing node class properties
<style>.red{color:red;}. Green{color:green;} </style><div id= "Demo" q-text= ' text ' q-class= "color" ></div> <script type= "Text/javascript" src= "Js/zepto.js" ></script><script type= "Text/javascript" src= "Js/qvm.js" ></script><script >var VM = qvm.get ({selector: ' #demo ', Data:{text: ' 
Vm.class.accessor = ' green '; Change the class of the element, changing from red to green.
3.3 q-attr Data Property assignment
<div><a></a></div> <script Type= "Text/javascript" src= "js/zepto.js" ></script><script type= "Text/javascript" src= "Js/qvm.js" > </script><script>var VM = qvm.get ({selector: ' #demo ', data: {img: ' http://9.url.cn/edu/banner/img/ 505d9c39_760_300.jpg '}}); SetTimeout (function () {vm.attr_src.accessor = ' http://9.url.cn/edu/banner/img/880facff_760_300.jpg ';},4000); </script> note here that using the attr-and data-instructions to read the accessors using ATTR_SRC and DATA_SRC, you need a unified interface later.
3.4 Q-data Data Property Assignment
<div id= "Demo" q-data-title= "text" ><a></a>< /div> <script type= "Text/javascript" src= "js/zepto.js" ></script><script type= "Text/javascript" Src= "Js/qvm.js" ></script><script>var vm = Qvm.get ({selector: ' #demo ', data: {text: ' PS great god Tutorial ', img: ' http ://9.url.cn/edu/banner/img/505d9c39_760_300.jpg '}}); SetTimeout (function () {vm.data_title.accessor = ' art life ';},4000); </script> This method is used to change the data property.
3.5 q-repeat Nesting use
<style>.red{color: red;}. Green{color: green;} </style><div id= "Demo"  q-class= "Color"  q-repeat= "list" ><div><span q-text= "title"  q-class= "Color" >< /span></div></div> <script type= "Text/javascript"  src= "Js/zepto.js" ></ Script><script type= "Text/javascript"  src= "Js/qvm.js" ></script><script>var  list =[{img:  ' http://9.url.cn/edu/banner/img/10b0af94_760_300.jpg ',title:  ' music changes the world '},{img:   ' http://9.url.cn/edu/banner/img/880facff_760_300.jpg ',title:  ' ps  great God Tutorial '},{img:  ' HTTP://9. Url.cn/edu/banner/img/505d9c39_760_300.jpg ',title:  ' Art Life '}]; var vm = qvm.get ({ selector:  ' #demo ',data:{text:  ' 
delete list[2];
list[0].title=‘music change the world‘;
list[1].title=‘PS master learning‘;
Changes the contents of the repeat rendered array, modifying and deleting only the length of the group.
3.6 Q-Object internal rendering
<style>    .red{color: red;}. Green{color: green;} </style> <div id= "Demo"  q-repeat= "list" ><div><span q-class= "Color"  q-text= "title" ></span><span></span><div></div> <script type=" Text/javascript " src=" js/ Zepto.js "></script><script type=" Text/javascript " src=" Js/qvm.js "></script>< script>var data = {title:  ' 
QVM supports nested rendering, but ViewModel is based on the outermost data defined.
3.7 q-on Simple Event binding
Defined by
<style>    .red{color: red;}. Green{color: green;} </style> <div id= "Demo"  q-repeat= "List"  q-on= "Click|action" ><div>< span q-class= "Color"  q-text= "title" ></span><span></span><div></div> <script type=" text/ JavaScript " src=" Js/zepto.js "></script><script type=" Text/javascript " src=" js/ Qvm.js "></script><script>var data = {title:  
Only simple event binding processing is currently implemented, and it is recommended that proxy binding be supported only on the root element. Do not bind inner elements.
3.8 q-* custom Directive
<style>.red{color: red;}. Green{color: green;} </style> <div id= "Demo"  q-repeat= "List"  q-on= "click|action"  q-self= ' SelfProcess ' ><div><span q-class= ' "Color"  q-text= "title" ></span><span>< Img q-attr-src= "Img.src"  width= " height=" ></span><div></div>  <script type= "Text/javascript"  src= "Js/zepto.js" ></script><script type= "text/ JavaScript " src=" Js/qvm.js "></script><script>var data = {title: " < h2> point I!
Sub-defined directives are subject to certain rules, such as the q-self corresponding to the SelfProcess function, which automatically executes the SelfProcess function of the self instruction when the node is scanned.
4, Performance test



Mobile Mini-MVVM Framework Implementation