首頁 > 文章 > web前端 > JavaScript框架--xmlplus的介紹

JavaScript框架--xmlplus的介紹

零下一度原創: 2017-05-04 10:20:291353瀏覽

xmlplus 介紹

xmlplus 是一個設計非常獨特 JavaScript 框架，用於快速開發前後端專案。

基於元件設計

在 xmlplus 中，元件是基本的建構塊。評估組件設計好壞的一個重要標準是封裝度。基於 xmlplus 設計的元件具有極高的封裝度。以下是一個簡單的元件範例：

Widget: {
    css: "#widget{ color: red; }",
    xml: `<h1 id=&#39;widget&#39;>default</h1>`,
    fun: function (sys, items, opts) {
        sys.widget.text("hello, world"); 
    }}

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

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

<Calendar xmlns="//ui"/>

至於如何定義元件，請參考官方文件www.xmlplus.cn/docs。

友善的相容性

非侵入式的設計，使得 xmlplus 可以與當今幾乎所有的框架或函式庫整合使用。

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

下面是一個封裝 Bootstrap 按鈕組件的範例：

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

經過此封裝後，你可以像下面這樣非常簡潔地使用它：

<Button type=&#39;default&#39;>Default</Button><Button type=&#39;primary&#39;>Primary</Button><Button type=&#39;success&#39;>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=&#39;sqlite&#39;/>`,
    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=&#39;body&#39;>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 所包含的檢索、通訊、共享以及延遲實例化等基本特性也是其獨有的，它們可以極其高效地輔助應用的開發。

以上是JavaScript框架--xmlplus的介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：利用js對MongoDB實作模糊查詢的方法教程下一篇：利用js對MongoDB實作模糊查詢的方法教程

看更多