一个 MVC 框架以 MVVM 之「魂」复活了！

2024年4月8日 201次阅读 来源: Houfeng

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();

插件列表

在线示例

计划

  • 支撑服务端衬着

    原文作者：Houfeng
    原文地址: https://segmentfault.com/a/1190000007710057
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