xmlplus全棧 JavaScript 框架
xmlplus 是一個(gè)設(shè)計(jì)非常獨(dú)特 JavaScript 框架，用于快速開發(fā)前后端項(xiàng)目。
基于組件設(shè)計(jì)
在 xmlplus 中，組件是基本的構(gòu)造塊。評(píng)價(jià)組件設(shè)計(jì)好壞的一個(gè)重要標(biāo)準(zhǔn)是封裝度?；?xmlplus 設(shè)計(jì)的組件具有極高的封裝度。下面是一個(gè)簡(jiǎn)單的組件示例：
Widget: {
css: "#widget{ color: red; }",
xml: `<h1 id='widget'>default</h1>`,
fun: function (sys, items, opts) {
sys.widget.text("hello, world");
}
}
注意，這個(gè)組件包含的樣式、XML 文檔以及函數(shù)項(xiàng)僅對(duì)該組件有效，其它組件對(duì)它是完全不可見的。這種組件的書寫方式改變了傳統(tǒng)的將 CSS、JS 以及 HTML 置于不同文件的應(yīng)用書寫模式，但它卻能使你在構(gòu)建應(yīng)用時(shí)更加得心應(yīng)手。
組件由命名空間組織。基于傳統(tǒng)目錄路徑的組件引用方式，讓組件的使用更為便捷。假設(shè)你已經(jīng)定義好一個(gè)位于命名空間 //ui 的 Calendar 組件，那么你可以在 HTML 頁(yè)面中這樣使用它：
<Calendar xmlns="http://ui"/>
至于如何定義組件，請(qǐng)參考官方文檔 http://www.xmlplus.cn/docs。
友好的相容性
非侵入式的設(shè)計(jì)，使得 xmlplus 可以與當(dāng)今幾乎所有的框架或者庫(kù)集成使用。
利用 xmlplus 出色的整合能力，你可以整合現(xiàn)有的庫(kù)或框架到你的項(xiàng)目中，以避免陷入重造輪子的困境。
下面是一個(gè)封裝 Bootstrap 按鈕組件的一個(gè)示例：
Button: {
xml: `<button type='button' class='btn'/>`,
fun: function (sys, items, opts) {
this.addClass("btn-" + opts.type);
}
}
經(jīng)由此封裝后，你可以像下面這樣非常簡(jiǎn)潔地使用它：
<Button type='default'>Default</Button>
<Button type='primary'>Primary</Button>
<Button type='success'>Success</Button>
一次學(xué)習(xí), 多端使用
xmlplus 獨(dú)特的設(shè)計(jì)，使得它可以以相同的方式，設(shè)計(jì)基于瀏覽器端以及基于服務(wù)端的應(yīng)用。
在瀏覽器端，使用它可以高效地開發(fā)單頁(yè)應(yīng)用。在服務(wù)端，你既可以用它來開發(fā)服務(wù)應(yīng)用，還能用它開發(fā)傳統(tǒng)網(wǎng)站。
下面是一個(gè)服務(wù)端的一個(gè)簡(jiǎn)單的 Sqlite 組件的封裝。
Sqlite: {
fun: function (sys, items, opts) {
var sqlite = require("sqlite3").verbose(),
return new sqlite.Database("data.db");
}
}
你可以像下這樣使用上面已經(jīng)定義好的 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));
}
}
本框架支持在后臺(tái)直接序列化輸出 HTML 代碼，所以使用 xmlplus 開發(fā)傳統(tǒng)網(wǎng)站是極其便利的。下面示例簡(jiǎn)單地演示了這一點(diǎn)：
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)，在處理服務(wù)接受請(qǐng)求后，可以動(dòng)態(tài)改變 XML 的文檔結(jié)構(gòu)，這一點(diǎn)使得 xmlplus 開發(fā)傳統(tǒng)網(wǎng)站方式與 PHP、JSP 等腳本語(yǔ)言有著很大的不同。
另外，xmlplus 所包含的 檢索、通信、共享 以及 延遲實(shí)例化 等基本特性也是其獨(dú)有的，它們可以極其高效地輔助應(yīng)用的開發(fā)。