GitHub: https://github.com/houfeng/mokit

Mokit 最初编写于 2012 年,是一个面向移动应用的前端 mvc 框架,v3 版本进行了大量的重构或重写,并尽可能的保持了和之前版本类似的 API,

v3 是一个「极轻量」的 MVVM 框架,相较目前主流的类似的框架(react/vue/angular),mokit v3 更为「轻量」,希望为开发人员提供多一种的选择。

相较 v2 主要变化

  • MVC -> MVVM
  • 原来的 View 类改为 Component,同时取消了 Controller 类
  • options 选项改为 properties,并支持计算属性
  • onRender 生命周期函数改为 onReady
  • 新增支持 data 选项
  • 新增支持 watches 选项
  • 分拆 template 选项功能,不再自动检查是否为 Element,同时新增 element 选项
  • 指令默认前缀由 data- 改为 m:,同时支持自定义指令

特性

  • 面向移动设备,内置支持常用「手势事件」并可以轻松添加自定义事件。
  • 极其轻量「核心 + 手势 API + Router」仅 13k (uglify+gzip)
  • 提供类 WebCompoents 的支持,并支持「组件继承」

Hello 世界

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:tap="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();

在线示例

规划

  • 支持服务端渲染

一个 MVC 框架以 MVVM 之「魂」复活了!的更多相关文章

  1. 老司机教你用原生JDK 撸一个 MVC 框架!!!

    其实 Spring MVC 是一个基于请求驱动的 Web 框架,并且也使用了前端控制器模式来进行设计,再根据请求映射规则分发给相应的页面控制器进行处理,具体工作原理见下图. 在这里,就不详细谈相关的原 ...

  2. 使用 Netty 实现一个 MVC 框架

    NettyMVC 上面介绍 Netty 能做是什么时我们说过,相比于 SpringMVC 等框架,Netty 没提供路由等功能,这也契合和 Netty 的设计思路,它更贴近底层.下面我们在 Netty ...

  3. 2015年3月26日 - Javascript MVC 框架DerbyJS DerbyJS 是一个 MVC 框架,帮助编写实时,交互的应用。

    2015年3月26日 -  Javascript MVC 框架DerbyJS DerbyJS 是一个 MVC 框架,帮助编写实时,交互的应用.

  4. springMVC和struts2有什么不同?为什么要用springMVC或者struts2?让你实现一个MVC框架大概如何设计?

    [问题一:不同] (1)框架机制 1.Struts2采用Filter(StrutsPrepareAndExecuteFilter)实现,SpringMVC(DispatcherServlet)则采用S ...

  5. 分享一个网上搜不到的「Redis」实现「聊天回合制」的方案

    前言 为什么说网上搜不到,因为关于聊天回合制的方案作者本人快把百度搜秃噜了也没找到,好在最终是公司一个关系不错的大佬帮提供了点思路,最终作者将其完整实现了出来. 分享出来大家可以收藏,万一你哪天也碰到 ...

  6. AsMVC:一个简单的MVC框架的Java实现

    当初看了<从零开始写一个Java Web框架>,也跟着写了一遍,但当时学艺不精,真正进脑子里的并不是很多,作者将依赖注入框架和MVC框架写在一起也给我造成了不小的困扰.最近刚好看了一遍sp ...

  7. 自己写一个java的mvc框架吧(五)

    自己写一个mvc框架吧(五) 给框架添加注解的支持 一段废话 上一章本来是说这一章要写视图处理的部分,但是由于我在测试代码的时候需要频繁的修改配置文件,太麻烦了.所以这一章先把支持注解的功能加上,这样 ...

  8. 自己写一个java的mvc框架吧(四)

    自己写一个mvc框架吧(四) 写一个请求的入口,以及初始化框架 上一章写了获取方法的入参,并根据入参的参数类型进行数据转换.这时候,我们已经具备了通过反射调用方法的一切必要条件.现在我们缺少一个htt ...

  9. 自己写一个java的mvc框架吧(三)

    自己写一个mvc框架吧(三) 根据Method获取参数并转换参数类型 上一篇我们将url与Method的映射创建完毕,并成功的将映射关系创建起来了.这一篇我们将根据Method的入参参数名称.参数类型 ...

随机推荐

  1. Weex 版扫雷游戏开发

    扫雷是一个喜闻乐见的小游戏,今天在看 Weex 文档的过程中,无意中发现用 Weex 完全可以开发一个扫雷出来.当然这个扫雷和 Windows 那个有一点差距,不过麻雀虽小五脏俱全,随机布雷.自动挖雷 ...

  2. ConcurrentMap

    ConcurrentMap接口下有两个重要的实现: ConcurrentHashMap ConcurrentSkipListMap(支持并发排序功能,弥补ConcurrentHashMap) Conc ...

  3. php面向对象中public与var的区别

    public和var的作用差不多 因为 var定义的变量如果没有加protected 或 private则默认为public php4 中一般是用 varphp5 中就一般是用 public了 现在基 ...

  4. 【LOJ】#2014. 「SCOI2016」萌萌哒

    题解 这个题好妙啊 首先我们发现,如果我们可以暴力,就是把相同的元素拿并查集合起来,最后统计集合个数\(cnt\) 答案是\(9\*10^{cnt - 1}\) 然而我们做不到= = 我们可以用倍增的 ...

  5. 首次使用ideal构建maven项目web

    如附件 链接:https://pan.baidu.com/s/1oH-9VfIKnLPjVt-tOH7fZw 提取码:7s5t

  6. BZOJ3262陌上花开(三维偏序问题(CDQ分治+树状数组))+CDQ分治基本思想

    emmmm我能怎么说呢 CDQ分治显然我没法写一篇完整的优秀的博客,因为我自己还不是很明白... 因为这玩意的思想实在是太短了: fateice如是说道: 如果说对于一道题目的离线操作,假设有n个操作 ...

  7. React Native 系列(九)

    前言 本系列是基于React Native版本号0.44.3写的.很多的App都使用了Tab标签组件,例如QQ,微信等等,就是切换不同的选项,显示不同的内容.那么这篇文章将介绍RN中的Tab标签组件. ...

  8. luogu P4115 Qtree4

    题目链接 luogu P4115 Qtree4 题解 动态点分治,和上一题一样.同样三个堆.就是带权,用边权替换深度就好 为什么要单独写这个题解呢,因为我卡常卡了一天....据说树剖比rmq快? 在第 ...

  9. POJ 3553 Light Switching Game 博弈论 nim积 sg函数

    http://poj.org/problem?id=3533 变成三维的nim积..前面hdu那个算二维nim积的题的函数都不用改,多nim积一次就过了...longlong似乎不必要但是还是加上了 ...

  10. [CodeForces-763C]Timofey and remoduling

    题目大意: 告诉你一个长度为n的等差数列在模m意义下的乱序值(互不相等),问是否真的存在满足条件的等差数列,并尝试构造任意一个这样的数列. 思路: 首先我们可以有一个结论: 两个等差数列相等,当且仅当 ...