Dojo Javascript 编程规范

Dojo Javascript 编程规范

前言

相当不错的 Javascript 编程风格规范,建议大家采用此规范编写 Javascript。原文链接:http://dojotoolkit.org/developer/StyleGuide

翻译(Translated by):i.feelinglucky{at}gmail.com fromhttp://www.gracecode.com,转载请注明出处、作者和翻译者,谢谢配合。

本文地址:http://code.google.com/p/grace/wiki/DojoStyle

Any violation to this guide is allowed if it enhances readability.

所有的代码都要变成可供他人容易阅读的。

快读参考

核心 API 请使用下面的风格:

结构 规则 注释
模块 小写 不要使用多重语义(Never multiple words)
骆驼
公有方法 混合 其他的外部调用也可以使用 lower_case(),这样的风格
公有变量 混合
常量 骆驼 或 大写

下面的虽然不是必要的,但建议使用:

结构 规则
私有方法 混合,例子:_mixedCase
私有变量 混合,例子:_mixedCase
方法(method)参数 混合,例子:_mixedCase,mixedCase
本地(local)变量 混合,例子:_mixedCase,mixedCase

命名规范

  1. 变量名称必须为小写字母。
  2. 类的命名使用骆驼命名规则,例如:
  3. Account, EventHandler
  4. 常量必须在对象(类)或者枚举变量的前部声明。枚举变量的命名必须要有实际的意义,并且其成员必须使用骆驼命名规则或使用大写:
  5. var NodeTypes = {
    Element : 1,
    DOCUMENT
    : 2
    }
  6. 简写单词不能使用大写名称作为变量名:
  7. getInnerHtml(), getXml(), XmlDocument
  8. 方法的命令必须为动词或者是动词短语:
  9. obj.getSomeValue()
  10. 公有类的命名必须使用混合名称(mixedCase)命名。
  11. CSS 变量的命名必须使用其对应的相同的公共类变量。
  12. 私有类的变量属性成员必须使用混合名称(mixedCase)命名,并前面下下划线(_)。例如:
  13. var MyClass = function(){
    var _buffer;
    this.doSomething = function(){
    };
    }
  14. 变量如果设置为私有,则前面必须添加下划线。
  15. this._somePrivateVariable = statement;
  16. 通用的变量必须使用与其名字一致的类型名称:
  17. setTopic(topic) // 变量 topic 为 Topic 类型的变量
  18. 所有的变量名必须使用英文名称。
  19. 变量如有较广的作用域(large scope),必须使用全局变量;此时可以设计成一个类的成员。相对的如作用域较小或为私有变量则使用简洁的单词命名。
  20. 如果变量有其隐含的返回值,则避免使用其相似的方法:
  21. getHandler(); // 避免使用 getEventHandler()
  22. 公有变量必须清楚的表达其自身的属性,避免字义含糊不清,例如:
  23. MouseEventHandler,而非 MseEvtHdlr
    请再次注意这条规定,这样做得的好处是非常明显的。它能明确的表达表达式所定义的含义。例如:
    dojo.events.mouse.Handler // 而非 dojo.events.mouse.MouseEventHandler
  24. 类/构造函数可以使用扩展其基类的名称命名,这样可以正确、迅速的找到其基类的名称:
  25. EventHandler
    UIEventHandler
    MouseEventHandler
    基类可以在明确描述其属性的前提下,缩减其命名:
    MouseEventHandler as opposed to MouseUIEventHandler.

