值得分享和收藏的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 相关文章推荐
下载站控制介绍字数显示的脚本 显示全部 隐藏介绍等功能
Sep 19 Javascript
js字符串的各种格式的转换 ToString,Format
Aug 08 Javascript
整理8个很棒的 jQuery 倒计时插件和教程
Dec 12 Javascript
javascript实现日历控件(年月日关闭按钮)
Dec 12 Javascript
jQuery调用RESTful WCF示例代码(GET方法/POST方法)
Jan 26 Javascript
javascript中setAttribute()函数使用方法及兼容性
Jul 19 Javascript
Angular中$cacheFactory的作用和用法实例详解
Aug 19 Javascript
Javascript中数组去重与拍平的方法示例
Feb 03 Javascript
微信小程序仿RadioGroup改变样式的处理方案
Jul 13 Javascript
详解如何使用koa实现socket.io官网的例子
Nov 04 Javascript
JavaScript相等运算符的九条规则示例详解
Oct 20 Javascript
vue 微信扫码登录(自定义样式)
Jan 06 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
Javascript学习笔记之 对象篇(四) : for in 循环
2014/06/24 Javascript
jQuery中Ajax的load方法详解
2015/01/14 Javascript
jquery实现带渐变淡入淡出并向右依次展开的多级菜单效果实例
2015/08/22 Javascript
基于JavaScript实现文字超出部分隐藏
2016/02/29 Javascript
vue实现一个移动端屏蔽滑动的遮罩层实例
2017/06/08 Javascript
jQuery实现模拟搜索引擎的智能提示功能简单示例
2019/01/27 jQuery
微信小程序页面传多个参数跳转页面的实现方法
2019/05/17 Javascript
nodejs实现日志读取、日志查找及日志刷新的方法分析
2019/05/20 NodeJs
ES6 class的应用实例分析
2019/06/27 Javascript
js实现数字从零慢慢增加到指定数字示例
2019/11/07 Javascript
手机浏览器唤起微信分享(JS)
2020/10/11 Javascript
vue3.0自定义指令(drectives)知识点总结
2020/12/27 Vue.js
js实现有趣的倒计时效果
2021/01/19 Javascript
[45:56]Ti4正赛第一天 VG vs NEWBEE 3
2014/07/19 DOTA
python中对list去重的多种方法
2014/09/18 Python
python3 实现的人人影视网站自动签到
2016/06/19 Python
如何在sae中设置django,让sae的工作环境跟本地python环境一致
2017/11/21 Python
python监控文件并且发送告警邮件
2018/06/21 Python
Python常见内置高效率函数用法示例
2018/07/31 Python
PyQt5+requests实现车票查询工具
2019/01/21 Python
python中pygame安装过程(超级详细)
2019/08/04 Python
基于python的BP神经网络及异或实现过程解析
2019/09/30 Python
python GUI库图形界面开发之PyQt5滑块条控件QSlider详细使用方法与实例
2020/02/28 Python
Python flask框架实现浏览器点击自定义跳转页面
2020/06/04 Python
Python Tkinter实例——模拟掷骰子
2020/10/24 Python
集世界奢侈品和设计师品牌的意大利精品买手店:Tessabit
2019/08/17 全球购物
门卫班长岗位职责
2013/12/15 职场文书
王老吉广告词
2014/03/20 职场文书
关于环保的演讲稿
2014/05/10 职场文书
实习生辞职信范文
2015/03/02 职场文书
2015年团支部年度工作总结
2015/05/27 职场文书
机器人瓦力观后感
2015/06/12 职场文书
2019入党申请书范文3篇
2019/08/21 职场文书
导游词之澳门妈祖庙
2019/12/19 职场文书
MySQL分区表实现按月份归类
2021/11/01 MySQL
python和C/C++混合编程之使用ctypes调用 C/C++的dll
2022/04/29 Python