应聘者页面??文本输入框及单选多视图重构_html/css_WEB-ITnose

             最近校招季，实习单位提供校招软件服务，线上用户比较多，并没有太多新功能上线，乐帝主要负责做一些重构的工作。想想今年毕业新来的同事，已经能够独立承担业务开发。乐帝最近对MVC架构有了更深的了解，编程能力也有一定的入门提高，从同事新胜那儿，学到很多前端开发的规范，在这里再次感谢新胜耐心教导、无私帮助。

    乐帝与新胜最大的差别在于，新胜处理问题解决问题，都有深厚的理论功底，即知其所以然，而不单单是一个程序员，他有自己的思考，懂得如何优化代码与性能。乐帝向新胜学习他，构建的理论体系及解决问题的方法。快速缩小与新胜这个榜样的差距。

    这篇文章所讨论视图，在单位，招聘项目里，应聘者功能下。那为什么需要重构呢？

    在这次重构工作中，我想有两方面原因：

不限0){%>															

   乐帝做的第一步是将模板中逻辑提取出来，并将views.SearchItemView1、views.SearchItemView20、views.SearchItemView23，这三个视图模板采用Beyond Compare软件进行文字比对，发现三个模板差异，这里的差异包括两部分内容：结构差异与逻辑差异。其中结构上标签名都相同，只是每个视图部分标签属性值不同，这些属性值可在View中处理。

   乐帝最初的解决方案，是通过调试每个视图传入model值，发现视图构建差异在model值中Ctype属性上。

  于是针对以上三个视图，针对Ctype判断，构建不同视图不同的属性值。

textInputAttr:function(){				var isDefault = this.model.get("IsDefault");				var searchItems = this.model.get("searchItems");				var defaultVal  = this.model.get("DefaultVal");				var cType =this.model.get("Ctype");				if(cType==1){					this.$el.find("input[type='text']").addClass("search_box_prev");					this.$el.find("input[type='text']").attr("data-rule-maxlength",300);				}else{					this.$el.find("input[type='text']").addClass("souce_name");					this.$el.find("input[type='text']").attr("data-rule-maxlength",100);					if(cType==23){						this.$el.find("input[type='text']").addClass("default_word");					}				}//针对不同ctype设置input不同属性及值				if(cType==1){					if(typeof isDefault !="undefined"&&isDefault==1)					{						this.$el.find("input[type='text']").attr("defaultValue",defaultVal);					};// 设置defaultValue属性				}								if(typeof searchItems !="undefined")				{					if(searchItems.Value!=null)					{						this.$el.find("input[type='text']").attr("value",searchItems.Value[0]);					}				}				else{					if(cType==1){						if(typeof isDefault !="undefined"&&isDefault==1){						this.$el.find("input[type='text']").attr("value",defaultVal);						}					}									}//设置value属性值			},			checkInputAttr:function(){				var searchItems = this.model.get("searchItems");				var cType =this.model.get("Ctype");				if(cType==1){					this.$el.find("input[type='checkbox']").addClass("search_box_any");				}else{					this.$el.find("input[type='checkbox']").addClass("souce_name");				}					if((typeof searchItems !="undefined")&&(searchItems.Value!=null)&&(searchItems.Value.length>0)){							_.each(searchItems.Value,function(item,value){								var valLength = (cType==1)?(searchItems.Value.length):(searchItems.Value.length-1);//判断采用何种表达式								if(valLength==value){									if(item){										this.$el.find("input[type='checkbox']").attr("value",item);										if(searchItems.Value[value]=="true")											this.$el.find("input[type='checkbox']").attr("checked","checked");									}else{										this.$el.find("input[type='checkbox']").attr("value","");									}								}							});					}else{						this.$el.find("input[type='checkbox']").attr("value","");					}			}//checkbox设置

   重构真正的需求是：构造一个通用类，将每个视图共通的地方写入此类中，在不同子视图中继承此通用类，如有差异可覆写通用类方法，实现个性化定制。

   有了如上思路，接下来做的工作，就是根据之前采用文本比对得出的差异部分，进行分块处理，即构造原子函数，确定都有哪些原子块，并且一并写到通用类中。差异的部分在原子类中以空方法形式存在，在子函数中覆写通用类空函数，实现个性化订制。

var SingleInputView = Talent.ItemView.extend({			onBeforeRender:function(){				this.standLabel();//标准化标签			},			onRender:function(){				this.textMaxlen(this.maxlength);				this.setCheckboxVal(this.minus);				this.SetTextInput();				this.SetCheckboxInput();			},			standLabel:function(){				var label = this.model.get("Label");				if((label.length != 7)&&(label.length>6))				{					this.model.set({"Label":label.substring(0,6)+"…"});				}			},			textAddClass:function(){			},			textMaxlen:function(length){				this.$el.find("input[type='text']").attr("data-rule-maxlength",length);			},			setTextDefaultVal:function(){			},			setTextVal:function(){				var isDefault = this.model.get("IsDefault");				var searchItems = this.model.get("searchItems");				var defaultVal  = this.model.get("DefaultVal");				if(typeof searchItems !="undefined")				{					if(searchItems.Value!=null)					{						this.$el.find("input[type='text']").val(searchItems.Value[0]);					}				}			},			checkboxAddClass:function(){			},			setCheckboxVal:function(minus){				var searchItems = this.model.get("searchItems");				if((typeof searchItems !="undefined")&&(searchItems.Value!=null)&&(searchItems.Value.length>0)){							_.each(searchItems.Value,function(item,value){								var valLength =searchItems.Value.length-minus;//判断采用何种表达式								if(valLength==value){									if(item){										this.$el.find("input[type='checkbox']").val(item);										if(searchItems.Value[value]=="true")											this.$el.find("input[type='checkbox']").attr("checked","checked");									}else{										this.$el.find("input[type='checkbox']").val("");									}								}							});					}else{						this.$el.find("input[type='checkbox']").val("");					}			},		});

setCheckboxVal:function(minus){				var searchItems = this.model.get("searchItems");				if((typeof searchItems !="undefined")&&(searchItems.Value!=null)&&(searchItems.Value.length>0)){					_.each(searchItems.Value,function(item,value){						var valLength =searchItems.Value.length-minus;//判断采用何种表达式						if(valLength==value){							if(item){								this.$el.find("input[type='checkbox']").val(item);								if(searchItems.Value[value]=="true")									this.$el.find("input[type='checkbox']").attr("checked","checked");								}else{									this.$el.find("input[type='checkbox']").val("");								}							}					});

onRender:function(){				this.textMaxlen(this.maxlength);				this.setCheckboxVal(this.minus);				this.SetTextInput();				this.SetCheckboxInput();			}

SetTextInput:function(){				this.textAddClass();				this.setTextDefaultVal();				this.setTextVal();			}

onBeforeRender:function(){				this.standLabel();//标准化标签			}

    通过对以上重构分析，我们可以得出重构的大体方向：