特殊命名规范

  1. 术语 "get/set" 不要和一个字段相连,除非它被定义为私有变量。
  2. 前面加 "is" 的变量名应该为布尔值,同理可以为 "has","can" 或者 "should"。
  3. 术语 "compute" 作为变量名应为已经计算完成的变量。
  4. 术语 "find" 作为变量名应为已经查找完成的变量。
  5. 术语 "initialize" 或者 "init" 作为变量名应为已经实例化(初始化)完成的类或者其他类型的变量。
  6. UI (用户界面)控制变量应在名称后加控制类型,例如: leftComboBox,TopScrollPane。
  7. 复数必须有其公共的名称约定(原文:Plural form MUST be used to name collections)。
  8. 带有 "num" 或者 "count" 开头的变量名约定为数字(对象)。
  9. 重复变量建议使用 "i","j","k" (依次类推)等名称的变量。
  10. 补充用语必须使用补充词,例如: get/set,add/remove,create/destroy,start/stop,insert/delete,begin/end,etc.
  11. 能缩写的名称尽量使用缩写。
  12. 避免产生歧义的布尔变量名称,例如:
  13. isNotError, isNotFound 为非法
  14. 错误类建议在变量名称后加上 "Exception" 或者 "Error"。
  15. 方法如果返回一个类,则应该在名称上说明返回什么;如果是一个过程,则应该说明做了什么。

文件

  1. 缩进请使用 4 个空白符的制表位。
  2. 如果您的编辑器支持文件标签_(file tags),请加添如下的一行使我们的代码更容易阅读:
  3. // vim:ts=4:noet:tw=0:

译注:老外用 VIM 编辑器比较多,此条可以选择遵循。

  1. 代码折叠必须看起来是完成并且是合乎逻辑的:
  2. var someExpression = Expression1
    + Expression2
    + Expression3;

    var o = someObject.get(
    Expression1,
    Expression2,
    Expression3
    );
    注:表达式的缩进与变量声明应为一致的。
注:函数的参数应采用明确的缩进,缩进规则与其他块保持一致。

变量

  1. 变量必须在声明初始化以后才能使用,即便是 NULL 类型。
  2. 变量不能产生歧义。
  3. 相关的变量集应该放在同一代码块中,非相关的变量集不应该放在同一代码块中。
  4. 变量应该尽量保持最小的生存周期。
  5. 循环/重复变量的规范:
    1. 只有循环控制块的话,则必须使用 FOR 循环。
    2. 循环变量应该在循环开始前就被初始化;如使用 FOR 循环,则使用 FOR 语句初始化循环变量。
    3. "do ... while" 语句是被允许的。
    4. "break" 和 "continue" 语句仍然允许使用(但请注意)。
  6. 条件表达式
    1. 应该尽量避免复杂的条件表达式,如有必要可以使用临时布尔变量。
    2. The nominal case SHOULD be put in the "if" part and the exception in the "else" part of an "if" statement.
    3. 应避免在条件表达式中加入块。
  7. 杂项
    1. 尽量避免幻数(Magic numbers),他们应该使用常量来代替。
    2. 浮点变量必须指明小数点后一位(即使是 0)。
    3. 浮点变量必须指明实部,即使它们为零(使用 0. 开头)。

布局

  1. 普通代码段应该看起来如下:
  2. while (!isDone){
    doSomething
    ();
    isDone
    = moreToDo();
    }
  3. IF 语句应该看起来像这样:
  4. if (someCondition){
    statements
    ;
    } else if (someOtherCondition){
    statements
    ;
    } else {
    statements
    ;
    }
  5. FOR 语句应该看起来像这样:
  6. for (initialization; condition; update){
    statements
    ;
    }
  7. WHILE 语句应该看起来像这样:
  8. while (!isDone) {
    doSomething
    ();
    isDone
    = moreToDo();
    }
  9. DO ... WHILE 语句应该看起来像这样:
  10. do {
    statements
    ;
    } while (condition);
  11. SWITCH 语句应该看起来像这样:
  12. switch (condition) {
    case ABC:
    statements
    ;
    // fallthrough
    case DEF:
    statements
    ;
    break;
    default:
    statements
    ;
    break;
    }
  13. TRY ... CATCH 语句应该看起来像这样:
  14. try {
    statements
    ;
    } catch(ex) {
    statements
    ;
    } finally {
    statements
    ;
    }
  15. 单行的 IF - ELSE,WHILE 或者 FOR 语句也必须加入括号,不过他们可以这样写:
  16. if (condition){ statement; }
    while (condition){ statement; }
    for (intialization; condition; update){ statement; }

