值得分享和收藏的xmlplus组件学习教程
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,你可以通过访问下面的地址来获取相应的资源:
https://github.com/qudou/xmlplus
如果你已经学完了基础教程,那么可以继续学习本博写的 xmlplus 组件设计系列。此系列主要讨论实际中组件的设计思路、方法与技巧等。
xmlplus 组件设计系列之一 - 图标(ICON)
xmlplus 组件设计系列之二 - 按钮(Button)
xmlplus 组件设计系列之三 - 文本框(TextBox)
xmlplus 组件设计系列之四 - 列表(List)
xmlplus 组件设计系列之五 - 选项卡(Tabbar)
xmlplus 组件设计系列之六 - 下拉刷新(PullRefresh)
本系列文章基于 xmlplus 框架。如果你对 xmlplus 没有多少了解,可以访问 www.xmlplus.cn。这里有详尽的入门文档可供参考。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
相关文章
- 这篇文章主要介绍了js组件SlotMachine实现图片切换效果制作抽奖系统的相关资料,需要的朋友可以参考下...2016-04-19
- 在网页中,经常见到进度条效果,那么这些个性的进度条组件效果是怎么实现的呢,下面脚本之家小编给大家分享Bootstrap进度条组件知识详解,感兴趣的朋友要求学习吧...2016-05-04
- 这篇文章主要为大家详细介绍了Bootstarp创建可折叠组件的对应方法,以实例为大家分享了Bootstrap折叠组件,感兴趣的小伙伴们可以参考一下...2016-02-26
- 这篇文章主要介绍了Vue 过渡(动画)transition组件案例详解,非常不错,具有参考借鉴价值,需要的朋友参考下...2017-01-26
- 这篇文章主要介绍了JavaScript资源预加载组件和滑屏组件的使用推荐,分别为preload和slide的用法讲解,使用起来非常简单,需要的朋友可以参考下...2016-03-12
- 这篇文章主要为大家详细介绍了vue.js表格分页示例,ajax异步加载数据...2016-10-20
- 这篇文章主要介绍了基于Vue的文字跑马灯组件(npm 组件包),需要的朋友可以参考下...2017-05-27
- 列表组是灵活又强大的组件,不仅能用于显示一组简单的元素,还能用于复杂的定制的内容。本文给大家介绍Bootstrap列表组组件,感兴趣的朋友一起学习吧...2016-05-05
- 这篇文章给大家介绍js组件系列之Bootstrap Icon图标选择组件,对bootstrap icon图标相关知识感兴趣的朋友一起学习吧...2016-02-01
- 这篇文章主要介绍了Bootstrap组件系列之福利篇几款好用的组件(推荐) 的相关资料,需要的朋友可以参考下...2016-06-24
BootStrap 图片样式、辅助类样式和CSS组件的实例详解
这篇文章主要介绍了BootStrap 图片样式、辅助类样式和CSS组件的实现代码,图文并茂介绍的非常详细,需要的朋友参考下吧...2017-01-23- 这篇文章主要介绍了jQuery技巧之让任何组件都支持类似DOM的事件管理 的相关资料,需要的朋友可以参考下...2016-04-06
在laravel中使用Symfony的Crawler组件分析HTML
这篇文章主要介绍了在laravel中使用Symfony的Crawler组件分析HTML,需要的朋友可以参考下...2017-06-20- 本文主要介绍了React创建组件的三种方式及其区别,具有一定的参考价值,下面跟着小编一起来看下吧...2017-01-16
- 这篇文章主要介绍了浅析Bootstrap组件之面板组件 的相关资料,需要的朋友可以参考下...2016-05-05
- 这篇文章主要为大家详细介绍了vue弹窗组件的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2017-05-27
- 这篇文章主要为大家详细介绍了ionic实现带字的toggle滑动组件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2016-09-01
- 这篇文章主要为大家详细介绍了angular2倒计时组件的使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2017-01-16
xmlplus组件设计系列之网格(DataGrid)(10)
xmlplus 是一个JavaScript框架,用于快速开发前后端项目。这篇文章主要介绍了xmlplus组件设计系列之xmlplus网格,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2017-05-09- 这篇文章主要为大家详细介绍了xmlplus组件设计系列之图标ICON的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2017-05-09