值得分享和收藏的xmlplus组件学习教程


Posted in Javascript onMay 05, 2017

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,你可以通过访问下面的地址来获取相应的资源:

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js对象转json数组的简单实现案例
Feb 28 Javascript
删除javascript中注释语句的正则表达式
Jun 11 Javascript
举例讲解JavaScript substring()的使用方法
Nov 09 Javascript
浅析创建javascript对象的方法
May 13 Javascript
jQuery 获取select选中值及清除选中状态
Dec 13 Javascript
AngularJS中$injector、$rootScope和$scope的概念和关联关系深入分析
Jan 19 Javascript
jQuery滑动到底部加载下一页数据的实例代码
May 22 jQuery
javascript中的replace函数(带注释demo)
Jan 07 Javascript
使用Ajax和Jquery配合数据库实现下拉框的二级联动的示例
Jan 25 jQuery
vue-cli3全面配置详解
Nov 14 Javascript
微信小程序利用云函数获取手机号码
Dec 17 Javascript
javascript操作向表格中动态加载数据
Aug 27 Javascript
微信小程序中多个页面传参通信的学习与实践
May 05 #Javascript
微信小程序 开发之全局配置
May 05 #Javascript
jquery实现tab选项卡切换效果(悬停、下方横线动画位移)
May 05 #jQuery
微信小程序 图片上传实例详解
May 05 #Javascript
微信小程序实现登录页云层漂浮的动画效果
May 05 #Javascript
xmlplus组件设计系列之图标(ICON)(1)
May 05 #Javascript
xmlplus组件设计系列之网格(DataGrid)(10)
May 05 #Javascript
You might like
PHP 强制性文件下载功能的函数代码(任意文件格式)
2010/05/26 PHP
PHP 登录记住密码实现思路
2013/05/07 PHP
使用PHPMailer实现邮件发送代码分享
2014/10/23 PHP
微信公众平台开发-微信服务器IP接口实例(含源码)
2017/03/05 PHP
javascript编程起步(第一课)
2007/01/10 Javascript
JS 用6N±1法求素数 实例教程
2009/10/20 Javascript
jQuery实战之品牌展示列表效果
2011/04/10 Javascript
基于jquery实现的可编辑下拉框实现代码
2014/08/02 Javascript
Javascript Memoizer浅析
2014/10/16 Javascript
JS实现点击上移下移LI行数据的方法
2015/08/05 Javascript
js实现的万能flv网页播放器代码
2016/04/30 Javascript
详解BootStrap中Affix控件的使用及保持布局的美观的方法
2016/07/08 Javascript
手机图片预览插件photoswipe.js使用总结
2016/08/25 Javascript
JSONP跨域请求
2017/03/02 Javascript
使用jQuery,Angular实现登录界面验证码详解
2017/04/27 jQuery
利用node.js如何搭建一个简易的即时响应服务器
2017/05/28 Javascript
Angularjs Ng_repeat中实现复选框选中并显示不同的样式方法
2018/09/12 Javascript
Vue.js如何使用Socket.IO的示例代码
2019/09/05 Javascript
[01:37]DOTA2超级联赛专访ChuaN 传奇般的电竞之路
2013/06/19 DOTA
[03:08]Ti4观战指南上
2014/07/07 DOTA
[01:15:56]2018DOTA2亚洲邀请赛3月30日 小组赛A组 TNC VS Newbee
2018/03/31 DOTA
Python编程之变量赋值操作实例分析
2017/07/24 Python
Python中修改字符串的四种方法
2018/11/02 Python
Python selenium根据class定位页面元素的方法
2019/02/26 Python
python matplotlib库绘制条形图练习题
2019/08/10 Python
用python爬取历史天气数据的方法示例
2019/12/30 Python
Tensorflow中的dropout的使用方法
2020/03/13 Python
如何表示python中的相对路径
2020/07/08 Python
玩转CSS3色彩
2010/01/16 HTML / CSS
安全保卫工作竞聘材料
2014/08/25 职场文书
政风行风评议整改方案
2014/09/15 职场文书
师德师风自我剖析材料
2014/09/27 职场文书
学习十八大标语
2014/10/09 职场文书
2015银行年终工作总结范文
2015/05/26 职场文书
大学开学感言
2015/08/01 职场文书
MySQL 常见的数据表设计误区汇总
2021/06/07 MySQL