一个 MVC 框架以 MVVM 之「魂」复活了!
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 之「魂」复活了!的更多相关文章
- 老司机教你用原生JDK 撸一个 MVC 框架!!!
其实 Spring MVC 是一个基于请求驱动的 Web 框架,并且也使用了前端控制器模式来进行设计,再根据请求映射规则分发给相应的页面控制器进行处理,具体工作原理见下图. 在这里,就不详细谈相关的原 ...
- 使用 Netty 实现一个 MVC 框架
NettyMVC 上面介绍 Netty 能做是什么时我们说过,相比于 SpringMVC 等框架,Netty 没提供路由等功能,这也契合和 Netty 的设计思路,它更贴近底层.下面我们在 Netty ...
- 2015年3月26日 - Javascript MVC 框架DerbyJS DerbyJS 是一个 MVC 框架,帮助编写实时,交互的应用。
2015年3月26日 - Javascript MVC 框架DerbyJS DerbyJS 是一个 MVC 框架,帮助编写实时,交互的应用.
- springMVC和struts2有什么不同?为什么要用springMVC或者struts2?让你实现一个MVC框架大概如何设计?
[问题一:不同] (1)框架机制 1.Struts2采用Filter(StrutsPrepareAndExecuteFilter)实现,SpringMVC(DispatcherServlet)则采用S ...
- 分享一个网上搜不到的「Redis」实现「聊天回合制」的方案
前言 为什么说网上搜不到,因为关于聊天回合制的方案作者本人快把百度搜秃噜了也没找到,好在最终是公司一个关系不错的大佬帮提供了点思路,最终作者将其完整实现了出来. 分享出来大家可以收藏,万一你哪天也碰到 ...
- AsMVC:一个简单的MVC框架的Java实现
当初看了<从零开始写一个Java Web框架>,也跟着写了一遍,但当时学艺不精,真正进脑子里的并不是很多,作者将依赖注入框架和MVC框架写在一起也给我造成了不小的困扰.最近刚好看了一遍sp ...
- 自己写一个java的mvc框架吧(五)
自己写一个mvc框架吧(五) 给框架添加注解的支持 一段废话 上一章本来是说这一章要写视图处理的部分,但是由于我在测试代码的时候需要频繁的修改配置文件,太麻烦了.所以这一章先把支持注解的功能加上,这样 ...
- 自己写一个java的mvc框架吧(四)
自己写一个mvc框架吧(四) 写一个请求的入口,以及初始化框架 上一章写了获取方法的入参,并根据入参的参数类型进行数据转换.这时候,我们已经具备了通过反射调用方法的一切必要条件.现在我们缺少一个htt ...
- 自己写一个java的mvc框架吧(三)
自己写一个mvc框架吧(三) 根据Method获取参数并转换参数类型 上一篇我们将url与Method的映射创建完毕,并成功的将映射关系创建起来了.这一篇我们将根据Method的入参参数名称.参数类型 ...
随机推荐
- Weex 版扫雷游戏开发
扫雷是一个喜闻乐见的小游戏,今天在看 Weex 文档的过程中,无意中发现用 Weex 完全可以开发一个扫雷出来.当然这个扫雷和 Windows 那个有一点差距,不过麻雀虽小五脏俱全,随机布雷.自动挖雷 ...
- ConcurrentMap
ConcurrentMap接口下有两个重要的实现: ConcurrentHashMap ConcurrentSkipListMap(支持并发排序功能,弥补ConcurrentHashMap) Conc ...
- php面向对象中public与var的区别
public和var的作用差不多 因为 var定义的变量如果没有加protected 或 private则默认为public php4 中一般是用 varphp5 中就一般是用 public了 现在基 ...
- 【LOJ】#2014. 「SCOI2016」萌萌哒
题解 这个题好妙啊 首先我们发现,如果我们可以暴力,就是把相同的元素拿并查集合起来,最后统计集合个数\(cnt\) 答案是\(9\*10^{cnt - 1}\) 然而我们做不到= = 我们可以用倍增的 ...
- 首次使用ideal构建maven项目web
如附件 链接:https://pan.baidu.com/s/1oH-9VfIKnLPjVt-tOH7fZw 提取码:7s5t
- BZOJ3262陌上花开(三维偏序问题(CDQ分治+树状数组))+CDQ分治基本思想
emmmm我能怎么说呢 CDQ分治显然我没法写一篇完整的优秀的博客,因为我自己还不是很明白... 因为这玩意的思想实在是太短了: fateice如是说道: 如果说对于一道题目的离线操作,假设有n个操作 ...
- React Native 系列(九)
前言 本系列是基于React Native版本号0.44.3写的.很多的App都使用了Tab标签组件,例如QQ,微信等等,就是切换不同的选项,显示不同的内容.那么这篇文章将介绍RN中的Tab标签组件. ...
- luogu P4115 Qtree4
题目链接 luogu P4115 Qtree4 题解 动态点分治,和上一题一样.同样三个堆.就是带权,用边权替换深度就好 为什么要单独写这个题解呢,因为我卡常卡了一天....据说树剖比rmq快? 在第 ...
- POJ 3553 Light Switching Game 博弈论 nim积 sg函数
http://poj.org/problem?id=3533 变成三维的nim积..前面hdu那个算二维nim积的题的函数都不用改,多nim积一次就过了...longlong似乎不必要但是还是加上了 ...
- [CodeForces-763C]Timofey and remoduling
题目大意: 告诉你一个长度为n的等差数列在模m意义下的乱序值(互不相等),问是否真的存在满足条件的等差数列,并尝试构造任意一个这样的数列. 思路: 首先我们可以有一个结论: 两个等差数列相等,当且仅当 ...