值得分享和收藏的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入门教程(1) 什么是JS
Jan 31 Javascript
JavaScript 异步调用框架 (Part 1 - 问题 &amp; 场景)
Aug 03 Javascript
jquery 新浪网易的评论块制作
Jul 01 Javascript
IE图片缓存document.execCommand(&quot;BackgroundImageCache&quot;,false,true)
Mar 01 Javascript
更快的异步执行(setTimeout多浏览器)
Aug 12 Javascript
深入浅析AngularJS和DataModel
Feb 16 Javascript
AngularJs  E2E Testing 详解
Sep 02 Javascript
JavaScript无操作后屏保功能的实现方法
Jul 04 Javascript
bootstrap-table组合表头的实现方法
Sep 07 Javascript
关闭Vue计算属性自带的缓存功能方法
Mar 02 Javascript
vue中的自定义分页插件组件的示例
Aug 18 Javascript
如何使用pm2快速将项目部署到远程服务器
Mar 12 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
收听短波不可能有声音清晰的品质吗
2021/03/01 无线电
php源码分析之DZX1.5随机数函数random用法
2015/06/17 PHP
PDO::exec讲解
2019/01/28 PHP
ThinkPHP5&amp;5.1实现验证码的生成、使用及点击刷新功能示例
2020/02/07 PHP
原生Js实现元素渐隐/渐现(原理为修改元素的css透明度)
2013/06/24 Javascript
iframe窗口高度自适应的实现方法
2014/01/08 Javascript
一步步教大家编写酷炫的导航栏js+css实现
2016/03/14 Javascript
H5移动端适配 Flexible方案
2016/10/24 Javascript
socket.io学习教程之深入学习篇(三)
2017/04/29 Javascript
JavaScript30 一个月纯 JS 挑战中文指南(英文全集)
2017/07/23 Javascript
微信小程序获取用户信息的两种方法wx.getUserInfo与open-data实例分析
2019/05/03 Javascript
JS回调函数简单易懂的入门实例分析
2019/09/29 Javascript
java和js实现的洗牌小程序
2019/09/30 Javascript
JavaScript 空间坐标的使用
2020/08/19 Javascript
pyqt4教程之widget使用示例分享
2014/03/07 Python
python应用程序在windows下不出现cmd窗口的办法
2014/05/29 Python
Python中规范定义命名空间的一些建议
2016/06/04 Python
详解python中 os._exit() 和 sys.exit(), exit(0)和exit(1) 的用法和区别
2017/06/23 Python
python爬取亚马逊书籍信息代码分享
2017/12/09 Python
django模板语法学习之include示例详解
2017/12/17 Python
python如何求解两数的最大公约数
2018/09/27 Python
Python 实现两个服务器之间文件的上传方法
2019/02/13 Python
一篇文章了解Python中常见的序列化操作
2019/06/20 Python
python中property和setter装饰器用法
2019/12/19 Python
tensorflow模型继续训练 fineturn实例
2020/01/21 Python
Python3如何使用多线程升程序运行速度
2020/08/11 Python
python,Java,JavaScript实现indexOf
2020/09/09 Python
运动鞋中的劳斯莱斯:索康尼(SAUCONY)
2017/08/09 全球购物
土木工程应届生求职信
2013/10/31 职场文书
厨师岗位职责
2013/11/12 职场文书
大学生毕业求职信
2014/06/12 职场文书
政风行风自查自纠报告
2014/10/21 职场文书
安全保证书
2015/01/16 职场文书
RPM包方式安装Oracle21c的方法详解
2021/08/23 Oracle
MySQL令人大跌眼镜的隐式转换
2021/08/23 MySQL
阿里云服务器部署mongodb的详细过程
2021/09/04 MongoDB