组件化

  1. //组件开发 
  2. //模块与模块之间可以相互依赖，不可以相互影响
  3. //原生js写模块
  4. //生态：文档多，开发者多，回答问题的人多，论坛活跃
  5. var header=(function() {
  6.   var a=1;
  7.   var b=1;
  8. })();//IIFE
  10. var footer=(function() {
  11.   var a = 1;
  12.   var b=2;
  13. })()
  16. common.css//自己项目起这两个名字
  17. flobal.css
  19. reset.css//有现成的，不要起与公开、流行库一样、类似的名字，后期不好维护
  20. normalize.css

image.png
从右向左找效率高

  1. window.onload=function() {
  2.   init();
  3. }
  5. function init() {
  6.   // initTodoList;//可以随时维护，好维护,不论写多少模块，都从init中加载
  7.   // initB;
  8. }
  9. var initTodoList=(function() {
  11. })();
  13. var initB=(function() {
  15. })();

项目

初步

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <link href="https://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
  8.     <link rel="stylesheet" href="./css/common.css"/>
  9.     <!-- //应该闭合，符合w3c规范，不写也能被识别 -->
  10.     <link rel="stylesheet" href="./css/index.css">
  11.     <title>TodoList</title>
  12. </head>
  13. <body>
  14.     <div class="wrap">
  15.         <!-- todo上边栏 黑框 -->
  16.         <div class="list-hd">
  17.             <h2>TodoList</h2>
  18.             <a href="javascript:;" class="j-show-input fa fa-plus"></a>
  19.             <!-- //fa fa-plus是图标
  20.             //能不用id就不用id，class居多，就是js的缩写，后台操作 -->
  21.         </div>
  23.         //列表部分
  24.         <div class="input-wrap">
  25.             <div class="input-bd">
  26.                 <input type="text">
  27.             </div>
  28.             <div class="btn-bd">
  29.                 <button>增加项目</button>
  30.             </div>
  32.             <div class="list-wrap">
  33.                 <ul class="list"></ul>
  34.             </div>
  35.         </div>
  36.     </div>
  37.     <script src="./js/utils.js"></script>
  38.     <script  src="./js/index1.js"></script>
  39. </body>
  40. </html>
  1. /* 最好有先后顺序，margin在box之前 */
  2. /* 整个todo表 */
  3. .wrap{
  4.   position: relative;
  5.   width: 500px;
  6.   height: 500px;
  7.   margin: 50px auto;
  8.   box-shadow: 0 0 5px #999;
  9.   border-radius: 10px;
  10.   overflow: hidden;
  11. }
  13. /* 顺序从右向左 */
  14. /* .wrap .list-hd .a .b .c .d{
  16. } */
  18. /* wrap可以省略 todolist上边栏 黑框*/
  19. .wrap .list-hd{
  20.   position: absolute;
  21.   top: 0;
  22.   left:0;
  23.   width: 100%;
  24.   height: 44px;
  25.   background-color: #000;
  26.   color: #fff;
  27.   text-align: center;
  28.   line-height: 44px;
  29. }
  31. /* 加号的样式 */
  32. .list-hd .fa-plus{
  33.   position: absolute;
  34.   top: 15px;
  35.   right: 15px;
  36.   color: #fff;
  37. }
  39. .input-wrap{
  40.   display: none;
  41.   position: absolute;
  42.   top: 44px;
  43.   left: 0;
  45.   width: 100%;
  46.   height: 40px;
  47.   border-bottom: 1px solid #ddd;
  48. }
  50. .input-wrap .input-bd{
  51.   float: left;
  52.   width: 410px;
  53.   height: 100%;
  54.   /* border: 1px solid #000; */
  55.   padding: 5px 5px 5px 10px;
  56. }
  58. .input-wrap .input-bd input{
  59.   width: 100%;
  60.   height: 100%;
  61.   border: 1px solid #ddd;
  63. }
  65. .input-wrap .btn-bd{
  66.   float: left;
  67.   width:  90px;
  68.   height: 100%;
  69.   /* border: 1px solid #000; */
  70.   padding: 5px 10px 5px 5px ;
  72. }
  75. .input-wrap .btn-bd button{
  76.   width: 100%;
  77.   height: 100%;  
  78.   border: 1px solid #ddd; 
  79.   background-color: #fff;
  80. }
  1. body {
  2.   margin: 0;
  3. }
  5. a {
  6.   text-decoration: none;
  7. }
  9. ul {
  10.   padding: 0;
  11.   margin: 0;
  12.   list-style: none;
  13. }
  15. h1,
  16.   h2,
  17.   h3,
  18.   h4,
  19.   h5,
  20.   h6,
  21.   p {
  22.     margin: 0;
  23.     font-weight: normal;
  24.   }
  26. div {
  27.   box-sizing: border-box;
  28. }
  31. input,
  32.   button {
  33.     outline: none;
  34.     box-sizing: border-box;
  35.     border: none;
  36. }

