Pure JS (5.2)：服务器端与客户端共用页面渲染代码
接着上一篇文章，我们来谈谈如何在服务器端和客户端共用 JS 代码，以便实现第一次返回页面时在服务器端完成初始渲染，而之后的操作在客户端进行修改并重新渲染页面的模式。
运行示例
首先，需要先运行mongod；然后下载附件中的 PureJS 工程，解压后加载到 eclipse 中，打开文件 main/com/purejs/core/JSServer.java，右键选择 Run As -> Java Application。
在浏览器中输入
http://localhost:8080， 可以看到如下页面：
引用
这个界面与 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 的过程了。除此之外，数据验证函数也可以提取出来，在服务器端和客户端共用，有时间的话请自行尝试吧。
谢谢。
分享到：
相关推荐
PureMVC框架实用案例，利用pureMVC框架搭建的一个基本功能框架，可以在此基础上加以完善功能.服务器端采用java开发的基于CXF框架的webservice，
NULL 博文链接：https://xxing22657-yahoo-com-cn.iteye.com/blog/1112920
Pure Go Oracle客户端 重要笔记： 客户端已经针对oracle 10G，11G和12G进行了测试，并且可以正常工作 支持的参数类型是整数，双精度型，字符串，time.Time和[] byte SELECT和DML语句现在支持BLOB 不支持命名参数...
PureMVC框架实用案例，利用pureMVC框架搭建的一个基本功能框架，可以在此基础上加以完善功能.服务器端采用java开发的基于CXF框架的webservice，
Pure.js 坚持 JavaScript 的原型性质，没有引入新的想法，允许与内置构造函数更好地集成。安装 npm install purejs或者使用凉亭 bower install purejs鲍尔要使用该组件，您必须使用类的工具捆绑该组件。 例如： ./...
您可以使用它与adb服务器（而不是设备/仿真器上的adb守护程序）进行通信。 当您使用adb命令时 现在您可以使用pure-python-adb作为adb命令行连接到adb服务器 该软件包支持adb命令行工具的大多数功能。 adb设备 ...
一个 Javascript（SlimJEC.js，可选的 SlimJEC_Config.js 来设置凭据）：使客户端工作的代码 HTML 页面（SlimJEC.html、SlimJEC.css）：客户端的静态 HTML 包装器 它让你 以匹配模式或模糊模式执行全文搜索 在您想要...
NULL 博文链接：https://xxing22657-yahoo-com-cn.iteye.com/blog/1076016
anybar.nim：Anybar的Nim客户端
docker-pure-ftpd：Docker Pure-ftpd服务器
NATS - 纯 Ruby 客户端用纯 Ruby 编写的用于线程安全客户端。入门gem install nats-pure 从版本开始，您还可以选择安装以使用新的 NATS v2.0 身份验证功能： gem install nkeys基本用法 require 'nats/io/client'...
该模块提供与完全相同的功能，但作为一个独立的模块，具有三种不同的风格。 用法 功能 这是我的首选方法，但是它要求通过将{ "stage": 0 }放入来启用ES7。 import { Component } from 'react' ; import ...
该项目正在开发不依赖于C ++ Pulsar库的Pulsar的pure-Go客户端库。 一旦达到功能奇偶性和稳定性，它将取代当前基于CGo的库。 要求 转到1.11+ 状态 检查位于的“项目”页面，以跟踪状态和进度。 用法 导入客户端库：...
NULL 博文链接：https://xxing22657-yahoo-com-cn.iteye.com/blog/1143089
NULL 博文链接：https://xxing22657-yahoo-com-cn.iteye.com/blog/1137790
没有任何F / W的前端DDD示例 这是什么？ 待定以后写一篇文章 内容 反样品 DDD实现的一个简单计数器 ...DDD实现，包括异步处理（从服务器获取数据）和从服务器进行推送（webSocket） 待定，待会再写
NULL 博文链接：https://xxing22657-yahoo-com-cn.iteye.com/blog/1097596
pure-data:Pure Data-免费的实时计算机音乐系统
NULL 博文链接：https://xxing22657-yahoo-com-cn.iteye.com/blog/1131612