1. xmlplus全棧 JavaScript 框架

        聯(lián)合創(chuàng)作 · 2023-09-19 11:27

        xmlplus 是一個設計非常獨特 JavaScript 框架,用于快速開發(fā)前后端項目。

        基于組件設計

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

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

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

        組件由命名空間組織?;趥鹘y(tǒng)目錄路徑的組件引用方式,讓組件的使用更為便捷。假設你已經定義好一個位于命名空間 //ui 的 Calendar 組件,那么你可以在 HTML 頁面中這樣使用它:

        <Calendar xmlns="http://ui"/>
        

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

        友好的相容性

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

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

        下面是一個封裝 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 獨特的設計,使得它可以以相同的方式,設計基于瀏覽器端以及基于服務端的應用。

        在瀏覽器端,使用它可以高效地開發(fā)單頁應用。在服務端,你既可以用它來開發(fā)服務應用,還能用它開發(fā)傳統(tǒng)網(wǎng)站。

        下面是一個服務端的一個簡單的 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 開發(fā)傳統(tǒng)網(wǎng)站是極其便利的。下面示例簡單地演示了這一點:

        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); 
            }
        }
        

        通過示例,你可以發(fā)現(xiàn),在處理服務接受請求后,可以動態(tài)改變 XML 的文檔結構,這一點使得 xmlplus 開發(fā)傳統(tǒng)網(wǎng)站方式與 PHP、JSP 等腳本語言有著很大的不同。

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

        瀏覽 27
        點贊
        評論
        收藏
        分享

        手機掃一掃分享

        編輯 分享
        舉報
        評論
        圖片
        表情
        推薦
          
          

            1. 9.1成人黄~A片 | 波多野成人无码精品视频 | 日韩潮吹| 亚洲7天堂人人爽人人爽 | 何兰操逼视频 |