JS编程艺术笔记(2)-编写JS代码的几点建议

//几点建议：
//1、平稳退化：尽量让我的JS代码不再依赖于那些没有保证的假设，可以引入许多测试与检查
//2、可访问性：没有使用onkeypress事件处理函数
//3、把事件处理函数移除文档：使JS代码不再依赖html文档的内容和结构

//检查placeholder、description等元素属否存在
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");
  } else {
    var text = "";
  }
  var description = document.getElementById("description");
  if (description.firstChild.nodeType == 3) {
    description.firstChild.nodeValue = text;
  }
  return false;
}

//检查当前浏览器是否理解getElementByTagName、getElementById
function prepareGallery() {
  if (!document.getElementsByTagName) return false;
  if (!document.getElementById) return false;
  if (!document.getElementById("imagegallery")) return false;
  var gallery = document.getElementById("imagegallery");
  var links = gallery.getElementsByTagName("a");
  for ( var i=0; i < links.length; i++) {
	  //这里没有依赖html文档,前端<a/>标签加onclick事件
    links[i].onclick = function() {
      return showPic(this);
	}
    //onkeypress包含了tab建的切换，所以当按住tab键时，tab键切换功能会出现问题
	//事实上onclick已经包含了 “在链接位置按回车” 的情形
    //links[i].onkeypress = links[i].onclick;
  }
}

//把那些在页面加载完毕执行时，执行的函数创建为一个队列
//例：addLoadEvent(firstFunction);addLoadEvent(secondFunction)
function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      oldonload();
      func();
    }
  }
}

//页面加载的时候执行这个函数
addLoadEvent(prepareGallery);