工作收获

2015年12月26日

了解了JavaScript的强大，远远不止设置一个onClick那么简单，还有闭包、继承、插件等等；

对系统框架的总结：

1.首先设定了一个全局得Js方法，即：在任何一个页面先执行beforePageLoad和onPageLoad；前者对固定页面、数据进行获取和展示，（使用FSM.webUI同步获取），后者使用异步加载方式对页面得数据进行展示，（FSM.get/FSM.post);而FSM的这三个方法又对ajax进行了封装，在ajax中只有url和data是改变得，type和dataType基本可以不变，则可写为FSM.webUI（URL，Json，namespace）,namespace是对PAGE_DATA进行命名即PAGE_DATA['namespace']，这样便可以在后续得onPageLoad中读取到；

2.

webUI:function(cmd,json,namespace){
			if(!FSM.isDef(json)){
				json 	  = '';
			}else if(FSM.isFunction(json) || json.indexOf('{') == -1){
				namespace = json;
				json 	  = '';
			}
			var returnObj = {};
			$.ajax({
			   async:false,				//设置为同步请求
			   url: "/goform/webForm",
			   type:'post',
			   global:false,
			   data:{cmd:cmd,json:json},
			   success:function(data){
				   if(cmd.indexOf('GET') !== -1){
					   try{
						FSM[cmd] = data;
					   }catch(e){
					   }
				   }
				   var retObj = {};
				   try{
					   retObj = eval('('+data+')');
				   }catch(e){
						throw e+"[return data format error!]";
				   }
				   if(FSM.isDef(namespace)){
					   if(namespace === true){
						   returnObj = retObj;
					   }else if(FSM.isFunction(namespace)){
						   namespace(retObj);
					   }else{
						   PAGE_DATA[namespace] = retObj;
					   }
				   }else{
					   PAGE_DATA = retObj;
				   }  
			   }
			}); 
			return returnObj;
			
		},

post:function(cmd,json,callback){
			if(FSM.isFunction(json)){
				callback = json;
				json 	 = '';
			}
			var dopost = true;
			if(cmd.indexOf('SET')!== -1 && json != ''){
				var index = cmd.replace('SET','GET');
				if(FSM[index] == json){
					if(FSM.isFunction(callback)){
						callback(eval('('+FSM[index]+');'));	
					}
					dopost = false;
				}else{
					FSM[index] = json;
				}
			}
			if(dopost){
				$.post('/goform/webForm',{
					cmd:cmd,
					json:json
				},function(data){
					if(cmd.indexOf('GET')!== -1){
							FSM[cmd] = data;
					}
					if(FSM.isFunction(callback)){
						if(data.length > 5 && data.substr(data.length-1) == '}'){
							try{
								var dataObj = eval('('+data+')');
								if(dataObj['msg'] == 'Access Denied'){
									FSM.Alert('保存失败,您没有操作权限!',2);
									return;
								}
							}catch(e){
								FSM.Alert('设备返回数据格式错误!',2);
								var dataObj = null;
							}
							if(dataObj){callback(dataObj);}
						}else{
							callback(data);
						}
					}
				});
			}
		},

这两个关键方法，对全局变量PAGE_DATA进行处理，所需要用到的数据也都在PAGE_DATA中。

3.页面展示部分（onPageLoad），同样是三个模板（Panel，Form和Grid)，而模板由两部分组成（页面模板+js拼接模板）,在页面中写如下代码：

<textarea class="none" id="tpl_orgraize_list">
<[ if(DepartmentCount > 0){ ]>
<[ foreach(department_array as item){ ]>
	<tr>
    	<td><[= $index+offset+1]></td>
        <td><[= item.Name]></td>
        <td>
        
        	<img src="../images/blank.gif" class="btn edit" title="编辑"/>
            <img src="/images/blank.gif" class="btn del" title="删除"/>
           
        </td>                        
     </tr>   
 <[ }]>  
 <[ }else{]>
<tr><td colspan="4"><p class="empty">当前还没有定义部门,请<a href="#" οnclick="Action.add(this);">添加</a></p></td></tr>
<[ } ]>      
</textarea>

读取textarea，获得PAGE_DATA的数据，字符串拼接成HTML，然后展示到对应id的内容下；

4.前台页面中某个数据得展示

 <td><[= $util.renderLoginTime(item.LoginTime)]></td>

然后在js中描写对数据得控制

$.Sweet.extendUtil({
	renderLoginTime:function(eTime){
		if(!eTime) return '-';
		var ret = (new Date(eTime*1000)).Format('yyyy-MM-dd hh:mm');
		return ret;
	}
});

5.到此框架基本结束，这样对页面中所有的数据展示基本得到了控制。

然后是对左侧树的控制：

如何写jQuery插件：