xmlplus 介紹

十余年的浪卡子網(wǎng)站建設(shè)經(jīng)驗(yàn)，針對設(shè)計(jì)、前端、開發(fā)、售后、文案、推廣等六對一服務(wù)，響應(yīng)快，48小時(shí)及時(shí)工作處理。成都營銷網(wǎng)站建設(shè)的優(yōu)勢是能夠根據(jù)用戶設(shè)備顯示端的尺寸不同，自動(dòng)調(diào)整浪卡子建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設(shè)計(jì)，從而大程度地提升瀏覽體驗(yàn)。成都創(chuàng)新互聯(lián)從事“浪卡子網(wǎng)站設(shè)計(jì)”,“浪卡子網(wǎng)站推廣”以來，每個(gè)客戶項(xiàng)目都認(rèn)真落實(shí)執(zhí)行。

xmlplus 是一個(gè)設(shè)計(jì)非常獨(dú)特 JavaScript 框架，用于快速開發(fā)前后端項(xiàng)目。

基于組件設(shè)計(jì)

在 xmlplus 中，組件是基本的構(gòu)造塊。評價(jià)組件設(shè)計(jì)好壞的一個(gè)重要標(biāo)準(zhǔn)是封裝度?；?xmlplus 設(shè)計(jì)的組件具有極高的封裝度。下面是一個(gè)簡單的組件示例：

Widget: {
 css: "#widget{ color: red; }",
 xml: `
default
`,
 fun: function (sys, items, opts) {
  sys.widget.text("hello, world"); 
 }
}

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

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

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

友好的相容性

非侵入式的設(shè)計(jì)，使得 xmlplus 可以與當(dāng)今幾乎所有的框架或者庫集成使用。

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

下面是一個(gè)封裝 Bootstrap 按鈕組件的一個(gè)示例：

Button: {
 xml: ``,
 fun: function (sys, items, opts) {
  this.addClass("btn-" + opts.type);
 }
}

經(jīng)由此封裝后，你可以像下面這樣非常簡潔地使用它：

Default
Primary
Success

一次學(xué)習(xí), 多端使用

xmlplus 獨(dú)特的設(shè)計(jì)，使得它可以以相同的方式，設(shè)計(jì)基于瀏覽器端以及基于服務(wù)端的應(yīng)用。

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

下面是一個(gè)服務(wù)端的一個(gè)簡單的 Sqlite 組件的封裝。

Sqlite: {
 fun: function (sys, items, opts) {
  var sqlite = require("sqlite3").verbose(),
  return new sqlite.Database("data.db");
 }
}

你可以像下這樣使用上面已經(jīng)定義好的 Sqlite 組件：

Example: {
 xml: ``,
 fun: function (sys, items, opts) {
  let stmt = "SELECT * FROM users";
  items.sqlite.all(stmt, (err, rows) => console.log(rows));
 }
}

本框架支持在后臺(tái)直接序列化輸出 HTML 代碼，所以使用 xmlplus 開發(fā)傳統(tǒng)網(wǎng)站是極其便利的。下面示例簡單地演示了這一點(diǎn)：

HttpServer: {
 xml: `
    default
   `
 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)，在處理服務(wù)接受請求后，可以動(dòng)態(tài)改變 XML 的文檔結(jié)構(gòu)，這一點(diǎn)使得 xmlplus 開發(fā)傳統(tǒng)網(wǎng)站方式與 PHP、JSP 等腳本語言有著很大的不同。

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

xmlplus 學(xué)習(xí)指南
xmlplus 是一個(gè)開源的框架，你可以訪問官方網(wǎng)站：http://www.xmlplus.cn。官方網(wǎng)站包含詳細(xì)的入門教程，你可以從這里開始。

另外 xmlplus 的源代碼托管于 github，你可以通過訪問下面的地址來獲取相應(yīng)的資源：

https://github.com/qudou/xmlplus

如果你已經(jīng)學(xué)完了基礎(chǔ)教程，那么可以繼續(xù)學(xué)習(xí)本博寫的 xmlplus 組件設(shè)計(jì)系列。此系列主要討論實(shí)際中組件的設(shè)計(jì)思路、方法與技巧等。

xmlplus 組件設(shè)計(jì)系列之一 - 圖標(biāo)（ICON）

xmlplus 組件設(shè)計(jì)系列之二 - 按鈕（Button）

xmlplus 組件設(shè)計(jì)系列之三 - 文本框（TextBox）

xmlplus 組件設(shè)計(jì)系列之四 - 列表（List）

xmlplus 組件設(shè)計(jì)系列之五 - 選項(xiàng)卡（Tabbar）

xmlplus 組件設(shè)計(jì)系列之六 - 下拉刷新（PullRefresh）

本系列文章基于 xmlplus 框架。如果你對 xmlplus 沒有多少了解，可以訪問 www.xmlplus.cn。這里有詳盡的入門文檔可供參考。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。