javascript前端规范

前端JavaScript规范JavaScript规范目录.类型.对象.数组.字符串.函数.属性.变量.条件表达式和等号.块.注释.空白.逗号.分号.类型转换.命名约定.存取器.构造器.事件.模块.jQuery.ES5兼容性.HTML、CSS、JavaScript分离.使用jsHint.前端工具类型原始值:相当于传值(JavaScript对象都提供了字面量)，使用字面量创建对象。stringnumberbooleannullundefinedvarfoo=1,bar=foo;bar=9;console.log(foo,bar);//=1,9复杂类型:相当于传引用objectarrayfunctionvarfoo=[1,2],bar=foo;bar[0]=9;console.log(foo[0],bar[0]);//=9,9对象使用字面值创建对象//badvaritem=newObject();//goodvaritem={};不要使用保留字reservedwords作为键//badvarsuperman={class:'superhero',default:{clark:'kent'},private:true};//goodvarsuperman={klass:'superhero',defaults:{clark:'kent'},hidden:true};数组使用字面值创建数组//badvaritems=newArray();//goodvaritems=[];如果你不知道数组的长度，使用pushvarsomeStack=[];//badsomeStack[someStack.length]='abracadabra';//goodsomeStack.push('abracadabra');当你需要拷贝数组时使用slice.jsPerfvarlen=items.length,itemsCopy=[],i;//badfor(i=0;ilen;i++){itemsCopy[i]=items[i];}//gooditemsCopy=items.slice();使用slice将类数组的对象转成数组.functiontrigger(){varargs=[].slice.apply(arguments);...}字符串对字符串使用单引号''(因为大多时候我们的字符串。特别html会出现)//badvarname=BobParr;//goodvarname='BobParr';//badvarfullName=Bob+this.lastName;//goodvarfullName='Bob'+this.lastName;超过80(也有规定140的，项目具体可制定)个字符的字符串应该使用字符串连接换行注:如果过度使用，长字符串连接可能会对性能有影响.jsPerf&Discussion//badvarerrorMessage='ThisisasuperlongerrorthatwasthrownbecauseofBatman.WhenyoustoptothinkabouthowBatmanhadanythingtodowiththis,youwouldgetnowherefast.';//badvarerrorMessage='Thisisasuperlongerrorthat\wasthrownbecauseofBatman.\Whenyoustoptothinkabout\howBatmanhadanythingtodo\withthis,youwouldgetnowhere\fast.';//goodvarerrorMessage='Thisisasuperlongerrorthat'+'wasthrownbecauseofBatman.'+'Whenyoustoptothinkabout'+'howBatmanhadanythingtodo'+'withthis,youwouldgetnowhere'+'fast.';编程时使用join而不是字符串连接来构建字符串，特别是IE:jsPerf.varitems,messages,length,i;messages=[{state:'success',message:'Thisoneworked.'},{state:'success',message:'Thisoneworkedaswell.'},{state:'error',message:'Thisonedidnotwork.'}];length=messages.length;//badfunctioninbox(messages){items='ul';for(i=0;ilength;i++){items+='li'+messages[i].message+'/li';}returnitems+'/ul';}//goodfunctioninbox(messages){items=[];for(i=0;ilength;i++){items[i]=messages[i].message;}return'ulli'+items.join('/lili')+'/li/ul';}函数函数表达式://匿名函数表达式varanonymous=function(){returntrue;};//有名函数表达式varnamed=functionnamed(){returntrue;};//立即调用函数表达式(function(){console.log('WelcometotheInternet.Pleasefollowme.');})();绝对不要在一个非函数块里声明一个函数，把那个函数赋给一个变量。浏览器允许你这么做，但是它们解析不同。注:ECMA-262定义把块定义为一组语句，函数声明不是一个语句。阅读ECMA-262对这个问题的说明.//badif(currentUser){functiontest(){console.log('Nope.');}}//goodif(currentUser){vartest=functiontest(){console.log('Yup.');};}绝对不要把参数命名为arguments,这将会逾越函数作用域内传过来的arguments对象.//badfunctionnope(name,options,arguments){//...stuff...}//goodfunctionyup(name,options,args){//...stuff...}属性当使用变量和特殊非法变量名时，访问属性时可以使用中括号(.优先).varluke={jedi:true,age:28};functiongetProp(prop){returnluke[prop];}varisJedi=getProp('jedi');变量总是使用var来声明变量，如果不这么做将导致产生全局变量，我们要避免污染全局命名空间。//badsuperPower=newSuperPower();//goodvarsuperPower=newSuperPower();使用一个var以及新行声明多个变量，缩进4个空格。//badvaritems=getItems();vargoSportsTeam=true;vardragonball='z';//goodvaritems=getItems(),goSportsTeam=true,dragonball='z';最后再声明未赋值的变量，当你想引用之前已赋值变量的时候很有用。//badvari,len,dragonball,items=getItems(),goSportsTeam=true;//badvari,items=getItems(),dragonball,goSportsTeam=true,len;//goodvaritems=getItems(),goSportsTeam=true,dragonball,length,i;在作用域顶部声明变量，避免变量声明和赋值引起的相关问题。//badfunction(){test();console.log('doingstuff..');//..otherstuff..varname=getName();if(name==='test'){returnfalse;}returnname;}//goodfunction(){varname=getName();test();console.log('doingstuff..');//..otherstuff..if(name==='test'){returnfalse;}returnname;}//badfunction(){varname=getName();if(!arguments.length){returnfalse;}returntrue;}//goodfunction(){if(!arguments.length){returnfalse;}varname=getName();returntrue;}条件表达式和等号合理使用===和!==以及==和!=.合理使用表达式逻辑操作运算.条件表达式的强制类型转换遵循以下规则：对象被计算为trueUndefined被计算为falseNull被计算为false布尔值被计算为布尔的值数字如果是+0,-0,orNaN被计算为false,否则为true字符串如果是空字符串''则被计算为false,否则为trueif([0]){//true//Anarrayisanobject,objectsevaluatetotrue}使用快捷方式.//badif(name!==''){//...stuff...}//goodif(name){//...stuff...}//badif(collection.length0){//...stuff...}//goodif(collection.length){//...stuff...}阅读TruthEqualityandJavaScript了解更多块给所有多行的块使用大括号//badif(test)returnfalse;//goodif(test)returnfalse;//goodif(test){returnfalse;}//badfunction(){returnfalse;}//goodfunction(){returnfalse;}注释使用/**...*/进行多行注释，包括描述，指定类型以及参数值和返回值//bad//make()returnsanewelement//basedonthepassedintagname////@paramStringtag//@returnElementelementfunctionmake(tag){//...stuff...returnelement;}//good/***make()returnsanewelement*basedonthepassedintagname**@paramStringtag*@returnElementelement*/functionmake(tag){//...stuff...returnelement;}使用//进行单行注释，在评论对象的上面进行单行注释，注释前放一个空行.//badvaractive=true;//iscurrenttab//good//iscurrenttabvaractive=true;//badfunctiongetType(){console.log('fetchingtype...');//setthedefaulttypeto'notype'vartype=this._type||'notype';returntype;}//goodfun