值得分享和收藏的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 框架。如果你对 xmlplus 没有多少了解，可以访问 www.xmlplus.cn。这里有详尽的入门文档可供参考。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
xmlplus组件设计系列之树（Tree）（9）
树形组件是一种具有层级结构的组件,广泛应用于各种场景.本章会实现一个简单的树形组件,尽管功能有限,但你可以通过扩展它来实现自己所需要的树形组件. 数据源 树形组件的数据源可以是 JSON 格式的数据对象,也可以是具有 XML 结构的数据或者是其它的具有层级结构的数据.本章将采用具有如下 JSON 格式的数据对象. var data = { name: 'My Tree', children: [ { name: 'hello' }, { name: 'world' }, { name: 'chi
-
xmlplus组件设计系列之网格（DataGrid）(10）
这一章我们要实现是一个网格组件,该组件除了最基本的数据展示功能外,还提供排序以及数据过滤功能. 数据源 为了测试我们即将编写好网格组件,我们采用如下格式的数据源.此数据源包含两部分的内容,分别是表头数据集和表体数据集.网格组件实例最终的列数由表头数据集的长度决定. var data = { gridColumns: ['name', 'power'], gridData: [ { name: 'Chuck Norris', power: Infinity }, { name: 'Bruce Le
-
xmlplus组件设计系列之路由（ViewStack)（7）
在浏览器端,对路由的理解一般是根据不同的 URL 完成页面的切换.在服务器端,则是根据不同的 URL 请求回馈相关的页面.在本章,我们广义的组件路由的定义:根据接收到的不同命令,组件对象呈现出不同的子级页面.在这里将介绍与路由相关的一个组件,即视图栈 ViewStack. 视图栈初步 该组件在<文档>部分的最后一个章节<延迟实例化>已经出现过了.这里将对一些细节部分进行解读.下面再次给出该组件的源码. ViewStack: { xml: "<div id='view
-
xmlplus组件设计系列之分隔框（DividedBox)（8）
分隔框(DividedBox)是一种布局类组件,可以分为两类,其中一类叫水平分隔框(HDividedBox),另一类叫垂直分隔框(VDividedBox).水平分隔框会将其子级分为两列,而垂直分隔框则会将其子级分为两行.列与列之间以及行与行之间一般都会有一条可以拖动的用以改变子级组件大小的分隔条.下面仅以垂直分隔框为例来介绍此类组件是如何设计以及实现的. 成品组件用例 按照以往的设计经验,我们可以先写出想像中的成品组件用例,这将有助于我们后续的进一步的设计与实现.垂直分隔框既然是布局类的组件,那
-
值得分享和收藏的xmlplus组件学习教程
xmlplus 介绍 xmlplus 是一个设计非常独特 JavaScript 框架,用于快速开发前后端项目. 基于组件设计 在 xmlplus 中,组件是基本的构造块.评价组件设计好坏的一个重要标准是封装度.基于 xmlplus 设计的组件具有极高的封装度.下面是一个简单的组件示例: Widget: { css: "#widget{ color: red; }", xml: `<h1 id='widget'>default</h1>`, fun: functi
-
值得分享和收藏的Bootstrap学习教程
首先先感谢朋友们对小编的支持,关注小编的文章,和小编一起学习进步,一直的陪伴,小编也一定会再接再厉,为大家分享更多精彩的文章. 在分享的过程中遇到了一些问题,这也给了我很大的启发,大家在搜索相关文章时都没有针对此类问题进行的系统整理文章,这也是小编需要在今后进行改进的. 所以本文就吸取这个经验,针对Bootstrap教程进行系统整理,希望对大家的学习有所帮助,便于大家学习. 小编的水平能力都很有限,还望大牛多给一些建议和看法,帮助小编进行改正和提高,如果文中确有不妥之处,还请谅解.希望能和大家共
-
vue组件学习教程
在学习vue时,组件学习比较吃力,尤其是组件间的通信,所以总结一下,官方文档的组件部分. 注册组件 全局组件 语法如下,组件模板需要使用一个根标签包裹起来.data必须是一个方法 Vue.component('component-name',{ template:'<div><h1>标题</h1><span>作者信息</span></div>', data(){ return{ message:'组件的属性' } }, methods
-
Python装饰器入门学习教程(九步学习)
装饰器(decorator)是一种高级Python语法.装饰器可以对一个函数.方法或者类进行加工.在Python中,我们有多种方法对函数和类进行加工,比如在Python闭包中,我们见到函数对象作为某一个函数的返回结果.相对于其它方式,装饰器语法简单,代码可读性高.因此,装饰器在Python项目中有广泛的应用. 这是在Python学习小组上介绍的内容,现学现卖.多练习是好的学习方式. 第一步:最简单的函数,准备附加额外功能 # -*- coding:gbk -*- '''示例1: 最简单的函数,表
-
vue2.X组件学习心得(新手必看篇)
VUEJS学习网址:https://cn.vuejs.org/ 此文章是用来记录自己的学习和实践心得. 关注点:父子组件之间的通信 看图说话: Pass Props 子组件本身与父组件是孤立的,通过子组件中显示声明的props属性,接收父组件数据; 父组件的数据更新时,子组件的prop会跟着更新: 此数据流动是单向的(看着); Emit Events 子组件使用$.emit(fn)向外抛出自己的内部触发的事件; 父组件是否监听?如果父组件需要监听,使用v-on绑定监听,触发对应事件; 以上为通用
-
值得分享的Bootstrap Ace模板实现菜单和Tab页效果
本文分享了项目中使用Ace模板的菜单样式和基于iframe的Tab页效果. 一.效果展示 折腾了好久,终于将菜单样式和Tab页的效果从项目中抽出来了. 1.初始加载出来的效果 2.展开菜单(支持多级展开,后面代码介绍) 3.点击子菜单,以Tab页的形式打开对应的页面 4.支持菜单折叠 5.打开的菜单过多时自动换行显示,折叠后自适应 二.代码示例 有现成的东西用很方便的,总的来说Bootstrap Ace模板的功能还是比较强大的,并且支持各种终端设备.本文主要使用的它的菜单的效果,下面就来看看Ac
-
值得分享的Bootstrap Table使用教程
bootstrap-table是在bootstrap-table的基础上写出来的,专门用于显示数据的表格插件.而bootstrap是来自 Twitter,是目前最受欢迎的前端框架.Bootstrap 是基于HTML.CSS.JAVASCRIPT 的,具有简便灵活,快速前端开发的优势.对与bootstrap在此就不在叙述. jquery ,bootstrap ,bootstrap-table 三者之间的关系.bootstrap很多部分代码涉及到了jquery的,也就是说 bootstrap是依赖j
-
值得分享的bootstrap table实例
bootstrap table 封装了一套完善的数据表格组件,把下面的代码复制一下估计你需要的基本功能都有了,没有的再看看手册对比着我给的实例也能很快的熟悉了. 客户端 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Bootstrap-Table</title> <link rel="stylesheet" href
-
Bootstrap常用组件学习(整理)
一.Bootstrap 面板(Panels) 本章将讲解 Bootstrap 面板(Panels).面板组件用于把 DOM 组件插入到一个盒子中.创建一个基本的面板,只需要向 <div> 元素添加 class .panel 和 class .panel-default 即可,如下面的实例所示: <div class="panel panel-default"> <div class="panel-body"> 这是一个基本的面板
-
值得分享的轻量级Bootstrap Table表格插件
基于Bootstrap的轻量级表格插件Bootstrap Table只需简单的配置,就可以拥有强大的支持固定表头.单/复选.排序.分页.搜索及自定义表头等功能,更好的提高开发效率和减少开发时间. 1.插件描述:Bootstrap Table显示数据表格格式,提供了丰富的支持,单选框.复选框.排序.分页等,插件下载. 2.特点: 基于Bootstrap 3开发(同时支持 Bootstrap 2) 响应式界面 固定表头 完全可配置 支持data属性 显示/隐藏列 显示/隐藏表头 使用AJAX获取JS