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);
上一篇:JavaScript DOM编程艺术读书笔记(三)


下一篇:JavaScript DOM编程艺术 - 读书笔记1-3章