值得分享和收藏的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 面向对象编程基础 多态
Aug 21 Javascript
正则表达式中特殊符号及正则表达式的几种方法总结(replace,test,search)
Nov 26 Javascript
javascript 事件处理示例分享
Dec 31 Javascript
基于jquery css3实现点击动画弹出表单源码特效
Aug 31 Javascript
js获取及判断键盘按键的方法
Dec 01 Javascript
Node.js实用代码段之获取Buffer对象字节长度
Mar 17 Javascript
基于Bootstrap实现图片轮播效果
May 22 Javascript
vue.js 左侧二级菜单显示与隐藏切换的实例代码
May 23 Javascript
谈谈vue中mixin的一点理解
Dec 12 Javascript
详解React+Koa实现服务端渲染(SSR)
May 23 Javascript
nuxt中使用路由守卫的方法步骤
Jan 27 Javascript
微信小程序中如何使用flyio封装网络请求
Jul 03 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 5昨天隆重推出--PHP 5/Zend Engine 2.0新特性
2006/10/09 PHP
php实现的RSS生成类实例
2015/04/23 PHP
微信公众号支付之坑:调用支付jsapi缺少参数 timeStamp等错误解决方法
2016/01/12 PHP
PHP pthreads v3下的Volatile简介与使用方法示例
2020/02/21 PHP
精通Javascript系列之Javascript基础篇
2011/06/07 Javascript
Javascript获取窗口(容器)的大小及位置参数列举及简要说明
2012/12/09 Javascript
Javascript无阻塞加载具体方式
2013/06/28 Javascript
js对象内部访问this修饰的成员函数示例
2014/04/27 Javascript
javascript实现 百度翻译 可折叠的分享按钮列表
2015/03/12 Javascript
JavaScript中获取HTML元素值的三种方法
2016/06/20 Javascript
给easyui的datebox控件添加清空按钮的实现方法
2016/11/09 Javascript
jQuery验证表单格式的使用方法
2017/01/10 Javascript
JS拉起或下载app的实现代码
2017/02/22 Javascript
微信小程序 登录的简单实现
2017/04/19 Javascript
浅谈Angular 中何时取消订阅
2017/11/22 Javascript
Vue.js的动态组件模板的实现
2018/11/26 Javascript
jQuery ajax仿Google自动提示SearchSuggess功能示例
2019/03/28 jQuery
如何使用JavaScript实现栈与队列
2019/06/24 Javascript
Python实现二维数组输出为图片
2018/04/03 Python
Python实现对文件进行单词划分并去重排序操作示例
2018/07/10 Python
PyQt5实现简易计算器
2020/05/30 Python
python实现用户名密码校验
2020/03/18 Python
基于python计算并显示日间、星期客流高峰
2020/05/07 Python
python中关于数据类型的学习笔记
2020/07/19 Python
matplotlib subplot绘制多个子图的方法示例
2020/07/28 Python
Python爬虫破解登陆哔哩哔哩的方法
2020/11/17 Python
HTML5中如何显示视频呢 HTML5视频播放demo
2013/06/08 HTML / CSS
英国邮购活的植物主要供应商:Gardening Direct
2019/01/28 全球购物
如何打开WebSphere远程debug
2014/10/10 面试题
学校十一活动方案
2014/02/01 职场文书
给老婆的保证书范文
2014/04/28 职场文书
2015年教师师德师风承诺书
2015/04/28 职场文书
小学语文教学随笔
2015/08/14 职场文书
房屋转让协议书(标准范本)
2016/03/21 职场文书
使用Oracle跟踪文件的问题详解
2021/06/28 Oracle
SQLServer权限之只开启创建表权限
2022/04/12 SQL Server