1. ;(function(){
  2.     var Test=function(opt){
  3.         // console.log(opt.a)
  4.     }
  5.     Test.prototype={
  7.     };
  8.     window.Test=Test;
  9. })();
  10. var test=new Test({a:'1',b:'2'});

JSON字符串转对象 -> JSON.parse()

html

  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.     <title>TodoList</title>
  8.     <link href="https://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
  9.     <link rel="stylesheet" href="./css/common.css">
  10.     <link rel="stylesheet" href="./css/index.css">
  11. </head>
  12. <body>
  13.     <div class="wrap">
  14.         <div class="list-hd">
  15.             <h2>TodoList</h2>
  16.             <a href="javascript:;" class="j-plus-btn fa fa-plus"></a>
  17.         </div>
  18.         <div class="input-wrap">
  19.             <div class="input-bd text-input">
  20.                 <input type="text" id="itemContent"/>
  21.             </div>
  22.             <div class="btn-bd add-btn">
  23.                 <button class="j-add-item">增加项目</button>
  24.             </div>
  25.         </div>
  26.             <div class="list-wrap">
  27.                 <ul class="item-list"></ul>
  28.             </div>
  31.     </div>
  32.     <script src="./js/untils.js"></script>
  33.     <script src="./js/index.js"></script>
  34. </body>
  35. </html>

common.css

  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: bold;
  24. }
  25. h1{
  26.     margin: 0;
  27.     font-weight: bold;
  28. }
  29. div{
  30.     box-sizing: border-box;
  31. }
  32. input,button{
  33.     outline: none;
  34.     box-sizing: border-box;
  35.     border: none;
  36. }

index.css

  1. .wrap{
  2.     position: relative;
  3.     width: 500px;
  4.     height: 500px;
  5.     margin: 50px auto;
  6.     box-shadow:  0 0 5px #999;
  7.     border-radius: 10px;
  8.     overflow: hidden;
  9. }
  10. .list-hd{
  11.     position: absolute;
  12.     top: 0;
  13.     left:0;
  14.     height: 44px;
  15.     width: 100%;
  16.     background-color: #000;
  17.     color: #fff;
  18.     text-align: center;
  19.     line-height: 44px;
  20. }
  21. .list-hd .fa-plus{
  22.     position: absolute;
  23.     top: 15px;
  24.     right: 15px;
  25.     color: #fff;
  26. }
  27. .input-wrap{
  28.     display: none;
  29.     position: relative;
  30.     top: 44px;
  31.     left: 0;
  32.     width: 100%;
  33.     height: 40px;
  34.     border-bottom: 1px solid #ddd;
  35. }
  36. .input-wrap .text-input{
  37.     float: left;
  38.     width: 410px;
  39.     height: 100%;
  40.     padding: 5px 5px 5px 10px;
  41. }
  42. .input-wrap .input-bd input{
  43.     width: 100%;
  44.     height: 100%;
  45.     border: 1px solid #ddd;
  46. }
  47. .input-wrap .btn-bd{
  48.     float: left;
  49.     width: 90px;
  50.     height: 100%;
  51.     padding: 5px 5px 5px 10px;
  52. }
  53. .input-wrap .btn-bd button{
  54.     width: 100%;
  55.     height: 100%;
  56.     border: 1px solid #ddd;
  57.     background-color: #fff;
  58. }
  59. .list-wrap{
  60.     height: 456px;
  61.     margin-top: 44px;   
  62.     overflow: auto;
  63. }
  64. .list-wrap .item{
  65.     height: 50px;
  66.     position: relative;
  67. }
  68. .list-wrap .item:nth-child(odd),
  69. .list-wrap .item:hover{
  70.     background-color: #eee;
  71. }
  72. .list-wrap .item.active{
  73.     background-color: #dff0d8;
  74. }
  75. .list-wrap .item .item-content{
  76.     position: absolute;
  77.     left: 0;
  78.     top: 0;
  79.     width: 400px;
  80.     height: 100%;
  81.     line-height: 50px;
  82.     text-indent: 15px;
  83. }
  84. .list-wrap .item .btn-group{
  85.     height: 100%;
  86.     margin-left: 400px;
  87.     line-height: 50px;
  88. }
  89. .list-wrap .item .btn-group a{
  90.     margin-left: 15px;
  91. }
  92. .list-wrap .item .btn-group .edit-btn{
  93.     color: green;
  94. }
  95. .list-wrap .item .btn-group .remove-btn{
  96.     color: red;
  97. }

