javascript编码规范
2016-06-12 15:32:28 0 举报AI智能生成
编写可维护的javascript
作者其他创作
大纲/内容
编程风格
基本格式化
缩进
4个空格为一个缩进层级
语句结尾
总是使用分号
行的长度
80个字符
运算符置于行尾
换行增加两个缩进层级
空行
在方法之间
在方法中局部变量和第一条语句之间
在多行和单行注释之前
在方法内的逻辑片段之间
命名
变量
驼峰命名法
前缀为名词
函数
驼峰命名法
前缀为动词
构造函数
大驼峰命名法
名词
常量
大写字母
下划线分隔
直接量
字符串
双引号
多行字符串使用（+）连接
数字
不省略小数为0的部分
不省略整数位0的部分
不使用八进制直接量
null
应用场景
初始化一个可能赋值为对象的变量
用来和一个已经初始化的变量比较，该变量可以是对象也可以不是
当函数参数期望是对象时，用作参数传入
当函数的返回值期望是对象时，用作返回值传出
不能使用的场景
不使用null来检查是否传入某个参数
不使用null来检查一个未初始化的变量
undefined
表示未声明的变量
对象直接量
用对象直接量创建对象
第一行包含左花括号，右花括号放最后，独占一行
每个属性名值独占一行
保持一个缩进层级
数组直接量
用数组直接量创建数组
注释
单行注释
注释前有一个空行
独占一行
缩进与下一行保持一致
双斜杆后敲一个空格
在行尾的注释，代码与注释间保持一个缩进（该注释不应超过最大字符限制，若超过，将注释单独一行置于代码上方）
多行注释
第一行是/*；第二行以*开始且与上一行的*左对齐；最后一行是*/
出现在将要描述的代码段前
注释前有一个空行
注释和代码之间没有空行
使用
难于理解的代码
可能被误认为错误的代码
浏览器特性hack
文档注释
以双星号（/**）开始
使用@来表示属性
语句和表达式
花括号对齐方式
将左花括号放置在语句块第一句代码末尾
右花括号独占一行
块语句间隔
左圆括号之前和右圆括号之后各添加一个空格
switch
每条case语句相对于switch关键字都缩进一个层级
从第二条case预计开始，每条case语句前后各有一个空行
逻辑相同的case，可以连续执行
无默认行为时，可省略default
with
避免使用with语句
for循环
尽量避免使用continue
可使用break结束循环
遍历数组
for-in循环
如果只想遍历自定义属性，用hasOwnProperty()方法为for-in循环过滤
遍历对象属性
变量、函数和运算符
声明变量
总是用var来声明
总是将局部变量作为函数第一条语句
所有var语句合并为一个
每个变量独占一行
函数声明
先声明，再使用
函数调用间隔
函数名和左括号之间没有空格
立即调用函数
将函数用一对圆括号包裹起来
严格模式
不推荐将"use strict"用在全局
在函数体内尽可能使用严格模式
相等
使用===和!==判断
eval()
尽量避免使用
禁止使用原始包装类（String, Boolean, Number）
编程实践
UI层松耦合
将javascript从css中抽离
避免使用css表达式
将css从javascript中抽离
操作样式名
不用javascript直接修改样式
将javascript从html中抽离
不使用on属性（onclick等）绑定事件
最好将所有javascript代码都放在外置文件中
将html从javascript中抽离
从服务器加载模版
使用客户端模版
避免使用全局变量（待整理）
事件处理
总是将应用逻辑和事件处理的代码拆分开
不要分发事件对象
让事件处理程序使用event对象
事件处理程序拿到数据再传给应用逻辑
在事件处理程序中阻止默认事件或阻止事件冒泡
避免“空比较”
检测原始值
null不用于检测语句
使用typeof检测：字符串，数字，布尔值，undefined（typeof variable）
检测引用值
使用instanceof检测引用值类型（value instanceof constructor）——检测构造函数和原型链
检测函数
typeof（除检测DOM节点）
用in检测DOM节点（如："querySelectorAll in document"）
检测数组
“鸭式辨型”
ES5：Array.isArray()
检测属性
in判断属性是否存在（property in object）——实例对象，原型
仅判断实例对象的某个属性是否存在：hasOwnProperty()
非DOM对象直接用
不确定是否为DOM对象："hasOwnProperty" in object && object.hasOwnProperty("property")
IE8-，DOM对象不继承自object
将配置数据从代码中分离
什么是配置数据
URL
需要展现给用户看的字符串
重复的值
设置
任何可能发生变更的值
抽离配置数据
config对象存放配置数据
每个属性保存一个数据片段
属性加前缀
MSG：展示给用户的消息
CSS：样式名
URL：链接地址
可将config放置在单独文件中
保存配置数据
JSON
JSONP(将JSON用函数调用包装)
javascript对象
用java属性文件转为以上形式
java属性文件
每个名值独占一行（name=value）
注释是以#开头的行
转换工具Props2Js
抛出自定义错误
try-catch 捕获
throw new Error("error msg") 抛出错误
在错误消息中包含函数名
不直接将字符串作为错误抛出： throw "msg"
何时抛出错误
修改的很难调试的错误，尝试增加自定义错误，当再次发生时容易定位
写代码时，思考你希望不发生什么错误，在这些不希望发生的情况，抛出错误
你编写的代码别人也会用，思考别人的使用方式，在特定情况抛出错误
注意：自定义错误不是越多越好
使用throw还是try-catch
不要将catch留空
错误只应该在程序栈中最深处部分抛出
错误类型
Error-错误的基本类型（所有错误类型都继承自Error）
EvalError-通过eval()函数执行代码发生错误时抛出
RangeError-数字超出边界时抛出
ReferenceError-期望对象不存在时抛出
SyntaxError-给eval()函数传递的代码中有语法错误时抛出
TypeError-变量不是期望类型时抛出
URIError-给encodeURI()、encodeURIComponent()、decodeURI()、decodeURIComponent()等函数传递格式非法的URI字符串时抛出
* 不是你的对象不要动
不要修改的对象
原生对象
DOM对象
浏览器对象（BOM）
类库的对象
原则
不覆盖方法
不新增方法
不删除方法
更好的途径
基于对象的继承（原型继承）
ES5: Object.create()
指定第二个参数，添加属性和方法
基于类型的继承（基于构造函数实现）
1. 原型继承
2. 构造器继承
门面模式（继承无法满足要求时使用）
原理：为一个已经存在的对象创建一个新的接口
实例
ES5阻止修改
防止扩展
禁止为对象“添加”属性和方法，但已存在的属性和方法是可以被修改或删除
Object.preventExtension()
Object.isExtensible()
密封
类似“防止扩展”，而且禁止为对象“删除”已存在的属性和方法
子主题
Object.seal()
Object.isSealed()
冻结
类似“密封”，而且禁止对象“修改”已存在的属性和方法（只读）
Object.freeze()
Object.isFrozen()
浏览器嗅探
用户代理检测
navigator.userAgent
原则：能不用就不用，最安全的方法是只检测旧浏览器
特性检测
不依赖于浏览器，仅依据特性是否存在
组成部分
1. 探测标准方法
2. 探测不同浏览器的特定方法
3. 当被探测方法均不存在时提供备用方法
避免特性推断（根据一个特性的存在推断另一个特性是否存在）
避免浏览器推断（通过特性检测判断是某个浏览器）
自动化
文件和目录结构
最佳实践
一个文件只包含一个对象
相关的文件用目录分组
保持第三方代码独立（单独放在一个目录里）
确定创建位置
保持测试代码的完整性
基本结构
build：放置最终构建后的文件
src：放置所有源文件，包括用来进行文件分组的子目录
test/tests：放置所有测试文件
0 条评论
下一页
