- 浏览: 260747 次
- 性别:
- 来自: 北京
文章分类
最新评论
-
DragonKiiiiiiiing:
支持楼主,中国互联网太缺这种无私奉献的人了。您的这本书我已拜读 ...
JAVA NIO 全书 译稿 -
sp42:
非常感谢!热部署帮助很大!
Pure JS (2): 热部署 (利用 JDK 7 NIO 监控文件变化) -
sp42:
其实在我的架构中,我更倾向于 JSP 作为前端模板系统~还是写 ...
Pure JS (5.3):pure.render 的实现(构造window对象,实现服务器端 JQuery Template) -
sp42:
非常不错,楼主做的正是鄙人想做的做的,而且比鄙人的来的成熟、健 ...
OMToolkit介绍(5): 总结 -
cfanllm:
楼主辛苦了,,,谢谢分享啊
JAVA NIO 全书 译稿
Pure JS (5.1):在服务器端使用 JQuery DOM 和 JQuery Template
JQuery Template 是著名的客户端 JS 模板引擎,对于没有 SEO 需求的 Web 应用,甚至只用 JQuery Template 就可以完成所有的页面渲染。
但这种方式并不适用于所有 Web 应用,如 博客、新闻类的网站,是必须考虑 SEO 的;由于搜索引擎通常不会执行 JavaScript,所以最好在第一次返回页面时就包含希望被搜索到的数据。
一种常见的模式是第一次返回时使用服务器端 JS 进行初始渲染,而后续修改时使用客户端 JS 对界面进行修改。使用这种模式时,甚至可以在服务器端和客户端共用部分渲染代码。但前提是服务器端界面渲染代码风格与客户端一致。
因此,我在 Java DOM 操作的基础上,对 JQuery 和 JQuery Template 进行了修改,仅保留了 JQuery DOM 查询、DOM 操作,以及 JQuery Template 页面渲染函数和 Tag,不包括 data、events等。
这篇文章将通过测试案例说明已经完成的功能,下一篇文章将结合简单的例子介绍其使用方式,最后将介绍背后的实现细节。
测试案例
附件中的 PureJS 工程包含了这里提到的测试案例(注意工程路径中不能包含空格等特殊字符,否则 DOMParser会报错)。
下图是所有的测试案例(com.purejs.test.render.RenderTestSuite):
RenderTestSuite 的代码如下:
package com.purejs.test.render; import org.junit.runner.RunWith; import org.junit.runners.Suite; @RunWith(Suite.class) @Suite.SuiteClasses({ JQueryAttributesTest.class, JQueryCssTest.class, JQueryInternalsTest.class, JQueryManipulationTest.class, JQueryMiscellaneousTest.class, JQueryPropertiesTest.class, JQuerySelectorsTest.class, JQueryTraversingTest.class, JQueryUtilitiesTest.class, TemplateTest.class }) public class RenderTestSuite { }
这个 test suite 共包含 185 项测试,下面将选择其中的重点进行说明。
JQuery Selectors
我们可以在这里看到 JQuery Selectors 的 API:http://api.jquery.com/category/selectors/
这个部分的测试位于 JQuerySelectorsTest,共 50 项测试。实际 JS 文件位于 scripts/test/render/selectors 中。
ID Selector 是最基本的 selector 之一, id.js 代码如下:
importPackage(org.junit); function name() { return "ID"; } function execute() { pure.render("test", function($){ context.elems = $("#b"); }); } function verify() { var elems = context.elems; Assert.assertEquals(1, elems.length, 0); Assert.assertEquals("b", elems[0].id); }
name() 函数返回测试案例的名称,excute 函数执行被测试的代码,verify 函数验证结果。
pure.render 接受三个参数:
1. partial:可选,为 true 表示只对 HTML 片段进行渲染,不会补齐 DOCType,HTML标记,HEAD 等
2. name:模板名称
3. 渲染函数,参数是 JQuery 对象
返回值是一个字符串,及渲染后的页面代码。渲染结果是“线性输出”的,不保证缩进,Tag 将转为大写。不过这并不影响浏览器的解析。
这里对于如下的输入:
<div id="a" name="pre-middle-aend" words="word xxx"> <div id="b" name="pre" words="xxxx word" class="clz"> <h1 id="h1">John</h1> </div> </div>
context.elems 将选取如下的片段:
<DIV class="clz" id="b" name="pre" words="xxxx word"> <H1 id="h1">John</H1> </DIV>
JQuery Manipulation
我们可以在这里看到 JQuery Tranversing 的 API:http://api.jquery.com/category/manipulation/
这个部分的测试主要位于 JQueryManipulationTest,共 23 项测试;部分测试放在 JQueyCSSTest 和 JQuryAttributes 分类中。
$.append() 是很常用的 Manipulation 函数,append.js 文件内容如下:
importPackage(org.junit); function name() { return "Append"; } function execute() { context.html = pure.render("test", function($) { $("#c").append($("<input id='test' />")); context.elems = $("#c :last-child"); }); } function verify() { Assert.assertEquals("test", context.elems[0].id); }
excute 函数创建了一个 id 为 test 的 input 元素,并添加到 id 为 c 的 div 中。
对于以下输入:
<div id="c" name="xxx-middle-cend" words="xxx xx"> <!-- 省略部分元素 --> <input id="input-text" value="some text" style="width:30px;padding:10px;border:1px solid;margin:1px 2px 3px 4px" /> </div>
将得到如下结果:
<DIV id="c" name="xxx-middle-cend" words="xxx xx"> <!-- 省略部分元素 --> <INPUT id="input-text" value="some text" style="width:30px;padding:10px;border:1px solid;margin:1px 2px 3px 4px"/> <INPUT id="test"/> </DIV>
JQuery Template
我们可以在这里看到 JQury Template 的 API:[/url]http://api.jquery.com/category/plugins/templates/[/url]
这个部分的测试放在 TemplateTest 中,共 20 项测试。
tmpl.js 中包含了最基本的测试:
importPackage(org.junit); function name() { return "Tmpl"; } function execute() { var movies = [ { Name: "The Red Violin", ReleaseYear: "1998" }, { Name: "Eyes Wide Shut", ReleaseYear: "1999" }, { Name: "The Inheritance", ReleaseYear: "1976" } ]; context.html = pure.render("test", function($) { $("#movie-tmpl" ).tmpl(movies).appendTo("#b"); context.result = [ $("#b p").length, $("#b p b").html() ]; }); } function verify() { var result = context.result; Assert.assertEquals(3, result[0], 0); Assert.assertEquals("The Red Violin", result[1]); }
excute 函数将数据 movies 注入到模板 movie-tmpl 中,并添加到 id 为 b 的 div 中。
对于如下输入:
<div id="a" name="pre-middle-aend" words="word xxx"> <div id="b" name="pre" words="xxxx word" class="clz"> <h1 id="h1">John</h1> </div> </div> <script id="movie-tmpl" type="text/x-jquery-tmpl"> <p><b>${Name}</b> (${ReleaseYear})</p> </script>
将得到如下结果:
<DIV id="a" name="pre-middle-aend" words="word xxx"> <DIV class="clz" id="b" name="pre" words="xxxx word"> <H1 id="h1">John</H1> <P><B>The Red Violin</B> (1998)</P> <P><B>Eyes Wide Shut</B> (1999)</P> <P><B>The Inheritance</B> (1976)</P> </DIV> </DIV>
Child Page
Child Page 的测试实际上是包含在 TemplateTest 中的。我们可以用两种方式实现页面组装:
方式一:
1.对子页面进行渲染,渲染目标为一个临时的 div,渲染完成后将 body 的内容替换为这个临时的div。
2.将子页面渲染结果插入到父页面中的指定位置
childPage.js
importPackage(org.junit); function name() { return "Child Page"; } function execute() { var htmlData = { htmlBody: '<b>HTML</b>' }, textData = { textBody: 'Text' }; var childHtml = pure.render(true, "child", function($) { var $html = $("#child-html-tmpl" ).tmpl(htmlData), $text = $("#child-text-tmpl" ).tmpl(textData) var $target = $("#target").append($html).append($text); $("body").html($target.html()); }); context.html = pure.render("test", function($) { $("#b").append(childHtml); context.elems = $("#b p b"); }); } function verify() { var elems = context.elems; Assert.assertEquals(2, elems.length, 0); Assert.assertEquals("HTML", pure.html(elems[0])); Assert.assertEquals("Text", pure.html(elems[1])); }
输入:
test.html
<div id="a" name="pre-middle-aend" words="word xxx"> <div id="b" name="pre" words="xxxx word" class="clz"> <h1 id="h1">John</h1> </div> </div>
child.html
<div id="target"></div> <script id="child-html-tmpl" type="text/x-jquery-tmpl"> <p>{{html htmlBody}}</p> </script> <script id="child-text-tmpl" type="text/x-jquery-tmpl"> <p><b>${textBody}</b></p> </script>
输出:
<DIV id="a" name="pre-middle-aend" words="word xxx"> <DIV class="clz" id="b" name="pre" words="xxxx word"> <H1 id="h1">John</H1> <P><B>HTML</B></P> <P><B>Text</B></P> </DIV> </DIV>
方式二:
1.将子页面的模板添加到父页面中
2.在父页面中统一进行渲染
childTemplate.js
importPackage(org.junit); function name() { return "Child Template"; } function execute() { var htmlData = { htmlBody: '<b>HTML</b>' }, textData = { textBody: 'Text' }; var childTmpl = pure.render(true, "child-tmpl"); context.html = pure.render("test", function($) { $("body").append(childTmpl); var $html = $("#child-html-tmpl" ).tmpl(htmlData), $text = $("#child-text-tmpl" ).tmpl(textData) $("#b").append($html).append($text); context.elems = $("#b p b"); }); } function verify() { var elems = context.elems; Assert.assertEquals(2, elems.length, 0); Assert.assertEquals("HTML", pure.html(elems[0])); Assert.assertEquals("Text", pure.html(elems[1])); }
输入:
test.html (同上,略)
child-tmpl.html
<script id="child-html-tmpl" type="text/x-jquery-tmpl"> <p>{{html htmlBody}}</p> </script> <script id="child-text-tmpl" type="text/x-jquery-tmpl"> <p><b>${textBody}</b></p> </script>
输出:(同上,略)
- PureJS.rar (2.1 MB)
- 下载次数: 25
发表评论
-
Pure JS (7):小结
2011-08-09 08:15 1579Pure JS (7):小结 Pure ... -
Pure (6.7):部署
2011-08-07 09:08 1435Pure (6.7):部署 我们可以按照以下步骤部署 Pu ... -
PureJS (6.6):配置 Spket 智能感知
2011-08-05 07:45 1639PureJS (6.6):配置 Spket 智能感知 本文 ... -
PureJS (6.5):配置文件
2011-08-02 07:40 1405PureJS (6.5):配置文件 配置文件的目的是把经 ... -
PureJS (6.4):利用 proxy 对象实现权限控制和数据校验
2011-08-01 07:52 1700PureJS (6.4):利用 proxy 对象实现权限控制和 ... -
PureJS (6.3):Rhino 中的日志与 proxy 对象
2011-07-30 09:23 1905PureJS (6.3):Rhino 中的日志与 proxy ... -
Pure JS (6.2):结合 Rhino 和 Junit GUI 测试 JS
2011-07-24 11:17 2412Pure JS (6.2):结合 Rhino 和 Junit ... -
Pure JS (6.1):使用 Rhino Shell 和 Debugger 运行和调试 JS
2011-07-11 07:10 3901Pure JS (6.1):使用 Rhino Shell 和 ... -
Pure JS (5.3):pure.render 的实现(构造window对象,实现服务器端 JQuery Template)
2011-07-05 06:36 4060Pure JS (5.3):pure.render 的 ... -
Pure JS (5.2):服务器端与客户端共用页面渲染代码
2011-07-04 08:08 2632Pure JS (5.2):服务器端与客户端共用页面渲染代码 ... -
Pure JS (4.3): pure.db.js 的实现(基于 MongoDB Rhino Driver)
2011-06-18 23:26 2118Pure JS (4.3): pure.db.js 的实现(基 ... -
Pure JS (4.2): Web 应用中服务器端 JS 调用 MongoDB 的简单示例
2011-06-11 10:50 2999Pure JS (4.2): Web 应用中 ... -
Pure JS (4.1): 使用 MongoDB 进行数据存储和管理
2011-06-07 07:40 3724Pure JS (4.1): 使用 MongoDB ... -
Pure JS (3.2): 上传下载 (HTML5 与 Flash 上传实现,配置项说明)
2011-06-04 21:10 2399Pure JS (3.2): 上传下载 (HTML5 与 Fl ... -
Pure JS (3.1):上传下载(利用 HTML5 与 Flash)
2011-06-02 09:11 3505Pure JS (3.1):上传下载( ... -
Pure JS (2): 热部署 (利用 JDK 7 NIO 监控文件变化)
2011-05-22 17:17 6204Pure JS (2): 热部署 (利用 JDK 7 NIO ... -
Pure JS (1): 在 jetty 上运行 JavaScript
2011-05-21 08:24 5022Pure JS (1): 在 jetty 上运行 JavaSc ...
相关推荐
NULL 博文链接:https://xxing22657-yahoo-com-cn.iteye.com/blog/1113665
纯Java范例该存储库包含使用纯JavaScript与dom交互的不同示例。 目的是提供无需jQuery就可以与dom进行交互的不同方式。 当前实例遍历-提供有关如何上下移动dom的不同方式的示例。 creation-elements-提供有关如何在...
安装 npm install purejs或者使用凉亭 bower install purejs鲍尔要使用该组件,您必须使用类的工具捆绑该组件。 例如: ./public/modules/app.js : var pure = require('purejs')console.log(typeof pure)命令行: ...
PureMVC框架实用案例,利用pureMVC框架搭建的一个基本功能框架,可以在此基础上加以完善功能.服务器端采用java开发的基于CXF框架的webservice,
安装efis-pure-template安装lights-FIS包管理工具,用于安装efis-pure-templatenpm install -g lights安装efis-pure-template,首先进入要存放的文件目录lights install efis-pure-template安装efis-pure,用于开发...
我采用纯 JS 的模型视图控制器设计,使用 jQuery 作为选择器。 该程序创建并保存笔记对象,文本保存在“笔记”键中,id 保存在“id”键中。 对象被保存到缓存中,并在页面加载时抓取并转换为所述对象的数组。 ...
NULL 博文链接:https://xxing22657-yahoo-com-cn.iteye.com/blog/1076016
Pure是一个基于jQuery开发,能够动态生成HTML的JavaScript模板引擎。支持JSON数据。
docker-pure-ftpd:Docker Pure-ftpd服务器
没有任何F / W的前端DDD示例 这是什么? 待定以后写一篇文章 内容 反样品 DDD实现的一个简单计数器 ...DDD实现,包括异步处理(从服务器获取数据)和从服务器进行推送(webSocket) 待定,待会再写
NULL 博文链接:https://xxing22657-yahoo-com-cn.iteye.com/blog/1121314
jQuery 项目不是必需的,它旨在为 JS 开发人员提供一个骗局,他们可以使用它来减少对 JQuery 的依赖并编写他们在 PureJS 中使用的等效 JQuery 方法。 :Japanese_symbol_for_beginner: 项目的不同部分 :handshake: ...
霍姆桥戴森纯酷 该项目是戴森空气净化器的homebridge插件。 支持的设备有: 戴森Pure Humidify + Cool(PH01) 戴森Pure Humidify + Cool Cryptomic... 您的所有设备都在HomeKit中作为空气净化器暴露在外,并支持
#Pure JS一个页面滚动皮特R.纯JS一个页面滚动是JavaScript版本的。 该插件可让您创建类似苹果的一页滚动网站(iPhone 5S网站),而无需在jQuery上进行回复。 由创始人创建许可证: 要求没有! 没有更多的jQuery!...
NULL 博文链接:https://xxing22657-yahoo-com-cn.iteye.com/blog/1143089
pure-getopt:在纯Bash中实现的GNU getopt的直接替代
NULL 博文链接:https://xxing22657-yahoo-com-cn.iteye.com/blog/1137790
NULL 博文链接:https://xxing22657-yahoo-com-cn.iteye.com/blog/1131612
今天要介绍的一款jQuery是一个可编辑的表格,它的实现非常简单,主要利用了jQuery插件和PureCSS插件,简单的引用和初始化JavaScript语句即可让网页上的table表格可以自定义编辑,非常实用。