js规范
js规范
Array 和 Object 直接量
- 为了避免这些歧义, 我们应该使用更易读的直接量来声明.
var a = [x1, x2, x3];
var a2 = [x1, x2];
var a3 = [x1];
var a4 = [];- 虽然 Object 构造器没有上述类似的问题, 但鉴于可读性和一致性考虑, 最好还是在字面上更清晰地指明.
var o = new Object();
var o2 = new Object();
o2.a = 0;
o2.b = 1;
o2.c = 2;
o2['strange key'] = 3;
编码
- 统一用 utf-8
长度
长度不超过 80 个字符。
参考:
pep8 为 79 个字符
npm 为 80 个字符
google 为 80 个字符
缩进
- 一般缩进4个字符,若层次比较多的可以缩进2个字符。
小括号
不要滥用括号, 只在必要的时候使用它.
对于一元操作符(如delete, typeof 和 void ), 或是在某些关键词(如 return, throw, case, new )之后, 不要使用括号.
花括号
- 花括号不换行
- 好
if (foo) {
} - 坏
if (foo)
{
}
- 好
- 不允许一行判断,一律换行
- 坏
if (foo) return;
- 坏
命名约定
常量 UPPERCASE_WORD
变量 camelName
类名 CamelName
属性和方法
- 文件或类中的私有属性, 变量和方法名应该以下划线 "_" 开头.
- 保护属性, 变量和方法名不需要下划线开头, 和公共变量名一样.
方法和函数参数
- 可选参数以 opt_ 开头.
- 函数的参数个数不固定时, 应该添加最后一个参数 var_args 为参数的个数. 你也可以不设置 var_args而取代使用 arguments.
- 可选和可变参数应该在 @param 标记中说明清楚. 虽然这两个规定对编译器没有任何影响, 但还是请尽量遵守
文件名
文件名应该使用小写字符, 以避免在有些系统平台上不识别大小写的命名方式. 文件名以.js结尾, 不要包含除 - 和 _ 外的标点符号(使用 - 优于 _).
空格
- 操作符之间需要空格
- 好
var x = y + z
- 坏
var x=y+z
- 好
- 只空一格
- 好
{
a: 'short',
looooongname: 'long'
} - 坏
{
a : 'short',
looooongname: 'long'
}
- 好
逗号与换行
- 建议用自然人的处理方法
{
a: 'a',
b: 'b',
c: 'c'
} - 不建议使用 npm 风格的逗号与换行,即
{
a: 'a'
,b: 'b'
,c: 'c'
}
变量声明
首先,变量在使用前必须声明。
对于单 var 模式和多 var 模式,不做强行约定,但同一个文件里,风格必须一致。
字符串
- 单引号 (') 优于双引号 (")
明确作用域
- 任何时候都要明确作用域 - 提高可移植性和清晰度. 例如, 不要依赖于作用域链中的 window 对象. 可能在其他应用中, 你函数中的 window 不是指之前的那个窗口对象.
注释
- 方法/函数注释:
/**
* Converts text to some completely different text.
* @param {string} arg1 An argument that makes this more interesting.
* @return {string} Some return value.
*/
- 顶层/文件注释:
- 顶层注释用于告诉不熟悉这段代码的读者这个文件中包含哪些东西. 应该提供文件的大体内容, 它的作者, 依赖关系和兼容性信息. 如下:
// Copyright 2009 Google Inc. All Rights Reserved.
/**
* @fileoverview Description of file, its uses and information
* about its dependencies.
* @author user@google.com (Firstname Lastname)
*/
技巧:
下面的布尔表达式都返回 false:
- null
- undefined
- '' 空字符串
- 0 数字0
但小心下面的, 可都返回 true:
- '0' 字符串0
- [] 空数组
- {} 空对象
下面段比较糟糕的代码:
while (x != null) {
你可以直接写成下面的形式(只要你希望 x 不是 0 和空字符串, 和 false):
while (x) {
如果你想检查字符串是否为 null 或空:
if (y != null && y != '') {
但这样会更好:
if (y) {
注意: 还有很多需要注意的地方, 如:
Boolean('0') == true
'0' != true
0 != null
0 == []
0 == false
Boolean(null) == false
null != true
null != false
Boolean(undefined) == false
undefined != true
undefined != false
Boolean([]) == true
[] != true
[] == false
Boolean({}) == true
{} != true
{} != false条件(三元)操作符 (?:)
- 三元操作符用于替代下面的代码:
if (val != 0) {
return foo();
}
else {
return bar();
} - 你可以写成:
return val ? foo() : bar();
- 在生成 HTML 代码时也是很有用的:
var html = '<input type="checkbox"' +
(isChecked ? ' checked' : '') +
(isEnabled ? '' : ' disabled') +
' name="foo">';
- 三元操作符用于替代下面的代码:
&& 和 ||
- 二元布尔操作符是可短路的, 只有在必要时才会计算到最后一项.
"||" 被称作为 'default' 操作符, 因为可以这样:
/** @param {*=} opt_win */
function foo(opt_win) {
var win;
if (opt_win) {
win = opt_win;
} else {
win = window;
}
// ...
}
你可以使用它来简化上面的代码:
/** @param {*=} opt_win */
function foo(opt_win) { var win = opt_win || window; // ... }
"&&" 也可简短代码.比如:
if (node) {
if (node.kids) {
if (node.kids[index]) {
foo(node.kids[index]);
}
}
}你可以像这样来使用:
if (node && node.kids && node.kids[index]) {
foo(node.kids[index]);
}或者:
var kid = node && node.kids && node.kids[index];
if (kid) {
foo(kid);
}不过这样就有点儿过头了:
node && node.kids && node.kids[index] && foo(node.kids[index]);
使用 join() 来创建字符串
- 通常是这样使用的:
function listHtml(items) {
var html = '<div class="foo">';
for (var i = 0; i < items.length; ++i) {
if (i > 0) {
html += ', ';
}
html += itemHtml(items[i]);
}
html += '</div>';
return html;
} - 但这样在 IE 下非常慢, 可以用下面的方式:
function listHtml(items) {
var html = [];
for (var i = 0; i < items.length; ++i) {
html[i] = itemHtml(items[i]);
}
return '<div class="foo">' + html.join(', ') + '</div>';
} - 你也可以是用数组作为字符串构造器, 然后通过 myArray.join('') 转换成字符串. 不过由于赋值操作快于数组的 push(), 所以尽量使用赋值操作.
- Node lists 是通过给节点迭代器加一个过滤器来实现的. 这表示获取他的属性, 如 length 的时间复杂度为 O(n), 通过 length 来遍历整个列表需要 O(n2).
var paragraphs = document.getElementsByTagName('p');
for (var i = 0; i < paragraphs.length; i++) {
doSomething(paragraphs[i]);
} - 这种方法对所有的 collections 和数组(只要数组不包含 falsy 值) 都适用.
var paragraphs = document.getElementsByTagName('p');
for (var i = 0, paragraph; paragraph = paragraphs[i]; i++) {
doSomething(paragraph);
} - 在上面的例子中, 也可以通过 firstChild 和 nextSibling 来遍历孩子节点.
var parentNode = document.getElementById('foo');
for (var child = parentNode.firstChild; child; child = child.nextSibling) {
doSomething(child);
}
- 通常是这样使用的:
js规范的更多相关文章
- 前端开发规范:命名规范、html 规范、css 规范、js 规范
上周小组的培训内容是代码可读性艺术,主要分享如何命名.如何优化代码排版,如何写好的注释.我们都知道写出优雅的代码是成为大牛的必经之路. 下面感谢一位前端开发小伙伴总结的前端开发规范,通过学习相关开发规 ...
- 【重点突破】—— Easy Mock的使用及Mock.js规范
前言:在线使用Easy Mock可视化工具,可以提供快速生成“模拟数据”的持久化服务: Mock.js是一个JS插件,指定了一套规范,而Easy Mock工具就遵循这些规范. 一.Easy Mock ...
- 前端开发规范之命名规范、html规范、css规范、js规范
在学习编程的时候,每次看到那些整齐规范的代码,心里顿时对这个程序员表示点点好感,有时,比如看到自己和朋友写的代码时,那阅读起来就是苦不堪言,所以,一些基本的开发规范是必须的,是为了自己方便阅读代码,也 ...
- JS规范2
百度SS Javascript编码规范 1.变量.方法命名必须匹配正则:/^[$_a-zA-Z]\w*$/ /** * 虽然Javascript引擎支持多种格式命名的变量, * 比如下面这样的变量,J ...
- 互联网部-供应商团队js规范
文件命名 页面.js文件命名:采用中划线连接方式,比如说: error-report.html js文件夹命名:scripts 公共js命名:common.js 文件结构组织 每个页面中中独有的js文 ...
- angular.js规范写法
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- js 规范
1.原型链的弊端是不支持多重继承.记住,原型链会用另一类型的对象重写类的 prototype 属性 2.注意:调用 ClassA 的构造函数,没有给它传递参数.这在原型链中是标准做法.要确保构造函数没 ...
- js规范思维导图(仅限于自己)
- 模块化规范Common.js,AMD,CMD
随着网站规模的不断扩大,嵌入网页中的javascript代码越来越大,开发过程中存在大量问题,如:协同开发,代码复用,大量文件引入,命名冲突,文件依赖. 模块化编程称为迫切的需求. 所谓的模块,就是实 ...
随机推荐
- 嵌入式linux开发之工具------tftp
我在嵌入式linux开发中用到tftp的地方主要有2个方面: 1.是在嵌入式目标板启动时,bootloader启动时通过uEnv文件,下载dtb文件和kernel文件: 2.是在嵌入式目标板启动后,通 ...
- mysql慢查询分析工具 mysqlsla 安装
概述 mysqlsla 是一款很不错的mysql慢查询日志分析工具,而且简单易用.mysqlsla 是用perl编写的脚本,运行需要perl-DBI和per-DBD-Mysql两模块的支持.mysql ...
- 将图标LOGO之类的图形图像转换成字体调用方法大全
借鉴百度对此标题的评价: 使用字体图标的优势 字体图标除了图像清晰度之外,比位图还有哪些优势呢. 适用性:一个图标字体比一系列的图像(特别是在Retina屏中使用双倍大小的图像)要小.一旦图标字体加载 ...
- windows2008(64位)下iis7.5中的url伪静态化重写(urlrewrite)
以前在windows2003里,使用的是iis6.0,那时常使用的URL重写组件是iisrewrite,当服务器升级到windows2008R2时,IIS成了64位的7.5,结果iisreite组件是 ...
- Java继承--子类的实例化过程
一个对象的实例化过程: Person p = new Person(); 1,JVM会读取指定的路径下的Person.class文件,并加载进内存,并会先加载Person的父类(如果有直接的父类的情况 ...
- PHP中提问频率最高的11个面试题和答案
问题:请用最简单的语言告诉我PHP是什么? 回答:PHP全称:Hypertext Preprocessor,是一种用来开发动态网站的服务器脚本语言. 问题:什么是MVC? 回答:MVC由Model(模 ...
- shell script测试命令(test)
shell script测试命令(test) test命令 检查系统上面某些文件或者相关的属性 常用选项 test -e :检查该文件名是否存在 例:检查/dmtsai是否存在 [root@local ...
- zabbix自动截图留档_python版
1 背景 每个DB Server都有zabbix监控,除了异常情况的报警信息外,也会在日检.周检.月检等工作中用到zabbix的监控数据,对zabbix监控数据会做两种处理:1 数据分析(环比 ...
- LeetCode 55. Jump Game (跳跃游戏)
Given an array of non-negative integers, you are initially positioned at the first index of the arra ...
- JAVA提高九:集合体系
在经过了前面的JDK6.0新特性的学习后,将进一步深入学习JDK,因为集合的重要性,因此从集合开始入手分析: 一.集合概况 Java是一种面向对象语言,如果我们要针对多个对象进行操作,那么首先必要将多 ...