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
当你在编辑代码之前, 先花一些时间查看一下现有代码的风格. 如果他们给算术运算符添加了空格, 你也应该添加.
如果他们的注释使用一个个星号盒子, 那么也请你使用这种方式。
我们在这提出了一些全局上的风格规则, 但也要考虑自身情况形成自己的代码风格.
但如果你添加的代码和现有的代码有很大的区别, 这就让阅读者感到很不和谐.
所以, 避免这种情况的发生.