xmlplus 组件设计系列之零 - 简介（Introduction）

时间 2019-11-26

标签 xmlplus 组件设计系列简介 introduction 繁體版

原文原文链接

xmlplus 介绍

xmlplus 是一个设计很是独特 JavaScript 框架，用于快速开发先后端项目。css

基于组件设计

在 xmlplus 中，组件是基本的构造块。评价组件设计好坏的一个重要标准是封装度。基于 xmlplus 设计的组件具备极高的封装度。下面是一个简单的组件示例：html

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

注意，这个组件包含的样式、XML 文档以及函数项仅对该组件有效，其它组件对它是彻底不可见的。这种组件的书写方式改变了传统的将 CSS、JS 以及 HTML 置于不一样文件的应用书写模式，但它却能使你在构建应用时更加驾轻就熟。git

组件由命名空间组织。基于传统目录路径的组件引用方式，让组件的使用更为便捷。假设你已经定义好一个位于命名空间 //ui 的 Calendar 组件，那么你能够在 HTML 页面中这样使用它：github

<Calendar xmlns="//ui"/>

至于如何定义组件，请参考官方文档 http://www.xmlplus.cn/docs。sql

友好的相容性

非侵入式的设计，使得 xmlplus 能够与当今几乎全部的框架或者库集成使用。后端

利用 xmlplus 出色的整合能力，你能够整合现有的库或框架到你的项目中，以免陷入重造轮子的困境。浏览器

下面是一个封装 Bootstrap 按钮组件的一个示例：框架

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

经由此封装后，你能够像下面这样很是简洁地使用它：ide

<Button type='default'>Default</Button>
<Button type='primary'>Primary</Button>
<Button type='success'>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='sqlite'/>`,
    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='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); 
    }
}

经过示例，你能够发现，在处理服务接受请求后，能够动态改变 XML 的文档结构，这一点使得 xmlplus 开发传统网站方式与 PHP、JSP 等脚本语言有着很大的不一样。

另外，xmlplus 所包含的检索、通讯、共享以及延迟实例化等基本特性也是其独有的，它们能够极其高效地辅助应用的开发。

xmlplus 学习指南

xmlplus 是一个开源的框架，你能够访问官方网站：http://www.xmlplus.cn。官方网站包含详细的入门教程，你能够从这里开始。

另外 xmlplus 的源代码托管于 github，你能够经过访问下面的地址来获取相应的资源：

https://github.com/qudou/xmlplus

若是你已经学完了基础教程，那么能够继续学习本博写的 xmlplus 组件设计系列。此系列主要讨论实际中组件的设计思路、方法与技巧等。

xmlplus 组件设计系列之一 - 图标

xmlplus 组件设计系列之二 - 按钮

xmlplus 组件设计系列之三 - 文本框

xmlplus 组件设计系列之四 - 列表

xmlplus 组件设计系列之五 - 选项卡

xmlplus 组件设计系列之六 - 下拉刷新

xmlplus 组件设计系列之七 - 路由

xmlplus 组件设计系列之八 - 分隔框（DividedBox）

xmlplus 组件设计系列之九 - 树（Tree）

xmlplus 组件设计系列之十 - 网格（DataGrid）

注：本系列文档的配套代码位于目录 /example/components 之下。