《JavaScript DOM 编程艺术》10:应用最佳实践

这是《JavaScript学徒》系列的第十课,今天会进入《JavaScript DOM 编程艺术》第6章,将上一章的最佳实践应用到图片库例子中。

本文同步发表于我的个人网站:

《JavaScript DOM 编程艺术》10:应用最佳实践 - 程式学徒 ZackLive​zacklive.com

教学视频连结

YouTube

B站

优酷

能否平穏退化?

  • Ballon
  • 以这段程式为例,href中我们不使用JavaScript伪协议(javascript:)或者#号,就是为了即使JavaScript不可用,程式仍能打开图片。

    JavaScript是否与HTML标记分离?

    在上面那段程式中,onclick的部分便是JavaScript,它跟HTML混在一起了。这是可以改进的地方。

    首先,将onclick从各连结移除,并为ul加入id = imagegallery。再加入以下函数:

    function prepareGallery() {  if (!document.getElementsByTagName ||      !document.getElementById ||      !document.getElementById("imagegallery")) return false;  var gallery = document.getElementById("imagegallery");  var links = gallery.getElementsByTagName("a");  for ( var i=0; i

    这个函数先检查我们要用的方法,再透过刚加入的id取得图片库中所有连结,最后为每一条连结绑定onclick事件,并赋与它一个函数来执行showPic及返回false。

    prepareGallery函数要在网页载入后马上执行,可以使用之前提到的window.onload,但我们可能有多个需要在载入后马上执行的函数,因此,我们需要以下函数:

    function addLoadEvent(func) {  var oldonload = window.onload;  if (typeof window.onload != 'function') {    window.onload = func;  } else {    window.onload = function() {      oldonload();      func();    }  }}

    这个函数先将旧的window.onload存到一个变量oldonload中,接著判断旧window.onload是否已经是函数,如果不是,代表里面没有任何函数,可以将新函数func直接赋与;如果是,则代表里面存在其他函数,那就将旧函数oldonload和新函数func一起放到一个新的函数里再赋与window.onload。

    我们可以重复使用这个函数,将多个函数放入window.onload:

    addLoadEvent(prepareGallery);

    至此,我们成功将JavaScript和HTML分离。

    最后,我们也应为showPic函数加上检查:

    function showPic(whichpic) {  if (!document.getElementById("placeholder")) return false;  var source = whichpic.getAttribute("href");  var placeholder = document.getElementById("placeholder");  placeholder.setAttribute("src", source);  var text = whichpic.getAttribute("title");  if (description = document.getElementById("description")) description.firstChild.nodeValue = text;  return true;}

    在第二个if的条件当中,我直接进行赋值,这是因为对if来讲,赋值的结果正是被赋值的值。

    至于最后为什么要返回true,这是要告诉prepareGallery,showPic没发生任何错误。前面的prepareGallery,不管showPic是否成功都会返回false,也就是取消连结的跳转动作。这样,万一showPic出错,连结就会失效,不能平稳退化。因此,onclick的函数应改为:

    return !showPic(this);

    这代表showPic成功(showPic返回true),我们应取消连结跳转,即prepareGallery要返回false,与showPic相反;反之,若showPic出错并返回false,prepareGallery则应返回true,让连结进行跳转。

    三元操作符(ternary operator)

    showPic当中还可以加入更多的检查:

    var text = whichpic.getAttribute("title") ? whichpic.getAttribute("title") : "";

    这里的问号和冒号组成三元操作符,意思是,若问号前的条件成立,取冒号前的值;若不成立,则取冒号后的值。这里便是,若存在title属性,则取该属性为text的值;若不存在,则取空字符串为text的值。

    检查placeholder是否为图片:

    if (placeholder.nodeName != "IMG") return false;

    nodeName属性永远是大写字母。

    这此检查可按个人喜好加入。

    键盘事件

    按下键盘上任一个出键都会触发onkeypress事件,如果我们也想让用户按下键盘任意键来显示图片,可以加入:

    links[i].onclick = function() {  return !showPic(this);}links[i].onkeypress = links[i].onclick;

    但onkeypress会使所有键失去原本的功能,如Tab键,不再能够跳到下一个元素;同时,onclick其实也会被回车键触发,因此,如非必要,不应使用onkeypress。

    加入CSS

    在index.html的head中加入:

    接着新增style.css,并加入:

    body {  color: #333;  background-color: #ccc;  margin: 1em 10%;}h1 {  color: #333;  background-color: transparent;}a {  color: #c60;  background-color: transparent;  font-weight: bold;  text-decoration: none;}ul {  padding: 0;}li {  float: left;  padding: 1em;  list-style: none;}#imagegallery {  list-style: none;}#imagegallery li {  display: inline;}#imagegallery li a img {  border: 0;}

    DOM Core和HTML-DOM

    DOM Core:任何程式语言都可以使用,不限JavaScript或网页,方法包括

    getElementById

    getElementsByTagName

    getAttribute

    setAttribute

    HTML-DOM:只适用于web文档,较简短:

    DOM Core写法:

    element.getAttribute("src")placeholder.setAttribute("src", source);

    HTMl-DOM写法:

    element.srcplaceholder.src = source

    建议使用DOM Core方法,JavaScript目前已不只用于网页范筹,习惯同一种写法比较有利。

    你可能感兴趣的:(《JavaScript DOM 编程艺术》10:应用最佳实践)