美文网首页
28实现过程

28实现过程

作者: Lichee_3be1 | 来源:发表于2018-04-24 23:22 被阅读0次

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实现过程

      本文链接:https://www.haomeiwen.com/subject/ppislftx.html