Pure JS (5.2)：服务器端与客户端共用页面点染代码-JavaSript-爱易网页

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

日期：2014-05-16　浏览次数：20332 次

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/";

	retu

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

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

相关资料更多>

推荐阅读更多>