Applicant page??Text input box and single-select multi-view reconstruction_html/css_WEB-ITnose

The recent school recruitment season, the internship unit provides school recruitment software services, there are many online users, and there are not too many new features to go online. Le Emperor is mainly responsible for doing some reconstruction. Think about the new colleagues who graduated this year and are already able to independently undertake business development. Leti has recently gained a deeper understanding of the MVC architecture, and his programming skills have also improved to a certain extent. He has learned a lot of front-end development specifications from his colleague Xinsheng. I would like to thank Xinsheng again for his patient teaching and selfless help.

The biggest difference between Ledi and Xinsheng is that Xinsheng has a profound theoretical foundation in handling and solving problems, that is, he knows why, and he is not just a programmer. Have your own thinking and know how to optimize code and performance. Le Di learned from Xinsheng his theoretical system and problem-solving methods. Quickly narrow the gap with the example of Xinsheng.

The view discussed in this article is under the applicant function in the unit, recruitment project. So why does it need to be refactored?

In this reconstruction work, I think there are two reasons:

The processing logic in the template is too much It is complex, does not comply with the separation of structure and processing logic, and the code is not highly readable.

<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>

As shown above, the template uses multiple levels of if-else nesting, mixed with various <% %> When HTML and JS code are split, the structural and logical coupling is very high, the readability is relatively low, and it is not conducive to modification.

Multiple views of the same type have only minor differences in logic and structure. However, the source code has its own set of logic and views. The scalability is not high, resulting in a lot of code redundancy. It is not conducive to later maintenance.

The first step Ledi did was to extract the logic from the template and use views.SearchItemView1, views.SearchItemView20, views.SearchItemView23. These three view templates use Beyond Compare software performs text comparison and finds three template differences. The differences here include two parts: structural differences and logical differences. The tag names in the structure are all the same, but the tag attribute values ​​​​of each view are different. These attribute values ​​​​can be processed in View.

Ledi’s initial solution was to debug each view passing in the model value, and found that the difference in view construction was in the Ctype attribute in the model value.

So for the above three views, based on Ctype judgment, different attribute values ​​​​for different views are constructed.

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设置

                                                                                                                                       The structure is highly coupled and not conducive to expansion. If based on this logic, I need to add a new view that is similar to the above three types of views, then I need to improve the code again based on the code and add a Ctype judgment for the new view. This is obviously not what we want.
The real requirement for reconstruction is: construct a general class, write the common points of each view into this class, inherit this general class in different subviews, and overwrite if there are differences General class methods to achieve personalized customization.

With the above idea, the next step is to perform block processing based on the differences obtained through text comparison, that is, construct an atomic function and determine which atomic blocks there are. And write it into the general class together. The difference exists in the form of an empty method in the atomic class, and the general class empty function is overridden in the sub-function to achieve personalized customization.

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("");					}			},		});

Some logical codes only have different variables with different views. Here in the parent class, construct a method with variables, and Set the attribute value in the subclass and pass it into the parent class method, such as:

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("");								}							}					});

Construct the post-rendering onRender in the parent class Callback function, automatically calling general class and subview methods:

() Two methods are implemented in subclasses to load and execute different subclass functions according to customized requirements:

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

🎜>General class, also uses an onBeforeRender callback method to process the data when the data has not been rendered to the template.

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

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

    这样处理的优势在于，逻辑更清晰，并且充分利用此回调函数时序上的优势。

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

对差异代码模块化，写入通用类的空方法中。

只有变量差异的代码，写入通用类中带参数方法中。

最后调用方法，写在通用类中，并在子类中，构造定制化加载方法如SetTextInput方法的职能。