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

Houfeng發表於2019-02-16
MVC框架MVVM

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

相較 v2 主要變化

  • MVC -> MVVM

  • 重寫模板引擎（由字元模板改為 DOM 模板），新增支援雙向繫結

  • 原來的 View 類改為 Component，同時取消了 Controller 類

  • options 選項改為 properties，並支援計算屬性

  • onRender 生命週期函式改為 onReady

  • 新增支援 data 選項

  • 新增支援 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();

外掛列表

線上示例

規劃

  • 支援服務端渲染

相關文章