JavaScript良好习惯

一：预留退路：

每一次在html文档中要考虑如果JavaScript被禁用会怎么样？我想要的图片和链接还能成功加载么？

在html文档中图片的链接和新窗口的链接要明确，不能只在js文档中出现。即在html中要给出确定的url地址。例如<a herf = ""></a>

即当用户禁用js功能或浏览器不支持时网页的基本功能要能够实现（即使不够美观）。

二：分离文档。

在一个html文档中不要直接在<script></script>里写js代码，也尽量不要把事件处理函数直接插入html文档。这样不仅会造成文档的臃肿，可读性差。还会造成网页的行为层（js代码）与结构层（html代码）混杂，及不能实现多文档应用。

在分离出去的js文档中首先应添加事件预处理函数( 例:prepare())。 以处理链接的onclick()事件为例，它将拥有以下几个功能：

1.检查当前浏览器是否支持你将使用的方法（getElementById等等）.若你在html文档中定义了id="b"，检查当前浏览器是否包含id = "b"的元素。

2.创建循环并遍历（本例中存在多个连接）

3.对onclick事件处理函数进行设置，让他在有关链接被点击时完成你想要的操作。

对于必要的检查：

我们在检查是一般使用if(! method){return false}即当不支持时怎样。因为如果使用if(method)的话将多出一个大括号，使函数体变得不易理解。

例:

if(!document.getElementById){

return false;

}

//这是一个预防性措施，为了当以后html文档有变动时，网页js代码不会出现漏洞。

if(!document.getElementById("b")){

return false;

}

结构化程序设计原则：

每个函数应该只有一个入口点和一个出口点。

这个理论并不是绝对的，如果严格遵循的话，则一定会出现多层嵌套的情况。

一个函数有多个出口点是可以接受的，但要集中在函数的开头部分。

创建必要的变量：

如：var links = document.getElementByTagName("a");是函数变得简单易读。

创建循环并遍历：

for(var i = 0,i<links.length,i++){}

对onclick事件处理函数进行设置，让他在有关链接被点击时完成你想要的操作:

for(var i = 0,i<links.length,i++){

links[i].onclick = function();

}

把js函数绑定到onload事件处理函数上：

window.onload = prepare();

如果你想在onload事件处理函数上绑定多个函数。

1.创建一个匿名函数。

window.onload = function(){

functiona();

functionb();

}

2.使用addLoadEvent()函数：

addLoadEvent(functiona());

addLoadEvent(functionb());

注：以下是addLoadEvent()代码清单:

function addLoadEvent(func) {

var oldonload = window.onload;

if( typeof window.onload !=" function()"){

window.onload = func;

}else{

window.onload = function(){

oldonload();

func();

}

}

}