封装js过程

主要记录通过js封装一个jquery的addClass方法的过程
https://www.cnblogs.com/baiyunke/p/7821299.html
html代码:

<ul>
    <li id="item1">选项1</li>
    <li id="item2">选项2</li>
    <li id="item3">选项3</li>
    <li id="item4">选项4</li>
    <li id="item5">选项5</li>
</ul>

1、传统封装函数

js封装一个获取除自己外的兄弟元素

代码片段:

function getSibling(node){
  var allChildren= node.parentNode.children;
  var array={length:0}
  for(var i= 0;i<allChildren.length;i++){
    if(allChildren[i] !== node){
      array[array.length] = allChildren[i]
      array.length += 1
    }
  }
return array
}
console.log( getSibling(item3)) //传入item3
注意:只用!== 或 ===, 不要用 ==或!=

具体看文章https://zhuanlan.zhihu.com/p/22745278
结论是:
① NaN !== NaN
② 所有声明的对象都不相等,因为地址不相同

打印结果为:


除自己外的兄弟元素.png
js封装一个添加Class的函数
 function addClass(node,classes) {
      for(var key in classes){
        var value = classes[key];
//        if(value){
//          node.classList.add(key);
//        }else{
//          node.classList.remove(key);
//        }
//        可替换为:
        var methodName= value?'add':'remove'
        node.classList[methodName](key);
      }
    }
    addClass(item3,{'red':true,'blue':false});

结果:
添加class.png

2、命名空间

var dom = {}
dom.getSiblings(node)
dom.addClass(node, {a: true, b: false})

    window.wh = {}//一个名叫wh的库
    wh.getSibling = getSiblings
    wh.addClass = addClass

    wh.getSibling(item3)//调用getSibling方法
    wh.addClass(item3,{'red':true,'blue':false})//调用addClass方法
命名空间的好处:1、有一个库的名字 2、避免全局变量覆盖

上述代码可变为:

    window.wh = {}
    wh.getSibling = function (a) {
      var allitem = a.parentNode.children;
      var array = {length:0};
      for(var i=0;i<allitem.length;i++){
        if(allitem[i] !== a ){
          array[array.length] = allitem[i]
          array.length += 1;
        }
      }
      return array;
    }
    wh.addClass = function (node,classes){
      classes.forEach((value) => node.classList.add(value));
//      classes.forEach(function (item) {
//        node.classList.add(item)
//      })
    }
    wh.addClass(item2,['red','blue']);
命名空间的缺点:每次都要调一次库

3、变形

换一种调用方式:

node.getSiblings()
node.addClass()

  • 方法一:扩展 Node 接口

直接在 Node.prototype 上加函数
小例子:

Node.prototype.getSiblings = function(){
  return 1
}
console.log(item3.getSibling());//1
console.dir(item3)//原型中有getSiblings()方法
即可以用
item3.getSibling()直接获取函数

上述例子可变形为:

    Node.prototype.getSibling = function () {
      var allChildren = this.parentNode.children; //this即调用函数的item3
      var array = {length:0}
      for(var i = 0;i<allChildren.length;i++){
        if(allChildren[i] !== this){
          array[array.length] = allChildren[i];
          array.length += 1;
        }
      }
      return array
    }
    console.log(item3.getSibling());//除item3的所有item
    //等价:console.log(item3.getSibling.call(item3));//call的第一个参数即this

    Node.prototype.addClass = function (classes) {
      classes.forEach( (item) => this.classList.add(item) )
    }
    item3.addClass(['red']);//id为item3的li标签字体颜色变红
   //等价: item3.addClass.call(item3,['red']);
强调:this是call的第一个参数
  • 方法二:新的接口 BetterNode

上述例子可变形为:

    window.Node2 = function (node) {
      return{
        getSibling:function () {
          var allChildren = node.parentNode.children;
          var array = {length:0}
          for(var i = 0;i<allChildren.length;i++){
            if(allChildren[i] !== node){
              array[array.length] = allChildren[i];
              array.length += 1
            }
          }
          return array
        },
        addClass:function (classes) {
          classes.forEach((className) => {node.classList.add(className)})
        }
      }
    }
    var node2 = Node2(item3);
    console.log(node2.getSibling());//除item3的所有li
    node2.addClass(['red']);//item3字体变红

改进:
接收多个node

 window.jQuery = function (nodeOrSelector) {
      //类型检测
      let nodes = {};
      if(typeof nodeOrSelector === 'string'){
        let temp = document.querySelectorAll(nodeOrSelector)
        for(let i = 0;i<temp.length;i++){
          nodes[i] = temp[i];
        }
        nodes.length = temp.length;
      }else if(nodeOrSelector instanceof Node){
        node = {0:nodeOrSelector,length:0}
      }
      nodes.getSiblings = function () {}
      nodes.addClass = function (classes) {
        classes.forEach((value) => {
            for(let i= 0;i<nodes.length;i++){
              nodes[i].classList.add(value)
            }
        })
      }
      //获取文本
      nodes.getText = function () {
        var texts = [];
        for(let i=0;i<nodes.length;i++){
          texts.push(nodes[i].textContent);
        }
        return texts;
      }
      //设置文本
      nodes.setText = function (text) {
        for(var i = 0;i<nodes.length;i++){
          nodes[i].textContent = text
        }
      }
      //合并方法 获取或者设置文本
      nodes.text = function (text) {
        if(text == undefined){
          var texts = [];
          for(let i=0;i<nodes.length;i++){
            texts.push(nodes[i].textContent);
          }
          return texts;
        }else{
          for(var i = 0;i<nodes.length;i++){
            nodes[i].textContent = text
          }
        }
      }
      return nodes;
    }
    var node2 = jQuery('ul>li');
    node2.addClass(['red']);//调用DOM api
    console.log(node2.getText());// [ "选项1", "选项2", "选项3", "选项4", "选项5" ]
    node2.setText('hello');
    node2.text('hi');
    console.log( node2);//0:li 1:li ... addClass:f ...
    console.log(node2[0]);//第一个li
    //nodes;//闭包 操作一个访问不到的变量
    //jQuery是一个函数
    //node2是函数的返回值

完成了一个简单的js封装方法

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,053评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,527评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,779评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,685评论 1 276
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,699评论 5 366
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,609评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,989评论 3 396
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,654评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,890评论 1 298
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,634评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,716评论 1 330
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,394评论 4 319
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,976评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,950评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,191评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 44,849评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,458评论 2 342

推荐阅读更多精彩内容