阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      JavaScript 封装DOM库

      #第三次封装DOM库 这个是我第三次封装DOM库了;

      第一次封装的DOM库

      第二次封装的DOM库

      前面两次都封装的不满意;这次改进之前我还是感觉很满意的。但是封装好以后,我又感觉还是该继续升级了!主要是没有做好报错处理,

      参考(兼容性处理、错误处理与调试

      打算把这个做底层方法来用的,下次升级,打算直接在控制台输出什么方法,因为什么原因错误的;如果test方法的传参应该是数组,结果传了字符串;那么后台报出test的参数错误的了,如下

      throw new Error(“test():arguments must array”);//手动抛出错误信息介绍,调用这个函数的时候,如果错了,一下就知道问题了;

      控制台上显示:test():arguments must array,搭眼一看就知道了,增加开发效率;

      后期打算把封装的好的DON库,动画库、事件库、AJAX库,重构一下;组成一个基础类库,然后再这个基础库上,再封一个brostool的模块化处理的方法库;按照W3C写的代码为HTML基础;

      假设要做选项卡的效果;导入brostool.js文件后,获取选项卡的ID;然后撸一串for循环,绑定个事件;就完事了;

      实际需要代码数量如下;

      1. for(var i= 0,len=oLi.length;i<len;i++){
      2. this.index=i;
        
      3. oLi[i].onmouseover=brosTools.changeTab;
        
      4. }

      封装常用的效果后,加起班来,根本停不下来!

      当然,这种思路的实现,我已经做出来了,只是还没有正式封装;

      源码和DEMO可以点这里:模块化开发的DEMO演示


      这次封的DOM思路和以前一样,封在Tool.prototype上的;在tool里装了一个属性;

      this.flag = “getElementsByClassName” in document;

      这个在IE678是不兼容的;如果这个是true说明是标准浏览器;如果是false,说明是IE大爷;

      下面是封装的风格;

      var Tool = function () {//构造函数模式;用的时候需要new一下;
      
          this.flag = "getElementsByClassName" in document;
          //getElementsByClassName 在IE678中是不存在的。用这个来判断是不是低版本的IE浏览器;
          //每次只需要判断this.flag是否存在就可以了;如果存在就是标准浏览器,如果不存在就是IE;
      };
      Tool.prototype = {//方法是定义在Tool的prototype上的;
          constructor: Tool,//重写prototype后,prototype的constructor已经不是原来的Tool了;需要手动给他强制写会到Tool上去;
          getIndex: function () {},//简单的备注说明;
          toJSON:function(){},//简单的备注说明;
          likeArray:function(){}//简单的备注说明;
      }
      
      封装的函数兼容到IE6;
      

      受jQuery的链式写法的启发,我用了函数调用的封装好的方法;好比获取上一个哥哥节点是getPre;当封装所有哥哥们的时候,就借用封号好的getPre;DOM库内的getPres之类的封装就是这种思想封的;

      在作用域套作用域的时候;子作用域内尽量不返回引用数据类型,因为闭包内的值,是另外一个子闭包的返回值的时候,如果子闭包的返回值是字面量,那么浏览器会在空闲的时候,把作用域销毁;而如果返回值的是一个引用数据类型的值,那么闭包是不会销毁的,在性能优化上,不好!

      1、如何调用

      tool.js 使用的是构造函数模式开发的类库,使用的时候需要创建一个实例,例如:

      var t=new Tool; t.getElementsByClassName(“context”,“className”);

      2、提供了那些的方法

      (1)getElementsByClassName

      作用:在指定的上下文中根据元素的类名(class样式名)获取对应的元素,旨在解决getElementsByClassName在IE6~8下不兼容;

      参数:[className] 样式名称–>“string”;

      [context] 上下文

      返回值:我们获取的元素集合–>“Array”

      (2)setGroupCss

      t.setGroupCss(oDiv,{left:100, top:20,opacity:0.3});

      封装的方法预览

      • getElementsByClassName :处理低版本IE的兼容性问题;

      • toJSON :JSON格式的字符串转成JSON对象;

      • isType :判断数据类型

      • listToArray :类数组转为数组;(arguments)

      • 下面是设置DOM的方法

      • getEleChildren :获取元素下面的指定的标签名的元素集合;

      • getFirst :第一个元素节点

      • getLast :最后一个元素节点

      • getPre :相邻哥哥的元素节点

      • getPres:相邻哥哥们的元素节点

      • getNext:相邻弟弟的元素节点

      • getNexts:相邻弟弟们的元素节点

      • getSibling:上一个哥哥和下一个弟弟

      • getSiblings:所有的兄弟们(除了自己)

      • getIndex:获取索引值

      • insertAfter:在指定目标元素oldEle后面插入新元素newEle;如果没有传指定元素,则直接添加在后面;这个方法好像没啥实际意义;可以通过insertBefore变相实现;

      • prependChild :把一个元素节点添加为parentEle的第一个子节点;

      • innerHTML :获取元素的innerHTML;

      • text :获取和设置innerHTML;

      • 下面是设置CSS

      • setCss :设置CSS属性值和获取CSS;如果三个参数就是设置,2个参数就是获取;

      • setGroupCss:给元素设置一组属性;cssObj是一个对象类型;

      • offset ://获取偏移量;

      • hasClassName:判断是否有某个className;

      • addClassName :增加某个className;

      • removeClassName :移除类样式的方法;

      • 在DOM库上增加方法,同时不影响原来的方法;在类的原型上增加方法;

      • aryPro.removeRepeat :数组去重;

      • aryPro.forEachPro :forEach兼容性处理;

      • objPro.myHasPubProperty :是否为公有属性;

      • strPro.myTrim :去除首尾空格;

      • strPro.mySub :是不是有效的

      • strPro.myFormatTime :时间格式化;

      • strPro.myQueryURLParameter :是否是有效URL

      3、扩展(不修改原有的类但是可以使用原有类的方法)

      自定义类实现继承我们的Tool类:

      例如:

      1)原型链继承

      • var Fn=function(){};
      • Fn.prototype=new Tool;
      • var f=new Fn;

      f就可以调用我们的Tool上面的方法了;因为f是Fn的一个实例了,而且f会通过;f.__proto__也就是Fn.prototype;找到Tools的函数; 扩展的时候,也可以在f上直接f.XXX来扩展;

      目录
      目录