JS书写,优化,以及文件命名规范

书写

书写过程中,每行代码结束必须有分号; 原则上所有功能均根据XXX项目需求原生开发, 以避免网上down下来的代码造成的代码污染(沉冗代码 || 与现有代码冲突 ||…);

变量命名格式

变量命名: 驼峰式命名. 原生JavaScript变量要求是纯英文字母, 首字母须小写, 如iTaoLun;jQuery变量要求首字符为'_', 其他与原生JavaScript规则相同, 如: _iTaoLun; 另,要求变量集中声明,避免全局变量.

函数命名:

首字母小写驼峰式命名. 如iTaoLun();

其他

  • 代码结构明了,加适量注释.提高函数重用率;
  • 注重与html分离,减小reflow, 注重性能

JavaScript文件

JavaScript程序应独立保存在后缀名为.js的文件中。应尽量减少在HTML 中的JavaScript代码,因为存在与HTML中的JavaScript代码会明显增加文件大小,且不能对其进行缓存和压缩。
filename.js或JavaScript的代码应尽量放到body的后面。 这样可以减少因为载入脚本而造成其他页面内容载入也被延迟的问题。

缩进

缩进的单位为四个空格。避免使用Tab键来缩进。 因为始终没有个统一的Tab长短标准。虽然使用空格会增加文件的大小, 但在局域网中几乎可以忽略,且在最小化过程中也可被消除掉。

每行长度

避免每行超过80个字符。当一条语句一行写不下时,请考虑折行。 在运算符号,最好是逗号后换行。 在运算符后换行可以减少因为复制粘贴产生的错误被分号掩盖的几率。

变量声明

所有的变量必须在使用前通过var进行声明。JavaScript并不强制必须这么做, 但这么做可以让程序易于阅读,且也容易发现那些没声明的变量(它们会被编译成全局变量)。 将var语句放在函数的首部。最好把每个变量的声明语句单独放到一行,并加上注释说明。

var currentEntry;//当前选择项        var level;//缩进程度  var size; // 表格大小

尽量减少全局变量的使用。不要让局部变量覆盖全局变量。

函数声明

注释:函数名与“(”(左括号)之间不应该有空格。“)”(右括号)与开始程序体的“{”(左大括号)应在同一行。函数程序体应缩进四个空格。“}”(右大括号)与声明函数的那一行代码头部对齐。

function outer(c,d){
var e = c * d;
function inner(a, b){
return (e * a) + b;
}
return inner(01);
}

下面这种书写方式可以在 JavaScript 中正常使用,因为在 JavaScript 中,函数和对象的声明可以放到任何表达式允许的地方。且它让内联函数和混合结构具有最好的可读性。

function getElementsByClassName(className) {
var results = [];
walkTheDOM(document.body, function(node) {
var a; // array of class names
var c = node.className; // the node's classname
var i; // loop counter
// If the node has a class name, then split it into a list of simple names.
// If any of them match the requested name, then append the node to the set of results.
if(c){
a = c.split(' ');
for(i = 0; i < a.length; i += 1){
if (a[i] === className){
results.push(node);
break;
}
}
}
});
return results;
}

如果函数是匿名函数,则在function和 “(”(左括号)之间应有一个空格。如果省略了空格,否则会让人感觉函数名叫作function。

var div.onclick = function(e) {
return false;
};
var that = {
method: function() {
return this.datum;
},
datum: 0
};

尽量不使用全局函数,避免函数名重复。

所有的函数在使用前进行声明。内函数的声明跟在var语句的后面. 这样可以帮助判断哪些变量是在函数范围内的。

{} 和[]

使用{}代替new Object()。使用[]代替new Array()。这样便于书写且能提高一点执行效率。
当成员名是一组有序的数字时使用数组来保存数据。当成员名是无规律的字符串或其他时使用对象来保存数据。

event.srcElement问题

问题说明:I.E.下,even对象有srcElement属性,但是没有target属性; Firefox下,even对象有target属性,但是没有srcElement属性。
解决方法:使用

var obj=event.target||window.event.srcElement;

parentElement问题

firefox与I.E.的父元素(parentElement)的区别

  • IE:obj.parentElement
  • firefox:obj.parentNode

解决方法: 因为firefox与I.E.都支持DOM,因此使用obj.parentNode是不错选择.

命名规范

文件命名规范

  • index.html
  • welcome.html
  • newlist.html
  • about.html
  • contacts.html
  • ……

    图片命名规范

  • banner_sohu.gif
  • banner_sina.gif
  • menu_aboutus.png
  • logo_police.jpg
  • title_news.png
  • btn_contact.png
  • ……

    脚本文件命名规范

    实际模块

  • ad.js
  • pop.js

    公共模块

  • common.js
  • basic.js

    外部资源

  • jquery.min.js
  • jquery.date.js
  • jquery.validdate.js
分享到