MithrilJS
有關 Mithril.js 的基礎教程請看我的這篇文章：易、輕、快！超牛逼純JS前端框架——MithrilJS
個人認為這個框架不就可能會火，這才是 JS 意義上的面向對象編程，兼容到 IE9，還是非常不錯的。
入門教程已經寫過，這邊就根據官網的英文文檔結合實例來進行更加全面的解析，放寬心，這個框架簡單的一塌糊塗，不信你對比下 Angular，你就知道 Angular 有多複雜了（對象是純前端工程師，不是你們這幫後端工程化大拿），當然，React 與 Vue 都一樣，沒有對比就沒有傷害。
概覽
m(selector, attrs, children)
核心函數，用來從虛擬 DOM 生成真實 DOM 的關鍵。
m("div.class#id", {title: "title"}, ["children"])
m.mount(element, component)
自動 diff DOM 結構樹，從而達到數據驅動作用，就是數據變化 DOM 自動更新啦。
var state = {
count: 0,
inc: function() {state.count++}
}
var Counter = {
view: function() {
return m("div", {: state.inc}, state.count)
}
}
m.mount(document.body, Counter)
m.route(root, defaultRoute, routes)
路由，用來設置路由跳轉。
var Home = {
view: function() {
return "Welcome"
}
}
m.route(document.body, "/home", {
"/home": Home, // defines `http://localhost/#!/home`
})
m.route.set(path)
函數式路由調轉，就是不使用 a 標籤，使用事件觸發跳轉，類比 location.href 即可。
m.route.set("/home")
m.route.get()
獲取當前路由，可以用來解析數據等。
var currentRoute = m.route.get()
m.route.prefix(prefix)
設置路由之前使用，用來配置路由的前綴，比如默認是：#!，可以修改為 # 等等。
m.route.prefix("#!")
m.route.link()
給 a 標籤設置的東西，讓 MithrilJS 知道這個 a 標籤是路由，不是頁面跳轉，可以省略路由前綴。
m("a[href='/Home']", {oncreate: m.route.link}, "Go to home page")
m.request(options)
MithrilJS 的 Ajax 了。
m.request({
method: "PUT",
url: "/api/v1/users/:id",
data: {id: 1, name: "test"}
})
.then(function(result) {
console.log(result)
})
m.jsonp(options)
jsonp，本人認知就在跨域了，沒用過，我後面的教程也會過濾掉這裡的內容。
m.jsonp({
url: "/api/v1/users/:id",
data: {id: 1},
callbackKey: "callback",
})
.then(function(result) {
console.log(result)
})
m.parseQueryString(querystring)
解析 query 傳參到對象。
var object = m.parseQueryString("a=1&b=2")
// {a: "1", b: "2"}
m.buildQueryString(object)
與上面相反，把對象解析為 query 字符串。
var querystring = m.buildQueryString({a: "1", b: "2"})
// "a=1&b=2"
m.withAttr(attrName, callback)
input 等輸入表單標籤雙向綁定工具。
var state = {
value: "",
setValue: function(v) {state.value = v}
}
var Component = {
view: function() {
return m("input", {
oninput: m.withAttr("value", state.setValue),
value: state.value,
})
}
}
m.mount(document.body, Component)
m.trust(htmlString)
直接插入 html 標籤函數，如無必要，慎用，較危險。
m.render(document.body, m.trust("
Hello
"))m.redraw()
手動重新渲染，使用 m.mount 與 m.route 目前還沒用到過。
var count = 0
function inc() {
setInterval(function() {
count++
m.redraw()
}, 1000)
}
var Counter = {
oninit: inc,
view: function() {
return m("div", count)
}
}
m.mount(document.body, Counter)
差不多久這些函數與功能就涵蓋了整個 MithrilJS 了，沒錯，就這些！
什麼 JSX, ES6 等啦，這些歸類到插件，使用 webpack 自己配置即可，與 MithrilJS 無關。就像 Vue 也可以不配置 webpack 或不使用 vue-cli，直接使用 CDN 模式開發一樣。
個人強烈推薦使用原生模式來練手這個東西，真的，真的，非常好用。甚至你願意，也可以去扒拉源碼看看，一樣簡單的令你髮指！
後面翻譯（嚴格來說是整理）工程量還是有點的，幸好是簡單的，不然一個人玩不來。所以會分幾期弄完，希望喜歡的人留意下。
喜歡的話，請關注一波，定期更新技術文章，滿滿的都是乾貨。
閱讀更多 慕課網 的文章
