js實現一個簡單的MVVM框架示例
以前都是默默地看園子里的文章，猥瑣的點贊，今天也分享一下自己用js實現的一個簡單mvvm框架。
最初只做了自動綁定事件，后面又參考學習了vue，knouckout以及argular實現方式，以及結合自己做WPF的一些經驗，增加了屬性綁定，今天又稍微整理了下，完善了部分功能，把代碼提交到了碼云：https://gitee.com/zlj_fy/Simple-MVVM
先簡單介紹下用法：
<form class="form-horizontal" role="form" data-context="TestController">
<div class="form-group">
<legend>Form title</legend>
</div>
<div class="form-group">
<div class="col-sm-6 col-sm-offset-2">
<input type="text" class="form-control" bind-val="age,format=format" style="margin:5px 0" />
<input type="text" class="form-control" bind-val="desc" style="margin:5px 0" />
<input type="range" min="10" max="300" bind-val="age" step="10" class="form-control" style="margin:5px 0" />
<input type="button" class="btn btn-primary" value="更新" style="margin:5px 0" on-click="update" />
</div>
</div>
</form>
<script>
var TestController = {
data: {
name: 'xiaoming',
age: 3,
desc: function() {
return this.name + ' likes looking little movie. he should take care of his body'
}
},
format: function(val) {
return val + '歲'
},
update: function() {
this.name = 'this is a test'
this.age = 18
}
}
$('body').controller()
</script>
首先定義一個控制器，可以是json對象，也可一是一個function，然后在頂層的元素定義data-context=“[控制器名稱]”就可以將該控制器綁定到該節(jié)點底下所有元素。如果元素后代存在嵌套Controller，則其所在的元素以下子元素作用域指向子控制器。
1.監(jiān)控屬性以及復雜屬性
所有屬性必須定義在data節(jié)點下，如果里面的屬性定義成function則認為是復雜屬性（例如desc），復雜屬性是只讀的，重新賦值的話會提示錯誤。
綁定到html元素上的格式："{屬性名,fomat=[控制器方法]}"，屬性名支持嵌套屬性，例如（a.b）；屬性名不支持表達式，考慮了覺得不是很有必要，完全可以使用復雜屬性去代替，當前缺點是業(yè)務復雜的話可能造成大量復雜屬性；屬性名右邊是可選參數，目前只有format，也就是屬性顯示在html上的轉換方法。
2.指令
綁定指令語法是 bind-{指令}的形式，目前只實現了val，attr，text，html，template，其實可以看出，前面4個都只是簡單封裝了jqeury方法，template是用到了jquery-tmpl插件實現的，如果你需要更多的指令，你可以自己去擴展，只需要實現init初始加載方法（接收當前的observer參數），以及update方法（參數說明：對應的jquery元素，最新的值，當前控制器實例）；如果是擴展已有的指令，默認會覆蓋原有的。如下：
$.controller.addDirective("val", {
init: function (observer) {
if (observer.$ele.is('input,select')) {
//監(jiān)聽onchange事件
observer.$ele.on('input propertychange', function () {
var newVal = $(this).val()
observer.writeValue(newVal)
})
}
},
update: function ($ele, newVal, controller) {
$ele.val && $ele.val(newVal)
}
})
3.事件
綁定事件語法：on-{事件}=“{控制器方法},type=on/one”，控制器方法右邊是可選參數，目前只有綁定類型on/one，默認是on；控制器方法接收兩個參數，一個是可在對應事件的元素上設置初始參數，一個是event事件參數；
<button type="button" class="btn btn-primary" data-page="1" on-click="refesh">查詢</button>
4.方法
直接使用this.屬性名，就可以直接訪問對應data節(jié)點下的屬性。
5.鉤子
init以及created，init是在監(jiān)聽所有屬性之后編譯dom之前，可以在這方法上初始化參數；created是編譯dom元素之后。
其中控制器默認實現了extend繼承方法，可以繼承另一個控制器，必須在init方法中使用。當前你也可以自己使用原型繼承的方式去實現。
init: function () {
this.extend(PageController)
},
created: function () {
//TODO
},
6.擴展
相信大家在做項目的時候肯定都會有一套公用的組件，那么可以像下面那樣擴展，默認對應的組件掛載到所有的控制器示例下面，就可以之間在對應的方法下直接調用了： this.http.post()；
不過有一個建議，就是盡量統(tǒng)一將回調方法的作用域指向控制器，這樣開發(fā)不至于老是出現作用域的問題。
$.controller.extend({
utils: utils,
notify: $.notify,
modal: $.modal,
http: $.http,
alert: $.alert
})
7.原理以及代碼分析（待續(xù)...）
整個js代碼量只有300多行，所以實現的比較簡單，有很多方面是沒有考慮到的，還有一些功能是想實現卻沒有去做的，目前不支持數組變化檢測，以及局部更新相關dom。
以上這篇js實現一個簡單的MVVM框架示例就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
這篇文章主要為大家介紹了uni-app實現全局水印示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-07-07
這篇文章給大家總結了在.vue文件里cropperjs的使用方法和經驗教訓，感興趣的朋友跟隨腳本之家小編學習吧2018-03-03
通過獲取瀏覽器語言版本，來相對的加載easyui語言包就是動態(tài)加載JS文件，下面有個不錯的實例，大家可以看看2014-10-10
JavaScript 放大鏡是我成為前端后寫的第一個組件, 從中學到了很多東西. 現在已經過去超過半年, 我希望能在自己仍有印象的時候, 整理和重新思考其中的一些處理方法, 將它改進, 并將這些想法寫出來2011-05-05
本篇文章主要是對js 事件截取enter按鍵頁面提交事件示例代碼進行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-03-03
首先說一下，為什么要服務器時間同步， 因為服務器時間和本地電腦時間存在一定的時間差。有些對時效性要求非常高的應用，例如時時彩開獎，是不能容忍這種時間差存在的2017-09-09
js實現iframe框架取值的方法(兼容IE,firefox,chrome等)
這篇文章主要介紹了js實現iframe框架取值的方法,可兼容IE,firefox,chrome等瀏覽器.涉及JavaScript針對框架元素取值的相關技巧,需要的朋友可以參考下2015-11-11
這篇文章主要為大家詳細介紹了js仿小米二級菜單顯示效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
將Datatable轉化成json可以將dt序列化成json，放到前臺的隱藏控件hidBoundary中，具體的實現如下，有類似需求的朋有可以參考下2013-09-09
阿拉伯數字如何轉為中文大寫這個實現的方法有很多，在本文將為大家介紹下js中時如何實現的，感興趣的朋友可以參考下2013-09-09