JavascriptDom编程艺术学习笔记三

来源：互联网发布：fpga数据采集系统编辑：程序博客网时间：2024/05/16 14:07

本篇文章要实现以下几个功能点：

1.平稳退化：在没有JS的情况下也能正常工作
2.分离JS和HTML
3.向后兼容性：新老版本的浏览器都适用
4.性能优化

1. 平稳退化功能
要保证JS代码适用于各个版本、各种类型的浏览器，甚至在禁用JS代码的时候，依然能正常运行。

2.”javascript:”伪协议
这是一种非标准化的协议，能让我们通过一个链接来调用JS函数。
“真”协议用来在因特网上的计算机之间传输数据包，如HTTP协议、FTP协议等。

<a href="javascript:popUp('http://www.baidu.com/');">Examples</a>

但是这种做法强烈不推荐！！！

3.在某些浏览器里，“#”链接指向当前文档的开头。

4.搜索引擎中的爬虫程序无法理解JS代码，所以如果网页不能平稳退化，那你的网站排名会受很大影响。
遵循“平稳退化”的思想，上面的代码可以改为下面的样式：

<a href="http://www.baidu.com/" onclick="popUp(this.href);return false;">Examples</a>

上面这种实现方法，在禁用JS时，链接也是可以打开的，只是这个链接在功能上打了点折扣。

5.分离JS
写JS文件时的一条原则：如果想用JavaScript给某个网页添加一些行为，就不应该让JS代码对这个网页的结构有任何依赖。

对象检测
绑定事件到某个元素节点element.event=action

<a href="images/book_img1.jpg" title="Fireworks" onclick="showpic(this);return false;">Fireworks</a>//下面这种实现方法和上述方法，实现的效果相同//去除超链接中的onclick方法<a href="images/book_img1.jpg" title="Fireworks">Fireworks</a>//用getElementById()等方法把事件绑定到某个特定元素上var links = document.getElementsByTagName('a');for( var i=0; i<links.length; i++) {    if(links[i].getAttribute('class') == 'popup') {        links[i].onclick = function() {            showpic(this);            return false;   //阻止超链接的默认行为        }    }}

6.对象检测
不推荐使用浏览器嗅探方法，推荐使用对象检测法。

//检测当前浏览器是否提供某个方法，不提供，则直接退出该函数if(!getElementById) {    return false;}

7.共享onload事件

//仅加载一个函数window.onload = firstFunction;//加载多个函数window.onload = function() {    fistFunction();    secFunction();}//当代码越来越复杂时，该方法简单有效function addLoadEvent(func) {    var oldonload = window.onload;    if (typeof window.onload != "function") {        window.onload = func;    } else {        window.onload = function () {            oldonload();            func();        }    }}addLoadEvent(fistFunction);addLoadEvent(secFunction);addLoadEvent(thirdFunction);

8.其他注意事项
对showpic()方法中，涉及的对象进行检测

//图片的id属性是否存在if (!document.getElementById('placeholder')) {    return false;}

即便文字节点不存在，也不影响图片的显示：添加一个对象检测就好啦！

//获取description元素节点if (document.getElementById('description')) {    var description = document.getElementById('description');    //设置description元素节点内包含的文本节点为超链接的title    var text = whichpic.getAttribute('title');    description.childNodes[0].nodeValue = text;}

当超链接title属性不存在时，该怎么办呢？

if (document.getElementById('description')) {    var description = document.getElementById('description');    //检测title属性是否存在，不存在则设为空字符串    if (whichpic.getAttribute('title')) {        var text = whichpic.getAttribute('title');    } else {        var text = '';    }    description.childNodes[0].nodeValue = text;}

9.CSS-DOM

可以通过js对DOM进行操作，比如a:hover等伪类方法，可以用onmouseover()方法代替。
因为绝大多数的现代浏览器，虽然对CSS伪类的支持很不完整，但对DOM却都有良好的支持。

不论何时，如果你可以发现对某个函数进行抽象，都应该马上去做。

10.性能优化方法

1.尽量减少访问DOM
2.尽量减少文档中的标记数量
3.有多个.js文件时，合并到一个脚本文件中
4.对.js文件的加载放在文档末尾，</body>前面。
因为位于<head>块中的脚本会导致浏览器无法并行加载其他文件（如图像或其他脚本）。一般来说，根据HTTP规范，浏览器每次从同一个域名中最多只能同时下载两个文件。而在下载脚本期间，浏览器不会下载其他任何文件，即使是来自不同域名的文件也不会下载，所有其他资源都要等脚本加载完毕后才加载。

5.利用工具，压缩脚本。如JSMin, YUI Compressor, Closure Compiler, Webpack等。

阅读全文

0 0