js

没有判断时

  1. init();
  2. function init() {
  3.   initTodoList;
  4. }
  6. var initTodoList = (function () {
  7.   var plusBtn = document.getElementsByClassName("j-plus-btn")[0],//+号按钮输入框元素
  8.       inputArea = document.getElementsByClassName("input-wrap")[0], //整个输入框元素
  9.       addItem = document.getElementsByClassName("j-add-item")[0],//list中的增加按钮
  10.       itemContent = document.getElementById("itemContent"),
  11.       oList = document.getElementsByClassName("item-list")[0],
  12.       inputShow = false;
  14.   // console.log(plusBtn)
  15.   // console.log(inputArea);
  16.   // console.log(plusBtn)//通过打印知道哪个函数
  19.   addEvent(plusBtn, "click", function () {
  20.     console.log(plusBtn);
  21.     if (inputShow) {
  22.       inputArea.style.display = "none";
  23.       inputShow = false;
  24.     } else {
  25.       inputArea.style.display = "block";
  26.       inputShow = true;
  27.     }
  28.   });
  30.   addEvent(addItem, "click", function () {
  31.     var content = itemContent.value,//保存输入框的内容
  32.         contentLen = content.length,//.消耗性能，每次都。消耗性能 输入字符的长度
  33.         oItems = document.getElementsByClassName("item"),//item数组列表
  34.         itemLen = oItems.length,//长度
  35.         isEdit=false,//是否编辑
  36.         curIdx=null;
  37.     // item;
  38.     if (contentLen <= 0) {//如果输入的值为空则不添加
  39.       return;
  40.     }
  41.     // else {//不用else，因为return了，直接跳出function函数了
  42.     //     console.log(1)
  43.     // }
  45.     //如果itemLen大于0，oItems有值，进行判断录入的值是否与已有栏目重合
  46.     if (itemLen > 0) {
  47.       for (var i = 0; i < itemLen; i++) {
  48.         // item=oItems[i];
  49.         itemText = elemChildren(oItems[i])[0].innerText;
  50.         //得到oItems的第一个子元素p，里面有元素的值，根据tpl方法的模板可知
  51.         if (itemText === content) {
  52.           alert("已存在该项目");
  53.           return; //让整个函数function执行完毕，要不执行下面的
  54.         }
  55.       }
  56.     }
  57.     // else {
  58.     //     console.log(0)
  59.     // }
  62.     var oLi = document.createElement("li");//创建内容
  63.     oLi.className = "item";//是上面找的oItems，是整个item，是整个item的顶端，是item的容器
  64.     oLi.innerHTML = itemTpl(content);//把模板的值放入li下面，变成li的子元素
  65.     oList.appendChild(oLi);
  67.     inputArea.style.display = "none";//隐藏
  68.     inputShow = false;
  69.     itemContent.value = "";//清零
  70.   });
  72.   //事件冒泡   
  73.   addEvent(oList,'click',function(e) {
  74.     var e=e||window.event,
  75.         tar=e.target||e.srcElement,
  76.         liParent=elemParent(tar,2),//删除的是点击元素的父元素，整个item，所以得找到item
  78.         className=tar.className,//通过className判断点击的是哪个元素
  79.         oItems=document.getElementsByClassName('item'),//就是上面的oLi的集合，数组集合
  80.         tarIdx=Array.prototype.indexOf.call(oItems,liParent);//得到第几项，但之后要加1
  84.     if (className === 'edit-btn fa fa-edit') {
  85.       var itemLen=oItems.length,
  86.           item;
  87.       inputArea.style.display = "block";
  88.       inputShow=true;
  90.       for (var i = 0; i < itemLen; i++) {
  91.         item=oItems[i];
  92.         item.className='item';
  93.       }
  94.       curIdx=tarIdx;
  95.       liParent.className+=' active';
  96.       //激活了，添加class，active类上绑定css，可以改变属性，添加类改变属性
  97.       // addItem.innerText='编辑第？项';
  99.       addItem.innerText='编辑第'+ (curIdx+1)+'项';
  102.     }
  103.     else if (className === 'remove-btn fa fa-times') {
  104.       // elemParent(tar,2).remove();
  105.       // liParent.remove();
  106.       console.log(liParent)
  107.       liParent.remove()
  108.     }
  109.   });
  111.   function itemTpl(text) {
  112.     return (
  113.       '<p class="item-content">' +
  114.       text +
  115.       "</p>" +
  116.       '<div class="btn-group">' +
  117.       '<a href="javascript:;" class="edit-btn fa fa-edit"></a>' +
  118.       '<a href="javascript:;" class="remove-btn fa fa-times"></a>' +
  119.       "</div>"
  120.     );
  121.   }
  122. })();

