当前位置：首页 > 软件库 > Web应用开发 > JavaScript MVC 框架 >

xmlplus

全栈 JavaScript 框架

授权协议 MIT

开发语言 JavaScript

所属分类 Web应用开发、 JavaScript MVC 框架

软件类型开源软件

地区国产

投递者微生良策

操作系统跨平台

开源组织无

适用人群未知

软件官网

软件文档

官方下载

软件概览

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 组件设计系列之零 - 简介（Introduction）

xmlplus 介绍 xmlplus 是一个设计非常独特 JavaScript 框架，用于快速开发前后端项目。基于组件设计在 xmlplus 中，组件是基本的构造块。评价组件设计好坏的一个重要标准是封装度。基于 xmlplus 设计的组件具有极高的封装度。下面是一个简单的组件示例： Widget: { css: "#widget{ color: red; }", xml: `<
xmlplus 组件设计系列之一 - 图标（ICON）

图标网页上使用的图标分可为三种：文件图标、字体图标和 SVG 图标。对于文件图标，下面仅以 PNG 格式来说明。 <img src="http://xmlplus.cn/img/icon.png" class="img-responsive"/> PNG 图标对于 PNG 图标的引用，有两种方式。一种是直接由 HTML 元素 img 的 src 属性给出。下面是一个简单的示例。 // 01-0
xmlplus 组件设计系列之十 - 网格（DataGrid）

网格这一章我们要实现是一个网格组件，该组件除了最基本的数据展示功能外，还提供排序以及数据过滤功能。 <img src="http://xmlplus.cn/img/datagrid.png" class="img-responsive"/> 数据源为了测试我们即将编写好网格组件，我们采用如下格式的数据源。此数据源包含两部分的内容，分别是表头数据集和表体数据集。网格组件实例最终的列数由表头数据集
xmlplus 组件设计系列之九 - 树（Tree）

树树形组件是一种具有层级结构的组件，广泛应用于各种场景。本章会实现一个简单的树形组件，尽管功能有限，但你可以通过扩展它来实现自己所需要的树形组件。 <img src="http://xmlplus.cn/img/tree.png" class="img-responsive"/> 数据源树形组件的数据源可以是 JSON 格式的数据对象，也可以是具有 XML 结构的数据或者是其它的具有层级结构的
xmlplus 组件设计系列之六 - 下拉刷新（PullRefresh）

下拉刷新 “下拉刷新”由著名设计师 Loren Brichter 设计，并应用于 Twitter 第三方应用 Tweetie 中。2010年4月，Twitter 收购 Tweetie 开发商 Atebits 后，该专利归 Twitter 所有。这一章我们就来看看如何实现一个简单的下拉刷新组件。 <img src="http://xmlplus.cn/img/pullrefresh.png" cla
xmlplus 组件设计系列之八 - 分隔框（DividedBox）

分隔框分隔框（DividedBox）是一种布局类组件，可以分为两种，其中一种叫水平分隔框（HDividedBox），另一种叫垂直分隔框（VDividedBox）。水平分隔框会将其子级分为两列，而垂直分隔框则会将其子级分为两行。列与列之间以及行与行之间一般都会有一条可以拖动的用以改变子级组件大小的分隔条。下面仅以垂直分隔框为例来介绍此类组件是如何设计以及实现的。 <img src="http://
xmlplus 组件设计系列之四 - 列表（List）

列表列表是极其常用的一种组件，是许多组件系统的必须包含的。列表可以做的很简单，只显示简洁的文本。列表也可以做的很复杂，用于展示非常丰富的内容。 <img src="http://xmlplus.cn/img/list.png" class="img-responsive"/> 列表的组成列表离不开列表项以及包含列表项的容器。下面是最简单的列表组件，它包含一个列表项组件 Item 以及一个列表项
xmlplus 组件设计系列之零 - 简介（Introduction）

xmlplus 介绍 xmlplus 是一个设计非常独特 JavaScript 框架，用于快速开发前后端项目。基于组件设计在 xmlplus 中，组件是基本的构造块。评价组件设计好坏的一个重要标准是封装度。基于 xmlplus 设计的组件具有极高的封装度。下面是一个简单的组件示例： Widget: { css: "#widget{ color: red; }", xml: `<
xmlplus 组件设计系列之五 - 选项卡（Tabbar）

选项卡这一章将设计一个选项卡组件，选项卡组件在手持设备上用的比较多，下面是一个示意图： <img src="http://www.xmlplus.cn/img/tabbar.png" class="img-responsive"/> 选项卡组成在具体实现之前，想像一下目标组件是如何使用的，对于设计会有莫大的帮助。通过观察，可以将选项卡组件分为容器部分和子项部分，正如下面的 XML 结构所展示的
xmlplus 组件设计系列之七 - 路由（ViewStack）

路由在浏览器端，对路由的理解一般是根据不同的 URL 完成页面的切换。在服务器端，则是根据不同的 URL 请求回馈相关的页面。在本章，我们广义的组件路由的定义：根据接收到的不同命令，组件对象呈现出不同的子级页面。在这里将介绍与路由相关的一个组件，即视图栈 ViewStack。 <img src="http://xmlplus.cn/img/viewstack.png" class="img-re
xmlplus 组件设计系列之二 - 按钮（Button）

按钮除了图标组件以外，按钮也许是最简单的组件了，这章就来看看如何定义按钮组件。 <img src="http://xmlplus.cn/img/button.png" class="img-responsive"/> 使用原生按钮组件在 xmlplus 中，HTML 元素也以组件的方式存在。所以，你可以直接通过使用 button 标签或者 input 标签来使用按钮组件。如下面的示例所示： /
xmlplus 组件设计系列之三 - 文本框（TextBox）

文本框文本框是页面中最常用的输入组件，这一章就来看看各种文本框组件的设计与使用。 <img src="http://xmlplus.cn/img/textbox.png" class="img-responsive"/> 原生的文本框原生的文本框组件非常简单，它只包含一个 input 元素，下面是它的一个使用示例。 // 03-01 Index: { xml: "<input id='
JavaScript 框架 xmlplus 1.5.14 发布

avaScript 框架 xmlplus 1.5.14 发布了。更新如下：将原先对于 xmldom 模块的依赖改为 exmldom。exmldom 模块是对 xmldom 模块的扩展，添加了事件支持。也就是说，你可以像前端那样在 dom 之间进行事件通信。更换模块依赖的目的是避免造成模块引用的冲突，当然 exmldom 模块功能兼容 xmldom 模块，你完全可以使用 exmldom 代替 xm
JavaScript 框架 xmlplus 1.5.12 发布

JavaScript 框架 xmlplus 1.5.12 发布了。xmlplus 是一个设计非常独特 JavaScript 框架，用于快速开发前后端项目。这个版本主要添加了一个全局接口 create。该函数是一个轻量的用于创建组件对象的函数，它只是简单地调用组件的函数项来返回所需的对象。另外，此版本附加了十个组件设计方面的示例。文章转载自开源中国社区[https://www.oschina

xmlplus

基于组件设计

友好的相容性

一次学习, 多端使用

同类工具

相关阅读

相关文章

相关问答

相关文档