值得分享和收藏的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加ASP二级域名转向的代码
May 17 Javascript
对采用动态原型方式无法展示继承机制得思考
Dec 04 Javascript
JavaScript.The.Good.Parts阅读笔记(一)假值与===运算符
Nov 16 Javascript
js实现带关闭按钮始终显示在网页最底部工具条的方法
Mar 02 Javascript
js网页滚动条滚动事件实例分析
May 05 Javascript
jQuery实现简易的天天爱消除小游戏
Oct 16 Javascript
激动人心的 Angular HttpClient的源码解析
Jul 10 Javascript
微信小程序实现点击按钮修改字体颜色功能【附demo源码下载】
Dec 05 Javascript
Vue数据双向绑定的深入探究
Nov 27 Javascript
JavaScript 装逼指南(js另类写法)
May 10 Javascript
vuex存取值和映射函数使用说明
Jul 24 Javascript
QT与javascript交互数据的实现
May 26 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中url函数介绍及使用示例
2014/02/13 PHP
php生成验证码函数
2015/10/20 PHP
PHP使用file_get_contents发送http请求功能简单示例
2018/04/29 PHP
用JavaScript和注册表脚本实现右键收藏Web页选中文本
2007/01/28 Javascript
基于JQuery的日期联动实现代码
2011/02/24 Javascript
web基于浏览器的本地存储方法应用
2012/11/27 Javascript
利用jquery包将字符串生成二维码图片
2013/09/12 Javascript
JavaScript关闭当前页面(窗口)不带任何提示
2014/03/26 Javascript
js Calender控件使用详解
2015/01/05 Javascript
js实现漂浮回顶部按钮实例
2015/05/06 Javascript
jquery dialog获取焦点的方法
2017/02/09 Javascript
在react-router4中进行代码拆分的方法(基于webpack)
2018/03/08 Javascript
浅谈webpack 构建性能优化策略小结
2018/06/13 Javascript
基于Vue 撸一个指令实现拖拽功能
2019/10/09 Javascript
微信小程序实现选择地址省市区三级联动
2020/06/21 Javascript
JS实现拖拽元素时与另一元素碰撞检测
2020/08/27 Javascript
VUE-ElementUI 自定义Loading图操作
2020/11/11 Javascript
微信小程序实现锚点跳转
2020/11/23 Javascript
[06:07]辉夜杯现场观众互动 “比谁远送显示器”
2015/12/26 DOTA
[01:02:47]EG vs Secret 2019国际邀请赛淘汰赛 胜者组 BO3 第一场 8.21.mp4
2020/07/19 DOTA
python如何在循环引用中管理内存
2018/03/20 Python
python 与服务器的共享文件夹交互方法
2018/12/27 Python
PyTorch学习:动态图和静态图的例子
2020/01/06 Python
使用Pyhton 分析酒店针孔摄像头
2020/03/04 Python
Python序列化pickle模块使用详解
2020/03/05 Python
简单了解如何封装自己的Python包
2020/07/08 Python
浅析Python 抽象工厂模式的优缺点
2020/07/13 Python
CSS3 渐变(Gradients)之CSS3 线性渐变
2016/07/08 HTML / CSS
大学军训感想
2014/02/12 职场文书
机关副主任个人四风问题整改措施
2014/09/26 职场文书
自愿离婚协议书2015
2015/01/26 职场文书
2015年共青团工作总结
2015/05/15 职场文书
离婚案件原告代理词
2015/05/23 职场文书
行政后勤人员工作计划应该怎么写?
2019/08/16 职场文书
javaScript Array api梳理
2021/03/31 Javascript
windows server 2016 域环境搭建的方法步骤(图文)
2022/06/25 Servers