首页 > 程序开发 > web前端 > JavaScript >

JavaScriptDOM编程艺术

2017-02-25

元旦假期后的第一周,因为看到一些前端JS前辈的一些经验之谈,深有感触,随之买了《JavaScript DOM编程艺术》(第2版)和《JavaScript高级程序设计》这两本书。在阅读完第一本书——《JavaScript DOM编程艺术》之后,有一些自己的感悟和理解

元旦假期后的第一周,因为看到一些前端JS前辈的一些经验之谈,深有感触,随之买了《JavaScript DOM编程艺术》(第2版)和《JavaScript高级程序设计》这两本书。在阅读完第一本书——《JavaScript DOM编程艺术》之后,有一些自己的感悟和理解,顺带把书中的一些常用的原生JS所写的方法罗列出来,以供参考和使用。

一、核心思想原则和编程习惯

从开始到最后阅读完,整本书在设计网页功能的时候,一直强调和贯彻一个中心思想——渐进增强,平稳退化。

渐进增强:就是用额外的信息层去包裹原始数据,即使去掉这些额外的信息层,原始数据也能照常显示,不会因此丢失。比如:为一段文字增加CSS样式。这段文字就是原始数据,CSS样式就是额外的信息层。

平稳退化:通俗的讲,即使无法使用JavaScript,所设计的网页功能也得能完成最基本的操作。

因此,在基本思想上,二者是一致的,按照渐进增强的方式创建出的网页,几乎都符合平稳退化原则。

编程习惯:书中提到的一些编程习惯,都很实用,在此我仅罗列其中几点仅供参考。具体如下:

1、单双引号使用

在选择使用单双引号时,整个脚本中尽可能保持统一。比如:定义字符串变量时,要么统一使用单引号,要么统一使用双引号。

2、关联数组使用 (不推荐)

关联数组:数组中的元素下标不是整数数字。比如:

     var lemon = [];

     lemon['name'] = 'John';

     lemon['year'] = 1987;

     lemon['living'] = true;

使用关联数组不是一个好习惯,不推荐。

3、兼容性问题

只要严格遵循“第一级DOM”,就可以避免与兼容性相关的任何问题。

4、关于文档中的标记

尽量减少文档中的标记数量,过多不必要的元素只会增加DOM树的规模,进而增加其查找特定元素的时间。

5、JS行为依赖

当使用JS给网页添加行为时,不应让JS代码对这个网页的结构有任何的依赖。

6、质疑态度

在写JS脚本时,要保持对一切质疑的态度。

仅罗列以上几点,其他的一些好习惯都可以在书中都能找到,同时可以作为对自己编程时的一个指导,有利于养成好的习惯

二、小知识点扫盲

对象:是自包含的数据集合,包含在对象里的数据可以通过两种形式来访问:属性和方法。对象分为以下三种:

宿主对象:浏览器提供,最常见的有document、window 等

内建对象:内建在JavaScript语言中,常见的有Date、Math、Array 等

用户自定义对象:用户自己创建的对象

关于节点

节点分为:元素节点、属性节点、文本节点其NodeType的值分别对应为: 1、2、3

关于设计

在设计时,关于是否用纯CSS还是利用DOM技术设置样式来解决问题,取决以下因素:

1、这个问题最简单的解决方案是什么?

2、哪种能得到更多浏览器的支持?

一般规则:改变元素的呈现效果使用CSS,改变元素的行为使用DOM。

三、常用的原生JS方法

1、为 window 对象的 onload 事件增加函数

     function addLoadEvent (func) {
         var oldLoad = window.onLoad;
         if ( typeof window.onload != 'function' ){
             window.onload = func;
         }else{
             window.onload = function () {
                 oldonLoad();
                 func();
             } 
         }
     }

2、insertAfter 函数

    function inserAfter (newElement, targetElement){
        var parent = targetElement.parentNode;
        if(parent.lastChild == targetElement){
            parent.appendChild(newElement);
        }else{
            parent.insertBefore(newElement, targetElement.nextSibling);
        }
    }

*暂时只列出以上两个,其他的一些原生JS方法,在书本中都有。

总之,以上是我个人看完整本书后,对自己某些不足之处所做的一些总结。如果你是刚接触DOM技术,如果你想进一步提升对DOM技术的理解和认知,那么《JavaScript DOM 编程艺术》(第2版)是一个不错的选择,推荐学习和使用。

* 如果你有什么好的建议和意见,十分欢迎与我联系和讨论。

相关文章
最新文章
热点推荐