标准javascript代码规范详解

1. Javascript代码应符合Douban-JSLint检验标准

1-1. 语句必须都有分号结尾，除了for, function, if, switch, try, while

1-2. 只有长语句可以考虑断行，如：

 代码如下 复制代码

                                 TEMPL_SONGLIST.replace('{TABLE}', da['results'])
                                               .replace('{PREV_NUM}', prev)
                                               .replace('{NEXT_NUM}', next)
                                               .replace('{CURRENT_NUM}', current)
                                               .replace('{TOTAL_NUM}', da.page_total);

为了避免和JSLint的检验机制冲突，“.”或“＋”这类操作符放在行尾，上面代码应改为：

 代码如下 复制代码

                                 TEMPL_SONGLIST.replace('{TABLE}', da['results']).
                                               replace('{PREV_NUM}', prev).
                                               replace('{NEXT_NUM}', next).
                                               replace('{CURRENT_NUM}', current).
                                               replace('{TOTAL_NUM}', da.page_total);

1-3. 避免额外的逗号。如：var arr = [1,2,3,];

1-4. 所有的循环体和判断体都需要用"{}"括起来。如：

 代码如下 复制代码

错：

                                 if (condition)
                                     statement;
                                 或
                                  if (condition) statement;
                                

对:

                                 if (condition) {
                                     statement;                                  或
                                 if (condition) { statement; }

1-5. for-in循环体中必须用hasOwnProperty方法检查成员是否为自身成员。避免来自原型链上的污染。

1-6. 变量声明。变量声明应放在function的最上面。避免使用未声明的变量。

 代码如下 复制代码

错：

                                 if (n > 0) {
                                   var isvalid = true;                                 

对：

                                 var isvalid;
                                 if (n > 0) {
                                   isvalid = true;
                                 }

1-7. 不要使用with, void, evil。

1-8. 使用严格的条件判断符。用===代替==，用!==代替!=。

1-9. 下面类型的对象不建议用new构造：new Number, new String, new Boolean, new Object(用{}代替), new Array(用[]代替)。

1-10. 引用对象成员用obj.prop1代替obj[“prop1”]，除非属性名是变量。

注：Douban-JSLint是定制过的JSLint

注：如果模块代码中，使用其它全局变量想跳过JSLint的检查，可以在该文件中加入声明，如：

2. Javascript命名规则

2-1. 构造器的首字母大写。如：

 代码如下 复制代码

                         function Dialog (config) {
                           statement;
                         }                          var dlg = new Dialog({...});

2-2. 对象的属性或方法名采用小驼峰式(lower camel-case)，如"init", "bindEvent", "updatePosition"：

 代码如下 复制代码

                         Dialog.prototype = {
                           init: function () {},
                           bindEvent: function () {},
                           updatePosition: function () {}                          };

2-3. 私有变量名用下划线开头。如："_current", "_defaultConfig"

2-4. 常量名全部大写，单词间用下划线分隔。如：“CSS_BTN_CLOSE”, "TXT_LOADING"

2-5. 变量名的前缀：

 代码如下 复制代码

Prefix

Element

Example

integer

nVariableName

i,j,k,m,n, etc. *

integer as counter/iterator

(for i=0; i<=oArray.length; i++)

string

sVariableName

object

oObjectName

is, can, has

boolean

[Boolean name]ConditionName

event method

event attachment

[event type]_MethodName

accessor method

getMethodName

accessor method

setMethodName

Note: Only a counter/iterator should use a single-letter designation.

3. 代码格式化要求

3-1. 语句中的必要空格和缩进

3-1-1. 用来包含语句的"()"前后需要跟空格，诸如： if / for / while / switch ( statements ) { … } 等

3-1-2. "="前后需要跟空格

3-1-3. 数组成员间的","后面需要跟空格

不好：

 代码如下 复制代码

             for (t in selected) { if (!hash[t]) deselect(t) }

好：

 代码如下 复制代码

             for ( t in selected ) {
               if ( !hash[t] ) {
                deselect(t);              }

3-2. 长语句采用断行:

不好：

             TEMPL_SONGLIST.replace('{TABLE}', da['results']).replace('{PREV_NUM}', prev).replace('{NEXT_NUM}', next).replace('{CURRENT_NUM}', current).replace('{TOTAL_NUM}', da.page_total);

好：

          

 代码如下 复制代码
   TEMPL_SONGLIST.replace('{TABLE}', da['results']).
                           replace('{PREV_NUM}', prev).
                           replace('{NEXT_NUM}', next).
                           replace('{CURRENT_NUM}', current).
                           replace('{TOTAL_NUM}', da.page_total);

3-3. 格式化对象参数：

不好：

 代码如下 复制代码

              embedSWF(id, { url: '/swf/player30792.swf?url=' + el.href, width: 261, height: 30, params: { wmode:'transparent' }, attributes: { id: "player-sample" + i, name: "player-sample" + i }});

好：

         

 代码如下 复制代码
     embedSWF(id, {
                 url: '/swf/player30792.swf?url=' + el.href,
                 width: 261,
                 height: 30,
                 params: { wmode:'transparent' },
                 attributes: {
                   id: "player-sample" + i,
                   name: "player-sample" + i                });
时间： 2024-09-22 14:39:48

标准javascript代码规范详解的相关文章

PHP开发规范手册之PHP代码规范详解_php技巧

涉及多个方面,比如PHP代码规范.PHP文件命名规范.网站开发流程.网站安全与维护等.作为PHP开发规范的开篇,我从一个纯PHP开发者的角度来说说我所认为的PHP代码规范,主要从PHP目录框架结构.PHP代码书写规范.PHP文件命名规范三个角度来阐述,希望对PHP入门学习者有所帮助. 合理建设PHP目录框架结构 我们知道在使用PHP进行网站开发之前,我们需要建设网站的目录结构,网站目录框架结构设计得合理规范,不但有利于网站开发,而且对SEO,网站推广都有好处. 一般最基础的PHP网站结构涉及图片

js异步加载Javascript代码示例详解

当我们在Javascript里需要用到jQuery但又无法判断是否加载过时,可以通过下面的方法来自动判断并加载jQuery,代码如下:  代码如下 复制代码 function getScript(url, success) {     var script = document.createElement('script');     script.src = url;     var head = document.getElementsByTagName('head')[0],     do

JavaScript操作Cookie详解

 这篇文章主要介绍了JavaScript操作Cookie详解,本文讲解了什么是Cookie.Cookie基础知识.Cookie常见问题.cookie 有两种清除方式.Cookie基础用法.Cookie高级用法等内容,需要的朋友可以参考下     什么是 Cookie "cookie 是存储于访问者的计算机中的变量.每当同一台计算机通过浏览器请求某个页面时,就会发送这个 cookie.你可以使用 JavaScript 来创建和取回 cookie 的值." - w3school cooki

JavaScript 代码规范

所有的 JavaScript 项目适用同一种规范 设计原则: 1.原子思想:即每个function就做一件事: 2.归纳思想:将同一类的操作,全部整合到一起: 3.方便维护:可以便于后来人进行快速维护: 4.方便拓展:即可以根据每个不同的项目进行不同的更改: 5.通用前端设计模式:一些前端可以通用的设计模式 6.注意写好注释,将注释写的具体点: JavaScript 代码规范 代码规范通常包括以下几个方面: 变量和函数的命名规则 空格,缩进,注释的使用规则 其他常用规范-- 规范的代码可以更易于

JavaScript严格模式详解_javascript技巧

如我们所知,JavaScript 是一门灵活的语言.其灵活性同样也带来了很多坑,当然也有一些是 设计缺陷 .比如 一个变量没有声明就赋值,默认是全局变量,如 (function () { a = 3; })(); console.log(window.a); // 输出3 对象有多个重名属性,最后赋值的那个属性会覆盖前面的值.如 var obj = { c: 3, c: 4 } // obj 为 {c:4} 还有什么 == , typeof 之类的坑,数不胜数.毕竟 JavaScript 之父设

JavaScript作用域示例详解_javascript技巧

作用域是JavaScript最重要的概念之一,想要学好JavaScript就需要理解JavaScript作用域和作用域链的工作原理.今天这篇文章对JavaScript作用域示例详解的介绍,希望能帮助大家更好的学习JavaScript. 任何程序设计语言都有作用域的概念,简单的说,作用域就是变量与函数的可访问范围,即作用域控制着变量与函数的可见性和生命周期.在JavaScript中,变量的作用域有全局作用域和局部作用域两种. 一.JavaScript中无块级作用域 在Java或C#中存在块级作用域

javascript-JavaScript这段代码求详解

问题描述 JavaScript这段代码求详解 function uniQueue(array){ var arr=[]; var m; while(array.length>0){ m=array[0]; arr.push(m); array=$.grep(array,function(n,i){ return n==m; },true); } return arr; } 数组去除重复.不太深入了解 解决方案 看懂了............

JavaScript运算符实例详解

核心提示:JavaScript运算符实例详解 根据处理对象的数目: 单元运算符; 二元运算符; 三元运算符. 根据功能: 赋值运算符; = += -= *= /= %=(取余) 算术运算符; + - * / %(取余) ++(递增) --(递减) - 例1: 例2: <Script> var x = y = 3;  with (document) {      write("x = 3, y = 3 <br>");      write("若x = y

Javascript字符串常用方法详解_javascript技巧

字符串 字符串就是一个或多个排列在一起的字符,放在单引号或双引号之中. 'abc' "abc" length属性 js里的字符串类似于数组,都是一个一个字符拼凑在一起组成的,因此可以用length属性取得字符串的长度 var str = "hello" str.length; // 5 字符串常用的一些方法 1. charAt() str.charAt(n) ＝> 返回字符串的第 n 个字符,如果不在 0~str.length-1之间,则返回一个空字符串. v