`
kongxiantao
  • 浏览: 112850 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

豆瓣Javascript代码风格规范

阅读更多

 

原文地址被墙

 

豆瓣 Javascript 代码风格规范

Douban Javascript Core Style Guideline

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 的检查,可以在该文件中加入 /*global*/ 声明,如: /*global alert: true, console: true, top: true, setTimeout: true */

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

n

integer

nVariableName

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

integer as counter/iterator

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

s

string

sVariableName

o

object

oObjectName

is, can, has

boolean

[Boolean name]ConditionName

event method

event attachment

[event type]_MethodName

get

accessor method

getMethodName

set

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
                 }
               });

             

相关工具

Douban-JSLint

Closure Linter

相关推荐

Douglas Crockford: Code Conventions for the JavaScript Programming Language

Google JavaScript Style Guide

JQuery Core Style Guidelines

更新记录:

2011/2/25 - 添加 Douban-JSLint

2010/11/17 - 发布

 

分享到:
评论

相关推荐

    豆瓣Javascript 和 Css代码风格规范

    为了深入理解并实施这些规范,开发者可以详细阅读提供的文档——《豆瓣CSS开发规范.doc》和《豆瓣Javascript代码风格规范.doc》。这两份文档会进一步阐述每一条规则的背景、目的和具体应用,帮助开发者在日常工作中...

    豆瓣电影小程序源码.zip

    【标题】"豆瓣电影小程序源码.zip"是一个包含有源代码的压缩文件,主要用于学习和交流,特别是针对微信小程序的开发。这个项目是基于豆瓣电影API实现的小程序应用,允许用户浏览电影信息、查看评分、阅读评论等。...

    微信小程序编写豆瓣影评

    - `.eslintrc.js`:ESLint配置文件,用于代码风格检查和规范。 - `project.private.config.json`:私有配置文件,可能包含敏感信息,如API密钥等。 - `sitemap.json`:站点地图文件,帮助微信爬虫更好地理解小...

    一个使用Vuejs与MaterialDesign重构豆瓣的项目

    Material Design 是谷歌推出的一种设计语言,它提供了统一的设计规范,强调简洁、直观的视觉效果和交互体验。在“一个使用Vue.js与MaterialDesign重构豆瓣的项目”中,开发者将这两者结合,旨在创建一个类似于豆瓣的...

    期刊Vue_Webpack框架在银行App前端开发的应用_江庆1

    在实际开发过程中,Vue的组件化特性使得开发者可以将UI拆分为多个可重用的组件,每个组件都有自己的状态和逻辑,这有利于保持代码风格的统一。而Webpack则通过预处理和后处理技术,确保了代码的规范性和一致性,降低...

    一款通用的js分享插件

    2. **前端框架和库**:虽然描述中没有明确提及,但通常这类插件可能会利用现有的前端框架(如jQuery)或者库来简化DOM操作和事件处理,提高代码效率和兼容性。 3. **社交平台API**:该插件支持多个社交平台,包括...

    react-reactreactrouterreduxaxiosmaterialui

    React使用JSX语法,允许在JavaScript中混写HTML,使得代码更易读、易写。React通过虚拟DOM提高了性能,避免了每次状态改变都直接操作真实DOM,而是先在内存中计算出新的DOM树,再进行最小化的DOM更新。 2. **React ...

    黑白风经典电影书籍语录记录生活感慨心情随笔小程序源码.zip

    10. **代码规范**:良好的编码习惯和规范对于理解和维护源码至关重要,这也是一种编程素养的体现。 通过学习这个源码,开发者不仅可以提升小程序开发技能,还能深入了解数据存储、UI设计、网络请求和用户交互等多个...

    微信小程序电影推荐wx-app-movie-master.zip

    6. **界面设计**:采用现代、简洁的设计风格,符合微信小程序的UI规范,提升用户体验。 7. **性能优化**:微信小程序有其特定的加载和渲染机制,因此开发者需要关注代码优化,减少网络请求,提升加载速度。 8. **...

    PHP自动更新电影网站源码

    至于压缩包内的文件“功能最强大的PHP电影整站源码_一键自动采集更新”,这可能是一个包含所有源代码、样式表(CSS)、脚本(JavaScript)、图片和其他资源的完整网站构建包。安装时,管理员需要将这些文件上传到...

Global site tag (gtag.js) - Google Analytics