js如何實現一個簡單的MVVM框架

小編給大家分享一下js如何實現一個簡單的MVVM框架，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

js的作用是什么

1、能夠嵌入動態文本于HTML頁面。2、對瀏覽器事件做出響應。3、讀寫HTML元素。4、在數據被提交到服務器之前驗證數據。5、檢測訪客的瀏覽器信息。6、控制cookies，包括創建和修改等。7、基于Node.js技術進行服務器端編程。

先簡單介紹下用法：

<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"  />
    <input type="text" class="form-control" bind-val="desc"  />
    <input type="range" min="10" max="300" bind-val="age" step="10" class="form-control"  />
    <input type="button" class="btn btn-primary" value="更新"  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=“[控制器名稱]”就可以將該控制器綁定到該節點底下所有元素。如果元素后代存在嵌套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
  })

看完了這篇文章，相信你對“js如何實現一個簡單的MVVM框架”有了一定的了解，如果想了解更多相關知識，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！