空白

  1. 操作符建议使用空格隔开(包括三元操作符)。
  2. 下面的关键字避免使用空白隔开:
    • break
    • catch
    • continue
    • do
    • else
    • finally
    • for
    • function (如果为匿名函数,例如:var foo = function(){}; )
    • if
    • return
    • switch
    • this
    • try
    • void
    • while
    • with
  3. 下面的关键字必须使用空白隔开:
    • case
    • default
    • delete
    • function (如果为申明,例如:function foo(){}; )
    • in
    • instanceof
    • new
    • throw
    • typeof
    • var
  4. 逗号(,)建议使用空白隔开。
  5. 冒号(:)建议使用空白隔开。
  6. 点(.)在后部建议使用空白隔开。
  7. 点(.)避免在前部使用空白。
  8. 函数调用和方法避免使用空白,例如:doSomething(someParameter); // 而非 doSomething (someParameter)
  9. 逻辑块之间使用空行。
  10. 声明建议对齐使其更容易阅读。

注释

  1. 生涩的代码就没有必要添加注释了,首先您需要重写它们。
  2. 所有的注释请使用英文。
  3. 从已解决的方案到未开发的功能,注释必须与代码相关。
  4. 大量的变量申明后必须跟随一段注释。
  5. 注释需要说明的是代码段的用处,尤其是接下来的代码段。
  6. 注释没有必要每行都添加。

文档

下面提供了一些基本的函数或者对象的描述方法:

  • 总结(summary): 简短的表述此函数或者对象实现的目的
  • 描述(description): 对于此函数或者类的简短的描述
  • 返回(return): 描述此函数返回什么(并不包括返回类型)

基本函数信息

function(){
// summary: Soon we will have enough treasure to rule all of New Jersey.
// description: Or we could just get a new roomate.
// Look,you go find him. He don't yell at you.
// All I ever try to do is make him smile and sing around
// him and dance around him and he just lays into me.
// He told me to get in the freezer 'cause there was a carnival in there.
// returns: Look,a Bananarama tape!
}

对象函数信息

没有返回值描述

{
// summary: Dingle,engage the rainbow machine!
// description:
// Tell you what,I wish I was--oh my g--that beam,
// coming up like that,the speed,you might wanna adjust that.
// It really did a number on my back,there. I mean,and I don't
// wanna say whiplash,just yet,cause that's a little too far,
// but,you're insured,right?
}

函数的声明

在有的情况下,对于函数的调用和声明是隐义(invisible)的。在这种情况下,我们没有办法在函数中加入说明等(供程序调用)。如果您遭遇了这种情况,您可以使用一个类来封装函数。

注:此此方法只能在函数没有初始化的参数情况下。如过不是,则它们会被忽略。

dojo.declare(
"foo",
null,
{
// summary: Phew,this sure is relaxing,Frylock.
// description:
// Thousands of years ago,before the dawn of
// man as we knew him,there was Sir Santa of Claus: an
// ape-like creature making crude and pointless toys out
// of dino-bones,hurling them at chimp-like creatures with
// crinkled hands regardless of how they behaved the
// previous year.
// returns: Unless Carl pays tribute to the Elfin Elders in space.
}
);

参数

  1. 简单类型
  2. 简单的类型的参数可以直接在函数参数定义中注释说明。
    function(/*String*/ foo, /*int*/ bar)...
  3. 可变类型参数
    • ?可选参数
    • ...说面参数范围不确定
    • 数组
    • function(/*String?*/ foo, /*int...*/ bar, /*String[]*/ baz)...
  4. 下面是几个修饰符供参考:
  5. 全局参数描述
  6. 如果你想增加一个描述,你可以将它们移至初始化块。
基本信息格式为: *关键字* 描述字段*key* Descriptive sentence
参数和变量的格式为: *关键字* ~*类型*~ 描述字段*key* ~*type*~ Descriptive sentence
注: *关键字* 和 ~*类型*~可以使用任何字母和数字表述。
function (foo, bar) {
// foo: String
// used for being the first parameter
// bar: int
// used for being the second parameter
}

变量

由于实例变量、原型变量和外部变量的声明是一致的,所以有很多的方法声明、修改变量。具体的如何定义和定位应在变量最先出现的位置指明变量的名称、类型、作用域等信息。

