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:"伪协议调用函数,支持伪协议的浏览器有效,老的浏览器可能失败,比如:

  1. <a href = "javascript:popUp("http://www.example.com");">Example</a>   但是最好不要这么做,无法做到平稳退化!!!
  2. <a href = "#" onclick = popUp("http://www.example.com"); return false;>Example</a>  同样无法做到平稳退化,如果用户禁用了javascript功能,这个链接将毫无用处。
  3. 我们可以修改下 <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");
             }
#笔记##读书笔记#
全部评论

相关推荐

不愿透露姓名的神秘牛友
07-07 12:04
毕业生招你惹你了,问一个发薪日来一句别看网上乱七八糟的你看哪个工作没有固定发薪日扭头就取消了面试就问了一句公司都是这个态度吗还搞上人身攻击了...
程序员小白条:呃呃呃,都还没面试,我都不会问这么细,何况通不通过,去不去都另说,你没实力和学历的话,在外面就这样,说实话没直接已读不回就不错了,浪费时间基本上
点赞 评论 收藏
分享
叶扰云倾:进度更新,现在阿里云面完3面了,感觉3面答得还行,基本都答上了,自己熟悉的地方也说的比较细致,但感觉面试官有点心不在焉不知道是不是不想要我了,求阿里收留,我直接秒到岗当阿里孝子,学校那边的房子都退租了,下学期都不回学校,全职猛猛实习半年。这种条件还不诱人吗难道 然后现在约到了字节的一面和淘天的复活赛,外加猿辅导。华为笔试完没动静。 美团那边之前投了个base广州的,把我流程卡麻了,应该是不怎么招人,我直接简历挂了,现在进了一个正常的后端流程,还在筛选,不知道还有没有hc。
点赞 评论 收藏
分享
码农索隆:单休一个月少休息4天,一年就是48天,平时节假日,别人3天假期,单休的两天
点赞 评论 收藏
分享
评论
点赞
收藏
分享

创作者周榜

更多
牛客网
牛客网在线编程
牛客网题解
牛客企业服务