一：预留退路：
每一次在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();
}
}
}
转载请注明原文地址: https://ju.6miu.com/read-969521.html
