文档章节

xmlplus 组件设计系列之零 - 简介(Introduction)

qudou
 qudou
发布于 2017/04/26 10:03
字数 1073
阅读 31
收藏 0
点赞 0
评论 0

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 组件设计系列之一 - 图标

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

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

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

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

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

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

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

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

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

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

© 著作权归作者所有

共有 人打赏支持
qudou

qudou

粉丝 5
博文 11
码字总数 14933
作品 2
福州
程序员
全栈 JavaScript 框架 xmlplus 1.5.9 发布

该版本主要对全局函数 clearLibrary 作了简化,另外对文档的一些文字错误进行了修正,同时保持了 gitHub 与 npm 版本之间的同步。 xmlplus 是一个设计非常独特 JavaScript 框架,用于快速开发...

qudou ⋅ 2017/04/30 ⋅ 16

全栈 JavaScript 框架--xmlplus

xmlplus 是一个设计非常独特 JavaScript 框架,用于快速开发前后端项目。 基于组件设计 在 xmlplus 中,组件是基本的构造块。评价组件设计好坏的一个重要标准是封装度。基于 xmlplus 设计的组...

qudou ⋅ 2017/04/21 ⋅ 1

xmlplus v1.5.8 正式发布 - 全栈 JavaScript 框架

全栈 JavaScript 框架 xmlplus v1.5.8 正式发布 xmlplus 是一个设计非常独特 JavaScript 框架,用于快速开发前后端项目。 基于组件设计 在 xmlplus 中,组件是基本的构造块。评价组件设计好坏...

qudou ⋅ 2017/04/27 ⋅ 2

JavaScript 框架 xmlplus 1.5.12 发布

JavaScript 框架 xmlplus 1.5.12 发布了。xmlplus 是一个设计非常独特 JavaScript 框架,用于快速开发前后端项目。 这个版本主要添加了一个全局接口 create。该函数是一个轻量的用于创建组件...

qudou ⋅ 2017/05/24 ⋅ 0

JavaScript 框架 xmlplus 1.5.14 发布

JavaScript 框架 xmlplus 1.5.14 发布了。更新如下: 将原先对于 xmldom 模块的依赖改为 exmldom。exmldom 模块是对 xmldom 模块的扩展,添加了事件支持。也就是说,你可以像前端那样在 dom ...

qudou ⋅ 2017/06/10 ⋅ 0

移动开发之微信小程序——资料集合

本文转载自:知乎 有需要下载的客官可可以点击知乎去下载相关资料 一:官方地址集合: 1:官方工具:https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html?t=1476434678461 2:...

DJY1992 ⋅ 2016/12/21 ⋅ 0

前端日刊君来也

每天努力的日刊君 - 2017.11.15 The Next Day is Always a New Day 打造丝般顺滑的 H5 翻页库 欢迎关注我们的公众号:

前端新视野 ⋅ 2017/11/16 ⋅ 0

14.1-全栈Java笔记: Java语言中GUI到底是神马鬼?| AWT | Swing

到目前为止,我们在Java中编写的基本都是基于控制台的程序;而Java编程语言之所以如此流行的一个主要原因之一,就是因为它支持图形用户界面功能,即GUI(Graphical User Interface)。 GUI(...

全栈Java ⋅ 2017/08/09 ⋅ 0

RT-Thread 0.3.0 正式版发布,实时操作系统

RT-Thread 0.3.0正式版相较以前的RC版本,添加了RT-Thread/GUI图形用户界面组件,内核部分无大的修改(console调整为支持设备的模式), 建议所有使用0.2.x、0.3.0 beta/rc版的用户都开始使用0...

红薯 ⋅ 2010/04/15 ⋅ 0

掘金翻译计划月报 — 2017 年 10 月

掘金翻译计划在这一个月进行了 Under-the-hood-ReactJS 系列教程、开源库的翻译,GraphQL.cn 的宣传,TensorFlow 官方文档的翻译组织,以及日常的文章翻译。这一个月,我们新增了 50 余名译者...

LeviDing ⋅ 2017/11/06 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

sbt网络问题解决方案

http://dblab.xmu.edu.cn/blog/maven-network-problem/

狐狸老侠 ⋅ 6分钟前 ⋅ 0

大数据,必须掌握的10项顶级安全技术

我们看到越来越多的数据泄漏事故、勒索软件和其他类型的网络攻击,这使得安全成为一个热门话题。 去年,企业IT面临的威胁仍然处于非常高的水平,每天都会看到媒体报道大量数据泄漏事故和攻击...

p柯西 ⋅ 49分钟前 ⋅ 0

Linux下安装配置Hadoop2.7.6

前提 安装jdk 下载 wget http://mirrors.hust.edu.cn/apache/hadoop/common/hadoop-2.7.6/hadoop-2.7.6.tar.gz 解压 配置 vim /etc/profile # 配置java环境变量 export JAVA_HOME=/opt/jdk1......

晨猫 ⋅ 55分钟前 ⋅ 0

crontab工具介绍

crontab crontab 是一个用于设置周期性被执行的任务工具。 周期性执行的任务列表称为Cron Table crontab(选项)(参数) -e:编辑该用户的计时器设置; -l:列出该用户的计时器设置; -r:删除该...

Linux学习笔记 ⋅ 今天 ⋅ 0

深入Java多线程——Java内存模型深入(2)

5. final域的内存语义 5.1 final域的重排序规则 1.对于final域,编译器和处理器要遵守两个重排序规则: (1)在构造函数内对一个final域的写入,与随后把这个被构造对象的引用赋值给一个引用...

江左煤郎 ⋅ 今天 ⋅ 0

面试-正向代理和反向代理

面试-正向代理和反向代理 Nginx 是一个高性能的反向代理服务器,但同时也支持正向代理方式的配置。

秋日芒草 ⋅ 今天 ⋅ 0

Spring 依赖注入(DI)

1、Setter方法注入: 通过设置方法注入依赖。这种方法既简单又常用。 类中定义set()方法: public class HelloWorldOutput{ HelloWorld helloWorld; public void setHelloWorld...

霍淇滨 ⋅ 昨天 ⋅ 0

马氏距离与欧氏距离

马氏距离 马氏距离也可以定义为两个服从同一分布并且其协方差矩阵为Σ的随机变量之间的差异程度。 如果协方差矩阵为单位矩阵,那么马氏距离就简化为欧氏距离,如果协方差矩阵为对角阵,则其也...

漫步当下 ⋅ 昨天 ⋅ 0

聊聊spring cloud的RequestRateLimiterGatewayFilter

序 本文主要研究一下spring cloud的RequestRateLimiterGatewayFilter GatewayAutoConfiguration @Configuration@ConditionalOnProperty(name = "spring.cloud.gateway.enabled", matchIfMi......

go4it ⋅ 昨天 ⋅ 0

Spring clound 组件

Spring Cloud技术应用从场景上可以分为两大类:润物无声类和独挑大梁类。 润物无声,融合在每个微服务中、依赖其它组件并为其提供服务。 Ribbon,客户端负载均衡,特性有区域亲和、重试机制。...

英雄有梦没死就别停 ⋅ 昨天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部