一:预留退路:


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


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


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


二:分离文档。


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


例: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(); 

 

  } 

 

  } 

 

  }