值得分享和收藏的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中怎么做对象的类型判断
Nov 11 Javascript
Visual Studio中js调试的方法图解
Jun 30 Javascript
jquery马赛克拼接翻转效果代码分享
Aug 24 Javascript
javascript实现对表格元素进行排序操作
Nov 18 Javascript
js生成随机数的过程解析
Nov 24 Javascript
javascript实现滚动效果的数字时钟实例
Jul 21 Javascript
基于Axios 常用的请求方法别名(详解)
Mar 13 Javascript
JavaScript实现的滚动公告特效【基于jQuery】
Jul 10 jQuery
javascript移动端 电子书 翻页效果实现代码
Sep 07 Javascript
Vue.js watch监视属性知识点总结
Nov 11 Javascript
微信小程序地图实现展示线路
Jul 29 Javascript
Openlayers+EasyUI Tree动态实现图层控制
Sep 28 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
关于使用coreseek并为其做分页的介绍
2013/06/21 PHP
php读取本地文件常用函数(fopen与file_get_contents)
2013/09/09 PHP
php批量添加数据与批量更新数据的实现方法
2014/12/16 PHP
支持png透明图片的php生成缩略图类分享
2015/02/08 PHP
浅析PHP中json_encode与json_decode的区别
2020/07/15 PHP
利用onresize使得div可以随着屏幕大小而自适应的代码
2010/01/15 Javascript
无闪烁更新网页内容JS实现
2013/12/19 Javascript
中止javascript执行的方法
2014/02/14 Javascript
jQuery实现表格展开与折叠的方法
2015/05/04 Javascript
详解Backbone.js框架中的模型Model与其集合collection
2016/05/05 Javascript
jQuery通过deferred对象管理ajax异步
2016/05/20 Javascript
jquery实现ajax提交表单信息的简单方法(推荐)
2016/08/24 Javascript
sublime text配置node.js调试(图文教程)
2017/11/23 Javascript
解决Layui选择全部,换页checkbox复选框重新勾选的问题方法
2018/08/14 Javascript
Layui表格行工具事件与数据回填方法
2019/09/13 Javascript
通过layer实现可输入的模态框的例子
2019/09/27 Javascript
js cavans实现静态滚动弹幕
2020/05/21 Javascript
Python实现同时兼容老版和新版Socket协议的一个简单WebSocket服务器
2014/06/04 Python
Python设计足球联赛赛程表程序的思路与简单实现示例
2016/06/28 Python
python读取excel表格生成erlang数据
2017/08/26 Python
Python实战小程序利用matplotlib模块画图代码分享
2017/12/09 Python
详解Django之admin组件的使用和源码剖析
2018/05/04 Python
python使用循环打印所有三位数水仙花数的实例
2018/11/13 Python
Python os.access()用法实例
2019/02/18 Python
django API 中接口的互相调用实例
2020/04/01 Python
Python 分布式缓存之Reids数据类型操作详解
2020/06/24 Python
HTML5实现可缩放时钟代码
2017/08/28 HTML / CSS
草莓网中国:StrawberryNet中国
2020/08/17 全球购物
食品销售计划书
2014/04/26 职场文书
市场调查策划方案
2014/06/10 职场文书
热情服务标语
2014/10/07 职场文书
2014年教育工作总结
2014/11/26 职场文书
先进班集体事迹材料
2014/12/25 职场文书
2015年秋季学校开学标语
2015/07/16 职场文书
大学运动会加油稿
2015/07/22 职场文书
Go Gin实现文件上传下载的示例代码
2021/04/02 Golang