用JavaScript描述富web程序
在富web程序里，JavaScript不再是用来为网页增色的玩物，而成为真正的重点。当一个页面上有了越来越多的数据逻辑，我们如何设计才能虽多、虽杂，却不乱？
比如：要设计一个任务模块，每一个任务都可以有子任务（理论上无限子），当前任务都有一些基本描述。 如下图：
不错，这是一棵任务树。那么我们怎么设计呢？有语言：oo的重点在于抽象出不动点。那么上图什么才是不动点？
首先，相对于数据库而言，数据结构是不动的。由此我们可以抽象出Task对象，它基本对应了数据库的信息。
再者，因为数据结构是不动的，html结构数据也是不动的，我们可以抽象出TaskDom对象，他对应task对象的html描述。(动的只是css布局而已,html结构是不动的)。
Task对象和TaskDom对象互相关联。如下：
var sm = {};
sm.TaskId = 0;
sm.Task = function(parent){
//唯一标识符
this.id = sm.TaskId++;
//业务属性
this.name = "nothing";
this.userby = "nobody";
this.desc = "nothing";
//节点关系
this.parent = parent||null;
this.children = [];
//dom属性
this.dom = new sm.TaskDom(this);
};
sm.Task.prototype = {
add : function(){
var newT = new sm.Task(this);
this.children.push(newT);
}
,remove : function(){
if(!this.parent)return false;
var pChildren = this.parent.children;
for(var i=0;i<pChildren.length;i++){
var child = pChildren[i];
if(this.id == child.id){
pChildren.splice(i,1);
return true;
}
}
return false;
}
,getJson : function(pdata){
this.dom.fillValues();
var data = {"name":this.name,"userby":this.userby,"desc":this.desc,children:[]};
pdata && pdata.children.push(data);
for(var i=0;i<this.children.length;i++){
this.children[i].getJson(data);
}
return data;
}
};
sm.TaskDomDesc = $("#task_dom").val();
sm.TaskDom = function(task){
this.task = task;
this.dom = $(sm.TaskDomDesc);
this.dom.attr("id","task-"+this.task.id)
this.init();
};
sm.TaskDom.prototype ={
init : function(){
this.appendTo();
this.regEvent();
}
,regEvent : function(){
var self = this;
//child event
self.dom.find(".control-child").first().bind("click",function(){
self.task.add();
});
//delete event
self.dom.find(".control-delete").first().bind("click",function(){
self.task.remove();
self.dom.remove();
});
//up event
self.dom.find(".control-up").first().bind("click",function(){
$(self.task.children).each(function(){
this.dom.dom.slideToggle();
});
});
//task-control显示隐藏
self.dom.find(".task-box").first().bind("mouseover",function(){
self.dom.find(".task-control").first().show();
}).bind("mouseout",function(){
self.dom.find(".task-control").first().hide();
});
//高亮
this.dom.find(".task-box").first().bind("mouseover",function(){
self.dom.addClass("task-highlight");
}).bind("mouseout",function(){
self.dom.removeClass("task-highlight");
});
}
,appendTo : function(){
this.dom.appendTo(this.task.parent ? this.task.parent.dom.dom : $("#tasks"));
}
,fillValues : function(){
var task = this.task
,dom = this.dom;
task.name = dom.find(".task-name").first().val();
task.userby = dom.find(".task-user-by").first().val();
task.desc = dom.find(".task-desc").first().val();
}
};
TaskDom中的Html信息我们隐藏在一个display=none的textarea中：
<textarea style="display:none;" id="task_dom">
<div class="task">
<div class="task-box">
<div class="task-head">
<span>task name:</span><input type="text" class="task-name"/>
<span class="task-control">
<a class="control-child">child</a>|<a class="control-delete">delete</a>|<a class="control-up">slide</a>
</span>
</div>
<div class="task-body">
<ul>
<li><span>user by:</span><input type="text" class="task-user-by"></li>
<li><span>desc:</span><input type="text" / class="task-desc"></li>
</ul>
</div>
</div>
</div>
</textarea>
Task代表任务书中的每个任务节点，TaskDom用来描述Task对象的Html存在。 于是针对上面的任务树，我们现在只关心这2个对象，而隐藏了其他所有的细节。我们只需要实例化出任务树的根节点var root = new sm.Task();其他节点均从此节点派生。 最后可以调用root.getJson()得到所有任务的相关信息。
demo下载（因为用到了JSON对象,请使用chrome,ff等浏览器）
