移動端mini mvvm架構實現

標籤：

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

<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: ‘<h2>Hello World!</h2>‘}}); setTimeout(function(){vm.text.accessor = ‘<h2>Fuck World!</h2>‘},4000)</script>

vm.text.accessor = ‘<h2>Fuck World!</h2>‘  渲染html，通過改變accessor改變innerHTML。

3.2 q-class 改變節點class屬性

<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: ‘<h2>Hello World!</h2>‘,color: ‘red‘}});setTimeout(function(){vm.text.accessor = ‘<h2>Fuck World!</h2>‘;vm.class.accessor = ‘green‘;},4000)</script>

vm.class.accessor = ‘green‘; 改變元素的class類，從red改為green。

3.3 q-attr資料屬性賦值

<div><a><img id="demo" q-attr-src="img" width="50" height="30"></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>這裡注意一下使用attr- 和data-指令使用attr_src和data_src來讀取存取器，後面需要統一介面。

3.4 q-data資料屬性賦值

<div id="demo" q-data-title="text"><a><img q-attr-src="img" width="50" height="30"></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 大神教程‘,img: ‘http://9.url.cn/edu/banner/img/505d9c39_760_300.jpg‘}}); setTimeout(function(){vm.data_title.accessor = ‘藝術人生‘;},4000); </script>此方法用於改變data屬性。

3.5 q-repeat 嵌套使用

<style>.red{color: red;}.green{color: green;}</style><div id="demo" q-class="color" q-repeat="list"><div><img q-attr-src="img" width="50" height="30"><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: ‘音樂改變世界‘},{img: ‘http://9.url.cn/edu/banner/img/880facff_760_300.jpg‘,title: ‘PS 大神教程‘},{img: ‘http://9.url.cn/edu/banner/img/505d9c39_760_300.jpg‘,title: ‘藝術人生‘}]; var vm = qvm.get({selector: ‘#demo‘,data:{text: ‘<h2>Hello World!</h2>‘,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> <div id="demo" q-repeat="list"><div><span q-class="color" q-text="title"></span><span><img q-attr-src="img.src" width="50" height="30"></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>Hello World!</h2>‘,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 = ‘<h2>Fuck World!</h2>‘;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簡單事件綁定

定義的

<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><img q-attr-src="img.src" width="50" height="30"></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>點我!</h2>‘,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>

目前只實現了簡單的事件綁定處理，而且建議只支援在根項目上代理綁定。不對內部元素做綁定。

3.8 q-*自訂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="50" height="30"></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>點我!</h2>‘,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函數。

4，效能測試

    

移動端mini mvvm架構實現