博文

基于原型的JavaScript分层框架

已有 4699 次阅读 2013-9-28 17:27 |个人分类:JS学习|系统分类:科研笔记| jquery, Javascript, 三层结构, eval

为了能够更好的维护前端Javscript程序，利用原型将庞大的Javascript程序划分为event、logic、interact三层结构。其中，event层用于给页面元素节点绑定事件；logic层属于业务逻辑实现层；interact层属于与后台交互层，如利用Ajax向服务器端发送请求以返回所需数据。Javascript的三层结构，可以实现业务逻辑与服务器端交互的分离，页面渲染与业务逻辑的分离。当然，更主要的是便于维护前端Javascript程序。Javascript程序的三层结构如下。

1. 利用构造函数及其原型。

test = function() {

//自定义一些对象属性...
};

test.prototype = {};

2.对程序三层分离

(1)event层

test.prototype.event = {

// 与业务逻辑层交互
onExportBtnClick : function() {

// 事件处理函数，位于业务逻辑层
test_prototype.logic.exportData();
}
}

(2)logic层

test.prototype.logic = {

// 业务逻辑层承担着渲染页面、初始化元素节点、事件绑定、与interact层交互等任务...
initQueryCommon : function() {
alert('初始化查询条件');
},
pageRendering : function() {
alert('页面渲染');
},
bindEvent : function() {
alert('事件绑定');
jQuery('#btn_export').click(test_prototype.event.onExportBtnClick);
},
exportData : function() {
test_prototype.interact.exportData();
}
}

(3)interact层

test.prototype.interact = {

// 利用Ajax等技术向服务器端发送请求并返回所需数据...
exportData : function() {
alert('与后台进行交互...');
}
}

(4)缓存函数原型
window.test_prototype = test.prototype;

3.构造JS对象实例工厂

BeanFactory = {
/**
* 获得JS对象实例方法 .
*
* @param {String} beanName 要实例化的JS类名
* @return {Object...} args JS类构造函数参数
*/
getInstance : function(beanName, args) {
var constructorArgs = Array.prototype.slice.call(arguments, 1);
var evalStr = 'new ' + beanName + '(';
for (var i = 0, ilen = constructorArgs.length; i < ilen; i++) {
if (i < ilen - 1) {
evalStr += 'constructorArgs[' + i + '],'
} else {
evalStr += 'constructorArgs[' + i + ']'
}
}
evalStr += ');';
var instance = eval(evalStr);
if (typeof instance.event === 'undefined') {
instance.event = {};
}
if (typeof instance.logic === 'undefined') {
instance.logic = {};
}
if (typeof instance.interact === 'undefined') {
instance.interact = {};
}
instance.event.parentObj = instance.logic.parentObj = instance.interact.parentObj = instance;
return instance;
}