javascript开发经验总结【一】：多重条件判断教学教材

1、Good is good, but better carries it.精益求精，善益求善。javascript开发经验总结【一】：多重条件判断-javascript是一门精巧的语言，可大可小，可伸可缩，如意金箍棒一般，运用恰当，可敌千夫。比如一个场景，有的人要写上百行代码，但是有的人寥寥几笔即可实现，思路就在弹指间。要想学好一门语言，就要掌握其要义，归纳其精髓，方可如鱼得水，运筹帷幄。js在开发大型组件库的时候经常会碰到很多的逻辑分支情况。比如博客园的编辑框编写：if(target=font)someFunction().elseif(target=code)someFunction().e

2、lseif(target=table)someFunction().elseif(target=images)someFunction().elseif(target=link)someFunction().elseif(target=file)someFunction().HYPERLINK为了逻辑清晰当然也可以这样写：switch(target)case:font:someFunction().break;case:code:someFunction().break;case:table:someFunction().break;case:images:someFunction().bre

3、ak;case:link:someFunction().break;case:file:someFunction().break;当然这样的一层逻辑很容易书写和维护，但是，如果碰到下面还有多重分支的情况改如何处理呢，大部分人都是继续ifelse或者switchcase。于是代码就变的越来越长，越来越难维护。就像下面的代码一样：switch(target)case:font:someFunction().break;case:code:switch(code)case:java:someFunction().break;case:c:someFunction().break;case:c+:so

4、meFunction().break;HYPERLINKbreak;case:table:someFunction().break;case:images:someFunction().break;case:link:someFunction().break;case:file:someFunction().break;js是一门面向对象的语言，我们能不能用面向对象的思想来解决这个问题呢？请看下面的源码：editor=font:function().code:function().table:function().images:function().file:function().editor

5、target();这样是不是清晰明了了很多？而且效率也肯定提升了，因为是对象直接寻址。大致思路如下：先创建一个对象，把所有的判断分支都放到这个对象里，然后再调用。那么是么时候需要用这个方法，什么时候不需要用呢？先说需要用的：一、在判断分支很多的情况下建议使用。条理清晰。二、在分支里的逻辑很复杂的情况下，可以起到逻辑拆分的作用。再说不需要用的情况：一、简单的逻辑判断。二、分支比较少的情况。js模版对于一个健壮的组件库来说，至关重要。犹如建筑一栋大楼，模版就是钢筋，数据就是水泥，事件就是布线和弱电。本文将从一个小函数讲起，然后重点探讨js模版的实现模式、易用性、可扩展性，然后再对ext的模版体系做

6、简单分析。由于工作原因，本人一直在维护一个datagrid组件，datagrid的需求千变万化，大概60%的需求都是对单元格的处理，刚刚开始的时候需要一个功能就加一个功能，比如单元格需要根据数据改变背景颜色，于是我便在表格生成之后直接操作dom，比如带checkbox的datagrid，翻页后需要保存已选状态，于是我便在表格生成之后查找checkbox然后再选中。需要在增加，datagrid也慢慢变的臃肿起来，不堪重负，leader也决定开始重构了。在重构之初，我便决定，在表格生成之前把需要处理的都完成，这样就可以节省查询dom的时间。这样以来，前期创建需要处理的逻辑就会很多，所以这里就需要一

7、个很完善的模版体系来做支持，否则玩到最后又会变的很臃肿。于是我尝试着写了一个简单的基于对象模式的模版，代码如下：/*对象模式创建模版*paramArrayattrs生成的节点数组*paramStringtype类型*paramArray|Objectattr属性*paramArray|Objectchild子节点*paramNumbernum子节生成个数*paramFunctionfunc处理函数*paramArraydata数据*paramElement|Stringtarget*/vartpl=function(ats,target)target=fast.id(target);if(fa

8、st.isArray(ats)&ats.length0&target.appendChild)for(vari=0,len=ats.length;ilen;i+)varattrs=atsi,tag=attrs.tag,attr=attrs.attr|,data=attrs.data,func=attrs.func,child=attrs.child,num=attrs.num?attrs.num:1,j=0;varfragment=document.createDocumentFragment();for(;jnum;j+)varisFunc=false;if(data)if(child)if

