值得分享和收藏的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 相关文章推荐
JavaScript实现仿新浪微博大厅和腾讯微博首页滚动特效源码
Sep 15 Javascript
在IE8上JS实现combobox支持拼音检索功能
May 23 Javascript
jquery easyUI中ajax异步校验用户名
Aug 19 Javascript
js实现非常棒的弹出div
Oct 06 Javascript
JavaScript之cookie技术详解
Nov 18 Javascript
详解vue-router和vue-cli以及组件之间的传值
Jul 04 Javascript
解决Js先触发失去焦点事件再执行点击事件的问题
Aug 30 Javascript
浅谈layui数据表格判断问题(加入表单元素),设置单元格样式
Oct 26 Javascript
微信小程序实现上拉加载功能
Nov 20 Javascript
Node.js创建一个Express服务的方法详解
Jan 06 Javascript
vue 计算属性和侦听器的使用小结
Jan 25 Vue.js
js实现简单商品筛选功能
Feb 02 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
别人整理的服务器变量:$_SERVER
2006/10/20 PHP
php仿discuz分页效果代码
2008/10/02 PHP
谈PHP生成静态页面分析 模板+缓存+写文件
2009/08/17 PHP
php jquery 多文件上传简单实例
2013/12/23 PHP
再谈PHP中单双引号的区别详解
2016/06/12 PHP
php通过会话控制实现身份验证实例
2016/10/18 PHP
Yii2框架中日志的使用方法分析
2017/05/22 PHP
PHP7原生MySQL数据库操作实现代码
2020/07/03 PHP
用showModalDialog弹出页面后,提交表单总是弹出一个新窗口
2009/07/18 Javascript
Jquery作者John Resig自己封装的javascript 常用函数
2009/11/09 Javascript
网页源代码保护(禁止右键、复制、另存为、查看源文件)
2012/05/23 Javascript
JavaScript中的稀疏数组与密集数组[译]
2012/09/17 Javascript
jQuery中对节点进行操作的相关介绍
2013/04/16 Javascript
5秒后跳转到另一个页面的js代码
2013/10/12 Javascript
如何将php数组或者对象传递给javascript
2014/03/20 Javascript
nodejs中转换URL字符串与查询字符串详解
2014/11/26 NodeJs
JavaScript中的数组遍历forEach()与map()方法以及兼容写法介绍
2016/05/19 Javascript
漫谈JS引擎的运行机制 你应该知道什么
2016/06/15 Javascript
在js中实现邮箱格式的验证方法(推荐)
2016/10/24 Javascript
jQuery双向列表选择器DIV模拟版
2016/11/01 Javascript
JavaScript遍历Json串浏览器输出的结果不统一问题
2016/11/03 Javascript
javascript正则表达式模糊匹配IP地址功能示例
2017/01/06 Javascript
微信小程序封装http访问网络库实例代码
2017/05/24 Javascript
bootstrap+jQuery 实现下拉菜单中复选框全选和全不选效果
2017/06/12 jQuery
JavaScript实现HTML5游戏断线自动重连的方法
2017/09/18 Javascript
js字符串类型String常用操作实例总结
2019/07/05 Javascript
实例讲解React 组件生命周期
2020/07/08 Javascript
在Python中使用Mako模版库的简单教程
2015/04/08 Python
python登录并爬取淘宝信息代码示例
2017/12/09 Python
PyCharm安装Markdown插件的两种方法
2019/06/24 Python
详细分析Python可变对象和不可变对象
2020/07/09 Python
Ashford台湾:以折扣价提供奢华的男女用表款
2019/12/04 全球购物
什么是GWT的Entry Point
2013/08/16 面试题
《尊严》教学反思
2014/02/11 职场文书
党员反对四风问题思想汇报
2014/09/12 职场文书
基于Pygame实现简单的贪吃蛇游戏
2021/12/06 Python