ouvens / Qvm
Programming Languages
javascript
184084 projects - #8 most used programming language
###1，介绍 qvm概念，一个适用于移动端的mini mvvm(什么是mvvm？没了解的同学自己去了解)框架。参考了angular和vuejs的设计实现思路，并进行简化封装，目前使用的zepto基本依赖库，使用最少的代码实现了基础功能版。 ###2，为什么要做它 PC浏览器时代，实现mvvm有着麻烦的兼容性问题。而在移动浏览器时代，浏览器原生的支持可以让我们用最少的代码来实现一个mvvm框架库，来最大程度的减少移动端业务代码的开发工作。预计对于中大型的移动前端应用项目，使用mvvm能减少至少30%的业务量，让项目更容易维护。 (不过目前仍有很多不完善的地方后面需要持续改进) ###3，及其简单的API介绍 directive: 以q-开始的属性为我们定义的元素动作指令 ######vm模型结构介绍： { $id: 823832887973495, //qvm对象的全局id,每个qvm对象对应一个 $elem: #div, //对应的view $model: { //viewModel,通过directive关联view和model的操作 text:{ ns: ns, //获取对象data或指令的namespace accessor: accessor, //同一的外部访问器，vm通过修改它来改变 key: text, //指令名称 directive： [directive], //指令集 setter: function, //对象设置方法 getter: function, //对象获取值方法 tpl: #div //模板字符串,部分指令需要使用，如repeat //后续可能还要增加 } }, data: { //对应的model，即数据层 } } ######3.1 q-text 改变节点innerHTML
<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: 'Hello World!
' } }); setTimeout(function(){ vm.text.accessor = 'Fuck World!
'; //渲染html，通过改变accessor改变innerHTML。 },4000) </script> ######3.2 q-class 改变节点class属性 <style> .red{ color: red; } .green{ color: green; } </style> <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: 'Hello World!
', color: 'red' } }); setTimeout(function(){ vm.text.accessor = 'Fuck World!
'; vm.class.accessor = 'green'; },4000) </script> ######3.3 q-attr数据属性赋值
Hello World!
', color: 'red', list: list } }); setTimeout(function(){ delete list[2]; list[0].title='music change the world'; list[1].title='PS master learning'; vm.class.accessor = 'green'; vm.repeat.accessor = list; },4000); </script>delete list[2]; list[0].title='music change the world'; list[1].title='PS master learning'; 改变repeat渲染数组的内容，只对数组进行修改和删除长度。 ######3.6 q-对象内部渲染 <style> .red{ color: red; } .green{ color: green; } </style>
Hello World!
', color: 'red', img: { src: 'http://9.url.cn/edu/banner/img/880facff_760_300.jpg' } }; var vm = qvm.get({ selector: '#demo', data: { list: data } }); setTimeout(function(){ data.color = 'green'; data.title = 'Fuck World!
'; data.img.src = 'http://9.url.cn/edu/banner/img/10b0af94_760_300.jpg'; vm.repeat.accessor = data; },4000); </script> qvm支持嵌套渲染，但是viewModel以定义的最外层数据为准。 ######3.7 q-on简单事件绑定 定义的动作和事件名，目前子节点上的on代理在根元素上，避免了重复绑定，如果根节点和根节点同时含有on方法，则按照冒泡的原则进行事件处理。实现时使用了根节点循环向下传递的方式。 ######示例 <style> .red{ color: red; } .green{ color: green; } </style>
点我!
', color: 'red', img: { src: 'http://9.url.cn/edu/banner/img/880facff_760_300.jpg' } }; var vm = qvm.get({ selector: '#demo', data: { list: data }, action: function(){ alert('点击事件!'); } }); </script> 目前实现了节点事件代理到最外层的qmv对象元素上。不对内部元素做绑定。 ######3.8 q-*自定义directive <style> .red{ color: red; } .green{ color: green; } </style>点我!
', color: 'red', img: { src: 'http://9.url.cn/edu/banner/img/880facff_760_300.jpg' } }; var vm = qvm.get({ selector: '#demo', data: { list: data }, action: function(){ alert('点击事件!'); }, selfProcess: function(key, vm){ console.log(key, vm); alert('我是一个自定义处理指令!嘿嘿嘿~') } }); </script> 子定义的指令需要遵守一定的规则，例如下面q-self对应的指令为selfProcess的函数，则节点扫描时会自动执行self指令的selfProcess函数。TODO： 更好的dirtycheck实现，类似virtual dom的方式~
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].