Pure JS (5.2)：服务器端与客户端共用页面渲染代码
程序员文章站
2022-04-26 14:17:49
...
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
http://xxing22657-yahoo-com-cn.iteye.com/admin/blogs/1076016
这个界面与 4.2 中是一样的，但实现方式已经不同了。第一次返回的页面已经包含了部分渲染的结果和 users 数据，而增加 user 或删除 user 将会使用客户端 JS 重新渲染界面。
接下来，让我们分别看看各部分的 JS 是如何编写的。
引用
第一次打开页面时间较长，这可能跟 JS 加载有关。
但与 JSP 不同，并非每个页面都要花时间编译，而是第一次用到 jQuery 时需要花较长时间加载。
这在运行测试案例时也会发现（第一个测试案例执行时间较长，之后的测试案例执行都很快）。
但与 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 的过程了。除此之外，数据验证函数也可以提取出来，在服务器端和客户端共用，有时间的话请自行尝试吧。
谢谢。