JavaScript DOM编程艺术读书笔记(二)

第五章 最佳实践

　　平稳退化（graceful degradation)：如果正确使用了JavaScript脚本，可以让访问者在他们的浏览器不支持JavaScript的情况下仍能顺利地浏览你网站。虽然某些功能无法使用，但是最基本的操作仍能顺利完成

window.open(url,name,features);  打开一个新的窗口  这个函数是使用BOM的好案例

url 新窗口的链接
name 新窗口的名字 代码里边可以通过这个name和新窗口通信
features 新窗口的各种属性 比如尺寸 或者被启用或者禁用的各种浏览功能(工具条,菜单条,初始位置等)

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

　　"javascript:"伪协议调用函数，支持伪协议的浏览器有效，老的浏览器可能失败，比如：

　　<a href = "javascript:popUp("http://www.example.com");">Example</a>   但是最好不要这么做，无法做到平稳退化！！！

　　<a href = "#" onclick = popUp("http://www.example.com"); return false;>Example</a>  同样无法做到平稳退化，如果用户禁用了javascript功能，这个链接将毫无用处。

　　我们可以修改下 <a href = "http://www.example.com" onclick = popUp("http://www.example.com"); return false;>Example</a>

　　精简下变成<a href = "http://www.example.com" onclick = popUp(this.getAttribute("href")); return false;>Example</a>

　　当前链接的href还可以进一步简写为this.href

　　渐进加强：用额外的信息层去包裹原始数据；使CSS代码负责提供关于“表示”的信息，JavaScript代码负责提供关于“行为”的信息。按这种原则出来的网页，都符合"平稳退化"原则

　　性能考虑  尽量少访问DOM和尽量减少标记, 不管什么时候只要是查询DOM中的某些元素，浏览器就会搜索整个DOM树，从中查找可能匹配的元素,比如:

if(document.getElementsByTagName("a").length > 0)
{
    var links   = document.getElementsByTagName("a");

    for(var i= 0; i < links.length; i++ )
   {

   }

}
搜索DOM了两次 可以改为以下写法
var links = document.getElementsByTagName("a");
if(links.length > 0) 
{
 　
　　for(var i= 0; i < links.length; i++ ) { } 
}
功能一样 但是搜索次数由两次变为了一次

　　压缩脚本：指的是把脚本文件中的不必要的字节，比如空格和注释，统统删除，从而达到“压缩”文件的目的；多数情况下应该有两个版本，一个是工作副本，可以修改代码并添加注释，另一个是精简副本，用于放在站点上，通常在精简副本的文件名上加上min字样。 这样做可以加快加载速度。合并和放置脚本也可以加快加载速度
　　代表性的代码压缩工具：JSMin；YUI Compressor；Closure Compiler；

本章JS代码:

            window.onload = function () {　　　　　　　　　　　　　　　　//确保HTML文档全部加载完全后执行

　　　　　　　　　　if(!document.getElementsByTagName) return false;　　　　//注意，getElementsByTagName没有圆括号!!!
                var links = document.getElementsByTagName("a");

                if(links.length > 0)
                {
                    for(var i = 0; i < links.length; i++)
                    {
                        if(links[i].getAttribute("class") == "popUp")
                        {
                            links[i].onclick = function () {　　　　　　　　//将一个事件(onclick)绑定到特定的元素上
                                popUp("http://www.example.com/");

                                return false;
                            }

                        }
                    }
                }

            }

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

第六章 图片库改进

　　网页的行为层(javascript)和结构层(HTML)理论上最好分开。

　　

　　共享onload事件：　　

加入有两个函数 firstFunction和secondFunction需要在页面加载时执行，

window.onload = firstFunction;
window.onload = secondFunction;
这样做的话实际上只有后一个可以执行.

window.onload = function()
{
　　firstFunction();
　　secondFunction();
}
这样做创建了一个匿名函数,在需要绑定的函数不是很多的场合 的确很实用.

弹性最佳解决方案,使用addLoadEvent函数,这个方案需要额外添加一些代码,但一旦有了这些代码,绑定函数到onload就很方便

function addLoadEvent(func)
{
　　var oldonload = window.onload;　　//将现有的window.onload处理函数保存到oldonload

　　if(typeof oldonload != 'function')　　//如果现有的window.onload上没有处理函数，将func添加给他
　　{
　　　　window.onload = func;
　　}
　　else{
　　　　window.onload function()
　　　　{
　　　　　　oldload();
　　　　　　func();
　　　　}
　　}
}

　　nodeName属性返回的总是大写字母，即使元素在HTML文档里是小写。

　　 键盘访问onkeypress事件，若果想让这个达到和onclick同样的效果，可以这么写 links[i].onkeypress = links[i].onclick，但是不建议使用，因为一旦绑定了onkeypress的处理函数返回的是false，使用键盘的用户永远无法离开当前链接。事实上使用键盘TAB键移动按下链接，也会触发onclick事件，所以用onclick已经可以满足需要了。

本章JS代码 注意点就是"平稳退化"  以及js和html分离

function showPic(whichPic) {

    if(!document.getElementById("placeholder")) return true;

    var source = whichPic.getAttribute("href");
    var placeholder = document.getElementById("placeholder");
    placeholder.setAttribute("src",source);

    if (!document.getElementById("description")) return false;
    if (whichPic.getAttribute("title")) {
        var text = whichPic.getAttribute("title");　　//whcihPic一开始写成了whichpic!!!
    } else {
        var text = "";
    }
    var description = document.getElementById("description");
    if(description.firstChild.nodeType == 3)
        description.firstChild.nodeValue = text;

    return false;
}

/*将相关操作关联到onclick事件上*/
function prepareGallery() {

    if(!document.getElementById || !document.getElementsByTagName)  return false;

    if(!document.getElementById("imagegallery")) return false;

    var links = document.getElementById("imagegallery").getElementsByTagName("a");

    for(var i = 0; i < links.length; i++)
    {
        links[i].onclick = function() {
            return showPic(this);
        }
    }

}

function addLoadEvent(func) {
    var oldonload = window.onload;

    if(typeof window.onload != 'function') {
        window.onload = func;
    }
else
    {
        window.onload = function () {
            oldonload();
            func();
        }
    }
}
/*在网页加载时执行*/
addLoadEvent(prepareGallery);