1、文件命名

1、引入JS库文件, 文件名须包含库名称及版本号及是否为压缩版, 比如jquery-1.9.0.min.js

2、引入插件, 文件名格式为库名称+插件名称, 比如jQuery.cookie.js

3、js文件的命名参考js完成的功能。比如自定义弹出框的javascript文件名为dialog.js

2、文件引入

1、js代码应避免内嵌在HTML文件中,因将其另置为*.js的文件,然后用<script src="*.js"></script>载入,原因在于这样做可以利用浏览器的Cache避免页面刷新而重新加载.

2、js文件放置在页面的位置如下:

<html>

   <head>...</head>

   <script src="*.js">这里引入jquery库文件和全站通用的js文件</script>

   <body>

   <!--content–>

   <script src="*.js">这里引入针对当前页面的js文件</script>

   </body>

</html>

3、语言规范

1、声明变量时必须加var关键字。

虽然JavaScript允许不加var关键字。 当你没有写 var, 变量就会暴露在全局上下中,这样很可能会和现有变量冲突

2、尽量减少全局变量的使用.

3、总是使用分号.

如果仅依靠语句间的隐式分隔, 有时会很 麻烦. 你自己更能清楚哪里是语句的起止. 而且有些情况下, 漏掉分号会很危险:

var ck={ name:'gang.li', sex:'male' }//此除无分号

([fn1,fn2][0])(); 程序运行之后报错

原因在于这里相当于执行了ck([fn1,fn2][0])();这条语句。

4、块内函数声明

不要在块内声明一个函数。 不要写成:

if(x){ function foo(){} }

虽然很多 JS 引擎都支持块内声明 函数,但它不属于ECMAScript规范。

5、异常

我们在写一个比较复杂的应用时, 不可能完全避免不会发生任何异常, 所以加上异常判断是很有必要的。

6、使用Array直接量

使用Array语法,而不使用Array构造器。

使用 Array 构造器很容易因为传参 不恰当导致错误:

var a1=new Array(4,5,6);

var a2=new Array(5);

console.log(a1.length); //length=3

console.log(a2.length); //length=5

为了避免这些歧义,我们应该使用更易读的 直接量来声明.

var a1=[4,5,6]; var a2=[5];

7、不要修改内置对象的原型

千万不要修改内置对象, 如 Object.prototype 和 Array.prototype 的原型,以免造成不必要的麻烦。

4、编码风格

1、命名规范

A、原则: * 尽量避免潜在冲突; * 精简短小, 见名知意;

B、使用驼峰命名法:

     variableNamesLikeThis,//变量名

     functionNamesLikeThis, //方法名

     ClassNamesLikeThis,//类名

     SYMBOLIC_CONSTANTS_LIKE_THIS//常量名

C、特殊命名规范:

  • 前面加 “is” 的变量名应该为布尔值,亦可使用 “can” “has” “should” 
  • 前面加 “str” 的变量名应该为字符串 
  • 前面加 “arr” 的变量名应该为数组
  • 前面加 “num” 或 “count” 的变量名应该为数字
  • 处理错误的变量,必须在后面跟着“Error”
  • 临时的重复变量建议以i,j,k...,命名
  • 通过js获取的dom对象,命名方式参照domObjectLikeThis. 比如: var wrap=document.getElementById('wrap');

  • 通过Jquery获取的jquery对象,命名方式参照$jqueryObjectLikeThis.比如: var $wrap=$('#wrap');

  • 可选参数, 名字以 opt_ 开头。 function add(opt_x,opt_y){ /*...*/ }

2、使用命名空间

JavaScript 不支持包和命名空间.不容易发现和调试全局命名的冲突, 多个系统集成时还可能因为命名冲突导致很严重的问题。

我们遵循下面的约定以避免冲突。 在全局作用域上, 使用一个唯一的, 与工程/库相关的名字作为前缀标识.

比如, 你的工程是 "Project Meiliwan", 那么命名空间前缀可取为 Meiliwan.*

var Meiliwan = {};

Meiliwan.fn1=function(){ /*...*/ }

当选择了一个子命名空间, 请确保父命 名空间的负责人知道你在用哪个子命名 空间,

比如说, 你为工程 'Meiliwan' 创建 一个 'user' 子命名空间, 那确保团队人 员知道你在使用 Meiliwan.user={}

3、函数的声明

函数应在调用前进行声明,内部函数应在 var 声明内部变量的语句之后声明,这样可以清晰地表明内部变量和内部函数的作用域。

4、重命名那些名字很长的变量

主要是为了提高可读性. 局部空间中的变量别名只需要取原名字的最后部分.

some.long.namespace.MyClass.Helper = function(a) { };

myapp.main = function() {

                 var MyClass = some.long.namespace.MyClass;

                 var Helper = some.long.namespace.MyClass.staticHelper;

                 Helper(new MyClass());

};

5、 注释

不要吝啬注释。给以后需要理解你的代码的人们(或许就是你自己)留下信息是非常有用的。

注释应该和它们所注释的代码一样是书写良好且清晰明了。

偶尔的小幽默就更不错了。 记得要避免冗长或者情绪化。

及时地更新注释也很重要。错误的注释会让程序更加难以阅读和理解。

6、使用===与!==来替代==和!=

JavaScript 与其他熟知的编程语言不同的是,除了可以使用两个等号'=='来作判断以为,还可以使用三个等号'==='来进行逻辑等判断。

两者的不同是'=='作逻辑等判断时,会先进行类型转换后再进行比较。'==='则不会。因而,'=='进行的判断结果可能产生偏差。'!='与'!=='的区别亦是如此。

本人提倡尽量使用'==='来进行逻辑等的判断,用'!=='进行逻辑不等的判断。

var a=1;//num alert(a=='1');//true

alert(a==='1');//false

7、字符串

使用单引号代替双引号。 使用单引号来代替双引号会更好,特别是当创建一个HTML字符串时。

var msg = '<div class="wrap">...</div>';

使用双引号: var msg="<div class=\"wrap\">...</div>";

"需要转义,显得繁琐。

8、使用 join() 来创建字符串

出于性能方面考虑,建议在创建字符串时,使用join()来连接。

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>';

}

9、before coding

当你在编辑代码之前, 先花一些时间查看一下现有代码的风格. 如果他们给算术运算符添加了空格, 你也应该添加.

如果他们的注释使用一个个星号盒子, 那么也请你使用这种方式。

我们在这提出了一些全局上的风格规则, 但也要考虑自身情况形成自己的代码风格.

但如果你添加的代码和现有的代码有很大的区别, 这就让阅读者感到很不和谐.

所以, 避免这种情况的发生.