1.面向对象写法的缺点

复杂的this指向
性能问题: 对象.属性引起的性能问题

2.面向对象的应用场景

高度复用性
**

3.实战 HTML与视频不同 但js一致

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>Document</title>
  9.     <link rel="stylesheet" href="./css/index.css">
  10. </head>
  12. <body>
  13.     <div class="courses-wrap">
  14.         <input type="text" id="js-search-input" placeholder="搜索课程">
  16.         <div class="course-card-list-wrap">
  17.             <ul class="course-card-list">
  18.             </ul>
  19.         </div>
  20.     </div>
  22.     <div id="J_data" style="display: none;">
  23.         [{"id":"1","course":"前端开发之企业级深度JavaScript特训课【JS++前端】","classes":"19","teacher":"小野","img":"1.jpg","is_free":"1","datetime":"1540454477","price":"0","hours":"18"},
  24.         {"id":"2","course":"WEB前端工程师就业班之深度JSDOM+讲师辅导-第3期【JS++前端】","classes":"22","teacher":"小野","img":"2.jpg","is_free":"0","datetime":"1540454477","price":"699","hours":"16"},
  25.         {"id":"3","course":"前端开发之企业级深度HTML特训课【JS++前端】","classes":"3","teacher":"小野","img":"3.jpg","is_free":"1","datetime":"1540454477","price":"0","hours":"12"},
  26.         {"id":"4","course":"前端开发之企业级深度CSS特训课【JS++前端】","classes":"5","teacher":"小野","img":"4.jpg","is_free":"1","datetime":"1540454477","price":"0","hours":"13"},
  27.         {"id":"5","course":"前端就业班VueJS+去哪儿网+源码课+讲师辅导-第3期【JS++前端】","classes":"50","teacher":"哈默","img":"5.jpg","is_free":"0","datetime":"1540454477","price":"1280","hours":"11"},
  28.         {"id":"6","course":"前端就业班ReactJS+新闻头条实战+讲师辅导-第3期【JS++前端】","classes":"21","teacher":"托尼","img":"6.jpg","is_free":"0","datetime":"1540454477","price":"2180","hours":"13"},
  29.         {"id":"7","course":"WEB前端开发工程师就业班-直播/录播+就业辅导-第3期【JS++前端】","classes":"700","teacher":"JS++名师团","img":"7.jpg","is_free":"0","datetime":"1540454477","price":"4980","hours":"19"}]
  30.     </div>
  31.     <script type="text/html" id="J_cardItemTpl">
  32.         <li class="card-item">
  33.             <a href="" class="img-lk">
  34.                 <img src="img/{{img}}" alt="">
  35.             </a>
  36.             <div class="item-status">
  37.                 <span class="item-status-text">随到随学</span>
  38.             </div>
  39.             <h4 class="item-tt">
  40.                 <a href="" class="tt-lk">{{course}}</a>
  41.             </h4>
  42.             <div class="item-line">
  43.                 <span class="item-price {{isFree}}">{{price}}</span>
  44.                 <span class="item-info">{{hours}}课时</span>
  45.             </div>
  46.         </li>
  47.     </script>
  48.     <script type="text/javascript" src="./js/index.js">
  49.     </script>
  50. </body>
  52. </html>

**

* {
    margin: 0;
    box-sizing: border-box;
}

ul {
    padding: 0;
    list-style: none;
}

a {
    text-decoration: none;
    color: #333;
}

img {
    width: 100%;
    height: 100%;
}

h4 {
    font-weight: normal;
}

.clearfix::after,
.clearfix::before {
    content: "";
    display: block;
    clear: both;
}

.courses-wrap {
    width: 1200px;
    margin: 100px auto;
}

.course-tab {
    height: 52px;
    padding-left: 30px;
    margin-bottom: 20px;
    border: 1px solid #efefef;
    background-color: #f5f5f5;

}

.course-tab .tab-item {
    float: left;
    height: 50px;
    margin-right: 40px;
    line-height: 50px;
}

.course-tab .tab-item .course-tab-lk.current {
    color: #167ed9;
}

.course-card-list-wrap {
    width: 1200px;
    height: 500px;
}

.course-card-list-wrap .course-card-list {
    width: 1235px;
    height: 500px;
    margin-left: -17px;
}

.course-card-list-wrap .course-card-list .course-list-tip {
    height: 300px;
    line-height: 300px;
    text-align: center;
    font-size: 30px;
    color: #999;
}

.course-card-list-wrap .card-item {
    float: left;
    width: 236px;
    height: 221px;
    margin: 0 0 20px 9px;
    padding: 7px 7px 10px 7px;
    border: 1px solid transparent;
}

.course-card-list-wrap .card-item:hover {
    border-color: #ddd;
    box-shadow: 1px 1px 2px 1px #ececec;
}

.course-card-list-wrap .card-item .img-lk {
    display: block;
    width: 220px;
    height: 124px;
    margin-bottom: 6px;
}

.course-card-list-wrap .card-item .item-status {
    position: relative;
    z-index: 1;
    height: 24px;
    margin-top: -30px;
    background-color: rgba(0, 0, 0, .5);
    line-height: 24px;
    color: #fff;
    font-size: 12px;
}

.course-card-list-wrap .card-item .item-status .item-status-text {
    margin-left: 2px;
}

.course-card-list-wrap .card-item .item-tt {
    height: 40px;
    margin: 3px 0 8px 0;
    overflow: hidden;
}

.course-card-list-wrap .card-item .item-tt .tt-lk {
    font-size: 14px;

}

.course-card-list-wrap .card-item .item-tt .tt-lk:hover {
    color: #23b8ff;
}

.course-card-list-wrap .card-item .item-line {
    height: 24px;
}

.course-card-list-wrap .card-item .item-line .item-price {
    font-size: 14px;
}

.course-card-list-wrap .card-item .item-line .item-price.free {
    color: #5fb41b;
}

.course-card-list-wrap .card-item .item-line .item-price.pay {
    color: #e85308;
}

.course-card-list-wrap .card-item .item-line .item-info {
    float: right;
    margin-top: 2px;
    font-size: 12px;
}

;
(function () {
    var listData = JSON.parse(document.getElementById('J_data').innerHTML),
        tpl = document.getElementById('J_cardItemTpl').innerHTML,
        oSearchInput = document.getElementById('js-search-input'),
        oPage = document.getElementsByClassName('course-card-list')[0];

    var options = {
        data: listData,
        template: tpl,
        wrap: oPage,
        speed: 800
    }

    var init = function () {
        renderList(options);
        bindEvent();
    }

    function bindEvent() {
        oSearchInput.addEventListener('input', searchList.bind(oSearchInput, options), false);
    }
    //  @target 渲染列表
    //  @options(opt)
    //      data:原JSON数据
    //      template:模板字符串
    //  @param: noDataTip - 无数据显示
    function renderList(opt) {
        var data = opt.data,
            dataLen = data.length,
            tpl = opt.template,
            oList = opt.wrap,
            list = "";
        if (dataLen > 0 && data) {
            data.forEach(function (val, idx, array) {
                list += tpl.replace(/{{(.*?)}}/g, function (node, key) {
                    return replaceTpl(val)[key];
                });
            });
            oList.innerHTML = list;
        } else {
            oList.innerHTML = noDataTip();
        }
    }

    function replaceTpl(value) {
        return {
            img: value.img,
            course: value.course,
            isFree: value.is_free === '1' ? 'free' : 'pay',
            price: value.price === '0' ? '免费' : ("￥" + value.price),
            hours: value.hours
        }
    }

    function searchList(opt) {
        var _self = this;
        setTimeout(function () {
            var kw = _self.value.replace(/\s+/g),
                data = opt.data,
                dataLen = data.length,
                _arr = [],
                item;
            for (var i = 0; i < dataLen; i++) {
                item = data[i];
                item.course.indexOf(kw) != -1 ? _arr.push(item) : '';
            }
            renderList({
                data: _arr,
                template: opt.template,
                wrap: opt.wrap
            }, noDataTip);
        }, opt.speed);
    }

    function noDataTip() {
        return '<p style="height:50px;line-height:50px;text-align:center;>- 没有搜索到数据 -</p>';
    }
    init();
})()

**