首页
站长论坛BBS
救助
投稿
discuz视频教程
discuz技术支持
版块
登录
快速注册

javascript编程规范 - 基本格式

移动鬼影 2015-4-22 [Javascript] 来自PC 复制链接
11036
discuz使用视频教程
31idc

马上注册,一起探讨正确快速的建站方法

您需要 登录 才可以下载或查看,没有帐号?快速注册

x
代码规范是什么呢?我的理解是指一种编写代码的样式规格。不同的程序员,往往有不同的编程风格。

有人说,编译器的规范叫做"语法规则"(grammar),这是程序员必须遵守的;而编译器忽略的部分,就叫"编程风格"(programming style),这是程序员可以自由选择的。这种说法不完全正确,程序员固然可以自由选择编程风格,但是好的编程风格有助于写出质量更高、错误更少、更易于维护的程序。

所以,有一点应该明确,"编程风格"的选择不应该基于个人爱好、熟悉程度、打字工作量等因素,而要考虑如何尽量使代码清晰易读、减少出错。你选择的,不是你喜欢的风格,而是一种能够清晰表达你的意图的风格。这一点,对于Javascript这种语法自由度很高、设计不完全成熟的语言尤其重要。

以下是我参考idiomatic.js整理而来,大家有觉得不合理的地方,可以在下面评论中指出,我们一块交流学习。

1. 基本的格式化

1-1. 代码缩进采用4个空白符。

1-2. 语句必须都有分号结尾,除了 for, function申明, if, switch, try, while。 非申明式函数也需要分号

  1. var a;

  2. // 错误, 结尾缺少分号
  3. a = function() {
  4.     // do some thing.
  5. }
复制代码

1-3. 所有的循环体和判断体都需要用”{}”括起来。如:

  1. // 正确
  2. if ( condition ) {
  3.     doSomething();
  4. }

  5. // 错误
  6. if ( condition ) doSomething();
复制代码

1-4. 变量声明。同一作用域下的所有变量,全部提至函数顶部,且使用一个var来集中申明。

/
  1. / 正确
  2. function a() {
  3.     var v1 = 1,
  4.         v2 = 2,
  5.         v3 = 3,
  6.         i = 0,
  7.         len = 3;

  8.     statement;

  9.     for ( ; i < len; i++ ) {
  10.         // do some thing.
  11.     }
  12. }

  13. // 错误
  14. function a() {

  15.     var v1 = 1;
  16.     var v2 = 2;
  17.     var v3 = 3;

  18.     statement;
  19. }

  20. // 错误
  21. function a() {
  22.     var a = 1;

  23.     for ( var i = 0, len = arr.length; i < len; i++ ) {
  24.         // do some thing.
  25.     }

  26.     if ( condition ) {
  27.        var b = 2;

  28.        // do something.
  29.     }
  30. }

  31. // 错误
  32. function a() {
  33.     var a = 1;

  34.     if ( condition ) {
  35.        var b = 2;

  36.        // do something.
  37.     }
  38. }
复制代码

同时每个带赋值的变量应当独占一行,第二个起应当在var所需缩进的基础上多一个缩进。需要赋值初始值的优先放在前面,如:

  1. function a() {
  2.     var first = 1,
  3.         second = 2,
  4.         third = 3,
  5.         fourth, fifth;

  6.     doSomething();
  7. }
复制代码

1-5. 合适的换行。

单行语句不允许超出80个字符,超出的需要进行合适的断行处理。

1-5-1. 函数链式调用,如果一行太长,链式方法应当在点之前合适的断行,且新行应当在链式开始行所需缩进的基础上多两个缩进, 且一旦断行后后面的每个方法都需要断行。如果某个方法的参数中存在Block,则这个方法在调用之前应当换行。

  1. // 函数链式调用
  2. var $item = $('<div></div>').attr( 'id', 'test' )
  3.         .attr( 'id', 'what ever' )
  4.         .addClass( 'className' )
  5.         .html( 'xxxx' );

  6. // 非赋值语句
  7. $('<div></div>').attr( 'id', 'test' )
  8.         .attr( 'id', 'what ever' )
  9.         .addClass('className')
  10.         .html( 'xxxx' );

  11. // 如果某个方法的参数中带有匿名方法,则这个方法的调用之前应当换行。
  12. var $item = $('<div></div>')
  13.         .attr( 'id', function() {
  14.             doSomething();
  15.         } )
  16.         .addClass('className')
  17.         .html( 'xxxx' );

  18. // 错误的示例
  19. $('<div></div>').attr( 'id', function() {
  20.             doSomething();
  21.         } )
  22.         .attr( 'id', 'what ever' )
  23.         .addClass('className')
  24.         .html('xxxx');
复制代码

1-5-2. 方法参数过长,if语句中条件过多时也需要换行,这种情况下的缩进为2个。同是操作符应当保留在右边结尾处。

  1. callFunc( arg1, arg2, longArgmunent3, longArgmuent4,
  2.         longArgmument5 );

  3. function doSomething( arg1, arg2, longArgmunent3, longArgmuent4,
  4.         longArgmument5 ) {

  5.     doSomething();
  6. }

  7. if ( condition1 && condition2 || condition3 &&
  8.        condition5 ) {

  9.     doSomething();
  10. }
复制代码

1-5-3. 每一个块状代码的开始都应当有一个空行。

  1. function myFunc() {
  2.     var v1 = 1,
  3.         v2 = 2,
  4.         v3 = 3;

  5.     if ( v1 == 1 ) {
  6.         statement
  7.     }

  8.     while ( condition ) {
  9.         statement
  10.     }

  11.     if ( condition ) {
  12.         statement
  13.     }
  14. }

  15. var a = {
  16.     a: function() {

  17.     },

  18.     b: function() {

  19.     }
  20. }

  21. // 错误
  22. function myFunc() {
  23.     var v1 = 1,
  24.         v2 = 2,
  25.         v3 = 3;
  26.     if ( v1 == 1 ) {
  27.         statement
  28.     }
  29.     while ( condition ) {
  30.         statement
  31.     }

  32. }
