首頁 > web前端 > js教程 > js實作一個簡單的MVVM框架範例分享

js實作一個簡單的MVVM框架範例分享

小云云
發布: 2018-01-16 13:12:56
原創
1737 人瀏覽過

本文主要為大家分享一篇js實作一個簡單的MVVM框架範例,具有很好的參考價值,希望對大家有幫助。一起跟著小編過來看看吧,希望能幫助大家。

以前都是默默地看園子裡的文章,猥瑣的點贊,今天也分享一下自己用js實現的一個簡單mvvm框架。

最初只做了自動綁定事件,後面又參考學習了vue,knouckout以及argular實現方式,以及結合自己做WPF的一些經驗,增加了屬性綁定,今天又稍微整理了下,完善了部分功能,把程式碼提交到了碼雲:https://gitee.com/zlj_fy/Simple-MVVM

先簡單介紹下用法:

<form class="form-horizontal" role="form" data-context="TestController">
  <p class="form-group">
   <legend>Form title</legend>
  </p>
  <p class="form-group">
   <p 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" />
   </p>
  </p>
 </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=“[控制器名稱]”就可以將該控制器綁定到該節點底下所有元素。如果元素後代存在嵌套Controller,則其所在的元素以下子元素作用域指向子控制器。

1.監控屬性以及複雜屬性

所有屬性必須定義在data節點下,如果裡面的屬性定義成function則認為是複雜屬性(例如desc),複雜屬性是唯讀的,重新賦值的話會提示錯誤。

綁定到html元素上的格式:"{屬性名稱,fomat=[控制器方法]}",屬性名稱支援嵌套屬性,例如(a.b);屬性名稱不支援表達式,考慮了覺得不是很必要,完全可以使用複雜屬性去代替,當前缺點是業務複雜的話可能造成大量複雜屬性;屬性名稱右邊是可選參數,目前只有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')) {
    //监听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節點下的屬性。

5.鉤子

init以及created,init是在監聽所有屬性之後編譯dom之前,可以在這方法上初始化參數;created是編譯dom元素之後。

其中控制器預設實作了extend繼承方法,可以繼承另一個控制器,必須在init方法中使用。目前你也可以自己使用原型繼承的方式去實現。

init: function () {
    this.extend(PageController)
   },
   created: function () {
    //TODO
   },
登入後複製

6.擴展

相信大家在做專案的時候一定都會有一套公用的元件,那麼可以像下面那樣擴展,預設對應的元件掛載到所有的控制器範例下面,就可以之間在對應的方法下直接呼叫了: this.http.post();

不過有一個建議,就是盡量統一將回調方法的作用域指向控制器,這樣開發不至於老是出現作用域的問題。

$.controller.extend({
   utils: utils,
   notify: $.notify,
   modal: $.modal,
   http: $.http,
   alert: $.alert
  })
登入後複製

7.原理以及程式碼分析(待續...)

整個js程式碼量只有300多行,所以實現的比較簡單,有很多方面是沒有考慮到的,還有一些功能是想實現卻沒有去做的,目前不支援數組變化檢測,以及局部更新相關dom。

相關推薦:

分別介紹MVC、MVP和MVVM是什麼

什麼是MVVM架構和資料綁定?

Vue.js 與 MVVM 的注意事項

#

以上是js實作一個簡單的MVVM框架範例分享的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板