分离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的更多相关文章

  1. 实践javascript美术馆的小案例，学习到的东西还是蛮多的，包括javascript编程中的预留退路、分离javascript、以及实现向后兼容等

    javascript美术馆(改进2) 一.javascript编程过程中的好习惯 1.实现预留退路 js被禁掉,图片也可以显示出来,href属性带有图片路径 <script src=" ...

  2. 读书笔记：JavaScript DOM 编程艺术（第二版）

    读完还是能学到很多的基础知识,这里记录下,方便回顾与及时查阅. 内容也有自己的一些补充. JavaScript DOM 编程艺术(第二版) 1.JavaScript简史 JavaScript由Nets ...

  3. DOM Scripting -- Web Design with JavaScript and the Document Object Model 第2版 读书笔记

    1. childNodes  nodeValue <p id="p1">hello p!</p> alert(document.getElementById ...

  4. javascript学习 真正理解DOM脚本编程技术背后的思路和原则

    本文学习来源于<javascriptDOM编程艺术>仅作笔记 学会怎样才能利用DOM脚本编程技术以一种既方便自己更体贴用户的方式去充实和完善你们的网页. 循序渐进:从最核心的内容开始,逐步 ...

  5. 《JavaScript DOM编程艺术》读后总结

    这是我读的第一本关于JS的书,刚开始我为了选择合适的学习JS的书,看了网上许多人的意见,基本上都是推荐先读这本书.书的内容挺简单的,确实很适合初学者看,阅读的过程中不会产生什么障碍.内容虽然简单,但我 ...

  6. JavaScript最佳实践

    作者:Grey 原文地址: http://www.cnblogs.com/greyzeng/p/5540469.html 举个例子:用户在点击某个链接的时候弹出一个新窗口 弹出窗口的方法采用:wind ...

  7. javascript dom编程艺术笔记之图片库的改进

    dom的操作要遵守的原则 1.平稳退化 2.分离javascript 3.向后兼容 4.性能考虑 改进后的显示图片方法 function showpic(whichpic){ if(!document ...

  8. 偶遇问题 - - JavaScript 取消链接默认行为问题

    今天在测试<JavaScript DOM编程艺术(第2版)>中第69页代码时,遇到了问题.本来预期效果应该是点击链接后不跳转当前页面,而是另外弹出有个窗口.但结果却是页面跳转了.代码如下图 ...

  9. 《JavaScript Dom 编程艺术》读书笔记-第5章

    上一篇随笔中记录了用JavaScript建一个基础图片库,但实际上还有很多地方可以改进.第五章将逐步进行改进,这一章里需要明白的道理是达到目标的过程和达到目标同样重要~ 第五章:最佳实践 5.1 过去 ...

随机推荐

  1. MySQL5.7 安装过程中出现 attempting to start service 过不去

    MySQL5.7 安装过程中出现 attempting to start service 过不去. 1,机制打开服务,把MySql服务名启动(我的是MySqlAliyun) 启动失败:提示1067错误 ...

  2. sql分组合并字段重复项sql for xml path

    -------------------------(情景描述) 在我们处理数据时,可能会碰到这种情景: Id                Name 1                  a,b 2  ...

  3. 【IOS开发】创建XML文件

    - (void)viewDidLoad { [super viewDidLoad]; NSString *path = [[NSBundle mainBundle] pathForResource:@ ...

  4. 使用TotoriseSVN的分支/标签功能

    使用TotoriseSVN的分支/标签功能 http://blog.sina.com.cn/s/blog_5383588c0100o1oo.html 原来在新建一个项目文件夹后,再把Trunk.Bra ...

  5. [Usaco2008 Open]Roads Around The Farm分岔路口[水题]

    Description     约翰的N(1≤N≤1,000,000,000)只奶牛要出发去探索牧场四周的土地．她们将沿着一条路走,一直走到三岔路口(可以认为所有的路口都是这样的)．这时候,这一群奶牛 ...

  6. c# 服务程序重启自身

    由于工作有这样的需求,于是各种寻找,但是都不满意,偶然间想起一个方法 1.修改服务的Program.cs文件如下 static void Main(string[] args) { //LoadFil ...

  7. go语言 strconv.ParseInt 的例子

    golang strconv.ParseInt 是将字符串转换为数字的函数,功能灰常之强大,看的我口水直流. func ParseInt(s string, base int, bitSize int ...

  8. android Fragment 用法小结

    Fragment 是android 3.0引入的新API,是作为Activity的子模块,必须嵌入Activity才能使用. Activity 与 Fragment的关系: 一.依附性: 1. Fra ...

  9. Linux 环境进程间通信(六)：

    linux下进程间通信的几种主要手段: 管道(Pipe)及有名管道(named pipe):管道可用于具有亲缘关系进程间的通信,有名管道克服了管道没有名字的限制,因此,除具有管道所具有的功能外,它还允 ...

  10. [置顶] 学习JDK源码：可进一步优化的代码

    1.参数化类型的构造函数比较啰嗦 new HashMap<String, List<String>>() 如果你调用参数化类的构造函数,那么很不幸,你必须要指定类型参数,即便上 ...