zoukankan      html  css  js  c++  java
  • xmlplus 组件设计系列之零

    xmlplus 介绍

    xmlplus 是一个设计非常独特 JavaScript 框架,用于快速开发前后端项目。

    基于组件设计

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

    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 置于不同文件的应用书写模式,但它却能使你在构建应用时更加得心应手。

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

    <Calendar xmlns="//ui"/>
    

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

    友好的相容性

    非侵入式的设计,使得 xmlplus 可以与当今几乎所有的框架或者库集成使用。

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

    下面是一个封装 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 独特的设计,使得它可以以相同的方式,设计基于浏览器端以及基于服务端的应用。

    在浏览器端,使用它可以高效地开发单页应用。在服务端,你既可以用它来开发服务应用,还能用它开发传统网站。

    下面是一个服务端的一个简单的 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 组件设计系列之一 - 图标(ICON)

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

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

    xmlplus 组件设计系列之四 - 列表(List)

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

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

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

    xmlplus 组件设计系列之八 - 分隔框(DividedBox)

    xmlplus 组件设计系列之九 - 树(Tree)

    xmlplus 组件设计系列之十 - 网格(DataGrid)

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

    本系列文章基于 xmlplus 框架。如果你对 xmlplus 没有多少了解,可以访问 www.xmlplus.cn。这里有详尽的入门文档可供参考。

  • 相关阅读:
    设计模式(六)Prototype Pattern 原型模式
    设计模式(五)Builder Pattern建造者模式
    Linux安装软件
    日志技术及JUL入门
    IDEA推出新字体,极度舒适
    HDFS的API操作
    Apollo的灰度发布
    Apollo整合SpringBoot开发
    Apollo配置发布原理
    Apollo应用配置
  • 原文地址:https://www.cnblogs.com/qudou/p/6746511.html
Copyright © 2011-2022 走看看