值得分享和收藏的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统计用户下载网页所需时间的脚本
Oct 15 Javascript
ExtJS 2.2.1的grid控件在ie6中的显示问题
May 04 Javascript
Google (Local) Search API的简单使用介绍
Nov 28 Javascript
从数组中随机取x条不重复数据的JS代码
Dec 24 Javascript
JavaScript截断字符串的方法
Jul 15 Javascript
谈谈Jquery ajax中success和complete有哪些不同点
Nov 20 Javascript
jQuery 移动端artEditor富文本编辑器
Jan 11 Javascript
利用Decorator如何控制Koa路由详解
Jun 26 Javascript
解决vue js IOS H5focus无法自动弹出键盘的问题
Aug 30 Javascript
代码整洁之道(重构)
Oct 25 Javascript
layui加载数据显示loading加载完成loading消失的实例代码
Sep 23 Javascript
如何搭建一个完整的Vue3.0+ts的项目步骤
Oct 18 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正则校验用户名介绍
2008/07/19 PHP
分享最受欢迎的5款PHP框架
2014/11/27 PHP
CentOS 上搭建 PHP7 开发测试环境
2017/02/26 PHP
使用PHP+MySql+Ajax+jQuery实现省市区三级联动功能示例
2017/09/15 PHP
AutoSave/自动存储功能实现
2007/03/24 Javascript
jQuery 绑定事件到动态创建的元素上的方法实例
2013/08/18 Javascript
javaScript对文字按照拼音排序实现代码
2013/12/27 Javascript
JavaScript实现的内存数据库LokiJS介绍和入门实例
2014/11/17 Javascript
jscript读写二进制文件的方法
2015/04/22 Javascript
AngularJS路由切换实现方法分析
2017/03/17 Javascript
JS+HTML+CSS实现轮播效果
2017/11/28 Javascript
vue-cli实现多页面多路由的示例代码
2018/01/30 Javascript
vue解决一个方法同时发送多个请求的问题
2018/09/25 Javascript
JS判断两个数组或对象是否相同的方法示例
2019/02/28 Javascript
微信小程序云开发修改云数据库中的数据方法
2019/05/18 Javascript
微信小程序开发打开另一个小程序的实现方法
2020/05/17 Javascript
[02:57]2014DOTA2国际邀请赛-观众采访
2014/07/19 DOTA
[54:45]2018DOTA2亚洲邀请赛 4.1 小组赛 A组 Optic vs OG
2018/04/02 DOTA
python回调函数的使用方法
2014/01/23 Python
Python中的Numpy入门教程
2014/04/26 Python
Python 搭建Web站点之Web服务器网关接口
2016/11/06 Python
Python  unittest单元测试框架的使用
2018/09/08 Python
解决python3 pika之连接断开的问题
2018/12/18 Python
python 2.7 检测一个网页是否能正常访问的方法
2018/12/26 Python
Python实现的合并两个有序数组算法示例
2019/03/04 Python
将python安装信息加入注册表的示例
2019/11/20 Python
简述Linux文件系统通过i节点把文件的逻辑结构和物理结构转换的工作过程
2012/04/17 面试题
秋季运动会广播稿大全
2014/02/17 职场文书
保密普查工作实施方案
2014/02/25 职场文书
灰雀教学反思
2014/04/28 职场文书
诚信承诺书
2015/01/19 职场文书
关于召开会议的通知
2015/04/15 职场文书
2016年“5.12”护士节慰问信
2015/11/30 职场文书
学校2016年九九重阳节活动总结
2016/04/01 职场文书
励志正能量20句:送给所有为梦想拼搏的人
2019/11/11 职场文书
Python爬虫框架之Scrapy中Spider的用法
2021/06/28 Python