JavaScript框架--xmlplus的介紹-js教程-PHP中文網

xmlplus 介紹

基於元件設計

友善的相容性

一次學習, 多端使用

首頁

web前端

js教程

JavaScript框架--xmlplus的介紹

零下一度

May 04, 2017 am 10:20 AM

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

熱AI工具

Undresser.AI Undress

人工智慧驅動的應用程序，用於創建逼真的裸體照片

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

免費脫衣圖片

Clothoff.io

AI脫衣器

Video Face Swap

使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！

熱工具

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

中文版，非常好用

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

gmail信箱登陸入口在哪裡

7741

Java教學

1643

CakePHP 教程

1397

Laravel 教程

1290

PHP教程

1233

Related knowledge

前端熱敏紙小票打印遇到亂碼問題怎麼辦？ Apr 04, 2025 pm 02:42 PM

前端熱敏紙小票打印的常見問題與解決方案在前端開發中，小票打印是一個常見的需求。然而，很多開發者在實...

神秘的JavaScript：它的作用以及為什麼重要 Apr 09, 2025 am 12:07 AM

JavaScript是現代Web開發的基石，它的主要功能包括事件驅動編程、動態內容生成和異步編程。 1)事件驅動編程允許網頁根據用戶操作動態變化。 2)動態內容生成使得頁面內容可以根據條件調整。 3)異步編程確保用戶界面不被阻塞。 JavaScript廣泛應用於網頁交互、單頁面應用和服務器端開發，極大地提升了用戶體驗和跨平台開發的靈活性。