9、(fast.isArray(child)for(vark=0,l=child.length;kl;k+)childk.data=dataj;elsechild.data=dataj;elseif(func)attr=func(j,attr,data);isFunc=true;elsedata=fast.values(data);attr.text=dataj;(isFunc=false)&func&(attr=func(j,attr,data);varnodes=fast.node(tag,attr);fragment.appendChild(nodes);child&tpl(child,no

10、des);target.appendChild(fragment);另外创建了一个基类，这个基类后面的例子都会用到，希望读者注意。ViewCodevardoc=window.document,_toString=Ototype.toString;varfast=isString:function(obj)return!(obj=|(obj&obj.charCodeAt&obj.substr);,isNumber:function(obj)return_toString.call(obj)=objectNumber;,isArray:.isArray|function(obj)return_to

11、String.call(obj)=objectArray;,isObject:function(obj)returnobj=null?String(obj)=object:_toString.call(obj)=objectObject|true;,isEmptyObject:function(obj)for(varnameinobj)returnfalse;returntrue;,getID:function()varnum1=newDate().getTime();varnum2=parseInt(Math.random()*100000,10);returnnum1+num2;,id:f

12、unction(id)if(this.isString(id)returndoc.getElementById(id);elseif(id.nodeType)returnid;return;,html:function(el,html)el=this.id(el);if(html)if(el!=null&innerHTMLinel)el.innerHTML=html;elsereturnel.innerHTML;,values:function(obj)varret=;for(varkeyinobj)ret.push(objkey);returnret;,setCssText:function

13、(el,cssText)el.style.cssText=cssText;,setAttr:function(element,attrObj)varme=this,mapObj=class:function()element.className=attrObjclass;,style:function()me.setCssText(element,attrObjstyle);,text:function()if(attrObjtext.nodeType)element.appendChild(attrObjtext);elseelement.appendChild(document.creat

14、eTextNode(attrObjtext);for(pinattrObj)if(mapObjp)mapObjp();elseelement.setAttribute(p,attrObjp);,node:function(type,attrObj)varelement=doc.createElement(type);if(!this.isEmptyObject(attrObj)this.setAttr(element,attrObj);returnelement;,testTime:function(get_as_float)varnow=newDate().getTime()/1000;va

15、rs=parseInt(now,10);return(get_as_float)?now:(Math.round(now-s)*1000)/1000)+s;,/ext*/_indexOf:Atotype.indexOf,inArray:function(elem,arr,i)varlen;if(arr)if(this._indexOf)returnthis._indexOf.call(arr,elem,i);len=arr.length;i=i?i0?Math.max(0,len+i):i:0;for(;ilen;i+)if(iinarr&arri=elem)returni;return-1;

16、,isDate:function(o)return(null!=o)&!isNaN(o)&(undefined!=typeofo.getDate);,Format:,decodeHTML:function(str)str=String(str).replace(/g,).replace(/g,/g,).replace(/&/g,&);/处理转义的中文和实体字符returnstr.replace(/g,function(_0,_1)returnString.fromCharCode(parseInt(_1,10););,apply:function(object,config,defaults)

17、if(defaults)this.apply(object,defaults);varenumerables=true,enumerablesTest=toString:1;for(iinenumerablesTest)enumerables=null;if(enumerables)enumerables=hasOwnProperty,valueOf,isPrototypeOf,propertyIsEnumerable,toLocaleString,toString,constructor;if(object&config&typeofconfig=object)vari,j,k;for(ii

18、nconfig)objecti=configi;if(enumerables)for(j=enumerables.length;j-;)k=enumerablesj;if(config.hasOwnProperty(k)objectk=configk;returnobject;在模版使用之前，我们需要预先定义一组数据，这组数据后面的几个模版体系都会用到：ViewCodevardata=name:test1,sex:man,age:20,date:2011-10-1312:00:00:0,uid:1,name:test2,sex:man,age:20,date:2011-10-1312:00:0

19、0:0,uid:2,name:test3,sex:man,age:20,date:2011-10-1312:00:00:0,uid:3,name:test4,sex:man,age:20,date:2011-10-1312:00:00:0,uid:4,name:test5,sex:man,age:20,date:2011-10-1312:00:00:0,uid:5,name:test6,sex:man,age:20,date:2011-10-1312:00:00:0,uid:6,name:test7,sex:man,age:20,date:2011-10-1312:00:00:0,uid:7,

20、name:test8,sex:man,age:20,date:2011-10-1312:00:00:0,uid:8,name:test9,sex:man,age:20,date:2011-10-1312:00:00:0,uid:9,name:test10,sex:man,age:20,date:2011-10-1312:00:00:0,uid:10;for(vari=10;i1000;i+)data.push(name:test+i,sex:man,age:20,date:2011-10-1312:00:00:0,uid:i);这个模版的使用事例如下：vartd=tag:td,num:5,at

21、tr:text:text;vartr=tag:tr,num:1000,child:td,data:data;vartbody=tag:tbody,child:tr;tpl(tag:table,attr:style:width:100%,border:1,child:tbody,example);当然，您也可以这样写：tpl(tag:table,attr:style:width:100%,border:1,child:tag:tbody,child:tag:tr,num:1000,child:tag:td,num:5,attr:text:text,data:data,example);该模版的核

22、心思路就是递归创建dom，支持对每个dom绑定数据，支持外部函数调用（helper），支持内嵌数据处理，支持一次创建多个平级dom。对于一个组件库来说，感觉这样很完美了，于是我兴致冲冲的想拿其他的模版体系做对比。找了一大圈，发现别人玩模版不是这样玩的，大部分都是先拼装字符串，然后再放到一个闭包里来处理，再返回。于是我模仿着别人写了一个原型，代码如下：/*字符串模式创建模版*/vartp=function(str,data)varstr=fast.id(str)?fast.html(str):str,str=str.replace(/g,function(p)returnp.replace(/(

23、|)/g,$1).replace(,);).replace(/g,$1,).replace(/r|n/g,),keys=,values=,i;for(iindata)keys.push(i);values.push(datai);return(newFunction(keys,var_s=;+str+return_s;).apply(null,values).join();调用方式大致如下：#for(vari=0,l=list.length;il;i+)#for(varpinlisti)#vartpdata=list:data;fast.html(tptest,tp(t1,tpdata);做了

24、一下性能对比，乖乖，这个性能比对象模式更快，而且对象模式能实现的，这个基本都能实现。但是对于处理单个dom的方式上，总感觉缺点什么，想来想去，原来这种方式不能把一个dom拿出来单独玩，需要跳到模版里面去，这里就需要注意环境变量以及逻辑关系了。还是不死心，于是一狠心把ext的模版抽筋剥皮拿了出来，代码如下（运行需要上面的fast基类，未经详细测试，不建议用于生产环境）：ViewCodeextpl=constructor:function(html)varme=this,args=arguments,buffer=,i=0,length=args.length,value;me.initialCo

25、nfig=;if(length1)for(;ilength;i+)value=argsi;if(typeofvalue=object)fast.apply(me.initialConfig,value);fast.apply(me,value);elsebuffer.push(value);html=buffer.join();elseif(fast.isArray(html)buffer.push(html.join();elsebuffer.push(html);/privateme.html=buffer.join();if(piled)pile();,isTemplate:true,d

26、isableFormats:false,re:/(w-+)(?:(w.*)(?:(.*?)?)?)?/g,_apply:function(values)varme=this,useFormat=me.disableFormats!=true,fm=fast.Format,tpl=me,ret;if(piled)piled(values).join();functionfn(m,name,format,args)if(format&useFormat)if(args)args=valuesname.concat(fast.functionFactory(return+args+;)();else

27、args=valuesname;if(format.substr(0,5)=this.)returntplformat.substr(5).apply(tpl,args);elsereturnfmformat.apply(fm,args);elsereturnvaluesname!=undefined?valuesname:;ret=me.html.replace(me.re,fn);/ret=pile(ret);/console.log(ret);returnret;,/*Appendstheresultofthistemplatetotheprovidedoutputarray.*para

28、mObject/ArrayvaluesThetemplatevalues.Seelink#apply.*paramArrayoutThearraytowhichoutputispushed.*returnArrayThegivenoutarray.*/_applyOut:function(values,out)varme=this;if(piled)out.push.apply(out,piled(values);elseout.push(me.apply(values);returnout;,apply:function(values)returnthis.applyOut(values,)

29、.join();,applyOut:function(values,out)varme=this;if(!me.fn)me.fn=pile(me.html);/console.log(me.fn);/console.log(values);out=me.fn(values);/这里玩的很精妙，以后有时间再分析一下/console.log(me.fn);/try/me.fn.call(me,out,values,1,1);/catch(e)/console.log(out);returnout;,/*methodapplyTemplate*memberExt.Template*Aliasforl

30、ink#apply.*inheritdocExt.Template#apply*/applyTemplate:function()returnthis.apply.apply(this,arguments);,/*SetstheHTMLusedasthetemplateandoptionallycompilesit.*paramStringhtml*paramBooleancompile(optional)Truetocompilethetemplate.*returnExt.Templatethis*/set:function(html,compile)varme=this;me.html=

31、html;piled=null;returncompile?pile():me;,compileARe:/g,compileBRe:/(rn|n)/g,compileCRe:/g,/*Appliesthesuppliedvaluestothetemplateandinsertsthenewnode(s)asthefirstchildofel.*paramString/HTMLElement/Ext.ElementelThecontextelement*paramObject/ArrayvaluesThetemplatevalues.Seelink#applyTemplatefordetails

32、.*paramBooleanreturnElement(optional)truetoreturnaExt.Element.*returnHTMLElement/Ext.ElementThenewnodeorElement*/insertFirst:function(el,values,returnElement)returnthis.doInsert(afterBegin,el,values,returnElement);,/*Appliesthesuppliedvaluestothetemplateandinsertsthenewnode(s)beforeel.*paramString/H

33、TMLElement/Ext.ElementelThecontextelement*paramObject/ArrayvaluesThetemplatevalues.Seelink#applyTemplatefordetails.*paramBooleanreturnElement(optional)truetoreturnaExt.Element.*returnHTMLElement/Ext.ElementThenewnodeorElement*/insertBefore:function(el,values,returnElement)returnthis.doInsert(beforeB

34、egin,el,values,returnElement);,/*Appliesthesuppliedvaluestothetemplateandinsertsthenewnode(s)afterel.*paramString/HTMLElement/Ext.ElementelThecontextelement*paramObject/ArrayvaluesThetemplatevalues.Seelink#applyTemplatefordetails.*paramBooleanreturnElement(optional)truetoreturnaExt.Element.*returnHT

35、MLElement/Ext.ElementThenewnodeorElement*/insertAfter:function(el,values,returnElement)returnthis.doInsert(afterEnd,el,values,returnElement);,/*Appliesthesuppliedvaluestothetemplateandappendsthenewnode(s)tothespecifiedel.*ForexampleusageseelinkExt.TemplateExt.Templateclassdocs.*paramString/HTMLEleme

36、nt/Ext.ElementelThecontextelement*paramObject/ArrayvaluesThetemplatevalues.Seelink#applyTemplatefordetails.*paramBooleanreturnElement(optional)truetoreturnanExt.Element.*returnHTMLElement/Ext.ElementThenewnodeorElement*/append:function(el,values,returnElement)returnthis.doInsert(beforeEnd,el,values,

37、returnElement);,doInsert:function(where,el,values,returnEl)el=fast.id(el);/varnewNode=Ext.DomHelper.insertHtml(where,el,this.apply(values);/returnreturnEl?Ext.get(newNode,true):newNode;,/*Appliesthesuppliedvaluestothetemplateandoverwritesthecontentofelwiththenewnode(s).*paramString/HTMLElement/Ext.E

38、lementelThecontextelement*paramObject/ArrayvaluesThetemplatevalues.Seelink#applyTemplatefordetails.*paramBooleanreturnElement(optional)truetoreturnaExt.Element.*returnHTMLElement/Ext.ElementThenewnodeorElement*/overwrite:function(el,values,returnElement)el=fast.id(el);fast.html(el,this.apply(values)

39、;returnel.firstChild;,ua:navigator.userAgent.toLowerCase(),ie:/msie(d+.d+)/i.test(this.ua)?(document.documentMode|(+RegExpx241):undefined,useEval:/gecko/i.test(this.ua)&!/likegecko/i.test(this.ua),/See/nige-array-appendforquickestwaytoappendtoanarrayofunknownlength/(Duetoarbitrarycodeexecutioninside

40、atemplate,wecannoteasilytrackthelengthinvar)/OnIE6and7myArraymyArray.length=fooisbetter.OnotherbrowsersmyArray.push(foo)isbetter.useIndex:this.ie&this.ie8,useFormat:true,propNameRe:/wd$*$/,compile:function(tpl)varme=this,tpl=tpl|me.html,code=me.generate(tpl);/console.log(tpl);/debugger;/console.log(

41、code);returnme.useEval?me.evalTpl(code):(newFunction(window,code)(window);,generate:function(tpl)varme=this;/console.log(me,me.fnArgs);me.body=varc0=values,a0=fast.isArray(c0),p0=parent,n0=xcount|1,i0=1,out=,v;n;me.funcs=/note:Exthereisproperlysandboxedvarfm=fast.Format;me.switches=;me.parse(tpl);!m

42、e.fnArgs&(me.fnArgs=values);me.funcs.push(me.useEval?$=:return)+function(+me.fnArgs+),me.body.join(),returnout;);varcode=me.funcs.join(n);returncode;,/-/XTemplateParsercalloutsdoText:function(text)varme=this,out=me.body;text=text.replace(me.aposRe,).replace(me.newLineRe,n);if(me.useIndex)out.push(ou

43、tout.length=,text,n);elseout.push(out.push(,text,)n);,doExpr:function(expr)varout=this.body;expr=expr.replace(values,vvv);out.push(if(v=+expr+)!=undefined)out);if(this.useIndex)out.push(out.length=String(v)n);elseout.push(.push(String(v)n);,doTag:function(tag)this.doExpr(this.parseTag(tag);,doElse:f

44、unction()this.body.push(elsen);,doEval:function(text)this.body.push(text,n);,doIf:function(action,actions)varme=this;/IfitsjustapropName,useitdirectlyintheifif(pNameRe.test(action)me.body.push(if(,me.parseTag(action),)n);/Otherwise,itmustbeanexpression,andneedstobereturnedfromanfnwhichuseswith(value

45、s)elseme.body.push(if(,me.addFn(action),me.callFn,)n);if(actions.exec)me.doExec(actions.exec);,doElseIf:function(action,actions)varme=this;/IfitsjustapropName,useitdirectlyintheelseifif(pNameRe.test(action)me.body.push(elseif(,me.parseTag(action),)n);/Otherwise,itmustbeanexpression,andneedstoberetur

46、nedfromanfnwhichuseswith(values)elseme.body.push(elseif(,me.addFn(action),me.callFn,)n);if(actions.exec)me.doExec(actions.exec);,doSwitch:function(action)varme=this;/IfitsjustapropName,useitdirectlyintheswitchif(pNameRe.test(action)me.body.push(switch(,me.parseTag(action),)n);/Otherwise,itmustbeanex

47、pression,andneedstobereturnedfromanfnwhichuseswith(values)elseme.body.push(switch(,me.addFn(action),me.callFn,)n);me.switches.push(0);,doCase:function(action)varme=this,cases=Ext.isArray(action)?action:action,n=me.switches.length-1,match,i;if(me.switchesn)me.body.push(break;n);elseme.switchesn+;for(

48、i=0,n=cases.length;in;+i)match=Re.exec(casesi);casesi=match?match1:(+casesi.replace(me.aposRe,)+);me.body.push(case,cases.join(:case),:n);,doDefault:function()varme=this,n=me.switches.length-1;if(me.switchesn)me.body.push(break;n);elseme.switchesn+;me.body.push(default:n);,doEnd:function(type,action

49、s)varme=this,L=me.level-1;if(type=for)/*Toexitaforloopwemustrestoretheouterloopscontext.Thecodelookslikethis(whichgoeswiththatproducedbydoFor:for(.)/thepartgeneratedbydoFor./thebodyoftheforloop/.anytplforexecstatementgoeshere.parent=p1;values=r2;xcount=n1;xindex=i1*/if(actions.exec)me.doExec(actions

50、.exec);me.body.push(n);me.body.push(parent=p,L,;values=r,L+1,;xcount=n,L,;xindex=i,L,n);elseif(type=if|type=switch)me.body.push(n);,doFor:function(action,actions)varme=this,s=me.addFn(action),L=me.level,up=L-1;me.body.push(varc,L,=,s,me.callFn,a,L,=fast.isArray(c,L,),p,L,=c,up,r,L,=valuesn,parent=a,

51、up,?c,up,i,up,:p,L,n,/for(vari,L,=0,n,L,=a,L,?c,L,.length:(c,L,?1:0),xcount=n,L,;i,L,n+L+;+i,L,)n,for(vari0=0,i1=0,l0=values.length,xcount=l0;i0-1|fast.isDate(values)?values:;/name=#-Usethexindexelseif(name=#)v=xindex;elseif(name.substr(0,7)=parent.)v=name;/compoundJavascriptpropertyname(e.g.,foo.ba

52、r)elseif(isNaN(name)&name.indexOf(-)=-1&name.indexOf(.)!=-1)v=values.+name;/numberora-initorasingleword(maybeakeyword):usearraynotation/(/string-property-access/4)elsev=values+name+;if(math)v=(+v+math+);/console.log(v);if(format&this.useFormat)args=args?,+args:;if(format.substr(0,5)!=this.)format=fm

53、.+format+(;elseformat+=(;elsereturnv;returnformat+v+args+);,/privateevalTpl:function($)/Wehavetouseevaltorealizethecodeblockandcapturetheinnerfuncwealso/dontwantadeepscopechain.WeonlydothisinFirefoxanditisalsounhappy/withevalcontainingareturnstatement,soinsteadweassignto$andreturn/that.Becauseweusee

54、val,weareautomaticallysandboxedproperly.eval($);return$;,newLineRe:/rn|r|n/g,aposRe:/g,intRe:/s*(d+)s*$/,tagRe:/(w-.#+)(?:(w.*)(?:(.*?)?)?)?(s?+-*/s?d.+-*/()+)?/,doTpl:function(),parse:function(str)/str=this.html;varme=this,len=str.length,aliases=elseif:elif,topRe=me.topRe,actionsRe=me.actionsRe,ind

55、ex,stack,s,m,t,prev,frame,subMatch,begin,end,actions;me.level=0;me.stack=stack=;for(index=0;indexlen;index=end)topRe.lastIndex=index;m=topRe.exec(str);/console.log(m);if(!m)me.doText(str.substring(index,len);break;begin=m.index;end=topRe.lastIndex;if(indexbegin)me.doText(str.substring(index,begin);i

56、f(m1)end=str.indexOf(%,begin+2);me.doEval(str.substring(begin+2,end);end+=2;elseif(m2)end=str.indexOf(,begin+2);me.doExpr(str.substring(begin+2,end);end+=2;elseif(m3)/if(token)me.doTag(m3);elseif(m4)/contentofatagactions=null;while(subMatch=actionsRe.exec(m4)!=null)s=subMatch2|subMatch3;if(s)s=fast.decodeHTML(s);/decodeattrvaluet=subMatch1;t=aliasest|t;actions=actions|;prev=actionst;if(typeofprev=string)actionst=prev,s;elseif(prev)actionst.push(s);elseactionst=s;if(!