书是好书,不过有些地方值得商榷。_JavaScript DOM编程艺术书评-查字典图书网
查字典图书网
当前位置: 查字典 > 图书网 > 编程 > JavaScript DOM编程艺术 > 书是好书,不过有些地方值得商榷。
JSCSS JavaScript DOM编程艺术 的书评 发表时间:2016-04-29 19:04:18

书是好书,不过有些地方值得商榷。

我买的第20次印刷版本,读了一半了,书不错,不过发现了一些可以商榷的地方,说出来大家讨论。

1,82页~84页,6.3.2,共享onload事件 这一小节里作者编写了一个addLoadEvent函数来给onload添加事件,实际上DOM标准方法里有EventTarget.addEventListener()方法可以用来把事件注册到对象上,它有两个必要的参数,第一个是省略了on的事件名称字符串,第二个参数是事件处理函数,用这个方法就可以完成监听事件的任务而不用再构造书中的函数。IE9及以上支持这个方法。
这算是当时没有的方法现在有了更好的实现吧,我是先看了15年才出的一本js基础入门书(javascript高级程序设计里推荐的那本,好厚)才了解到的。
https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener

2,139页~141页,编写displayCitations函数的第一个步骤,“1,查找你的元素”这个章节,这里书中第一段就说,“……我想把“文献来源链接”放在blockquote元素所包含的最后一个子元素节点之后,……”,这个表述就问题,按照书上的描述,“文献来源链接”节点应该被放到blockquote元素包含的最后一个子元素节点(本例中是一个段落p节点)之后,即和p是兄弟节点的关系,都属于blockquote元素的子节点,这是不正确的,实际上这个“文献来源链接”是p元素的子节点,从本例最后的实践也可以证明,最后superscript(即包含了“文献来源链接”的sup元素)节点是成为了p元素节点的子节点的。所以正确的表述应该是:我想把“文献来源链接”添加成为blockquote元素所包含的最后一个子元素节点的子元素节点节点(blockquote元素的孙节点?)

并且,后面的实现方法也有问题,直接贴上源代码吧,简单起见删掉了注释和验证可用性的部分:
相关的html部分:
<blockquote cite="http://www.w3.org/DOM/">
      <p>
A platform- and language-neutral interface that will allow programs
 and scripts to dynamically access and update the
 content, structure and style of documents.
      </p>
    </blockquote>
JS部分:
function displayCitations() {
  var quotes = document.getElementsByTagName("blockquote");
  for (var i=0; i<quotes.length; i++) {
    var url = quotes[i].getAttribute("cite");
    var quoteChildren = quotes[i].getElementsByTagName('*');
    var elem = quoteChildren[quoteChildren.length - 1];
    var link = document.createElement("a");
    var link_text = document.createTextNode("source");
    link.appendChild(link_text);
    link.setAttribute("href",url);
    var superscript = document.createElement("sup");
    superscript.appendChild(link);
    elem.appendChild(superscript);
  }
}
要想证明这中实现方法有问题,只需要在html部分的p元素中随机添加一个<em>元素或者别的行内元素,那么js构造的sup元素就会错位,成为这个行内元素的子节点,原因是sup元素被添加成为了blockquote所有后代元素节点中的最后一个元素节点的子节点,注意我这里说的后代元素节点,而非子元素节点,我想每个人都明白差别。

至于怎么修正这个问题,我的思路是,查找blockquote元素的lastChild子节点赋给变量elem,验证它的nodeType属性值,如果等于3,则elem被重新赋予elem的previousSibling(往前一个兄弟节点)。完整的代码如下,同样删去了注释和可用性验证内容:
function displayCitations() {
  var quotes = document.getElementsByTagName("blockquote");
  for (var i=0; i<quotes.length; i++) {
    var url = quotes[i].getAttribute("cite");
        var elem = quotes[i].lastChild;
        if(elem.nodeType == 3) elem=elem.previousSibling;
    var link = document.createElement("a");
    var link_text = document.createTextNode("source");
    link.appendChild(link_text);
    link.setAttribute("href",url);
    var superscript = document.createElement("sup");
    superscript.appendChild(link);
    elem.appendChild(superscript);
  }
}

先写这些,读完了再补充~
ps,尼玛我突然想到要是作者在书后修正了这个不那么完善的部分……

展开全文


推荐文章

猜你喜欢

附近的人在看

推荐阅读

拓展阅读

对“书是好书,不过有些地方值得商榷。”的回应

宋晓华 2016-05-25 16:07:10

书中主要讲的就是如何在保持现有方法的基础上对之前的浏览器和技术进行兼容所以没有介绍addEventListener也是很正常的,另外翻译和语法错误确实有,不过还好,你看国内的翻译书籍多了会习惯的!