案例

数据筛选

数据筛选案例1：tab栏切换筛选(全部课程/免费课程/收费课程)显示在页面

  <p class="J_nav">
    <a href="javascript:;" data-field="all" >全部课程</a>
    <a href="javascript:;" data-field="free" >免费课程</a>
    <a href="javascript:;" data-field="vip" >收费课程</a>
  </p>
  <ul class="J_list"></ul>
  <!-- 隐藏数据域 -->
  <div id="J_data" style="display: none;">
    [{"id": "1","course":"前端开发之企业级深度JavaScript特训课【JS++前端】","classes":"19","teacher":"小野","img":"ecmascript.jpg","is_free":"1","datetime":"1540454477","price":"0"},
    {"id": "2","course":"WEB前端工程师就业班之深度JS DOM+讲师辅导-第3期【JS++前端】","classes":"22","teacher":"小野","img":"dom.jpg","is_free":"0","datetime":"1540454477","price":"699"},
    {"id": "3","course":"前端开发之企业级深度HTML特训课【JS++前端】","classes":"3","teacher":"小野","img":"html.jpg","is_free":"1","datetime":"1540454477","price":"0"},
    {"id": "4","course":"前端开发之企业级深度CSS特训课【JS++前端】","classes":"5","teacher":"小野","img":"css.jpg","is_free":"1","datetime":"1540454477","price":"0"},
    {"id": "5","course":"前端就业班VueJS+去哪儿网+源码课+讲师辅导-第3期【JS++前端】","classes":"50","teacher":"哈默","img":"vuejs.jpg","is_free":"0","datetime":"1540454477","price":"1280"},
    {"id": "6","course":"前端就业班ReactJS+新闻头条实战+讲师辅导-第3期【JS++前端】","classes":"21","teacher":"托尼","img":"reactjs.jpg","is_free":"0","datetime":"1540454477","price":"2180"},
    {"id": "7","course":"WEB前端开发工程师就业班-直播/录播+就业辅导-第3期【JS++前端】","classes":"700","teacher":"JS++名师团","img":"jiuyeban.jpg","is_free":"0","datetime":"1540454477","price":"4980"}]    
  </div>
  <!-- tpl模板 -->
  <script type="text/html" id="J_tpl" >
    <li>{{course}}</li><hr />
  </script>

//数据筛选案例：tab栏切换筛选(全部课程/免费课程/收费课程)显示在页面
(function () {
  //获取nav节点，ul-list节点，data数据, tpl模板节点
  var oNav = document.getElementsByClassName("J_nav")[0],
    oList = document.getElementsByClassName("J_list")[0],
    data = JSON.parse(document.getElementById("J_data").innerHTML),
    tpl = document.getElementById("J_tpl").innerHTML;
  //初始化案例
  var init = function () {
    var all = filterData(data, "all");
    console.log(all);
    //首页页面加载
    // oList.innerHTML = renderList(all);
    bindEvent();
  };
  //绑定事件管理
  function bindEvent() {
    //委托代理
    oNav.addEventListener("click", navClick, false);
  }
  //定义点击导航事件处理函数
  function navClick(e) {
    var e = e || window.event,
      tar = e.target || e.srcElement,
      //事件源:被点击的标签a
      tagName = tar.tagName.toLowerCase();
    // console.log(tagName); //a
    if (tagName === "a") {
      var field = tar.getAttribute("data-field");
      // console.log(field); //拿到自定义属性 all/free/vip
      //测试筛选数据
      // console.log(filterData(data, field));
      //把修改后的数据给渲染到页面
      oList.innerHTML = renderList(filterData(data, field));
    }
  }
  //定义数据筛选函数
  function filterData(data, field) {
    //使用自己封装的myFilter方法
    var arr = data.myFilter(function (elem, index, arr) {
      switch (field) {
        case "all":
          //不需要过滤
          return true;
          break;
        case "free":
          return elem.is_free === "1";
          break;
        case "vip":
          return elem.is_free === "0";
          break;
        default:
          return true;
      }
    });
    return arr;
  }
  //模板渲染
  function renderList(data) {
    var list = "";
    data.forEach(function (elem, index, arr) {
      list += tpl.replace(/{{(.*?)}}/g, function (node, key) {
        return {
          course: elem.course,
        }[key];
      });
    });
    return list;
  }
  init();
})();
//封装myFilter
Array.prototype.myFilter = function (fn) {
  var arr = this,
    len = arr.length,
    arg2 = arguments[1] || window,
    _newArr = [],
    item;
  for (var i = 0; i < len; i++) {
    item = deepClone(arr[i]);
    fn.apply(arg2, [arr[i], i, arr]) ? _newArr.push(item) : "";
  }
  return _newArr;
};
//利用递归克隆函数进行再次循环
function deepClone(origin, target) {
  var target = target || {},
    toStr = Object.prototype.toString,
    arrType = "[object Array]";
  for (var key in origin) {
    if (origin.hasOwnProperty(key)) {
      if (typeof origin[key] === "object" && origin[key] !== null) {
        if (toStr.call(origin[key]) === arrType) {
          target[key] = [];
        } else {
          target[key] = {};
        }
        deepClone(origin[key], target[key]);
      } else {
        target[key] = origin[key];
      }
    }
  }
  return target;
}

数据筛选案例2：利用reduce函数实现搜索框输入内容返回匹配到的搜索结果

<input type="text" id="J_searchInput" placeholder="搜索课程">
  <ul class="J_list">
<ul class="J_list">
    <span>- 暂无数据 -</span>
</ul>

课程数据

/**
 * 案例：搜索课程
 */
;
(function (doc, data) {
  //获取节点元素
  var oInput = doc.getElementById('J_searchInput'),
    oList = doc.getElementsByClassName('J_list')[0];
  function init() {
    bindEvent();
  }
  function bindEvent() {
    oInput.addEventListener('input', searchInput, false);
  }
  function searchInput() {
    var val = this.value,
      len = val.length;
    if (len > 0) {
      if (makeList(searchData(data, val))) {
        oList.innerHTML = makeList(searchData(data, val));
      } else {
        oList.innerHTML = '<span>- 暂无数据 -</span>';
      }
    } else {
      oList.innerHTML = '<span>- 暂无数据 -</span>';
    }
  }
  /**
   * 处理数据函数-筛选数据
   * 
   * @data 后台数据  
   * @keyword input关键字  
   * @返回值 如果输入内容存在数据字段里就筛选出来并push到数组里
   * 
   */
  function searchData(data, keyword) {
    return data.reduce(function (prev, elem) {
      //筛选操作
      var res = elem.course.indexOf(keyword);
      //该字段数据存在
      if (res !== -1) {
        prev.push(elem);
      }
      return prev;
    }, []);
  }
  /**
   * 字符串拼接list列表
   * @matchData 筛选整理好的数据
   */
  function makeList(matchData) {
    var list = '';
    //没有数据什么都不做
    if (!matchData || matchData.length <= 0) {
      return false;
    } else {
      matchData.forEach(function (item) {
        list += '<li>' + item.course + '</li>';
      })
    }
    return list;
  }
  init();
})(document, courseData);

JS运动

案例：鼠标移入下拉菜单动态下滑列表

    a {
      text-decoration: none;
    }
    ul {
      padding: 0;
      margin: 0;
      list-style: none;
    }
    .dropdown {
      position: relative;
      width: 200px;
      height: 50px;
      background-color: #000;
    }
    .dropdown::after {
      content: '';
      display: table;
      position: absolute;
      top: 18px;
      right: 15px;
      width: 15px;
      height: 15px;
      background-image: url(icons/arrow-down.png);
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }
    .dropdown.up::after {
      background-image: url(icons/arrow-top.png);
    }
    .dropdown .list {
      height: 0px;
      overflow: hidden;
    }
    .dropdown a {
      display: block;
    }
    .dropdown .main {
      height: 100%;
      text-align: center;
      line-height: 50px;
      color: #fff;
    }
    .dropdown .item {
      height: 40px;
      background-color: #333;
    }
    .dropdown .item:hover {
      background-color: #000;
    }
    .dropdown .item a {
      height: 100%;
      color: #999;
      text-align: center;
      line-height: 40px;
    }

<div class="dropdown">
  <a href="javascript:;" class="main">下拉菜单</a>
  <ul class="list">
    <li class="item"><a href=""></a> 第1个项目</li>
    <li class="item"><a href=""></a> 第2个项目</li>
    <li class="item"><a href=""></a> 第3个项目</li>
    <li class="item"><a href=""></a> 第4个项目</li>
    <li class="item"><a href=""></a> 第5个项目</li>
  </ul>
</div>

var dropdown = document.getElementsByClassName('dropdown')[0],
  oList = elemChildren(dropdown)[1],
  timer = null,
  listHeight = 0,
  speed = 8;
dropdown.onmouseenter = function () {
  clearInterval(timer);
  timer = setInterval(function () {
    if (listHeight >= 200) {
      clearInterval(timer);
    } else {
      listHeight = parseInt(getStyles(oList, 'height')) + speed;
      oList.style.height = listHeight + 'px';
    }
  }, 1);
  this.className += ' up';
}
dropdown.onmouseleave = function () {
  clearInterval(timer);
  timer = setInterval(function () {
    if (listHeight <= 0) {
      clearInterval(timer);
    } else {
      listHeight = parseInt(getStyles(oList, 'height')) - speed;
      oList.style.height = listHeight + 'px';
    }
  }, 1);
  this.className += 'dropdown';
}
function getStyles(elem, prop) {
  //检测getComputedStyle是否存在
  if (window.getComputedStyle) {
    //存在，打印具体属性值
    if (prop) {
      return window.getComputedStyle(elem, null)[prop];
    }
    //不存在，打印集合
    return window.getComputedStyle(elem, null);
  } else {
    if (prop) {
      return elem.currentStyle[prop];
    } else {
      return elem.currentStyle;
    }
  }
}
//找子元素函数
function elemChildren(node) {
  var temp = {
    'length': 0,
    'push': Array.prototype.push,
    'splice': Array.prototype.splice
  };
  var children = node.childNodes,
    len = children.length,
    item;
  for (var i = 0; i < len; i++) {
    item = children[i];
    if (item.nodeType === 1) {
      temp.push(item);
    }
  }
  return temp;
}

页面尺寸

案例：自动阅读读书

知识点：

• 两栏布局：左边盒子绝对定位，右边盒子不用设置宽度，只设置margin-left

• 省略三件套：

  • overflow: hidden;
  • text-overflow: ellipsis;
  • white-space: nowrap;
• 滚动事件

• 插件三件套

  • 立即执行函数
  • 原型上挂载方法
  • 构造函数赋值给window window.AutoReader = AutoReader;

功能：

1. 回到顶部
2. 自动播放/暂停阅读
3. 内容触底会暂停播放
4. 具有配置项的插件

源码地址：https://gitee.com/kevinleeeee/auto-reader-demo

面向过程

过程开发todolist

DOM结构划分组件

图标库：https://fontawesome.com.cn/faicons

///common.css
body {
  margin: 0;
}
a {
  text-decoration: none;
}
ul {
  padding: 0;
  margin: 0;
  list-style: none;
}
h1,
h2,
h3,
h4,
h5,
h6,
p {
  margin: 0;
  font-weight: bold;
}
input,
button {
  outline: none;
  box-sizing: border-box;
  border: none;
}

//index.css
.wrap {
  position: relative;
  width: 500px;
  height: 500px;
  margin: 50px auto;
  box-shadow: 0 0 5px #999;
  border-radius: 10px;
  overflow: hidden;
}
.wrap .list-hd {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 44px;
  background-color: #000;
  color: #fff;
  text-align: center;
  line-height: 44px;
}
.list-hd .fa-plus {
  position: absolute;
  top: 15px;
  right: 15px;
  color: #fff;
}
.input-wrap {
  display: none;
  position: absolute;
  top: 44px;
  left: 0;
  width: 100%;
  height: 40px;
  border-bottom: 1px solid #ddd;
}
.input-wrap .input-bd {
  float: left;
  width: 384px;
  height: 100%;
  padding: 0px 5px 5px 10px;
}
.input-wrap .input-bd input {
  width: 100%;
  height: 100%;
  border: 1px solid #ddd;
}
.input-wrap .btn-bd {
  float: left;
  width: 86px;
  height: 100%;
  padding: 0px 10px 5px 5px;
}
.input-wrap .btn-bd button {
  width: 100%;
  height: 100%;
  border: 1px solid #ddd;
  background-color: #fff;
}
.list-warp {
  height: 456px;
  margin-top: 44px;
  overflow: auto;
}
.list-wrap .item {
  position: relative;
  height: 50px;
}
.list-warp .item:nth-child(odd),
.list-warp .item:hover {
  background-color: #eee;
}
.list-warp .item .item-content {
  position: absolute;
  left: 0;
  top: 0;
  width: 400px;
  height: 100%;
  line-height: 50px;
  text-indent: 15px;
}
.list-warp .item .btn-group {
  height: 100%;
  margin-left: 400px;
  line-height: 50px;
}
.list-warp .item .btn-group a {
  margin-left: 15px;
}
.list-warp .item .btn-group .edit-btn {
  color: green;
}
.list-warp .item .btn-group .remove-btn {
  color: red;
}

  <!-- plus 图标 -->
  <link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" />
  <link rel="stylesheet" href="css/normalize.css" />
  <link rel="stylesheet" href="./css/common.css" />
  <link rel="stylesheet" href="./css/index.css" />

  <!-- 包装器 -->
  <div class="wrap">
    <!-- header -->
    <div class="list-hd">
      <h2>TodoList</h2>
      <!-- 承载图标 -->
      <a href="javascript:;" class="j-show-input fa fa-plus"></a>
    </div>
    <div class="input-wrap">
      <div class="input-bd">
        <input type="text" id="textInput" />
      </div>
      <div class="btn-bd">
        <button class="j-add-item">增加项目</button>
      </div>
    </div>
    <div class="list-warp">
      <ul class="j-list list"></ul>
    </div>
  </div>
  <script type="text/javascript" src="./js/utils.js"></script>
  <script type="text/javascript" src="./js/index.js"></script>

init();
//模块化和组件化开发todolist
function init() {
  initTodoList;
}
var initTodoList = (function () {
  var showInput = document.getElementsByClassName('j-show-input')[0],
    inputWrap = document.getElementsByClassName('input-wrap')[0],
    addItem = document.getElementsByClassName('j-add-item')[0],
    textInput = document.getElementById('textInput'),
    oList = document.getElementsByClassName('j-list')[0];
  inputShow = false;
  //事件绑定函数
  addEvent(showInput, 'click', function () {
    //如果为真，点击为假
    if (inputShow) {
      inputWrap.style.display = 'none';
      inputShow = false;
    } else {
      inputWrap.style.display = 'block';
      inputShow = true;
    }
  });
  addEvent(addItem, 'click', function () {
    //获取动态的lis列表(类数组)
    var oItems = document.getElementsByClassName('item'),
      val = textInput.value,
      len = val.length,
      itemLen = oItems.length,
      item;
    //情况1：输入框为空
    if (len === 0) {
      return;
    }
    //遍历对比模板字符p标签里面的text
    for (var i = 0; i < itemLen; i++) {
      //item 是 li
      // item = oItems[i];
      //但希望找的是p里面的text
      //解决方法
      item = elemChildren(oItems[i])[0];
      //此时能找到p元素
      // console.log(item);
      var text = item.innerText;
      //去重
      if (val === text) {
        alert('已存在此项目');
        return;
      }
    }
    //新增li
    var oLi = document.createElement('li');
    oLi.className = 'item';
    //把输入框的值传入模板函数里
    oLi.innerHTML = itemTpl(val);
    oList.appendChild(oLi);
    //清空输入框
    textInput.value = '';
    //隐藏输入框
    inputWrap.style.display = 'none';
    //更改状态
    inputShow = false;
  })
  // 处理模板
  //直接返回字符串替换
  function itemTpl(text) {
    return (
      '<p class="item-content">' + text + '</p>' +
      '<div class="btn-group">' +
      '<a href="javascript:;" class="edit-btn fa fa-edit"></a>' +
      '<a href="javascript:;" class="remove-btn fa fa-times"></a>' +
      '</div>'
    )
  }
})();

面向对象

插件化开发todolist

index.css

.wrap {
  position: relative;
  width: 500px;
  height: 500px;
  margin: 50px auto;
  box-shadow: 0 0 5px #999;
  border-radius: 10px;
  overflow: hidden;
}
.wrap .list-hd {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 44px;
  background-color: #000;
  color: #fff;
  text-align: center;
  line-height: 44px;
}
.list-hd .fa-plus {
  position: absolute;
  top: 15px;
  right: 15px;
  color: #fff;
}
.input-wrap {
  display: none;
  position: absolute;
  top: 44px;
  left: 0;
  width: 100%;
  height: 40px;
  border-bottom: 1px solid #ddd;
  z-index: 1;
}
.input-wrap .input-bd {
  float: left;
  width: 384px;
  height: 100%;
  padding: 0px 5px 5px 10px;
}
.input-wrap .input-bd input {
  width: 100%;
  height: 100%;
  border: 1px solid #ddd;
}
.input-wrap .btn-bd {
  float: left;
  width: 86px;
  height: 100%;
  padding: 0px 10px 5px 5px;
}
.input-wrap .btn-bd button {
  width: 100%;
  height: 100%;
  border: 1px solid #ddd;
  background-color: #fff;
}
.list-warp {
  height: 456px;
  margin-top: 44px;
  overflow: auto;
}
.list-warp .item {
  position: relative;
  height: 50px;
}
.list-warp .item:nth-child(odd),
.list-warp .item:hover {
  background-color: #eee;
}
.list-warp .list.item.active{
  background-color: #dff0d8;
}
.list-warp .item .item-content {
  position: absolute;
  left: 0;
  top: 2%;
  width: 400px;
  height: 100%;
  line-height: 50px;
  text-indent: 15px;
}
.list-warp .item .btn-group {
  height: 50px;
  line-height: 50px;
  margin-left: 400px;
}
.list-warp .item .btn-group a {
  margin-left: 15px;
}
.list-warp .item .btn-group .edit-btn {
  color: green;
}
.list-warp .item .btn-group .remove-btn {
  color: red;
}

common.css

body {
  margin: 0;
}
a {
  text-decoration: none;
}
ul {
  padding: 0;
  margin: 0;
  list-style: none;
}
h1,
h2,
h3,
h4,
h5,
h6,
p {
  margin: 0;
  font-weight: bold;
}
input,
button {
  outline: none;
  box-sizing: border-box;
  border: none;
}

    <!-- plus 图标 -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" />
    <link rel="stylesheet" href="./css/normalize.css" />
    <link rel="stylesheet" href="./css/common.css" />
    <link rel="stylesheet" href="./css/index.css" />

  <!-- 包装器 -->
  <div class="wrap" data-config='{
    "plusBtn": "j-plus-btn",
    "inputArea": "input-wrap",
    "addBtn": "j-add-item",
    "list": "item-list",
    "itemClass": "item"
  }'>
    <!-- header -->
    <div class="list-hd">
      <h2>TodoList</h2>
      <!-- 承载图标 -->
      <a href="javascript:;" class="j-plus-btn j-show-input fa fa-plus"></a>
    </div>
    <div class="input-wrap">
      <div class="input-bd">
        <input type="text" id="textInput" class="content"/>
      </div>
      <div class="btn-bd add-btn">
        <button class="j-add-item">增加项目</button>
      </div>
    </div>
    <div class="list-warp">
      <ul class="j-list list"></ul>
    </div>
  </div>

(function (doc) {
  //构造函数
  var TodoList = function () {
    var _self = this;
    this.inputShowStatus = "close";
    this.configList = this.getConfig();
    this.editStatus = false;
    this.idx = 0;
    //默认配置项
    this.defaultConfig = {
      addBtn: "",
      inputArea: "",
      itemClass: "",
      list: "",
      plusBtn: "",
    };
    //对比有没有填写完整
    //对比是否键名/键值匹配
    for (var key in this.defaultConfig) {
      if (!this.configList.hasOwnProperty(key)) {
        //如果用户书写插件配置不完整时抛出错误提示
        console.log(errorLog(key));
        return;
      }
    }
    //获取节点元素
    this.setConfig();
    //事件
    //点击加号：开启/关闭输入文本框
    addEvent(this.plusBtn, "click", function () {
      _self.inputShow.call(_self);
    });
    //增加项目按钮：新增/修改
    addEvent(this.addBtn, "click", function () {
      _self.addOrEditItem.call(_self);
    });
    //列表： 编辑
    addEvent(this.list, "click", function (e) {
      _self.listPage.apply(_self, [e]);
    });
  };
  //原型
  TodoList.prototype = {
    //获取配置列表
    getConfig: function () {
      return JSON.parse(
        doc.getElementsByClassName("wrap")[0].getAttribute("data-config")
      );
    },
    //设置配置列表
    setConfig: function () {
      //获取元素节点
      this.plusBtn = doc.getElementsByClassName(this.configList.plusBtn)[0];
      this.inputArea = doc.getElementsByClassName(this.configList.inputArea)[0];
      this.addBtn = doc.getElementsByClassName(this.configList.addBtn)[0];
      this.content = doc.getElementsByClassName("content")[0];
      this.list = doc.getElementsByClassName("j-list")[0];
      // console.log(this);
    },
    //事件处理函数：开启/关闭输入框
    inputShow: function () {
      if (this.inputShowStatus === "open") {
        this.inputArea.style.display = "block";
        this.inputShowStatus = "close";
      } else if (this.inputShowStatus === "close") {
        this.inputArea.style.display = "none";
        this.inputShowStatus = "open";
      }
    },
    //事件处理函数：点击新增/修改按钮
    addOrEditItem: function () {
      var inputValue = this.content.value,
        valueLen = inputValue.length,
        _oItems = doc.getElementsByClassName("item"),
        _item;
      //情况1：如果文本框没有内容
      if (valueLen === 0) {
        alert("请您在输入框输入文本内容");
        return;
      }
      //情况2：去重
      for (var i = 0; i < _oItems.length; i++) {
        _item = _oItems[i];
        if (inputValue === elemChildren(_item)[0].innerText) {
          alert("该项目已经存在");
          return;
        }
      }
      //情况3：判断按钮状态 新增/编辑
      if (this.editStatus) {
        elemChildren(_oItems[this.idx])[0].innerText = inputValue;
        this.addBtn.innerText = "增加项目";
        this.editStatus = false;
      } else {
        this.add();
      }
      this.reset();
    },
    edit: function (tar) {
      // console.log("editing");
      var _p = elemChildren(elemParent(tar, 2))[0],
        _item = elemParent(tar, 2),
        _items = elemChildren(this.list),
        _idx = Array.prototype.indexOf.call(_items, _item),
        _lItem;
      this.idx = _idx;
      this.inputShowStatus === "open";
      this.inputArea.style.display = "block";
      //修改被点击编辑按钮时li的背景色
      for (var i = 0; i < _items.length; i++) {
        _lItem = _items[i];
        _lItem.className = "list item";
      }
      _item.className += " active";
      this.content.value = _p.innerText;
      this.addBtn.innerText = "修改第" + (_idx + 1) + "项";
      this.editStatus = true;
    },
    add: function () {
      // console.log("adding");
      var inputValue = this.content.value,
        oLi = doc.createElement("li"),
        oList = doc.getElementsByClassName("list")[0];
      oLi.innerHTML = this.tpl(inputValue);
      oLi.className += " item";
      oList.appendChild(oLi);
    },
    //事件处理函数：点击页面修改/删除
    listPage: function (e) {
      var e = e || window.event,
        tar = e.target || e.srcElement,
        tagName = tar.tagName;
      if (tagName === "A") {
        if (tar.className === "edit-btn fa fa-edit") {
          this.edit(tar);
        } else if (tar.className === "remove-btn fa fa-times") {
          this.delItem(tar);
        }
      }
    },
    //删除当前项
    delItem: function (tar) {
      var _item = elemParent(tar, 2),
        _itemF = elemParent(tar, 3);
      _itemF.removeChild(_item);
    },
    //重置
    reset: function () {
      this.content.value = "";
      this.inputArea.style.display = "none";
    },
    //模板处理
    tpl: function (text) {
      return (
        '<p class="item-content">' +
        text +
        "</p>" +
        '<div class="btn-group">' +
        '<a href="javascript:;" class="edit-btn fa fa-edit"></a>' +
        '<a href="javascript:;" class="remove-btn fa fa-times"></a>' +
        "</div>"
      );
    },
  };
  //普通函数
  //错误日志模板
  function errorLog(key) {
    return new Error(
      "您没有配置参数" +
        key +
        "\n" +
        "必须配置的参数列表如下：\n" +
        "打开输入框按钮元素类名：plusBtn \n" +
        "输入框区域元素类名: inputArea \n" +
        "增加项目按钮元素类名：addBtn \n" +
        "列表承载元素类名：list \n" +
        "列表项承载元素类名：itemClass"
    );
  }
  new TodoList();
})(document);

输入框事件

京东搜索框

• 功能一：随机轮播提示
• 功能二：获得焦点/失去焦点样式变化

注：企业开发的黑色#424242

    input {
      outline: none;
      border: none;
      box-sizing: border-box;
    }
    .input-wrap {
      position: relative;
      width: 250px;
      height: 35px;
      margin: 50px auto;
    }
    .input-wrap .auto-kw {
      position: absolute;
      top: 8px;
      left: 5px;
      z-index: -1;
      font-style: 14px;
      color: #989898;
    }
    .input-wrap .auto-kw.show {
      display: block;
      color: #989898;
    }
    .input-wrap .auto-kw.hide {
      display: none;
      color: #666;
    }
    .input-wrap .search-input {
      width: 100%;
      height: 100%;
      background-color: transparent;
      border: 1px solid #ddd;
      text-indent: 5px;
      color: #424242;
    }

  <div class="input-wrap">
    <!-- 自动关键字 -->
    <div class="auto-kw" id="J_autoKw">推荐词</div>
    <input type="text" id="J_search_kw" class="search-input">
  </div>
  <!-- 推荐词 -->
  <div id="J_recomKw" style="display: none;">
    ["美丽独立日","LG显示器","洗发水套装","电脑主机","笔记本内存条"]
  </div>

function init() {
  keySearch();
}
var keySearch = (function () {
  //获取input
  var searchKw = document.getElementById('J_search_kw'),
    //获取默认推荐词div
    autoKw = document.getElementById('J_autoKw'),
    //获取推荐词列表
    recomKw = JSON.parse(document.getElementById('J_recomKw').innerHTML),
    //下标
    kwOrder = 0,
    //计时器
    t = null;
  //计时器
  setAutoKeys();
  //获得焦点
  addEvent(searchKw, 'focus', function () {
    clearInterval(t);
    autoKw.style.color = '#ccc';
  })
  //失去焦点
  addEvent(searchKw, 'blur', function () {
    autoKwShow(this.value, true);
    t = setInterval(autoKwChange, 3000);
  })
  //input事件
  addEvent(searchKw, 'input', function () {
    autoKwShow(this.value, false);
  })
  //input事件兼容
  addEvent(searchKw, 'propertychange', function () {
    autoKwShow(this.value, false);
  })
  //随机轮播提示
  function setAutoKeys() {
    // 因为一加载页面就显示推荐词，所以得在计时器前执行一次autoKwChange
    autoKwChange();
    t = setInterval(autoKwChange, 3000);
  }
  //随机轮播提示
  function autoKwChange() {
    var len = recomKw.length;
    autoKw.innerHTML = recomKw[kwOrder];
    //列表超出列表数组范围赋值为0否则下标号自增
    kwOrder = kwOrder >= len - 1 ? 0 : kwOrder + 1;
  }
  //是否显示输入框文本内容
  function autoKwShow(val, isBlur) {
    if (val.length <= 0) {
      autoKw.className = 'auto-kw show';
      autoKw.style.color = isBlur ? '#989898' : '#ccc';
    } else {
      autoKw.className = 'auto-kw hide';
    }
  }
});
init();

移入移出事件

案例一：移动鼠标改变手机列表样式

源码地址：https://gitee.com/kevinleeeee/mouseover-event-demo/tree/master

;
(function (doc) {
  var oItems = doc.getElementsByClassName('list-item'),
    curIdx = 0,
    oList = doc.getElementsByClassName('list')[0];
  var init = function () {
    bindEvent();
  }
  function bindEvent() {
    //写法一：循环绑定
    for (var i = 0; i < oItems.length; i++) {
      addEvent(oItems[i], 'mouseover', function () {
        oItems[curIdx].className = 'list-item';
        //this -> oItems[i]
        curIdx = Array.prototype.indexOf.call(oItems, this);
        oItems[curIdx].className += ' active';
      })
    }
    //写法二：事件代理
    addEvent(oList, 'mouseover', slide);
  }
  //写法二：事件代理
  function slide(ev) {
    var e = ev || window.event,
      tar = e.target || e.srcElement;
    oLi = getLi(tar, 'li');
    thisIdx = Array.prototype.indexOf.call(oItems, oLi);
    // 证明不是active
    if (curIdx !== thisIdx) {
      //原来的项还原类名
      oItems[curIdx].className = 'list-item';
      curIdx = thisIdx;
      oItems[curIdx].className += ' active';
    }
  }
  //写法二：事件代理
  //找到被触发的li元素
  function getLi(target, element) {
    // console.log(target.tagName.toLowerCase());
    // console.log(target.parentNode);
    while (target.tagName.toLowerCase() !== element) {
      target = target.parentNode;
    }
    return target;
  }
  init();
})(document)