全栈 JavaScript 框架 xmlplus 1.5.9 发布

qudou
 qudou
发布于 2017年04月30日
收藏 41

该版本主要对全局函数 clearLibrary 作了简化,另外对文档的一些文字错误进行了修正,同时保持了 gitHub 与  npm 版本之间的同步。

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://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 等脚本语言有着很大的不同。

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处,尊重他人劳动共创开源社区。
转载请注明:文章转载自 OSCHINA 社区 [http://www.oschina.net]
本文标题:全栈 JavaScript 框架 xmlplus 1.5.9 发布
资讯来源:qudou
加载中

精彩评论

无著方知尘亦珍
无著方知尘亦珍
切,不就是全栈么?搞web开发的后端,有几个不是全栈的。就差设计电路了。
ArthurWang
ArthurWang

引用来自“无著方知尘亦珍”的评论

切,不就是全栈么?搞web开发的后端,有几个不是全栈的。就差设计电路了。
不会挖硅矿,敢说自己是全栈工程师?
阳光满地
阳光满地
不知道好在哪里

最新评论(16

qudou
qudou
看了大家的评论,谢谢大家的关注。写框架只是出于纯粹的个人兴趣,无论如何,本人会继续下去。下一步打算出个基于 xmlplus 的迷你 web 服务器,已经写好了各种基本组件,就差文档了,用法会有点非主流,敬请期待啊😄
榕树下_
榕树下_
在这个框架满天飞的年代
ArthurWang
ArthurWang

引用来自“无著方知尘亦珍”的评论

切,不就是全栈么?搞web开发的后端,有几个不是全栈的。就差设计电路了。
不会挖硅矿,敢说自己是全栈工程师?
AeroZen
AeroZen

引用来自“无著方知尘亦珍”的评论

切,不就是全栈么?搞web开发的后端,有几个不是全栈的。就差设计电路了。
必须顶兄弟!
单车架构师
单车架构师
框架何其多,各令风骚几个月
酷酷的就
酷酷的就
react 啊.
hvick
hvick
太多规范。。
阳光满地
阳光满地
不知道好在哪里
无著方知尘亦珍
无著方知尘亦珍
切,不就是全栈么?搞web开发的后端,有几个不是全栈的。就差设计电路了。
泛逸舟
泛逸舟
我飞呀飞呀飞飞飞,哈哈,这个框架带我们前端飞起来吧
返回顶部
顶部