javascript Dom编程艺术读书笔记之最佳实践

---

1.平稳退化

正确使用javascript脚本，让访问者在不支持javascript情况下，仍然可以顺利浏览你的网站

2.”javascript:”伪协议

通过一个链接调用伪协议

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

3.内嵌事件处理函数

<a href="#" onclick="popUp('http://example.com/'); return false;">Example</a>

、#是仅供内部文档使用的链接记号，创建空链接

4.平稳退化的重要性

搜索机器人浏览网页，一般会禁用图片和javascript，如果你的网站不支持平稳退化，会在搜索引擎的排名上大打折扣
如何做到平稳退化，在链接里把href的值设置为真实的链接

<a href="http://example.com/" onclick="popUp(this.href); return false;">Example</a>

5.渐进增强

用一些额外的信息去包裹原始数据。按照此原则设计的网页基本都符合“平稳退化”原则
css把代码从文本文档中分离出来，这个结论同样适用于javascript

6.分离javascript

把javascript调用代码行文与HTML文档分开,把事件添加在特定的ID，class中
当这个链接被点击时，将调用popUp()函数

<a href="http://www.example.com" class="popUp">Example</a>

具体步骤
- 把文档链接放在一个数组里
- 遍历数组
- 如果某个链接class属性值等于popUp，则点击链接时调用该函数
A.把链接的href属性值传入函数
B.取消点击的默认行为

var links = document.getElementByTagName("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;
        }
    }
}

javascript加载时间不能确定，必须使代码在文档加载时立即执行。文档加载完成时将触发一个事件，这个事件有自己的事件处理函数。
document对象是window对象的一个属性，当window对象触发onload事件，document对象已经存在。
将自己的javascript打包在prepareLinks函数，将函数添加在onload事件中，DOM可以正常工作了

window。onload = prepareLinks；
function prepareLinks{
    var links = document.getElementByTagName("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函数保存到javascript文件中

function popUp(winURL){
    window.open(winURL, "popUp", "width=320, height=480");
}

7.对象检测

检测对浏览器的支持程度
把方法打包在if里，通过条件表达式的求值结果，true or false来决定采取怎样的行动
用if会多花括号，可以使用逻辑非操作符。

if (!document.getElementById){
    ruturn false;
}

可以简写成if (!document.getElementById) ruturn false;
在上面例子中插入一条if语句，检测是否支持该方法

window.onload = prepareLinks；
function prepareLinks{
    if (!document.getElementBuTagName) return false;
    var links = document.getElementByTagName("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;
            }
        }
    }
}

8.浏览器嗅探技术

保证向后兼容性的另一种方法。
”浏览器嗅探”指通过提取浏览器供应商提供的信息来解决向后兼容性问题
有很大的技术风险
- 浏览器会撒谎
- 为适应不同浏览器，脚本会变得复杂

此技术正在被对象检测替代

9.性能考虑

1. 尽量少访问DOM，尽量减少标记

if (document.getElementByTagName("a").lenth > 0){
    var links = document.getElementByTagName("a");
    for(var i=0; i<links.length; i++){
        //对每个链接处理
   }
}

上述代码性能不高，浪费了一次搜索

var links = document.getElementByTagName("a");
if (links.length > 0){
        for(var i=0; i<links.length; i++){
        //对每个链接处理
}

这样搜索DOM的次数降低为1次
2. 合并和放置脚本
推荐把多个javascript文件放到一个中
脚本在标记中的位置也对初次加载时间有很大的影响。
按照渐进增强和分离javascript的观点，把所有script标签放在文档末尾，/body之前，页面更快。

1. 压缩脚本
   指把脚本中的不必要的字节，如空格和注释，统统删除。与很多工具可以替代你做这种事
   你应该有两个版本，一个工作副本，一个精简副本，精简版本应有min字样以便区分
   推荐有代表性的代码压缩工具
   
   • Douglas Crockford的JSMin (http://www.crockford.com/javascript/jsmin.js)
   • 雅虎的YUI Compressor (http://developer.yahoo.com/yui/compressor)
   • 谷歌的Closure Compiler (http://closure-compiler.appspot.com/home)