《JavaScriptDOM编程艺术》读后感5：培养function的逻辑思维

《JavaScriptDOM编程艺术》读后感5：培养function的逻辑思维

 2016-06-05 21:29    网页设计   标签：DOM   940    发表评论

我们在编写JavaScriptDOM的时候会常常需要书写很多的函数（function）。每个函数都有它的不同功能，但函数之间也有很多相似之处。

在学习书本第8章中，我们通过编写displayAbbreviations，displayCiations和displayAcceskeys函数后发现它们都有这样一个共同点：从创建一个有特点元素构成的节点集合开始，用一个循环却遍历这个节点集合，并在每次循环里创建一些标记，最后把创建的标记插入到文档里。

function function_name() {
    if (!document.getElementsByTagName||!document.createElement||!document.createTextNode) return false;
    var some=document.getElementsByTagName("h3");
    var akeys=new Array();
    for (var i = some.length - 1; i >= 0; i--) {
	    ...
	    var key = ...;
	    var text = ...;
	    akeys[key]=text;
    }
    for(key in text){
	    ...
    }
    document.body.appendChild(...);
}

详细逻辑如下：

1. 先做一个关联，要对html里面的什么元素做动作，就通过相应的方法来获取它：获取ID，获取Tag名称，获取class名称等；

2. 如果是数组，那么就开始遍历它，把获取的数组做成一一对应；

3. 然后遍历这个对应好的数组，当你有值时候，创建一些需要显示的玩意，比如：<li>,<p>等；

这个逻辑思路贯穿了整个第8章的应用，大家有兴趣的话，可以按照书中说的自己练习下，也可以发挥想象做一些新的尝试。

最后书中也提到了一点：JavaScript脚本只应该用来充实文档的内容，要避免使用DOM技术来创建核心内容。

《JavaScriptDOM编程艺术》读后感：

1. 初次接触JavaScriptDOM的感觉
2. 第六章，一个常规事件的逻辑
3. 3个方法来改变DOM结构树
4. 在元素前后插入元素
5. 培养function的逻辑思维
6. 细说下getNextElement函数
7. 动画方法moveElement()
8. 实战中的global.js
9. 整站练习(附源文件)