值得分享和收藏的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 相关文章推荐
用roll.js实现的图片自动滚动+鼠标触动的特效
Mar 18 Javascript
ASP SQL防注入的方法
Dec 25 Javascript
js 优化次数过多的循环 考虑到性能问题
Mar 05 Javascript
两个数组去重的JS代码
Dec 04 Javascript
JavaScript Array对象扩展indexOf()方法
May 09 Javascript
jQuery仿gmail实现fixed布局的方法
May 27 Javascript
JS组件系列之Bootstrap table表格组件神器【终结篇】
May 10 Javascript
jquery取消事件冒泡的三种方法(推荐)
May 28 Javascript
js如何获取网页所有图片
May 12 Javascript
vue2.0 循环遍历加载不同图片的方法
Mar 06 Javascript
Vue.js 2.x之组件的定义和注册图文详解
Jun 19 Javascript
Vue router传递参数并解决刷新页面参数丢失问题
Dec 02 Vue.js
微信小程序中多个页面传参通信的学习与实践
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
SONY ICF-F10中波修复记
2021/03/02 无线电
ThinkPHP模板自定义标签使用方法
2014/06/26 PHP
Zend Framework创建自己的动作助手详解
2016/03/05 PHP
phpcms中的评论样式修改方法
2016/10/21 PHP
Yii框架页面渲染操作实例详解
2019/07/19 PHP
jQuery 连续列表实现代码
2009/12/21 Javascript
预加载css或javascript的js代码
2010/04/23 Javascript
Javascript继承机制的设计思想分享
2011/08/28 Javascript
按下Enter焦点移至下一个控件的实现js代码
2013/12/11 Javascript
jquery 取子节点及当前节点属性值的方法
2014/08/24 Javascript
JavaScript中5种调用函数的方法
2015/03/12 Javascript
详解Angular.js的$q.defer()服务异步处理
2016/11/06 Javascript
get  post jsonp三种数据交互形式实例详解
2017/08/25 Javascript
Vue.js做select下拉列表的实例(ul-li标签仿select标签)
2018/03/02 Javascript
vue之debounce属性被移除及处理详解
2019/11/13 Javascript
javascript设计模式 ? 组合模式原理与应用实例分析
2020/04/14 Javascript
梳理一下vue中的生命周期
2020/12/30 Vue.js
[01:06:25]Secret vs Liquid 2018国际邀请赛淘汰赛BO3 第一场 8.25
2018/08/29 DOTA
Python 文件重命名工具代码
2009/07/26 Python
Python的装饰器模式与面向切面编程详解
2015/06/21 Python
Python连接MySQL并使用fetchall()方法过滤特殊字符
2016/03/13 Python
python中MethodType方法介绍与使用示例
2017/08/03 Python
python实战教程之自动扫雷
2018/07/13 Python
Tensorflow中tf.ConfigProto()的用法详解
2020/02/06 Python
解决Jupyter无法导入已安装的 module问题
2020/04/17 Python
如何安装并在pycharm使用selenium的方法
2020/04/30 Python
浅谈cookie和localStorage那些事
2019/08/27 HTML / CSS
详解HTML5如何使用可选样式表为网站或应用添加黑暗模式
2020/04/07 HTML / CSS
芬兰攀岩、山地运动和户外活动用品购物网站:Bergfreunde
2016/10/06 全球购物
String s = new String(“xyz”);创建了几个String Object?
2015/08/05 面试题
幼儿园小班教学反思
2014/02/02 职场文书
医药销售自我评价200字
2014/09/11 职场文书
银行竞聘报告范文
2014/11/06 职场文书
2014年幼儿园园长工作总结
2014/12/17 职场文书
2015年财务工作总结范文
2015/03/31 职场文书
Python中的pprint模块
2021/11/27 Python