标签：
今天开始看一个新的前段javascript框架Mithril http://mithril.js.org/
先试一下代码吧
下载目前的版本 v0.2.0 文件的确很小 mithril.min.js 只有18k
新建一个html 文件
1 2 3 4 5 6 7 8 9 10 | <!DOCTYPE html><html><head> <title>Mithril</title></head><body><script src="js/mithril.min.js"></script><script src="js/app.js"></script></body></html> |
app.js里（这里我用了coffee）
先建立一个对象App
1 | App = {} |
然后为App 对象添加一个属性view
这个属性是一个函数，函数里面调用了mithril 提供的一个方法m 接受两个参数，第一个是一个字符串‘h1’，这个会生成html 标签，所以mithril 和react 很像，也是完全抛弃了字符串模板
第二个参数也是一个字符串，放置了前面‘h1’标签的文本内容，这是个简单例子，以后再展示使用复杂的标签
1 2 | App.view = -> m ‘h1‘, ‘Hello World!‘ |
最后，使用m对象的mount 方法，将App 对象挂载到一个html DOM节点上，我就直接挂到了body上
1 | m.mount document.body, App |
完整的代码是这样
1 2 3 4 5 6 | App = {}App.view = -> m ‘h1‘, ‘Hello World!‘m.mount document.body, App |
这里是js 版本
1 2 3 4 5 6 7 8 9 10 11 12 | (function() { var App; App = {}; App.view = function() { return m(‘h1‘, ‘Hello World!‘); }; m.mount(document.body, App);}).call(this); |
浏览器中生成的页面是这样的:
1 2 3 4 5 6 | <html><head> <title>Mithril</title></head><body> <h1>Hello World!</h1></body></html> |
搞定，是不是很简单呢？
希望大家一起来学一学Mithril
原文链接 Mithril教程01-安装
标签：
原文地址：http://my.oschina.net/u/2398346/blog/468567
