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-tmpl").tmpl(data));
	});
};

　　客户端代码：

$(function(){
	bind();

	function show() {
		sort();
		views.index($, users);
		bind();
	}

	// 其他代码，略
});

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

【客户端与服务器端的数据通信】

　　客户器端代码：

$(function(){
	var $message = $("#message"), $uploader = $("#file-uploader");

	var request = {
		action: "hello.say",
		params: { name: "Pei Xiaoxing" }
	};

	pure.post(request, function(data) {
		$message.html(data);
	});

	// 其他代码，略
});

　　服务器端代码：

api.hello = {
	say: function(params) {
		return "Hello, " + params.name + "!";
	},
	// 其他代码，略
};

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

编写 Java 和 JavaScript 扩展

　　【Java扩展】
　　直接在工程中创建 java 文件，或者将独立的 Java 工程导出的 jar 文件添加到 Build Path 中；
　　然后可以用 importPackage(...) 或者 JavaImporter 导入 java package，
　　可以参考 scripts/lib/pure 的写法。

　　【JavaScript 扩展】
　　在 scripts/lib 下创建新的文件夹。
　　启动应用时，文件夹名称将作为一个对象被创建，并执行文件夹中的所有 js 文件。
　　可以参考 scripts/lib/pure 的写法。

其他

　　HTML5 与 Flash 文件上传 见文章 http://xxing22657-yahoo-com-cn.iteye.com/blog/1068055
　　热部署 见文章 http://xxing22657-yahoo-com-cn.iteye.com/blog/1054496
　　调试 见文章 http://xxing22657-yahoo-com-cn.iteye.com/blog/1121314
　　测试 见文章 http://xxing22657-yahoo-com-cn.iteye.com/blog/1131612
　　Spket 智能感知 见文章 http://xxing22657-yahoo-com-cn.iteye.com/blog/1140581