Mithril.js 入門(mén)介紹

BothEyes1993 發(fā)布于2019-08-22 11:59 / 2047人閱讀

摘要：通過(guò)壓縮后，僅有左右，這要?dú)w功于。然而，使用其整個(gè)工具庫(kù)可以帶來(lái)很多好處學(xué)習(xí)使用函數(shù)式編程和鞏固良好的編碼實(shí)踐，和只是其中的一些。

Mithril.js 是一個(gè)客戶端的 JavaScript MVC 框架。

隨著 Flarum 也使用了 Mithril，這個(gè)小框架在 github 上的 star 數(shù)量也已經(jīng)突破了 4K。

Mithril 是什么？

Mithril 是一個(gè)客戶端 javascript MVC 框架，即它是一個(gè)工具，使應(yīng)用程序代碼分為數(shù)據(jù)層(Model)， UI 層(View)，黏合層(Controller)。

Mithril 通過(guò) gzip 壓縮后，僅有 12kb 左右，這要?dú)w功于 small, focused, API。它提供了一個(gè)模板引擎與一個(gè)虛擬 DOM diff 實(shí)現(xiàn)高性能渲染，還提供了其它高級(jí)工具，以及支持路由和組件化。

框架的目標(biāo)是使應(yīng)用程序代碼更容易組織，可讀和可維護(hù)，幫助你成為一個(gè)更好的開(kāi)發(fā)者。

不像某些框架，Mithril 努力避免將您鎖定到某個(gè) web 框架上：您可以盡量少地使用您所需要的框架。

然而，使用其整個(gè)工具庫(kù)可以帶來(lái)很多好處：學(xué)習(xí)使用函數(shù)式編程和鞏固良好的編碼實(shí)踐，OOP 和 MVC 只是其中的一些。

特點(diǎn)

輕量級(jí)

gzip壓縮后僅僅12kb，無(wú)依賴

非常少的API，非常容易的學(xué)習(xí)曲線

魯棒性

默認(rèn)安全的模板

層次化的MVC組件（hierarchical）

快速

虛擬DOM和編譯模板

智能的重繪系統(tǒng)（redrawing）

入門(mén)示例代碼

//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 中文文檔