untils.js

  1. // 添加事件
  2. function addEvent(el,type,fn) {
  3.     if(el.addEventListener){
  4.         el.addEventListener(type,fn,false);
  5.     }else if(el.attachEvent){
  6.         el.attachEvent('on'+type,function () {
  7.             fn.call(el);
  8.         })
  9.     }else{
  10.         el['on'+type] = fn;
  11.     }
  12. }
  13. // 获取滚动坐标
  14. function getScrollOffset(){
  15.     if(window.pageXOffset){
  16.         return{
  17.             left:window.pageXOffset,
  18.             top:window.pageYOffset
  19.         }
  20.     }else{
  21.         return{
  22.             left:document.body.scrollLeft + document.documentElement.scrollLeft,
  23.             top:document.body.scrollTop + document.documentElement.scrollTop
  24.         }
  25.     }
  26. }
  27. // 封装可视窗口尺寸
  28. function getViewportSize(){
  29.     if(window.innerWidth){
  30.         return{
  31.             width:window.innerWidth,
  32.             height:window.innerHeight
  33.         }
  34.     }else{
  35.         if(document.compatMode==='BackCompat'){
  36.             return{
  37.                 width:document.body.clientWidth,
  38.                 height:document.body.clientHeight
  39.             }
  40.         }else{
  41.             return {
  42.                 width:document.documentElement.clientWidth,
  43.                 height:document.documentElement.clientHeight
  44.             }
  45.         }
  46.     }
  47. }
  48. //获取body大小
  49. function getScrollSize(){
  50.     if(document.body.scrollWidth){
  51.         return {
  52.             width:document.body.scrollWidth,
  53.             height:document.body.scrollHeight
  54.         }
  55.     }else{
  56.         return {
  57.             width:document.documentElement.scrollWidth,
  58.             height:document.documentElement.scrollHeight
  59.         }
  60.     }
  61. }
  62. // 获取子元素
  63. function elemChildren(node){
  64.     var temp = {
  65.         'length': 0,
  66.         'push': Array.prototype.push,
  67.         'splice': Array.prototype.splice
  68.     },
  69.     len = node.childNodes.length;
  70.     for(var i = 0;i<len;i++){
  71.         var childItem = node.childNodes[i];
  72.         if(childItem.nodeType === 1){
  73.             temp[temp['length']] = childItem;
  74.             temp['length']++;
  75.               // temp.push(childItem); push方法
  76.         }
  77.     }
  78.     return temp;
  79. }
  80. // 获取祖先元素
  81. function elemParent(node,n){
  82.     var type = typeof(n);
  83.     if(type==='undefined'){
  84.         return node.parentNode;
  85.     }else if(n<=0|| type !=='number'){
  86.         return undefined;
  87.     }
  88.     while(n){
  89.         node = node.parentNode;
  90.         n--;
  91.     }
  92.     return node;
  93. }

index.js

  1. ;(function(node){
  2.     var TodoList = function(){
  3.         var _self = this;
  5.         this.node = node;
  6.         this.inputShow = false;
  7.         this.isEdit = false;
  8.         this.curIdx = null;
  10.         this.dConfig = {
  11.             "plusBtn":"",
  12.             "inputArea":"",
  13.             "addBtn":"",
  14.             "list":"",
  15.             "itemClass":""
  16.         }
  18.         this.config = this.getConfig();
  19.         this.itemClass = this.config.itemClass;
  21.         for(var key in this.dConfig){
  22.             if(!this.config.hasOwnProperty(key)){
  23.                 console.log(errorInfo(key));
  24.                 return;
  25.             }
  26.         }
  27.         this.setConfig();
  29.         addEvent(this.plusBtn,'click',function(){
  30.             _self.showInput.call(_self);
  31.         });
  32.         addEvent(this.addBtn,'click',function(){
  33.             _self.addBtnClick.call(_self);
  34.         });
  35.         addEvent(this.oList,'click',function(e){
  36.             var e =  e || window.event,
  37.                 tar =  e.target || e.srcElement;
  38.             _self.listClick.call(_self,tar);
  39.         });
  40.     }
  41.     TodoList.prototype = {
  42.         getConfig:function(){
  43.             console.log(this.node.getAttribute('data-config'))
  44.             return JSON.parse(this.node.getAttribute('data-config'))
  45.         },
  46.         setConfig:function(){
  47.             var config = this.config,
  48.                 node = this.node;
  49.             this.inputArea = node.getElementsByClassName(config.inputArea)[0];
  50.             this.addBtn = this.inputArea.getElementsByClassName(config.addBtn)[0];
  51.             this.plusBtn = node.getElementsByClassName(config.plusBtn)[0];
  52.             this.oList = node.getElementsByClassName(config.list)[0];
  53.             this.content = this.inputArea.getElementsByClassName('content')[0];
  54.             console.log(this);
  55.             console.log(this.plusBtn);
  56.         },
  57.         showInput:function(){
  58.             console.log('1');
  59.             var _self = this;
  60.             if(this.inputShow){
  61.                 setInputShow.call(_self,'close');
  62.             }else{
  63.                 setInputShow.call(_self,'open');
  64.             }
  65.         },
  66.         addBtnClick:function(){
  67.             var _self = this,
  68.                 content = this.content.value,
  69.                 contentLen = content.length,
  70.                 oItems = this.oList.getElementsByClassName('item'),
  71.                 itemLen = oItems.length,
  72.                 text;
  73.             if(contentLen<=0){
  74.                 return;
  75.             }
  76.             if(itemLen>0){
  77.                 for(var i = 0;i<itemLen;i++){
  78.                     text = elemChildren(oItems[i])[0].innerText;
  79.                     if(text===content){
  80.                         alert('已存在该项');
  81.                         return;
  82.                     }
  83.                 }
  84.             }
  85.             if(this.isEdit){
  86.                 elemChildren(oItems[this.curIdx])[0].innerText =  content;
  87.                 setInputStatus.call(_self,[oItems,null,'add']);
  88.             }else{
  89.                 var oLi = document.createElement('li');
  90.                 oLi.className = this.itemClass;
  91.                 oLi.innerHTML = itemTpl(content);
  92.                 this.oList.appendChild(oLi);
  93.             }
  94.                 setInputShow.call(_self,'close');
  95.         },
  96.         listClick:function(tar){
  97.             var _self = this,
  98.                 className = tar.className,
  99.                 oParent = elemParent(tar,2),
  100.                 oItems = this.oList.getElementsByClassName('item'),
  101.                 itemLen = oItems.length,
  102.                 item;
  103.             if(className === 'edit-btn fa fa-edit'){
  104.                 // console.log('edit');
  105.                 for(var i = 0;i<itemLen;i++){
  106.                     item = oItems[i];
  107.                     item.className ='item';
  108.                 }
  109.                 oParent.className += ' active';
  110.                 setInputShow.call(_self,'open');
  111.                 setInputStatus.apply(_self,[oItems,oParent,'edit']);
  112.             }else if(className === 'remove-btn fa fa-times'){
  113.                 // console.log('remove');
  114.                 oParent.remove();
  115.             }
  116.         }
  117.     }
  119.     function setInputShow(action) {
  120.         // console.log('2');
  121.         var oItems = this.oList.getElementsByClassName('item');
  122.         if(action === 'open'){
  123.             this.inputArea.style.display = 'block';
  124.             this.inputShow = true;
  125.         }else if(action === 'close'){
  126.             this.inputArea.style.display = 'none';
  127.             this.inputShow = false;
  128.             this.content.value = '';
  129.             setInputStatus(oItems,null,status);
  130.         }
  131.     }
  133.     function setInputStatus(oItems,target,status){
  134.         if(status === 'edit'){
  135.             var idx = Array.prototype.indexOf.call(oItems,target),
  136.                 text = elemChildren(target)[0].innerText;
  138.             this.addBtn.innerText = '编辑第'+(idx+1)+'项';
  139.             this.isEdit = true;
  140.             this.curIdx = idx;
  141.             this.content.value = text;
  142.         }else if(status === 'add'){
  143.             var itemLen = oItems.length,
  144.                 item;
  145.             for(var i = 0;i<itemLen;i++){
  146.                 item = oItems[i];
  147.                 item.className = 'item';
  148.                 this.addBtn.innerText ='增加项目';
  149.                 this.isEdit = false;
  150.                 this.curIdx = null;
  151.             }
  152.         }
  153.     }
  154.     function errorInfo(key){
  155.         return new Error(
  156.             '您没有配置参数' + key + '\n'+
  157.             '必须配置的参数列表如下: \n'+
  158.             '打开输入按钮元素类名：plusBtn\n' +
  159.             '输入框区域元素类名：inputArea\n' +
  160.             '增加项目按钮元素类名：addBtn\n' +
  161.             '列表承载元素类名：list\n' +
  162.             '列表项承载元素类名：itemClass'
  163.         );
  164.     }
  165.     function itemTpl(text) {
  166.         return (
  167.             '<p class="item-content">' + text + '</p>' +
  168.             '<div class="btn-group">' +
  169.             '<a href="javascript:;" class="edit-btn fa fa-edit"></a>' +
  170.             '<a href="javascript:;" class="remove-btn fa fa-times"></a>' +
  171.             '</div>'
  172.         )
  173.     }
  174.     new TodoList();
  175. }(document.getElementsByClassName('todo-wrap')[0]));

index2

  1. // ;(function(){
  2. //     var Test=function(opt){
  3. //         // console.log(opt.a)
  4. //     }
  5. //     Test.prototype={
  7. //     };
  8. //     window.Test=Test;
  9. // })();
  10. // var test=new Test({a:'1',b:'2'});
  12. (function (node) {
  13.   var TodoList = function () {
  14.     var _self = this;
  15.     console.log(_self); //直接打印可以看到挂载到对象上的元素是否正确，而不用总是打印
  16.     this.node = node;
  17.     this.inputShow = false; //打开关闭的状态
  18.     // console.log(this.getConfig())
  19.     this.dConfig = {
  20.       plusBtn: "",
  21.       inputArea: "",
  22.       addBtn: "",
  23.       list: "",
  24.       itemClass: "",
  25.     };
  27.     this.config = this.getConfig();
  28.     this.itemClass = this.config.itemClass;
  30.     // this.config = this.getConfig();
  31.     for (var key in this.dConfig) {
  32.       if (!this.config.hasOwnProperty(key)) {
  33.         return; //结束函数
  34.       }
  35.     }
  36.     this.setConfig();
  38.     //这里this是plusBtn，应该把this变成TodoList
  39.     addEvent(this.plusBtn, "click", function () {
  40.       _self.showInput.call(_self); //改变showInput的this指向 得改变2次
  41.       // _self.showInput()
  42.     }),
  43.       addEvent(this.addBtn, "click", function () {
  44.         // console.log('addBtn')
  45.         _self.addBtnClick.call(_self);
  46.       });
  48.     addEvent(this.oList, "click", function (e) {
  49.       var e = e || window.event,
  50.         tar = e.target || e.srcElement;
  51.       _self.listClick.call(_self, tar);
  52.     });
  53.   };
  54.   TodoList.prototype = {
  55.     getConfig: function () {
  56.       // var config=
  57.       // console.log(this.node);
  58.       // var config=JSON.parse(this.node.getAttribute('data-config'));
  59.       // // var config=this.node.dataset.config;
  60.       // // console.log(config)
  62.       // return config;
  64.       return JSON.parse(this.node.getAttribute("data-config"));
  65.     },
  66.     setConfig: function () {
  67.       var config = this.config,
  68.         node = this.node;
  69.       this.inputArea = node.getElementsByClassName(config.inputArea)[0];
  70.       this.addBtn = this.inputArea.getElementsByClassName(config.addBtn)[0];
  71.       //效率更高，比从node上获取
  72.       this.plusBtn = node.getElementsByClassName(config.plusBtn)[0];
  73.       this.oList = node.getElementsByClassName(config.list)[0];
  74.       this.content = this.inputArea.getElementsByClassName("content")[0];
  75.       //   this.plusBtn=node.getElementsByClassName(config.plusBtn)[0];
  76.       //   this.oList=node.getElementsByClassName(config.list)[0];
  78.       //   console.log(this);
  79.       //   console.log(this.plusBtn);
  80.     },
  81.     //点击+展示输入框
  82.     showInput: function () {
  83.       // console.log(this)
  84.       var _self = this;
  85.       if (this.inputShow) {
  86.         //封装显示输入框的方法
  87.         setInputShow.call(_self, "close");
  88.       } else {
  89.         setInputShow.call(_self, "open");
  90.       }
  91.     },
  92.     //输入数据
  93.     addBtnClick: function () {
  94.       var _self = this,
  95.         content = this.content.value,
  96.         contentLen = content.length,
  97.         oItems = this.oList.getElementsByClassName("item"),
  98.         itemLen = oItems.length,
  99.         text;
  100.       if (contentLen <= 0) {
  101.         return;
  102.       }
  103.       if (itemLen > 0) {
  104.         for (var i = 0; i < itemLen; i++) {
  105.           text = elemChildren(oItems[i])[0].innerText;
  106.           if (text === content) {
  107.             alert("已存在该项");
  108.             return;
  109.           }
  110.         }
  111.       }
  112.       if (this.isEdit) {
  113.         elemChildren(oItems[this.curIdx])[0].innerText = content;
  114.         setInputStatus.call(_self, [oItems, null, "add"]);
  115.       } else {
  116.         var oLi = document.createElement("li");
  117.         oLi.className = this.itemClass;
  118.         oLi.innerHTML = itemTpl(content);
  119.         this.oList.appendChild(oLi);
  120.       }
  121.       setInputShow.call(_self, "close");
  122.     },
  123.     listClick: function (tar) {
  124.       var _self = this,
  125.         className = tar.className,
  126.         oParent = elemParent(tar, 2),
  127.         oItems = this.oList.getElementsByClassName("item"),
  128.         itemLen = oItems.length,
  129.         item;
  130.       if (className === "edit-btn fa fa-edit") {
  131.         // console.log('edit');
  132.         for (var i = 0; i < itemLen; i++) {
  133.           item = oItems[i];
  134.           item.className = "item";
  135.         }
  136.         oParent.className += " active";
  137.         setInputShow.call(_self, "open");
  138.         setInputStatus.apply(_self, [oItems, oParent, "edit"]);
  139.       } else if (className === "remove-btn fa fa-times") {
  140.         // console.log('remove');
  141.         oParent.remove();
  142.       }
  143.     },
  144.   };
  146.   function setInputShow(action) {
  147.     //   console.log(2,this)
  148.     if (action === "open") {
  149.       this.inputArea.style.display = "block";
  150.       this.inputShow = true;
  151.     } else if (action === "close") {
  152.       this.inputArea.style.display = "none";
  153.       this.inputShow = false;
  154.     }
  155.   }
  157.   function setInputShow(action) {
  158.     // console.log('2');
  159.     var oItems = this.oList.getElementsByClassName("item");
  160.     if (action === "open") {
  161.       this.inputArea.style.display = "block";
  162.       this.inputShow = true;
  163.     } else if (action === "close") {
  164.       this.inputArea.style.display = "none";
  165.       this.inputShow = false;
  166.       this.content.value = "";
  167.       setInputStatus(oItems, null, status);
  168.     }
  169.   }
  171.   function setInputStatus(oItems, target, status) {
  172.     if (status === "edit") {
  173.       var idx = Array.prototype.indexOf.call(oItems, target),
  174.         text = elemChildren(target)[0].innerText;
  176.       this.addBtn.innerText = "编辑第" + (idx + 1) + "项";
  177.       this.isEdit = true;
  178.       this.curIdx = idx;
  179.       this.content.value = text;
  180.     } else if (status === "add") {
  181.       var itemLen = oItems.length,
  182.         item;
  183.       for (var i = 0; i < itemLen; i++) {
  184.         item = oItems[i];
  185.         item.className = "item";
  186.         this.addBtn.innerText = "增加项目";
  187.         this.isEdit = false;
  188.         this.curIdx = null;
  189.       }
  190.     }
  191.   }
  192.   function errorInfo(key) {
  193.     return new Error(
  194.       "您没有配置参数" +
  195.         key +
  196.         "\n" +
  197.         "必须配置的参数列表如下: \n" +
  198.         "打开输入按钮元素类名：plusBtn\n" +
  199.         "输入框区域元素类名：inputArea\n" +
  200.         "增加项目按钮元素类名：addBtn\n" +
  201.         "列表承载元素类名：list\n" +
  202.         "列表项承载元素类名：itemClass"
  203.     );
  204.   }
  205.   function itemTpl(text) {
  206.     return (
  207.       '<p class="item-content">' +
  208.       text +
  209.       "</p>" +
  210.       '<div class="btn-group">' +
  211.       '<a href="javascript:;" class="edit-btn fa fa-edit"></a>' +
  212.       '<a href="javascript:;" class="remove-btn fa fa-times"></a>' +
  213.       "</div>"
  214.     );
  215.   }
  217.   new TodoList();
  218. })(document.getElementsByClassName("todo-wrap")[0]);