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

 2016-06-05 21:29

我们在编写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. 整站练习(附源文件)
作者头像

作者:紫铜炉

自由博主,网页设计师。我关注科技产品和个人博客发展,注重用户体验和界面优化。

 发表评论: