应聘者页面——文本输入框及单选多视图重构
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了应聘者页面——文本输入框及单选多视图重构相关的知识,希望对你有一定的参考价值。
近期校招季。实习单位提供校招软件服务,线上用户比較多,并没有太多新功能上线,乐帝主要负责做一些重构的工作。想想今年毕业新来的同事,已经可以独立承担业务开发。乐帝近期对MVC架构有了更深的了解,编程能力也有一定的入门提高。从同事新胜那儿。学到非常多前端开发的规范,在这里再次感谢新胜耐心教导、无私帮助。
乐帝与新胜最大的区别在于。新胜处理问题解决这个问题,都有深厚的理论功底,即知其所以然,而不单单是一个程序猿,他有自己的思考,懂得怎样优化代码与性能。乐帝向新胜学习他,构建的理论体系及解决这个问题的方法。高速缩小与新胜这个模范的差距。
这篇文章所讨论视图,在单位。招聘项目里,应聘者功能下。那为什么须要重构呢?
在这次重构工作中。我想有双方面原因:
- 模板中处理逻辑过于复杂,不符合结构与处理逻辑分离,代码可读性不高。
<select data-name="<%=Name%>" data-obj="<%=controlData.Object%>" class="souce_name search_view width130"> <option value="">不限</option> <%if(typeof searchItems !="undefined"){%> <%if(searchItems.Value!=null){%> <%_.each(dataSource, function(item){%> <%if(searchItems.Value.length>0){%> <%_.each(searchItems.Value, function(item1){%> <%if(item1!=item.Value){%> <option value="<%=item.Value%>"><%=item.Text%></option> <%}else{%> <option value="<%=item.Value%>" selected="selected"><%=item.Text%></option> <%}%> <%})%> <%}else{%> <option value="<%=item.Value%>"><%=item.Text%></option> <%}%> <%})%> <%}else{%> <%_.each(dataSource, function(item){%> <option value="<%=item.Value%>" title="<%=item.Text%>"><%=item.Text%></option> <%})%> <%}%> <%}else{%> <%_.each(dataSource, function(item){%> <option value="<%=item.Value%>"><%=item.Text%></option> <%})%> <%}%> </select>
如上所看到的,模板中用了多层if-else嵌套,夹杂各种<% %>以切割html和JS代码,结构与逻辑耦合度很高。可读性比較低。不利于改动。
- 多个同类视图,在逻辑和结构上,仅仅有微小差异。但源码各写一套逻辑和视图,扩展性不高,造成大量代码冗余,不利于后期维护。
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设置
这段代码存在的隐患是,依据Ctype做推断生成各视图,与model很相关,即与已有数据结构高度耦合。不利于扩展。假如在此逻辑上。我须要新加一个与上述三类视图同类的视图,那么还需在代码基础上。再次改进代码,增加对新视图Ctype推断,这显然不是我们想要的。
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回调函数,自己主动调用通用类及子视图方法:
onRender:function(){ this.textMaxlen(this.maxlength); this.setCheckboxVal(this.minus); this.SetTextInput(); this.SetCheckboxInput(); }
这里用到两个this.SetTextInput()和this.SetCheckboxInput()两个方法,各自是在子类中实现,用以依照定制化需求,载入运行不同子类函数:
SetTextInput:function(){ this.textAddClass(); this.setTextDefaultVal(); this.setTextVal(); }
通用类,还用到一个onBeforeRender回调方法。用以在数据还没有渲染到模板时,对数据进行处理。
onBeforeRender:function(){ this.standLabel();//标准化标签 }
这样处理的优势在于,逻辑更清晰,而且充分利用此回调函数时序上的优势。
- 对差异代码模块化,写入通用类的空方法中。
- 仅仅有变量差异的代码,写入通用类中带參数方法中。
- 最后调用方法,写在通用类中,并在子类中,构造定制化载入方法如SetTextInput方法的职能。
以上是关于应聘者页面——文本输入框及单选多视图重构的主要内容,如果未能解决你的问题,请参考以下文章
Selenium4+Python3系列 - Cookie截图单选框及复选框处理富文本框日历控件操作
selenium 常见操作,使用 js 操作-日期框及文本框
iOS——UITableView单选模式,多选模式,单选多选混合模式