28进阶：jQuery 不过如此？

尝试写一个极简的jQuery ，有1-2个功能，拢共分几步.

1步. 封装一个函数

此处选取实现2个功能：node.getSiblings（）---获取指定节点的所有兄弟元素；node.addClass（classes）----给指定节点添加多个 className；
原始代码如下：
HTML：

<body>
    <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>
</body>

JS：

//获取兄弟元素
var allChildren = item3.parentNode.children;
var array = {
    length: 0,
  };
for(let i = 0; i < allChildren.length; i++){
  if(allChildren[i] !== item3){
    array[array.length] = allChildren[i];
    array.length = array.length + 1;
  }
};
console.dir(array);


//添加 classNames
var classes = ['red','blue','yellow','green','orange'];
classes.forEach(function(value,key){
  array[0].classList.add(value);
  console.dir(array[0]);
  });

将上面两个功能封装后如下：

function getSiblins(node){
  var allChildren = node.parentNode.children;
  var array = {
      length: 0,
    };
  for(let i = 0; i < allChildren.length; i++){
    if(allChildren[i] !== node){
      array[array.length] = allChildren[i];
      array.length = array.length + 1;
    }
  };
  return array;
}
var nodeList = getSiblins(item2);
console.dir(nodeList);

var classes = ['red','blue','yellow','green','orange'];
function addClass(node,calsses){
  classes.forEach(function(value,key){
    node.classList.add(value);
    });
};
addClass(item4,classes);

两步. 命名空间

在上面的步骤中，已经完成了函数的封装，已经可以通过调用封装好的函数来完成相应的功能了；接下来有个问题，如果有1024个功能，那就得封装1024个函数，声明1024个函数名，并且调用这些函数的代码内也不能出现这1024个变量名，否则会被覆盖掉........................而且这1024个函数名还没有共同特征....；
为了解决以上有关1024的问题，需要声明一个独特的，有分别性的空间；
比如创建一个 hash ，将所有的函数作为 键值对 存放到里头；

var ffdom = {};
ffdom.getSiblins = function(node){
  var allChildren = node.parentNode.children;
  var array = {
      length: 0,
    };
  for(let i = 0; i < allChildren.length; i++){
    if(allChildren[i] !== node){
      array[array.length] = allChildren[i];
      array.length = array.length + 1;
    }
  };
  return array;
}
var nodeList = ffdom.getSiblins(item2);
console.dir(nodeList);

var classes = ['red','blue','yellow','green','orange'];

ffdom.addClass = function(node,calsses){
  classes.forEach(function(value,key){
    node.classList.add(value);
    });
};
ffdom.addClass(item3,classes);

3步. 能不能把 node 放在前面

上面调用时格式为：ffdom.getSiblins(item2);,ffdom.addClass(item3,classes);，显然这样不符合我们习惯用法，
接下来要能这样使用：node.getSiblins();,item3.addClass(classes);
最直接的思路就是直接将以上函数添加在 node 的原型链方法中；。

Node.prototype.getSiblins = function(){
  var allChildren = this.parentNode.children;
  var array = {
      length: 0,
    };
  for(let i = 0; i < allChildren.length; i++){
    if(allChildren[i] !== this){
      array[array.length] = allChildren[i];
      array.length = array.length + 1;
    }
  };
  return array;
};
console.log(item1.getSiblins.call(item1));

var classes = ['red','blue','yellow','green','orange'];

Node.prototype.addClass = function(classes){
  var node = this
  classes.forEach(function(value,key){
    console.log(this); // 此处this !=== this
    node.classList.add(value);
    
   });
};
item2.addClass.call(item2,classes);
----------------------
或者：
Node.prototype.addClass = function (classes) {
  classes.forEach( (value) => this.classList.add(value) )
}

需要注意的点：


image.png

4步. 把 Node2 改个名字吧

步骤3存在一个问题：直接在Node.prototype里添加方法的话会比较乱，比如有1024个人在Node.prototype里添加方法，谁也不能保证不会重复、覆盖。
因此，再换一种方式；

window.Node2 = function(node){
  return {
    getSiblins: function(){
      var allChildren = node.parentNode.children;
      var array = {
          length: 0,
        };
      for(let i = 0; i < allChildren.length; i++){
        if(allChildren[i] !== node){
          array[array.length] = allChildren[i];
          array.length = array.length + 1;
        }
      };
      return array;
    },
    addClass: function(classes){
      classes.forEach(function(value,key){
        node.classList.add(value);
       });
    }    
  }
};


var classes = ['red','blue','yellow','green','orange'];

node2 = Node2(item4);

node2.addClass(classes);
console.dir(node2.getSiblins());
console.dir(item4);
--------------------------------------------
如果：
window.jQuery = window.Node2;
则：
node2 =jQuery(item4);
node2.addClass(classes);

到这一步，在形式上已经比较像 jQuery 了。
不过 jQuery 的参数不仅可以传节点，还可以传选择器（即字符串）；
实现如下：

window.jQuery = function(nodeOrSelector){
  let node;
  if(typeof nodeOrSelector === 'string'){
    node = document.querySelector(nodeOrSelector);
  }else{
    node = nodeOrSelector;
  }
  return {
    getSiblins: function(){
      var allChildren = node.parentNode.children;
      var array = {
          length: 0,
        };
      for(let i = 0; i < allChildren.length; i++){
        if(allChildren[i] !== node){
          array[array.length] = allChildren[i];
          array.length = array.length + 1;
        }
      };
      return array;
    },
    addClass: function(classes){
      classes.forEach(function(value,key){
        node.classList.add(value);
       });
    }    
  }
};


var classes = ['red','blue','yellow','green','orange'];

node2 = jQuery('ul > li:nth-child(5)');
node2.addClass(classes);
console.dir(node2.getSiblins());
console.dir(item4)

在上面的代码中使用到了闭包，如下：

let node;
+
function(value,key){
        node.classList.add(value);
 } 
//上面就是闭包

上面方法是对单个节点的操作，接下来要求对多个获取的节点操作，如下：

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){
        //获取一个伪数组,与上面保持同一体型
        nodes = {
        0: nodeOrSelector,
        length: 1
        }
    }
   
    nodes.addClass = function(classes){
        classes.forEach(function(value,key){
            for(let i = 0; i < nodes.length; i++){
            nodes[i].classList.add(value);
            }
        });
    },
    nodes.text = function(text){               
        let contents = [];
        for(let i = 0; i < nodes.length; i++){
            if(text === undefined){
                contents.push(nodes[i].textContent)
            }else{
                nodes[i].textContent = 'hi'
            }
        }   
    }   
    return nodes
};


var classes = ['red','blue','yellow','green','orange'];

var $nodes2 = jQuery('ul > li:nth-child(5)');
$nodes2.addClass(classes);
$node2.text('hi');

重点技巧---

如过用 jQuery 构造一个对象，那么这个对象的变量名的第一个标识符建议用 $。

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 206,126评论 6赞 481
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 88,254评论 2赞 382
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 152,445评论 0赞 341
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 55,185评论 1赞 278
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 64,178评论 5赞 371
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,970评论 1赞 284
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 38,276评论 3赞 399
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,927评论 0赞 259
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 43,400评论 1赞 300
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,883评论 2赞 323
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,997评论 1赞 333
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,646评论 4赞 322
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 39,213评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,204评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,423评论 1赞 260
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 45,423评论 2赞 352
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,722评论 2赞 345