JQuery源码学习（一续）

来源：互联网发布：python的idle怎么运行编辑：程序博客网时间：2024/06/06 15:03

比较蛋疼，晚上陪长辈喝酒（先找个借口）,然后大概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.onload=function(){},不要用jQuery的写法window.onload(),因为加载问题，要保证这段js在dom树构建好之后加载

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

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

阅读全文

0 0