function foo() {
// myString: String
// times: int
// How many times to print myString
// separator: String
// What to print out in between myString*
this.myString = "placeholder text";
this.times = 5;
}

foo
.prototype.setString = function (myString) {
this.myString = myString;
}

foo
.prototype.toString = function() {
for(int i = 0; i < this.times; i++) {
dojo
.debug(this.myString);
dojo
.debug(foo.separator);
}
}
foo
.separator = "=====";

对象中的变量注释

应使用和对象值和方法一致的标注方式,比如在他们声明的时候:

{
// key: String
// A simple value
key
: "value",
// key2: String
// Another simple value
}

返回值

因为函数可以同时返回多个不同(类型)的值,所以应每个返回值之后加入返回类型的注释。注释在行内注释即可,如果所有的返回值为同一类型,则指明返回的类型;如为多个不同的返回值,则标注返回类型为"mixed"。

function() {
if (arguments.length) {
return "You passed argument(s)"; // String
} else {
return false; // Boolean
}
}

伪代码(有待讨论)

有时候您需要在函数或者类中添加对于此函数和类的功能性流程描述。如果您打算这样做,您可以使用/*========(= 字符最好出现 5 次或者更多),这样做的好处就是可以不用将这些东西加入代码(译注:原作者的意思可能为代码管理系统)。

这样看起来在/*==========*/会有非常长的一段注释,等待功能调整完毕以后就可以考虑是否删除。

/*=====
module.pseudo.kwArgs = {
// url: String
// The location of the file
url: "",
// mimeType: String
// text/html,text/xml,etc
mimeType: ""
}
=====*/


function(/*module.pseudo.kwArgs*/ kwArgs){
dojo
.debug(kwArgs.url);
dojo
.debug(kwArgs.mimeType);
}

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


