最近在看JavaScript高级编程,看到了可维护代码的写法,做了一些笔记和总结,以备日后查看。1.代码约定1.1可读性代码格式使用多个空格进行缩进,因为制表符在不同的编辑器中显示效果不同。注释函数和方法表示参数、返回值和假设...。一大段算法复杂的代码解释了算法的逻辑,方便别人查看,也方便大家查阅Hack解释浏览器的差异,防止别人修改时误删...1.2不要使用无意义或容易引起歧义的变量名和函数名,如:foo,doSomething...变量名应为名词,如:car,person...函数名应以动词,例如:getName();返回值是布尔值,使用是启动变量和函数你可以清楚的解释方法的功能和变量名的含义。不用担心长度。你可以稍后压缩它。1.3变量类型透明类型透明是指在定义变量的时候就可以知道变量的类型。//布尔变量计数=-1;//number缺点:不能使用函数声明中的函数参数(现在通过ES6中的函数参数初始化解决)使用匈牙利表示法o表示对象,s表示字符串...varbFound;//布尔变量iCount;//int缺点:代码难读使用类型注解类型注解放在变量名右边,初始化前varfound/*:Boolean*/=false;varcount/*:int*/=-1;缺点:不能用js多行注释使用typeScript(终极版)2.松散耦合2.1解耦HTML/JavaScript在JavaScript中使用HTML不要用js插入HTML,可以在页面中隐藏元素,在页面渲染的时候,通过js显示元素,而不是通过Ajax请求生成HTML,使用JavaScript将js文件写成HTML中的独立文件,在2.2解耦CSS/JavaScript中引入script标签动态修改样式类,而不是修改具体的样式//是不建议写element.style.color='red';element.style.backgroundColor='blue';//建议写//css.dit{color:red;背景色:蓝色;}//jselement.className='edit';2.3解耦应用程序逻辑/事件处理程序有以下原则:不要将事件对象传递给其他方法,只将函数中需要的数据传递给任何应用程序级别的Action,而不执行任何事件处理程序应该是可能的。任何事件处理程序都应该处理事件,然后将处理转移到应用程序逻辑。//不推荐functionhandleKeyPress(event){if(event.keyCode===13){vartarget=event.target;varvalue=5*parseInt(target.value);if(value>10){document.getElementById('id').style.display='block';}}}//建议写法//好处:如果我点击鼠标执行同样的逻辑,那么直接调用validateValue就可以了//应用逻辑函数validateValue(value){value=5*parseInt(value);if(value>10){document.getElementById('id').style.display='block';}}//事件处理函数handleKeyPress(event){if(event.keyCode===13){vartarget=event.target;验证值(目标.值);}}3.其他3.1尊重对象所有权简单的说,不是自己创建或维护的对象,其对象和方法不能被修改具体:不要给实例或原型添加属性或方法不要重新定义已有的方法3.2避免全局variables最多创建一个全局变量,其中存储其他对象或函数。有一个概念叫命名空间命名空间是指用来放置页面功能的对象//namespaceletYAHOO={};YAHOO.util.DomYAHOO.util.Event....3.3避免与null比较来判断一个值是否为null如果过度使用直接比较,可能会因为比较不充分而导致错误,所以在判断一个值的类型时,你必须与预期类型比较,而不是预期类型//值需要一个数组if(value!==null){//做某事....}//建议if(valueinstanceofArray){//做某事....}下面列出判断数据类型的方法判断基本类型,使用typeof判断引用类型,使用instanceof判断是否为函数,或者使用typeof判断是否undefined,使用typeof,do不直接===判断,如果函数没有声明,会报错所有类型都可以使用Object.prototype.toString.callletts=Object.prototype.toString;ts.call([])==='[对象数组]';//真实。call(123)==='[对象编号]';//truets.call({})==='[ObjectObject]';//true....3.4使用常量使用常量可以避免魔术字符串,也可以帮助构建国际化常量使用建议:重复值---在多个地方使用的任何值UI字符串---方便国际化的URL---建议使用一个公共的地方来存储所有URL中可能变化的任何值---如果是未来可能变化的值,应该将其提取为常量