判断时

  1. init();
  3. function init() {
  4.   initTodoList;
  5. }
  7. var initTodoList = (function() {
  8.   var plusBtn = document.getElementsByClassName('j-plus-btn')[0], //+号按钮输入框
  9.       inputArea = document.getElementsByClassName('input-wrap')[0], //整个输入框
  10.       addItem = document.getElementsByClassName('j-add-item')[0],
  11.       itemContent = document.getElementById('itemContent'),
  12.       oList = document.getElementsByClassName('item-list')[0],
  13.       inputShow = false,
  14.       isEdit = false,
  15.       curIdx = null;
  16.   console.log(inputArea);
  18.   addEvent(plusBtn, 'click', function () {
  19.     if (inputShow) {
  20.       showInput('close');
  21.       restoreStatus();
  22.     } else {
  23.       showInput('open');
  24.     }
  25.   });
  27.   addEvent(addItem, 'click', function () {
  28.     var content = itemContent.value; //保存输入框的内容 
  29.     contentLen = content.length;
  30.     oItems = document.getElementsByClassName('item'),
  31.       itemLen = oItems.length;
  33.     if (contentLen <= 0) { //如果输入的值为空则不添加
  34.       return;
  35.     }
  37.     if (itemLen > 0) {
  38.       for (var i = 0; i < itemLen; i++) {
  39.         itemText = elemChildren(oItems[i])[0].innerText;
  40.         if (itemText === content) {
  41.           alert('已存在该项目');
  42.           return;
  43.         }
  44.       }
  45.     }
  46.     if (isEdit) {
  47.       var oItem = elemChildren(oItems[curIdx])[0];
  48.       oItem.innerText = content;
  49.       addItem.innerText = '增加项目';
  50.     } else {
  51.       var oLi = document.createElement('li'); //创建内容
  52.       oLi.className = 'item';
  53.       oLi.innerHTML = itemTpl(content);
  54.       oList.appendChild(oLi);
  55.     }
  56.     // inputArea.style.display = 'none';
  57.     // itemContent.value = '';
  58.     // inputShow = false;
  59.     showInput('close');
  60.     restoreStatus();
  61.   });
  63.   addEvent(oList, 'click', function (e) {
  64.     // console.log(1);
  65.     var e = e || window.event,
  66.         tar = e.target || e.srcElement,
  67.         className = tar.className,
  68.         oParent = elemParent(tar, 2),
  69.         oItems = document.getElementsByClassName('item');
  71.     if (className === 'edit-btn fa fa-edit') {
  73.       var itemLen = oItems.length,
  74.           tarIdx = Array.prototype.indexOf.call(oItems, oParent),
  75.           item;
  77.       // inputArea.style.display = 'block';
  78.       // inputShow = true;
  79.       showInput('open');
  81.       for (var i = 0; i < itemLen; i++) {
  82.         item = oItems[i];
  83.         item.className = 'item';
  84.       }
  85.       curIdx = tarIdx;
  86.       oParent.className += ' active';
  87.       addItem.innerText = '编辑第' + (curIdx + 1) + '项';
  88.       isEdit = true;
  89.     } else if (className === 'remove-btn fa fa-times') {
  90.       oParent.remove();
  91.       restoreStatus();
  92.     }
  93.   });
  95.   function showInput(action){
  96.     if(action === 'close'){
  97.       inputArea.style.display = 'none';
  98.       inputShow = false;
  99.     }else if(action === 'open'){
  100.       inputArea.style.display = 'block';
  101.       inputShow = true;
  102.     }
  103.   }
  104.   function restoreStatus(){
  105.     isEdit = false;
  106.     curIdx = null;
  107.     itemContent.value = '';
  108.     addItem.innerText = '增加项目'
  109.   }
  110.   function itemTpl(text) {
  111.     return (
  112.       '<p class="item-content">' + text + '</p>' +
  113.       '<div class="btn-group">' +
  114.       '<a href="javascript:;" class="edit-btn fa fa-edit"></a>' +
  115.       '<a href="javascript:;" class="remove-btn fa fa-times"></a>' +
  116.       '</div>'
  117.     )
  118.   }
  119. })();