当前位置: 代码迷 >> JavaScript >> Pure JS (5.2):服务器端与客户端共用页面点染代码
  详细解决方案

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

热度:370   发布时间:2012-10-13 11:38:17.0
Pure JS (5.2):服务器端与客户端共用页面渲染代码
Pure JS (5.2):服务器端与客户端共用页面渲染代码

  接着上一篇文章,我们来谈谈如何在服务器端和客户端共用 JS 代码,以便实现第一次返回页面时在服务器端完成初始渲染,而之后的操作在客户端进行修改并重新渲染页面的模式。

运行示例

  首先,需要先运行mongod;然后下载附件中的 PureJS 工程,解压后加载到 eclipse 中,打开文件 main/com/purejs/core/JSServer.java,右键选择 Run As -> Java Application。
  在浏览器中输入 http://localhost:8080, 可以看到如下页面:

引用
  参考 Pure JS (4.2): Web 应用中服务器端 JS 调用 MongoDB 的简单示例
  http://xxing22657-yahoo-com-cn.iteye.com/admin/blogs/1076016

  这个界面与 4.2 中是一样的,但实现方式已经不同了。第一次返回的页面已经包含了部分渲染的结果和 users 数据,而增加 user 或删除 user 将会使用客户端 JS 重新渲染界面。
  接下来,让我们分别看看各部分的 JS 是如何编写的。
引用
  第一次打开页面时间较长,这可能跟 JS 加载有关。
  但与 JSP 不同,并非每个页面都要花时间编译,而是第一次用到 jQuery 时需要花较长时间加载。
  这在运行测试案例时也会发现(第一个测试案例执行时间较长,之后的测试案例执行都很快)。

包含页面模板的 HTML

  以下是包含模板的 html 文件,也就是后续需要进行操作的文件:
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
	<link href="css/index.css" rel="stylesheet" type="text/css" />
	<title>DBO Example</title>
</head>
<body>

<div align="center">
	<h1>DBO Example</h1>
	<table id="content"></table>
</div>

<script id="data"></script>

<script id="content-tmpl" type="tmpl">
	<tr align="left">
		<th class="w100">User</th>
		<th class="w150">Description</th>
		<th class="w100" colspan="2">Operation</th>
	</tr>
	<tr align="left">
		<td> <input class="w90"/> </td>
		<td> <input class="w140" /> </td>
		<td> <a href="##">Save</a> </td>
		<td> <a href="##">Delete</a> </td>
	</tr>
</script>

<script id="user-tmpl" type="tmpl">
	<tr index="${index}" align="left">
		<td> ${name} </td>
		<td> <input class="w140" value="${desc}" /> </td>
		<td> <a href="##">Save</a> </td>
		<td> <a href="##">Delete</a> </td>
	</tr>
</script>

<script id="data-tmpl" type="tmpl">
	users = ${users};
</script>

<script src="js/lib/jquery.js"> </script>
<script src="js/lib/jquery.tmpl.js"> </script>
<script src="js/lib/json.js"> </script>
<script src="js/lib/pure.js"> </script>
<script src="js/both/views.js"> </script>
<script src="js/index.js"> </script>

</body>
</html>

  【content-tmpl】:包含表格的列标题和最后一行(用于增加 user )。
  【user-tmpl】:表格的一行,包含 user 数据。
  【data-tmpl】:用于在服务器端将 users 数据输出到客户端。

渲染函数

  在 webapp/js/both/views.js 中,我们可以看到如下代码:
views = {
	index: function($, users) {
		$(users).each(function(i) { this.index = i; });

		var content = $("#content-tmpl").tmpl(),
			rows = $("#user-tmpl").tmpl(users);

		$("#content").html(content);
		$("#content tr:first").after(rows);
	}
};

  这里实现了 page.index() 方法,接收两个参数:jQuery 对象和 users 数据,然后完成对页面的渲染。

服务器端 JS

  与该页面相关的服务器端 JS 位于 scripts/app/page.js:
page = function(){
	pure.render.prefix = "webapp/";

	return {
		index: function(params, req, res) {
			var users = dbo.users.list(),
				data = { users: JSON.stringify(users) };

			return pure.render("index", function($){
				views.index($, users);
				$("#data").html($("#data-tmpl").tmpl(data));
			});
		}
	}
}();

  在 pure.render 函数中做了两件事:
  1. 调用公共的页面渲染函数进行界面渲染
  2. 将 users 数据输出客户端。

客户端 JS

  客户端与该页面对应的 JS 文件是 webapp/js/index.js :
$(function(){
	bind();

	// 每次修改数据时重新排序并渲染页面、绑定事件
	function show() {
		sort();
		views.index($, users);
		bind();
	}

	function sort() {
		// users 重新排序,略
	}

	// 绑定事件
	function bind() {
		var rows = $("#content tr[index] a"),
			last= $("#content tr:last a");

		rows.filter(":even").click(update);
		rows.filter(":odd").click(remove);

		last.eq(0).click(add);
		last.eq(1).click(clear);
	}

	// 增加 user ,需要重新排序和渲染
	function add() {
		var $input = $(this).parent().parent().find("input"),		
			$name = $input.eq(0),
			$desc = $input.eq(1),
			name = $name.val(),
			desc = $desc.val();

		// 数据验证,略

		var user = { name: name, desc: desc };
		users.push(user);
		save(user);
	}

	function clear() {
		// 清空数据,略
	}

	// 修改 user ,需要重新排序和渲染
	function update() {
		var $tr = $(this).parent().parent(),
			$desc = $tr.find("input"),
			index = $tr.attr("index"),				
			desc = $desc.val();

		// 数据验证,略

		var user = users[parseInt(index)];
		user.desc = desc;
		save(user);
	}

	// 删除 user ,需要重新排序和渲染,并发送请求
	function remove() {
		var $tr = $(this).parent().parent(),
			index = $tr.attr("index");

		$tr.remove();
		var name = users.splice(index, 1)[0].name;

		show();
		pure.post({ action: "users.remove", params: name });
	}

	// 在增加或保存修改 user 时调用,重新排序和渲染,并发送请求
	function save(user) {
		show();
		pure.post({ action: "users.save", params: user });
	}
});

  以上就是服务器端和客户端共用 JS 的过程了。除此之外,数据验证函数也可以提取出来,在服务器端和客户端共用,有时间的话请自行尝试吧。
  谢谢。
  相关解决方案