日期:2014-05-16  浏览次数:20436 次

Pure JS (7):小结
Pure JS (7):小结

  PureJS 结合了 Rhino、MongoDB、jQuery Template(包括服务器端),目标是使用更一致的方式编写客户端和服务器端的 js 代码。它采用嵌入式的 Jetty 作为 Web Server,依赖于 Java 7。
  我在 Google Code 上新建了开源项目 PandaJS:http://code.google.com/p/pandajs/
  除了工程名、包名、文件夹名称略有不同外,基本与这里的 PureJS 工程一致。

开发流程

  【创建工程】
  1. 使用 eclipse 新建一个 Java 工程
  2. 下载并解压 PureJS 工程
  3. 将 src 目录下的文件复制到工程的 src 目录下
  4. 将 scripsts、webapp 目录和文件 log4j.properties 复制到工程中,并新建 upload 目录
  5. 将 lib 目录复制到工程中,在工程上点击鼠标右键,
     选择  Build Path -> Configure Build Path -> Add JARs ,
     将 lib 目录中的 jar 文件添加到 Build Path 中。

  【开发过程】
  1. 在 src/com/purejs/Luncher.java 上点击鼠标右键,选择 Run As -> Java Application
  (需要先确保 mongod 正在运行,并且已安装 Java 7)。
  2. 在浏览器中输入 http://localhost,就可以看到初始的页面
  3. 修改 scripts/app 和 scripts/test/app 目录下的文件, Pure JS 支持热部署,通常无需重启应用
  4. 也可以使用 debug 工程调试应用,见文章 http://xxing22657-yahoo-com-cn.iteye.com/blog/1121314

  【发布工程】
  导出为 jar,并scripsts、webapp 目录和文件 log4j.properties 复制到 deploy 目录中,新建 upload 目录,
  使用 java -jar 启动,见文章 http://xxing22657-yahoo-com-cn.iteye.com/blog/1141849

Code Sample

【使用 MongoDB 进行数据管理】
dbo.users = function(){
	var users = pure.db.get("users");
	return {
		list: function() {
			if (!users.count()) { init(); }
			return users.list().$sort({ name: 1 });
		},
		save: function(user) {
			var q = { name: user.name };
			users.update(q, user, true, false);
		},
		remove: function(name) {
			users.remove({ name: name });
		},
		exists: function(name) {
			return users.count({ name: name }) > 0;
		}
	}

	function init() {
		pure.db.eval(function(){
			var users = db.users;
			users.drop();
			users.ensureIndex({ name: 1 });

			users.insert({ name: "user1", desc: "desc1" });
			users.insert({ name: "user2", desc: "desc2" });
			users.insert({ name: "user3", desc: "desc3" });
		});
	}
}();

  见文章
  http://xxing22657-yahoo-com-cn.iteye.com/blog/1071205
  http://xxing22657-yahoo-com-cn.iteye.com/blog/1076016

【使用 jQuery Template 语法进行服务器端页面渲染】
var views = {};

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);
};

  见文章
  http://xxing22657-yahoo-com-cn.iteye.com/blog/1112920
  http://xxing22657-yahoo-com-cn.iteye.com/blog/1113665

【使用 Proxy 对象拦截方法调用(日志、权限控制、数据校验)】
(function() {
	var log = pure.log("proxy.security");

	proxy.security = { priority: 80 };

	proxy.security.page = {
		priority: 100,
		expr: /^page./,
		func: function(name, method, args) {
			var req = args[1];
			var role = req.session.getAttribute("user.role") + "";

			if (role === "admin") {
				return this[method].apply(this, args);
			} else {
				log.info("Redirect to login page.");
				return pure.render("login");
			}
		}
	}

	proxy.security.api = { ... }
}());

  见文章
  http://xxing22657-yahoo-com-cn.iteye.com/blog/1136195
  http://xxing22657-yahoo-com-cn.iteye.com/blog/1136987

  【服务器端与客户端共用代码】

  可以共用的代码包括渲染代码、数据校验代码等,这里以共用渲染代码为例
  (共用前面提到的 views.index(...))。

  服务器端代码:
page.index = function(params, req, res) {
	var users = pure.proxy("dbo.users").list(),
		data = { users: JSON.stringify(users) };

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