xmlplus 組件設計系列之零 - 簡介（Introduction）

時間 2019-11-26

標籤 xmlplus 組件設計系列簡介 introduction 简体版

原文原文鏈接

xmlplus 介紹

xmlplus 是一個設計很是獨特 JavaScript 框架，用於快速開發先後端項目。css

基於組件設計

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

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 置於不一樣文件的應用書寫模式，但它卻能使你在構建應用時更加駕輕就熟。git

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

<Calendar xmlns="//ui"/>

至於如何定義組件，請參考官方文檔 http://www.xmlplus.cn/docs。sql

友好的相容性

非侵入式的設計，使得 xmlplus 能夠與當今幾乎全部的框架或者庫集成使用。後端

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

下面是一個封裝 Bootstrap 按鈕組件的一個示例：框架

Button: {
    xml: `<button type='button' class='btn'/>`,
    fun: function (sys, items, opts) {
        this.addClass("btn-" + opts.type);
    }
}

經由此封裝後，你能夠像下面這樣很是簡潔地使用它：ide

<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 開發傳統網站是極其便利的。下面示例簡單地演示了這一點：

HttpServer: {
    xml: `<html>
              <body id='body'>default</body>
          </html>`
    fun: function (sys, items, opts) {
        let http = require("http");
        http.createServer((req, res) => { 
            sys.body.text("hello,world");
            res.setHeader("Content-Type", "text/html");
            res.end(this.serialize(true)); 
        }).listen(80); 
    }
}

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

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