我有一个网格,可以根据更大的树结构编辑小块数据.为了更容易知道用户保存了什么,我希望当用户第一次看到网格时,网格处于不可编辑状态.当用户准备好后,他们可以单击编辑按钮,这将使网格的某些部分可编辑.然后,有一个保存或取消按钮可以保存更改或还原.在大多数情况下它是有效的.但
我即将开始开发一款教育性的视频游戏.我已经决定以一种我可以轻松打包为Web,Mobiles和可能的Standalone版本的方式来实现这一目标.我不想使用Flash.因此,我确信(无论如何我会听取建议)使用JavaScript和SVG.我正在对这个问题进行大量研究,但我很难把各个部分放在一起.我知道Raphae
我正在使用带有Grails2.3.9的Dojo1.9.DojoNumberTextBox小部件–我在表单中使用–将固定格式(JavaScript基本格式)的实数值(例如:12.56)设置为HTML表单输入字段(但根据浏览器区域设置显示/编辑它们,所以用户总是看到格式正确的数字).另一方面,Grails期望输入字段根据浏览器
1.引言鉴于个人需求的转变,本系列将记录自学arcgisapiforjavaScript的学习历程,本篇将从最开始的arcgisapiforjavaScript部署开始,个人声明:博文不在传道受业解惑,旨在方便日后复习查阅。由于是自学,文章中可能会出现一些纰漏,请留言指出,不必留有情面哦!2.下载ArcGISforDe
我正在阅读使用dojo’sdeclare进行类创建的语法.描述令人困惑:Thedeclarefunctionisdefinedinthedojo/_base/declaremodule.declareacceptsthreearguments:className,superClass,andproperties.ClassNameTheclassNameargumentrepresentsthenameofthec
我的团队由更多的java人员和JavaScript经验丰富组成.我知道这个问题曾多次被问到,但为了弄清楚我的事实,我需要澄清一些事情,因为我在客户端技术方面的经验非常有限.我们决定使用GWT而不是纯JavaScript框架构建我们的解决方案(假设有更多的Java经验).这些是支持我的决定的事实.>
路由dojo/framework/srcouting/README.mdcommitb682b06ace25eea86d190e56dd81042565b35ed1Dojo应用程序的路由路由FeaturesRoute配置路径参数RouterHistoryManagersHashHistoryStateHistoryMemoryHistoryOutletEventRouterContextInjectionOutl
请原谅我的无知,因为我对jquery并不熟悉.是否有dojo.connect()的等价物?我找到了这个解决方案:http:/hink-robot.com/2009/06/hitch-object-oriented-event-handlers-with-jquery/但是没有断开功能!你知道jquery的其他解决方案吗?有jquery.connect但这个插件在我的测试中不起作用.
与java类一样,在dojo里也可以定义constructor 构造函数,在创建一个实例时可以对需要的属性进行初始化。//定义一个类mqsy_yjvar mqsy_yj=declare(null,{     //thedefaultusername    username: "yanjun",          //theconstructor   
我一直在寻找一些最佳实践,并想知道Dojo是否具有框架特定的最佳实践,还是最好只使用通用的Javascript标准?特别是我主要是寻找一些功能和类评论的指导方针?解决方法:对于初学者来说,这是项目的风格指南:DojoStyleGuide
我有’05/17/2010’的价值我想通过使用dojo.date.locale将其作为“2010年5月17日”.我尝试过使用dojo.date.locale.parse,如下所示:x='05/17/2010'varx=dojo.date.locale.parse(x,{datePattern:"MM/dd/yyyy",selector:"date"});alert(x)这并没有给我所需的日期
我正在尝试创建一个包含函数的dojo类,这些函数又调用此类中的其他函数,如下所示:dojo.provide("my.drawing");dojo.declare("my.drawing",null,{constructor:function(/*Object*/args){dojo.safeMixin(this,args);this.container=args[0];
我知道你可以使用jQuery.noConflict为jQuery做这件事.有没有办法与Dojo做类似的事情?解决方法:我相信你可以.有关在页面上运行多个版本的Dojo,请参阅thispage.它很繁琐,但似乎是你正在寻找的东西.一般来说,Dojo和jQuery都非常小心,不会破坏彼此或其他任何人的变量名.
我有一个EnhancedGrid,用户经常使用复杂的过滤器.有没有办法允许用户保存或标记过滤器,以便将来可以轻松地重新应用它?我知道我可以通过编程方式设置过滤器,但我无法预测用户想要的过滤器.谢谢!编辑:自己做了一些进展…使用grid.getFilter()返回过滤器的JSON表示,然后使用json.strin
我有这个代码:dojo.declare("City",null,{constructor:function(cityid,cityinfo){}});dojo.declare("TPolyline",GPolyline,{constructor:function(points,color){},initialize:function(map){});应该是什
我遇到的问题是我的所有javascript错误似乎来自dojo.xd.js或子模块.我正在使用chrome调试器和许多dijit功能,如dijit.declaration和dojo.parser.这有点烦人,因为它很难找到简单的错误或滑倒.我希望我可以添加一个选项,允许我的调试器在我的非dojo代码中显示选项会发生的位置.我是
我正在使用DojoToolkit数字/解析函数来处理格式化和使用ICU模式语法解析字符串.有没有人知道有可能采取任意ICU模式字符串并以某种方式使用Dojo(或其他)库将其分解为它的部分(例如,对于数字模式,它可以被分解为小数位数,数千个分组等…).我希望这样做,而不需要让我的代码密切了
我有两个看似相关的问题,访问在不同的地方定义的javascript函数.我遇到的第一个问题是调用我在firgbug或safari控制台中定义的函数.我定义了一个名为getRed的函数,如下所示:functiongetRed(row,col){//dosomethingstuffandreturntheredvalueasa
我想添加一个在Ajax调用中指定的外部样式表.我已经找到了一种方法来使用jQuery(参见下面的示例),但是我需要使该方法适应dojoJavaScript框架.JQuery示例$('head').append('<linkrel="stylesheet"type="text/css"href="lightbox_stylesheet.css">');谢谢.解决方法:一旦你
我正在尝试使用dojo.connect将onMouseDown事件连接到图像,如:dojo.connect(dojo.byId("workpic"),"onMouseDown",workpicDown);functionworkpicDown(){alert("mousedown");}类似的代码几行后,我将onMouse*事件连接到dojo.body确实完全正常工作.但是当我点击图像时