一個 MVC 框架以 MVVM 之「魂」復活了！

時間 2020-01-26

標籤一個 mvc 框架 mvvm 復活简体版

原文原文鏈接

Mokit 最初編寫於 2012 年，是一個面向移動應用的前端 mvc 框架，v3 版本進行了大量的重構或重寫，並儘量的保持了和以前版本相似的 API，
v3 是一個「極輕量」的 MVVM 框架，相較目前主流的相似的框架(react/vue/angular)，mokit v3 更爲「輕量」，但願爲開發人員提供多一種的選擇。前端

相較 v2 主要變化

MVC -> MVVMvue
重寫模板引擎（由字符模板改成 DOM 模板），新增支持雙向綁定react
原來的 View 類改成 Component，同時取消了 Controller 類git
options 選項改成 properties，並支持計算屬性github
onRender 生命週期函數改成 onReadymvc
新增支持 data 選項app
新增支持 watches 選項框架
分拆 template 選項功能，再也不自動檢查是否爲 Element，同時新增 element 選項函數
指令默認前綴由 data- 改成 m:，同時自定義指令動畫

特性

面向移動設備，內置支持經常使用「手勢事件」並能夠輕鬆添加自定義事件。
極其輕量僅 9.8k (uglify+gzip)
提供類 WebCompoents 的支持，並支持「組件繼承」

Hello world

HTML:

<div id="app">
  <input type="text" m:model="name" />
  <button m:on:tap="say(name)">click me</button>
</div>

JavaScript:

//啓動應用
mokit({
  element: document.getElementById('app'),
  data:function(){
    return {
      name: '世界'
    };
  },
  say: function (name) {
    alert('hello '+ name);
  }
}).start();

定義組件

編寫組件:

//定義一個 hello 組件
var Hello = new mokit.Component({
  template: '<button m:on:click="say(name)" m:content></button>',
  properties: { name: null},
  say: function (name) {
    alert('hello '+ name);
  }
});

HTML:

<div id="app">
  <m:hello m:prop:name="name">click me</m:hello>
</div>

JavaScript:

//啓動應用
mokit({
  element: document.getElementById('app'),
  components:{ Hello: Hello }
  data:function(){
    return {
      name: '世界'
    };
  }
}).start();