当前位置: 首页 > news >正文

Mithril.js 入门介绍

Mithril.js 是一个客户端的 JavaScript MVC 框架。

随着 Flarum 也使用了 Mithril,这个小框架在 github 上的 star 数量也已经突破了 4K。

Mithril 是什么?

Mithril 是一个客户端 javascript MVC 框架,即它是一个工具,使应用程序代码分为数据层(Model), UI 层(View),黏合层(Controller)。

Mithril 通过 gzip 压缩后,仅有 12kb 左右,这要归功于 small, focused, API。它提供了一个模板引擎与一个虚拟 DOM diff 实现高性能渲染,还提供了其它高级工具,以及支持路由和组件化。

框架的目标是使应用程序代码更容易组织,可读和可维护,帮助你成为一个更好的开发者。

不像某些框架,Mithril 努力避免将您锁定到某个 web 框架上:您可以尽量少地使用您所需要的框架。

然而,使用其整个工具库可以带来很多好处:学习使用函数式编程和巩固良好的编码实践,OOP 和 MVC 只是其中的一些。

特点

轻量级

  • gzip压缩后仅仅12kb,无依赖

  • 非常少的API,非常容易的学习曲线

鲁棒性

  • 默认安全的模板

  • 层次化的MVC组件(hierarchical)

快速

  • 虚拟DOM和编译模板

  • 智能的重绘系统(redrawing)

入门示例代码

//model 模型
var Page = {
    list: function() {
        return m.request({method: "GET", url: "pages.json"});
    }
};

var Demo = {
    //controller 控制器
    controller: function() {
        var pages = Page.list();
        return {
            pages: pages,
            rotate: function() {
                pages().push(pages().shift());
            }
        }
    },

    //view 视图
    view: function(ctrl) {
        return m("div", [
            ctrl.pages().map(function(page) {
                return m("a", {href: page.url}, page.title);
            }),
            m("button", {onclick: ctrl.rotate}, "Rotate links")
        ]);
    }
};


//initialize 初始化
m.mount(document.getElementById("example"), Demo);

性能

mithrils.js 性能

参考

  • Mithrils.js 中文文档

相关文章:

  • 亲测方案:解决HBuilder X启动提示语法助手无法访问的问题
  • nodejs搭建服务篇章一:nodejs搭建简易原生服务和基于express框架服务
  • 解决方案:微信小程序下载文档出错downloadFile:fail url not in domain list
  • nodejs搭建服务篇章二:nodejs搭建服务的路由目录分析及前端请求demo
  • 小程序权限设置:小程序下载图片保存到相册拒绝权限后,再次打开权限的解决方案
  • 自行控制loadrunner的socket协议性能测试 (转)
  • 图片懒加载:基于jQuery判断某元素是否显示在可视范围内,并实现背景图片根据随机下标进行懒加载
  • 占位图推荐:web前端开发,推荐4个常用在线占位图网址
  • MongoDB副本集搭建
  • nodejs搭建服务篇章三:nodejs搭建服务项目目录的简单介绍及app.js文件简单说明
  • 搭建rsync服务器,实现文件备份同步
  • nodejs搭建服务篇章四:前端通过nodejs搭建的服务连接MySQL数据库中的数据(数据库安装,数据库管理,ajax查询数据),超多图超详细
  • XCode升级到7后,规范注释生成器VVDocumenter插件没有用了,怎么办?
  • vue传值处理:vue中父组件通过props传值给子组件,子组件表单控件使用值,子组件改变该值时如何避免报错
  • axios的二次封装:在vue中如何灵活运用axios请求,二次封装更加灵活,更多参数可配置
  • php的引用
  • 【知识碎片】第三方登录弹窗效果
  • 2017-09-12 前端日报
  • 78. Subsets
  • Android路由框架AnnoRouter:使用Java接口来定义路由跳转
  • js对象的深浅拷贝
  • SpringBoot几种定时任务的实现方式
  • vue从创建到完整的饿了么(11)组件的使用(svg图标及watch的简单使用)
  • 读懂package.json -- 依赖管理
  • 分享自己折腾多时的一套 vue 组件 --we-vue
  • 基于Mobx的多页面小程序的全局共享状态管理实践
  • 利用阿里云 OSS 搭建私有 Docker 仓库
  • 微信小程序填坑清单
  • 小程序button引导用户授权
  • 小程序开发中的那些坑
  • puppet连载22:define用法
  • 选择阿里云数据库HBase版十大理由
  • (51单片机)第五章-A/D和D/A工作原理-A/D
  • (二)七种元启发算法(DBO、LO、SWO、COA、LSO、KOA、GRO)求解无人机路径规划MATLAB
  • (分享)一个图片添加水印的小demo的页面,可自定义样式
  • (附源码)apringboot计算机专业大学生就业指南 毕业设计061355
  • (附源码)ssm本科教学合格评估管理系统 毕业设计 180916
  • (含react-draggable库以及相关BUG如何解决)固定在左上方某盒子内(如按钮)添加可拖动功能,使用react hook语法实现
  • (简单有案例)前端实现主题切换、动态换肤的两种简单方式
  • (免费分享)基于springboot,vue疗养中心管理系统
  • (三分钟了解debug)SLAM研究方向-Debug总结
  • (十八)SpringBoot之发送QQ邮件
  • (十八)三元表达式和列表解析
  • (转)mysql使用Navicat 导出和导入数据库
  • (转)visual stdio 书签功能介绍
  • (最优化理论与方法)第二章最优化所需基础知识-第三节:重要凸集举例
  • .bat批处理(五):遍历指定目录下资源文件并更新
  • .cn根服务器被攻击之后
  • .net 获取url的方法
  • .NET 中选择合适的文件打开模式(CreateNew, Create, Open, OpenOrCreate, Truncate, Append)
  • .NET/C# 推荐一个我设计的缓存类型(适合缓存反射等耗性能的操作,附用法)
  • .netcore 6.0/7.0项目迁移至.netcore 8.0 注意事项
  • .netcore 获取appsettings
  • .net连接oracle数据库
  • .secret勒索病毒数据恢复|金蝶、用友、管家婆、OA、速达、ERP等软件数据库恢复