复制代码

1-5-4. if之后的else的代码块应当在前个代码块之后,不允许另起新行。

  1. if ( a === 1 ) {
  2.     statement
  3. } else if ( a === 2 ) {
  4.     statement
  5. }

  6. // 错误
  7. if ( a === 1 ) {
  8.     statement
  9. }
  10. else if ( a === 2 ) {
  11.     statement
  12. }
复制代码

1-5-5. 包含代码块的"{}",应该在"{"后立即换行。

  1. // 正确
  2. for ( t in selected ) {
  3.     statement1
  4.     statement2
  5. }

  6. for ( t in selected ) {
  7.     statement1
  8. }


  9. // 错误
  10. for (t in selected)
  11. {
  12.     // statement1
  13.     // statement2
  14. }
  15. for (t in selected) { statement }
复制代码

1-5-6. switch语句中的断行, 每个case之前有一个缩进,case之后的语句两个缩进, 每个break;后都有一个新行,最后一个除外。

  1. switch ( condition ) {
  2.     case 'first':
  3.         doSomething();
  4.         break;

  5.     case 'second':
  6.         doSomething();
  7.         break;

  8.     case 'third':
  9.     case 'fourth':
  10.          doSomething();
  11.          break;

  12.     default:
  13.         break;
  14. }
复制代码

1-5-7. 超长字符串应该使用"+"进行换行。

  1. // 正确
  2. var myString = 'A rather long string of English text, an error message ' +
  3.              'actually that just keeps going and going -- an error ' +
  4.              'message to make the Energizer bunny blush (right through ' +
  5.              'those Schwarzenegger shades)! Where was I? Oh yes, ' +
  6.              'you\'ve got an error and all the extraneous whitespace is ' +
  7.              'just gravy.  Have a nice day.';

  8. // 错误
  9. var myString = 'A rather long string of English text, an error message \
  10.               actually that just keeps going and going -- an error \
  11.               message to make the Energizer bunny blush (right through \
  12.               those Schwarzenegger shades)! Where was I? Oh yes, \
  13.               you\'ve got an error and all the extraneous whitespace is \
  14.               just gravy.  Have a nice day.';
复制代码

1-6. 适当的空格。

1-6-1. 包含"()"括号的语句,括号前后应当各有一个空格,括号内部开头和结尾处应当各有一空格,诸如: if / for / while / switch ( statements ) { … } 等;

  1. if ( a === 1 ) {
  2.     statement
  3. }

  4. for ( var i = 0; i < 1000; i++ ) {
  5.     statement
  6. }

  7. while ( v ) {
  8.     statement
  9. }

  10. switch ( v ) {
  11.     case '':...
  12. }

  13. // 当括号当做组合来用时,内部不需要空格
  14. if ( !(obj = true) ) {

  15. }
复制代码

1-6-2. 方法定义和方法调用左括号“(”前面不需要空格, 右括号与{之间始终有一个空格,括号内部开头和结尾应当各有一空格。

  1. // 函数定义
  2. function myFunc( arg ) {
  3.     statement
  4. }

  5. // 匿名函数
  6. function( arg ) {
  7.     statement
  8. }

  9. // 函数调用
  10. myFunc( arg );
复制代码

方法调用时,有几种例外,函数调用时有些场景不需要要空格

  1. // 1. 函数调用中无参数
  2. callFunc();

  3. // 2. 参数是obj,array,function直接量时
  4. callFunc([ a, b, c ]);

  5. callFunc({
  6.     a: 1,
  7.     b: 2
  8. });

  9. // 3. 参数是单独一个字符串时
  10. // 函数接受 `string` 字面量作为参数,没有空格
  11. callFunc('foo');

  12. // 4. 参数是一个立即只是函数时。
  13. callFunc(function() {
  14.     doSomething();
  15. });
复制代码

1-6-3. "="、"=="、"&&"、"||"、">"、"<"前后需要跟空格

1-6-4. 数组成员间的","和各个参数间的","(包括形参和实参)后面需要跟空格。

1-6-5. "[]"中的"["后以及"]"前需要跟空格

  1. for ( t in selected ) {

  2.     if ( !hash[ t ] && isOk ) {
  3.          deselect( t );
  4.     }
  5. }

  6. function MyClass( selector ){
  7.     // .....
  8. }

  9. new MyClass('#abc');

  10. var arr = [ 1, 2, 3, 4 ];

  11. // 错误
  12. for (t in selected) {
  13.     if (!hash[t]&&isOk){
  14.         deselect(t)
  15.     }
  16. }

  17. function MyClass(selector){
  18.     // .....
  19. }

  20. var arr = [1,2,3,4];
复制代码

这两句话写得很好把它摘抄下来,大家看看。

  1. "Arguments over style are pointless. There should be a style guide, and you should follow it"

  2. Rebecca Murphey
  3. "Part of being a good steward to a successful project is realizing that writing code for yourself is a Bad Idea™. If thousands of people are using your code, then write your code for maximum clarity, not your personal preference of how to get clever within the spec."

  4. Idan Gazit
复制代码



上一篇:wampserver配置伪静态的方法
下一篇:推荐5个好用的混合式App开发工具
洛阳app外包 发表于 2015-4-23 14:51:48 来自PC
支持学习
您需要登录后才可以回帖 登录 | 快速注册

本版积分规则

快速回复 返回顶部 返回列表