- 浏览: 265293 次
- 性别:
- 来自: 北京
文章分类
最新评论
-
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 1666Pure JS (7):小结 Pure ... -
Pure (6.7):部署
2011-08-07 09:08 1519Pure (6.7):部署 我们可以按照以下步骤部署 Pu ... -
PureJS (6.6):配置 Spket 智能感知
2011-08-05 07:45 1694PureJS (6.6):配置 Spket 智能感知 本文 ... -
PureJS (6.5):配置文件
2011-08-02 07:40 1479PureJS (6.5):配置文件 配置文件的目的是把经 ... -
PureJS (6.4):利用 proxy 对象实现权限控制和数据校验
2011-08-01 07:52 1747PureJS (6.4):利用 proxy 对象实现权限控制和 ... -
PureJS (6.3):Rhino 中的日志与 proxy 对象
2011-07-30 09:23 1985PureJS (6.3):Rhino 中的日志与 proxy ... -
Pure JS (6.2):结合 Rhino 和 Junit GUI 测试 JS
2011-07-24 11:17 2460Pure JS (6.2):结合 Rhino 和 Junit ... -
Pure JS (6.1):使用 Rhino Shell 和 Debugger 运行和调试 JS
2011-07-11 07:10 4003Pure JS (6.1):使用 Rhino Shell 和 ... -
Pure JS (5.3):pure.render 的实现(构造window对象,实现服务器端 JQuery Template)
2011-07-05 06:36 4168Pure JS (5.3):pure.render 的 ... -
Pure JS (5.2):服务器端与客户端共用页面渲染代码
2011-07-04 08:08 2715Pure JS (5.2):服务器端与客户端共用页面渲染代码 ... -
Pure JS (4.3): pure.db.js 的实现(基于 MongoDB Rhino Driver)
2011-06-18 23:26 2189Pure JS (4.3): pure.db.js 的实现(基 ... -
Pure JS (4.2): Web 应用中服务器端 JS 调用 MongoDB 的简单示例
2011-06-11 10:50 3068Pure JS (4.2): Web 应用中 ... -
Pure JS (4.1): 使用 MongoDB 进行数据存储和管理
2011-06-07 07:40 3786Pure JS (4.1): 使用 MongoDB ... -
Pure JS (3.2): 上传下载 (HTML5 与 Flash 上传实现,配置项说明)
2011-06-04 21:10 2477Pure JS (3.2): 上传下载 (HTML5 与 Fl ... -
Pure JS (3.1):上传下载(利用 HTML5 与 Flash)
2011-06-02 09:11 3567Pure JS (3.1):上传下载( ... -
Pure JS (2): 热部署 (利用 JDK 7 NIO 监控文件变化)
2011-05-22 17:17 6304Pure JS (2): 热部署 (利用 JDK 7 NIO ... -
Pure JS (1): 在 jetty 上运行 JavaScript
2011-05-21 08:24 5070Pure JS (1): 在 jetty 上运行 JavaSc ...
相关推荐
这篇文章将探讨如何使用纯JavaScript(Pure JS)实现这两种渲染方式的共享代码,从而提高代码复用性和效率。 一、服务器端渲染(SSR) 服务器端渲染是指在服务器上执行JavaScript,生成完整的HTML页面并将其发送到...
虽然Pure是基于jQuery的,但其设计尽可能地降低了对jQuery的依赖,使得在其他JavaScript库环境中也能正常工作。只要提供类似jQuery的DOM操作和事件处理功能,Pure就能很好地适应。 8. **社区支持与文档** 作为...
3. **编写 JavaScript 代码**: 创建一个 `.js` 文件,如 `json.js`,包含你想要在服务器端执行的 JavaScript 逻辑。例如,处理 HTTP 请求、数据库操作或计算任务。 4. **加载和执行 JavaScript**: 在 Java 代码中,...
在服务器端应用中,我们通常使用PureMVC的Proxy来管理数据,包括从数据库或其他数据源获取数据。Proxy可以监听并广播消息,使得模型和视图能够同步更新。而Mediator则负责视图组件和模型间的通信,它订阅并响应...
在Web应用中,JavaScript通常被用来处理客户端交互,但随着Node.js的出现,JavaScript也能够运行在服务器端。本篇文章将探讨如何使用纯JavaScript(即不依赖任何特定库或框架)在服务器端调用MongoDB数据库。MongoDB...
pure.db.js的核心理念是通过Rhino将JavaScript与MongoDB的Java驱动连接起来,提供一套纯JavaScript的接口供前端或服务器端的JavaScript代码调用。这样,开发者可以使用熟悉的JavaScript语法进行数据库操作,无需学习...
9. **JavaScript模块化**:`js`目录可能包含多个JavaScript文件,每个文件负责特定的功能模块,遵循模块化编程原则,有助于代码组织和后期维护。 通过以上分析,我们可以看出这个项目集成了多种前端技术,不仅展示...
标题中的“Pure JS (7):小结”表明这是一篇关于JavaScript编程的系列教程的第七部分,重点在于总结前面几部分所讲解的核心概念和技巧。JavaScript,也称为JS,是一种广泛用于网页和网络应用的脚本语言,尤其在前端...
PureJS可能是一个强调使用原生JavaScript代码的库或者框架,而不是依赖其他库如jQuery。版本号6.5表明这是一个更新过的版本,可能包含了一些新的特性和改进。 描述部分虽然为空,但根据标签“源码”和“工具”,...
标题 "Pure JS (6.2):结合 Rhino 和 Junit GUI 测试 JS" 提到的是一个关于使用纯JavaScript(Pure JS)与Rhino JavaScript引擎以及JUnit进行图形用户界面(GUI)测试的实践方法。Rhino是Mozilla基金会开发的一个...
**文件名称列表分析:** "PureJS"可能是博客文章的系列名称,但没有具体的文件内容,我们只能假设这篇文章是该系列的一部分,可能包含了一系列关于使用Rhino Shell和Debugger进行JavaScript开发的实践教程或案例。...
纯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)命令行: ...
该插件通过jQuery的事件处理和DOM操作能力,以及PureCSS简洁优雅的样式,共同构建出一个用户友好、功能丰富的表格系统。下面,我们将深入探讨这个插件的工作原理、核心特点以及如何进行二次开发。 首先,jQuery库是...
例如,当你输入`pure.`时,Spket应该会列出`util`、`dom`等PureJS模块下的方法。 除了以上基本配置,还可以根据个人喜好和需求调整Spket的其他设置,比如代码格式化规则、错误检查等。同时,Spket也支持其他...
1. **Pure JQuery实现**:开发者可以使用JQuery的DOM操作函数,配合CSS和AJAX请求来构建分页功能。这种实现方式灵活性高,但编码复杂度相对较高。 2. **预封装的JQuery插件**:例如jQuery Pagination、jQuery UI的...
jQuery是一个广泛使用的JavaScript库,它简化了DOM操作、事件处理、动画以及Ajax交互。而PureCSS则是一个轻量级的CSS框架,专注于基本的UI组件,如按钮、表单、导航等,旨在提供简洁、响应式的样式。 首先,我们来...
安装efis-pure-template安装lights-FIS包管理工具,用于安装efis-pure-templatenpm install -g lights安装efis-pure-template,首先进入要存放的文件目录lights install efis-pure-template安装efis-pure,用于开发...