《JavaScriptDOM编程艺术》读后感8:实战中的global.js

 2016-07-03 16:36

说实在的,《JavaScriptDOM编程艺术》这本书写的东西都还是比较规范的。在第12章“综合示例”中,作者在制作web过程中遵循了:结构层-样式层-行为层的顺序原理。首先搭建了网站的文件顺序,然后书写了网站的style,最后再写javaScript。

在式样文件中,虽然示例网站不大,但作者还是采用了分式样的写法,在主体(basic.css)文件中分别引入了架构、颜色、排版三个不同的css文件。这让我们这些外行有点尴尬。

@import url(layout.css);
@import url(color.css);
@import url(typography.css);

当然,上面都是题外话,今天的主题是实战中的global.js文件。这个文件是所有JS文件的主体,作者将一些重要的函数放在里面以便在其他方便调用。其实也可以里面,这几个函数是非常基础的基层函数,一个JavaScript是否简洁,有绝大部分的东西是借助这个基层函数来完成的。

下面,我们来看看这个函数构造吧:

function addLoadEvent(func){
    var oldonload = window.onload;
    if (typeof window.onload != 'function') {
        window.onload=func;
    }else{
        window.onload=function () {
            oldonload();
            func();
        }
    }
}
function insertAfter(newElement,targetElement) {
    var parent=targetElement.parentNode;
    if (parent.lastchild==targetElement) {
        parent.appendChild(newElement);
    }else{
        parent.insertBefore(newElement,targetElement.nextSibling);
    }
}
function addClass(element,value) {
    if (!element.className) {
        element.className=value;
    }else{
        newClassName=element.className;
        newClassName+=' ';
        newClassName+=value;
        element.className=newClassName;
    }
}
  • addLoadEvent函数:加载函数。我们在运行JS函数命令时通常需要网页全部加载完成,而后一个个逐步运行。这个函数就起到简化命令的作用;

  • insertAfter函数:在XX元素后插入相关元素。js自带了一个insertBefore()函数,左右是在相关元素前插入一个元素,然后却没有一个对应的在后面插入的。这个函数就起到对应在后面插入元素的作用;

  • addClass函数:增加式样函数。在js程序中,许多东西是通过改变div的式样来完成的。这个函数就可以在相关元素上插入一个式样,并保留原式样。

这三个函数大家可以保留下,我相信大家在经过的使用中也会常常用到的。

《JavaScriptDOM编程艺术》读后感:

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

作者:紫铜炉

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

 发表评论: