首页 > 代码库 > 分离JavaScript
分离JavaScript
分离JavaScript
类似于使用style属性，在HTML文档里使用诸如onclick之类的属性也是一种既没有效率又容易引发问题的做法。如果我们用一个”挂钩“，就像CSS机制中的Class或ID属性那样，把JavaScript代码调用行为与HTML文档的结构和内容分离开，网页就会健壮得多。那么，可以用下面这条语句来表明”当这个链接被点击时，它将调用popUp()函数“。
<a href="http://www.example.com/" class="popup">Example</a>
如果想把一个事件添加到某个带有特定id属性的元素上，用getElementById就可以解决问题：
getElementById(id).event=action
如果事情涉及多个元素，我们可以用getElementsByTagName和getAttribute把事件添加到有着特定属性的一组元素上。
具体步骤如下所示。
(1)把文档里的所有链接全放入一个数组里。
(2)遍历数组。
(3)如果某个链接的class属性等于popup，就表示这个链接在被点击时应该调用popUp()函数。于是，A.把这个链接的href属性值传递给popUp()函数；B.取消这个链接的默认行为，不让这个链接把访问者带离当前窗口。
下面是实现上述步骤的JavaScript代码：
var links = document.getElementsByTagName("a");
for(var i=0; i<links.length; i++)
{
if(links[i].getAttribute("class") == "popup")
{
links[i].onclick = function()
{
popUp(this.getAttribute("href"));
return false;
}
}
}
以上代码将把调用popUp()函数的onclick事件添加到有关的链接上。只要把他们存入一个外部JavaScript文件，就等于是把这些操作从HTML文档里分离出来了。这就是”分离JavaScript“的含义。
还有个问题需要解决：如果把这段代码存入外部JavaScript文件，他们将无法正常运行。因为这段代码的第一行是：
var links = document.getElementsByTagName("a");
这条语句将在JavaScript文件被加载时立刻执行。如果JavaScript文件是从HTML文档的<head>部分用<script>标签调用的，它将在HTML文档之前加载到浏览器里。同样，如果<script>标签位于文档底部</body>之前，就不能保证哪个文件最先结束加载（浏览器可能一次加载多个）。因为脚本加载时文档可能不完整，所以模型也不完整。没有完整的DOM，getElementsByTagName等方法就不能正常工作。
必须让这个代码在HTML文档全部加载到浏览器之后马上开始执行。HTML文档全部加载完毕时将触发一个事件，这个事件有它自己的事件处理函数。
文档将被加载到一个浏览器窗口里，document对象又是window对象的一个属性。当window对象触发onload事件时，document对象已经存在。
我将把我的JavaScript代码打包在prepareLinks函数里，并把这个函数添加到window对象的onload事件上去。这样一来，DOM就可以正常工作了：
window.onload = prepareLinks;
function prepareLinks()
{
var links = document.getElementsByTagName("a");
for(var i=0; i<links.length; i++)
{
if(links[i].getAttribute("class")=="popup")
{
links[i].onclick = function()
{
popUp(this.getAttribute("href"));
return false;
}
}
}
}
function popUp(winURL)
{
window.open(winURL,"popup","width=320,height=480");
}
这是一个非常简单的把行为与结构分离开来的例子
分离JavaScript