28实现过程

http://js.jirengu.com/seziduhore/1/edit?js
一、封装函数

image.png

注意：对于===和！==这种二个等号的，只有NAN！==NAN，一个等号的过于复杂所以不用

image.png

命名空间的设计模式

为什么要取名字呢？
为了显示是我写的库，比如jequry写的，xx写的

二、改进

从前二行到下面这二行

篡改公有属性，但是这样会污染公有属性

改进

而jquery更加厉害，如果传进去的不是node而是选择器之类的，多一步类型检测

window.jQuery = function(nodeOrSelector) {
  let nodes={};
  //待补充的部分一：获得函数即将操作的对象
  
  nodes.addClass = function(classes) {//部分二：实现这个内部函数功能}
  nodes.setText = function(text) {//部分三：实现这个内部函数功能}
  
  return nodes
}

  if(typeof nodeOrSelector==='string'){
    nodes=document.querySelectorAll(nodeOrSelector);
  }else if(nodeOrSelector instanceof Node){
    nodes={0:nodeOrSelector,length:1}
  }

   for(let i=0;i<nodes.length;i++){
      classes.forEach((value)=>nodes[i].classList.add(value))}

  for(let i=0;i<nodes.length;i++){
      nodes[i].textContent=text;}

这三个部分填入框架一中

抓住本质

三、具体调用
先给jQuery个缩写

window.$ = jQuery;

然后输入找到我们要操作的对象所需的参数'div',来找到所有的div
再把这个函数赋值给变量，方便后面的调用，注意在变量前面加上$,表示是对jQuery函数的调用

var $div = $('div');

以后的调用中就可以直接用我们刚才创造的变量了，
而且已经把'div'作为参数传入了，以后对jQuery内部的函数来对所有div进行操作，就不需要重复输入这个参数了，直接用$div就可以

最后调用函数，完成目标操作

$div.addClass(['red']);
$div.setText('hi');

28实现过程

推荐阅读更多精彩内容