当前位置: 首页 > 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请求,二次封装更加灵活,更多参数可配置
  • 《深入 React 技术栈》
  • Angular 2 DI - IoC DI - 1
  • Apache的基本使用
  • C++类的相互关联
  • gcc介绍及安装
  • golang中接口赋值与方法集
  • iOS编译提示和导航提示
  • JavaScript设计模式系列一:工厂模式
  • leetcode98. Validate Binary Search Tree
  • maya建模与骨骼动画快速实现人工鱼
  • NLPIR语义挖掘平台推动行业大数据应用服务
  • Redis提升并发能力 | 从0开始构建SpringCloud微服务(2)
  • Work@Alibaba 阿里巴巴的企业应用构建之路
  • 聚类分析——Kmeans
  • 前端临床手札——文件上传
  • 如何优雅的使用vue+Dcloud(Hbuild)开发混合app
  • 设计模式 开闭原则
  • 一起来学SpringBoot | 第十篇:使用Spring Cache集成Redis
  • Java数据解析之JSON
  • Spark2.4.0源码分析之WorldCount 默认shuffling并行度为200(九) ...
  • 分布式关系型数据库服务 DRDS 支持显示的 Prepare 及逻辑库锁功能等多项能力 ...
  • 国内开源镜像站点
  • ​无人机石油管道巡检方案新亮点:灵活准确又高效
  • # 透过事物看本质的能力怎么培养?
  • #我与Java虚拟机的故事#连载01:人在JVM,身不由己
  • #我与Java虚拟机的故事#连载08:书读百遍其义自见
  • (07)Hive——窗口函数详解
  • (HAL)STM32F103C6T8——软件模拟I2C驱动0.96寸OLED屏幕
  • (MATLAB)第五章-矩阵运算
  • (分享)自己整理的一些简单awk实用语句
  • (转载)hibernate缓存
  • *setTimeout实现text输入在用户停顿时才调用事件!*
  • .NET Core WebAPI中封装Swagger配置
  • .net core 实现redis分片_基于 Redis 的分布式任务调度框架 earth-frost
  • .NET Standard 的管理策略
  • .net 生成二级域名
  • .Net程序猿乐Android发展---(10)框架布局FrameLayout
  • .NET精简框架的“无法找到资源程序集”异常释疑
  • /etc/shadow字段详解
  • [ vulhub漏洞复现篇 ] Celery <4.0 Redis未授权访问+Pickle反序列化利用