值得分享和收藏的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实现的网站首页随机公告随机公告
Mar 14 Javascript
JavaScript获得url所有参数键值表的方法
Mar 21 Javascript
javascript清空table表格的方法
May 14 Javascript
jQuery Easyui 验证两次密码输入是否相等
May 13 Javascript
JavaScript动态数量的文件上传控件
Nov 18 Javascript
遍历json 对象的属性并且动态添加属性的实现
Dec 02 Javascript
vue学习笔记之vue1.0和vue2.0的区别介绍
May 17 Javascript
angular.js实现购物车功能
Oct 23 Javascript
Vuex 入门教程
Jan 10 Javascript
vue学习笔记之slot插槽用法实例分析
Feb 29 Javascript
Vue+Vuex实现自动登录的知识点详解
Mar 04 Javascript
如何配置vue.config.js 处理static文件夹下的静态文件
Jun 19 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将fileterms函数返回的结果变成可读的形式
2011/04/21 PHP
php使用mb_check_encoding检查字符串在指定的编码里是否有效
2013/11/07 PHP
详解HTTP Cookie状态管理机制
2016/01/14 PHP
php实现统计二进制中1的个数算法示例
2018/01/23 PHP
PHP容器类的两种实现方式示例
2019/07/24 PHP
Thinkphp自定义生成缩略图尺寸的方法
2019/08/05 PHP
在线一元二次方程计算器实例(方程计算器在线计算)
2013/12/22 Javascript
jQuery照片伸缩效果不影响其他元素的布局
2014/05/09 Javascript
超漂亮的Bootstrap 富文本编辑器summernote
2016/04/05 Javascript
Node.js DES加密的简单实现
2016/07/07 Javascript
AngularJS入门之动画
2016/07/27 Javascript
vue-lazyload图片延迟加载插件的实例讲解
2018/02/09 Javascript
详解vue引入子组件方法
2019/02/12 Javascript
jQuery实现图片下载代码
2019/07/18 jQuery
JS严格模式原理与用法实例分析
2020/04/27 Javascript
[02:50]2014DOTA2 TI预选赛预选赛 大神专访第一弹!
2014/05/21 DOTA
[02:10]DOTA2亚洲邀请赛 EG战队出场宣传片
2015/02/07 DOTA
Python利用正则表达式匹配并截取指定子串及去重的方法
2015/07/30 Python
pycharm debug功能实现跳到循环末尾的方法
2018/11/29 Python
Django REST framework内置路由用法
2019/07/26 Python
centos7之Python3.74安装教程
2019/08/15 Python
解决import tensorflow as tf 出错的原因
2020/04/16 Python
基于python3.7利用Motor来异步读写Mongodb提高效率(推荐)
2020/04/29 Python
matplotlib 三维图表绘制方法简介
2020/09/20 Python
基于HTML5 的人脸识别活体认证的实现方法
2016/06/22 HTML / CSS
瑜伽灵感珠宝:Satya Jewelry
2018/01/06 全球购物
波兰办公用品和学校用品在线商店:Dlabiura24.pl
2020/11/18 全球购物
运动会入场解说词300字
2014/01/25 职场文书
最新优秀教师个人先进事迹材料
2014/05/06 职场文书
2014年向国旗敬礼活动总结
2014/09/27 职场文书
出纳岗位职责范本
2015/03/31 职场文书
人工作失职检讨书
2015/05/05 职场文书
网络舆情信息简报
2015/07/21 职场文书
中国现代文学之经典散文三篇
2019/09/18 职场文书
深入解析NumPy中的Broadcasting广播机制
2021/05/30 Python
【海涛DOTA解说】EVE女子战队独家录像加ZSMJ神牛两连发
2022/04/01 DOTA