资讯专栏INFORMATION COLUMN

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

zhongmeizhi / 2142人阅读

摘要:最初编写于年,是一个面向移动应用的前端框架,版本进行了大量的重构或重写,并尽可能的保持了和之前版本类似的,是一个极轻量的框架,相较目前主流的类似的框架,更为轻量,希望为开发人员提供多一种的选择。

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:

JavaScript:

//启动应用
mokit({
  element: document.getElementById("app"),
  data:function(){
    return {
      name: "世界"
    };
  },
  say: function (name) {
    alert("hello "+ name);
  }
}).start();
定义组件

编写组件:

//定义一个 hello 组件
var Hello = new mokit.Component({
  template: "",
  properties: { name: null},
  say: function (name) {
    alert("hello "+ name);
  }
});

HTML:

click me

JavaScript:

//启动应用
mokit({
  element: document.getElementById("app"),
  components:{ Hello: Hello }
  data:function(){
    return {
      name: "世界"
    };
  }
}).start();
插件列表

路由

转场动画

Touch API

在线示例

Todo

Transition

Route

Touch

规划

支持服务端渲染

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/50262.html

相关文章

  • 一个 MVC 框架 MVVM 复活

    摘要:最初编写于年,是一个面向移动应用的前端框架,版本进行了大量的重构或重写,并尽可能的保持了和之前版本类似的,是一个极轻量的框架,相较目前主流的类似的框架,更为轻量,希望为开发人员提供多一种的选择。 Mokit 最初编写于 2012 年,是一个面向移动应用的前端 mvc 框架,v3 版本进行了大量的重构或重写,并尽可能的保持了和之前版本类似的 API,v3 是一个「极轻量」的 MVVM 框...

    1treeS 评论0 收藏0
  • 我的Android重构旅:架构篇

    摘要:是的架构的实现。是在年提出的一种前端架构,主要用来处理复杂的逻辑的一致性问题当时是为了解决页面的消息通知问题。 去年10月底来到了新公司,刚开始接手 Android 项目时,发现该项目真的是一团遭,项目开发上没有任何架构可言,开发人员连简单的 MVC、MVP 都不了解,Activity 及其臃肿,业务边界也不明确,因此我决定重新分析一下当前主流的几种开发架构,选出适合当前项目的架构形式...

    mylxsw 评论0 收藏0
  • 浅析 web 前端 MVVM

    摘要:它由微软架构师和开发,通过利用微软图形系统和的互联网应用派生品的特性来简化用户界面的事件驱动程序设计。微软的和架构师之一于年在他的博客上发表了。更改时会得到提醒这个情况是一个单向流。 前言 记得四个月前有一次面试,面试官问我 MVVM 是什么,MVVM 的本质是什么。我大脑一片混乱,那时我对 MVVM 的认知就只是双向绑定和Vue,以这个关键字简单回答了几句,我反问 MVVM 的本质是...

    VincentFF 评论0 收藏0
  • MVC MVP MVVM

    摘要:,的事件回调函数中调用的操作方法。以为例调用关系模式实际就是将中的改名为,调用过程基本一致,最大的改良是间的双向绑定。和间,有一个对象,可以操作修改,使用。 参考:MVC,MVP 和 MVVM 的图示 - 阮一峰http://www.ruanyifeng.com/blo...Web开发的MVVM模式http://www.cnblogs.com/dxy198...界面之下:还原真实的MV...

    wushuiyong 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<