JQuery源码学习（一续）

最新推荐文章于 2024-09-23 14:27:46 发布

cuihu811371804

最新推荐文章于 2024-09-23 14:27:46 发布

阅读量233

点赞数

分类专栏： javaScript系列之jQuery源码学习文章标签： jquery 阿里编程

本文链接：https://blog.csdn.net/cuihu811371804/article/details/77439859

版权

javaScript系列之jQuery源码学习专栏收录该内容

4 篇文章 0 订阅

订阅专栏

比较蛋疼，晚上陪长辈喝酒（先找个借口）,然后大概1点左右时突然想到阿里校招的编程测试还没写，于是开干代码，原生js。。不能jQuery的时候链式调用那种写法真是怀念（又找个借口，其实就是菜）

题目很简单，就是给个ul里面嵌入li，然后有个删除的字，点击删除就可以删掉这个li，实现这（写死的方法应该不行，估计测试用相关js代码写），然后。。。没写出来，后来继续写了一个小时（唉，我也不知道为啥这么久，以前做过类似的，方法套路我也懂）
先上代码（可以正确运行）:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <!--code here-->
  <title>demo</title>
  <style>
    * {
      padding: 0;
      margin: 0;
    }

    .head, li div {
      display: inline-block;
      width: 70px;
      text-align: center;
    }

    li .id, li .sex, .id, .sex {
      width: 15px;
    }

    li .name, .name {
      width: 40px;
    }

    li .tel, .tel {
      width: 90px;
    }

    li .del, .del {
      width: 15px;
    }

    ul {
      list-style: none;
    }

    .user-delete {
      cursor: pointer;
    }

  </style>
</head>

<body>
  <div id="J_container">
    <div class="record-head">
      <div class="head id">序号</div><div class="head name">姓名</div><div class="head sex">性别</div><div class="head tel">电话号码</div><div class="head province">省份</div><div class="head">操作</div>
    </div>
    <ul id="J_List">
      <li><div class="id">1</div><div class="name">张三</div><div class="sex">男</div><div class="tel">13788888888</div><div class="province">浙江</div><div class="user-delete">删除</div></li>
      <li><div class="id">2</div><div class="name">李四</div><div class="sex">女</div><div class="tel">13788887777</div><div class="province">四川</div><div class="user-delete">删除</div></li>
      <li><div class="id">3</div><div class="name">王二</div><div class="sex">男</div><div class="tel">13788889999</div><div class="province">广东</div><div class="user-delete">删除</div></li>
    </ul>
  </div>

<script>
// 此处也可换成ES6的写法
function Contact(){
    this.init();
}

window.onload=function(){
  var liInfo=[];
  function change(n,all){
  var nowSq=0;
  for(var i=0;i<n;i++)
  {
    if(liInfo[i]==1)
    {
      nowSq++;
    }
   };
  console.log('nowSq'+nowSq);
  all[nowSq].parentNode.removeChild(all[nowSq]);
  liInfo[n]=0;
  for(var i=n+1;i<liInfo.length;i++)
  {
    if(liInfo[i]==0)continue;
    var k=all[nowSq].getElementsByClassName("id")[0];
    k.innerHTML-=1;
    nowSq++;
  }
}

doc = window.document;
var allUl = doc.getElementById("J_List");
var allLi = allUl.getElementsByTagName("li");
var allDel = doc.getElementsByClassName("user-delete");
for (var i =0; i<allDel.length;i++){
    liInfo.push(1);
    (function(n){
      allDel[n].onclick = function(e){
      change(n,allLi);
      }
    })(i);
    };

}


// your code here 
</script>
</body>
</html>

先说思路：
首先分析一下html，ul里面嵌套li，li里面包含两个比较重要的东西，class为id的用于表示序列，然后一个user-delete用于表示删除。
再分析一下处理逻辑，点击删除，该行li消失(是不是写个hidden会简单一些，不过这个属性有些毛病，还是选择删除节点），然后这行以后的id值全部减一
再说如何保证逻辑实现所需要的准备，首先要给删除注册个点击监听，监听是用于一行行删，所以每一行都要注册一个监听（也就是每一行的删除添加一个监听），然后要知道点击时点击的哪一个监听（这一点应该有高级方法吧，这里选择比较菜的方法），也就是注册的监听有一个id，用于知道是第几个删除。核心就是这
不过麻烦之处在于，这里就是相当于结合代码的数据结构准备，如果逻辑中选取的是ul里面的li，也就是应该是以ul的当前状态为准（不以其实应该可以，当要额外保存太多信息，类似使用hidden），但ul里面选取一个li后用remove会更改ul的实时状态，也就是，之前监听的删除id，与ul里面实时的li并不匹配，于是，引入一个liInfo数组，标记1的表示未被删除，标记0则被删除，liInfo用于沟通删除的id和当前ul，也就是一个映射关系，由于这个删除的特征，有这样一个映射:f(ul)={在[0,id)，有多少个标记为1的liInfo[element],），然后就可以舒服写代码了。
下面讲解一些坑点：
首先，要用window.οnlοad=function(){},不要用jQuery的写法window.onload(),因为加载问题，要保证这段js在dom树构建好之后加载

其次，上一篇文章提到的匿名函数在实际中的应用，给删除注册事件中没有显式的id，但有一个隐式的n用于类似的作用，这个传递n就要借助匿名函数（因为那个onclick事件处理函数是相当于定义了一个函数，并没有执行，如果不用匿名函数包裹，那么当其调用的时候，会查找作用域链，而那个时候i都是3！）

接着，是一系列如何利用映射关系处理好各个细节问题，建议刚入门的最好自己动手写写