`
裴小星
  • 浏览: 265293 次
  • 性别: Icon_minigender_1
  • 来自: 北京
博客专栏
8ccf5db2-0d60-335f-a337-3c30d2feabdb
Java NIO翻译
浏览量:27825
F3e939f0-dc16-3d6e-8c0b-3315c810fb91
PureJS开发过程详解
浏览量:74146
07a6d496-dc19-3c71-92cf-92edb5203cef
MongoDB Java ...
浏览量:62957
社区版块
存档分类
最新评论

Pure JS (5.1):在服务器端使用 JQuery DOM 和 JQuery Template

阅读更多
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>

  输出:(同上,略)
9
4
分享到:
评论

相关推荐

    Pure JS (5.2):服务器端与客户端共用页面渲染代码

    这篇文章将探讨如何使用纯JavaScript(Pure JS)实现这两种渲染方式的共享代码,从而提高代码复用性和效率。 一、服务器端渲染(SSR) 服务器端渲染是指在服务器上执行JavaScript,生成完整的HTML页面并将其发送到...

    jquery模板pure

    虽然Pure是基于jQuery的,但其设计尽可能地降低了对jQuery的依赖,使得在其他JavaScript库环境中也能正常工作。只要提供类似jQuery的DOM操作和事件处理功能,Pure就能很好地适应。 8. **社区支持与文档** 作为...

    Pure JS (1): 在 jetty 上运行 JavaScript

    3. **编写 JavaScript 代码**: 创建一个 `.js` 文件,如 `json.js`,包含你想要在服务器端执行的 JavaScript 逻辑。例如,处理 HTTP 请求、数据库操作或计算任务。 4. **加载和执行 JavaScript**: 在 Java 代码中,...

    PureMVC服务器端代码

    在服务器端应用中,我们通常使用PureMVC的Proxy来管理数据,包括从数据库或其他数据源获取数据。Proxy可以监听并广播消息,使得模型和视图能够同步更新。而Mediator则负责视图组件和模型间的通信,它订阅并响应...

    Pure JS (4.2): Web 应用中服务器端 JS 调用 MongoDB 的简单示例

    在Web应用中,JavaScript通常被用来处理客户端交互,但随着Node.js的出现,JavaScript也能够运行在服务器端。本篇文章将探讨如何使用纯JavaScript(即不依赖任何特定库或框架)在服务器端调用MongoDB数据库。MongoDB...

    Pure JS (4.3): pure.db.js 的实现(基于 MongoDB Rhino Driver)

    pure.db.js的核心理念是通过Rhino将JavaScript与MongoDB的Java驱动连接起来,提供一套纯JavaScript的接口供前端或服务器端的JavaScript代码调用。这样,开发者可以使用熟悉的JavaScript语法进行数据库操作,无需学习...

    jQuery仿Windows系统文件夹目录操作代码.zip

    9. **JavaScript模块化**:`js`目录可能包含多个JavaScript文件,每个文件负责特定的功能模块,遵循模块化编程原则,有助于代码组织和后期维护。 通过以上分析,我们可以看出这个项目集成了多种前端技术,不仅展示...

    Pure JS (7):小结

    标题中的“Pure JS (7):小结”表明这是一篇关于JavaScript编程的系列教程的第七部分,重点在于总结前面几部分所讲解的核心概念和技巧。JavaScript,也称为JS,是一种广泛用于网页和网络应用的脚本语言,尤其在前端...

    PureJS (6.5):配置文件

    PureJS可能是一个强调使用原生JavaScript代码的库或者框架,而不是依赖其他库如jQuery。版本号6.5表明这是一个更新过的版本,可能包含了一些新的特性和改进。 描述部分虽然为空,但根据标签“源码”和“工具”,...

    Pure JS (6.2):结合 Rhino 和 Junit GUI 测试 JS

    标题 "Pure JS (6.2):结合 Rhino 和 Junit GUI 测试 JS" 提到的是一个关于使用纯JavaScript(Pure JS)与Rhino JavaScript引擎以及JUnit进行图形用户界面(GUI)测试的实践方法。Rhino是Mozilla基金会开发的一个...

    Pure JS (6.1):使用 Rhino Shell 和 Debugger 运行和调试 JS

    **文件名称列表分析:** "PureJS"可能是博客文章的系列名称,但没有具体的文件内容,我们只能假设这篇文章是该系列的一部分,可能包含了一系列关于使用Rhino Shell和Debugger进行JavaScript开发的实践教程或案例。...

    pure-javascript-examples:无需使用jQuery即可使用纯JavaScript与dom交互的方式的小示例

    纯Java范例该存储库包含使用纯JavaScript与dom交互的不同示例。 目的是提供无需jQuery就可以与dom进行交互的不同方式。 当前实例遍历-提供有关如何上下移动dom的不同方式的示例。 creation-elements-提供有关如何在...

    purejs:用于构造函数、mixin 和类型测试的纯 JavaScript API

    安装 npm install purejs或者使用凉亭 bower install purejs鲍尔要使用该组件,您必须使用类的工具捆绑该组件。 例如: ./public/modules/app.js : var pure = require('purejs')console.log(typeof pure)命令行: ...

    jQuery+PureCSS可编辑表格插件.zip

    该插件通过jQuery的事件处理和DOM操作能力,以及PureCSS简洁优雅的样式,共同构建出一个用户友好、功能丰富的表格系统。下面,我们将深入探讨这个插件的工作原理、核心特点以及如何进行二次开发。 首先,jQuery库是...

    PureJS (6.6):配置 Spket 智能感知

    例如,当你输入`pure.`时,Spket应该会列出`util`、`dom`等PureJS模块下的方法。 除了以上基本配置,还可以根据个人喜好和需求调整Spket的其他设置,比如代码格式化规则、错误检查等。同时,Spket也支持其他...

    JQuery分页插件

    1. **Pure JQuery实现**:开发者可以使用JQuery的DOM操作函数,配合CSS和AJAX请求来构建分页功能。这种实现方式灵活性高,但编码复杂度相对较高。 2. **预封装的JQuery插件**:例如jQuery Pagination、jQuery UI的...

    利用jQuery与PureCSS实现的可编辑表格源码.zip

    jQuery是一个广泛使用的JavaScript库,它简化了DOM操作、事件处理、动画以及Ajax交互。而PureCSS则是一个轻量级的CSS框架,专注于基本的UI组件,如按钮、表单、导航等,旨在提供简洁、响应式的样式。 首先,我们来...

    efis-pure-template:efis-pure-template是基于efis-pure的应用模板

    安装efis-pure-template安装lights-FIS包管理工具,用于安装efis-pure-templatenpm install -g lights安装efis-pure-template,首先进入要存放的文件目录lights install efis-pure-template安装efis-pure,用于开发...

Global site tag (gtag.js) - Google Analytics