全棧 JavaScript 框架xmlplus

編程語言 XML JavaScript CSS 多年後感謝拼命的自己 2017-06-14

全棧 JavaScript 框架xmlplusxmlplus 詳細介紹

xmlplus 是一個設計非常獨特 JavaScript 框架,用於快速開發前後端項目。

基於組件設計

在 xmlplus 中,組件是基本的構造塊。評價組件設計好壞的一個重要標準是封裝度。基於 xmlplus 設計的組件具有極高的封裝度。下面是一個簡單的組件示例:

Widget: {

css: "#widget{ color: red; }",

xml: `<h1 id='widget'>default</h1>`,

fun: function (sys, items, opts) {

sys.widget.text("hello, world");

}

}

注意,這個組件包含的樣式、XML 文檔以及函數項僅對該組件有效,其它組件對它是完全不可見的。這種組件的書寫方式改變了傳統的將 CSS、JS 以及 HTML 置於不同文件的應用書寫模式,但它卻能使你在構建應用時更加得心應手。

組件由命名空間組織。基於傳統目錄路徑的組件引用方式,讓組件的使用更為便捷。假設你已經定義好一個位於命名空間 //ui 的 Calendar 組件,那麼你可以在 HTML 頁面中這樣使用它:

<Calendar xmlns="//ui"/>

友好的相容性

非侵入式的設計,使得 xmlplus 可以與當今幾乎所有的框架或者庫集成使用。

利用 xmlplus 出色的整合能力,你可以整合現有的庫或框架到你的項目中,以避免陷入重造輪子的困境。

下面是一個封裝 Bootstrap 按鈕組件的一個示例:

Button: {

xml: `<button type='button' class='btn'/>`,

fun: function (sys, items, opts) {

this.addClass("btn-" + opts.type);

}

}

經由此封裝後,你可以像下面這樣非常簡潔地使用它:

<Button type='default'>Default</Button>

<Button type='primary'>Primary</Button>

<Button type='success'>Success</Button>

一次學習, 多端使用

xmlplus 獨特的設計,使得它可以以相同的方式,設計基於瀏覽器端以及基於服務端的應用。

在瀏覽器端,使用它可以高效地開發單頁應用。在服務端,你既可以用它來開發服務應用,還能用它開發傳統網站。

下面是一個服務端的一個簡單的 Sqlite 組件的封裝。

Sqlite: {

fun: function (sys, items, opts) {

var sqlite = require("sqlite3").verbose(),

return new sqlite.Database("data.db");

}

}

你可以像下這樣使用上面已經定義好的 Sqlite 組件:

Example: {

xml: `<Sqlite id='sqlite'/>`,

fun: function (sys, items, opts) {

let stmt = "SELECT * FROM users";

items.sqlite.all(stmt, (err, rows) => console.log(rows));

}

}

本框架支持在後臺直接序列化輸出 HTML 代碼,所以使用 xmlplus 開發傳統網站是極其便利的。下面示例簡單地演示了這一點:

全棧 JavaScript 框架xmlplus

學習交流加群:230354270

通過示例,你可以發現,在處理服務接受請求後,可以動態改變 XML 的文檔結構,這一點使得 xmlplus 開發傳統網站方式與 PHP、JSP 等腳本語言有著很大的不同。

另外,xmlplus 所包含的 檢索、通信、共享 以及 延遲實例化 等基本特性也是其獨有的,它們可以極其高效地輔助應用的開發。

相關推薦

推薦中...