我买的第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,尼玛我突然想到要是作者在书后修正了这个不那么完善的部分……