5 - 模板替换案例1. 页面布局-html 2. 样式文件-css common.css course.css 3.

1. 页面布局-html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>【实战】模板替换案例</title>
    <link rel="stylesheet" href="../../css/common.css" />
    <link rel="stylesheet" href="css/course.css" />
</head>

<body>
    <div class="courses-warp">
        <div class="course-card-list-warp">
            <ul class="couse-card-list">
            </ul>
        </div>
    </div>
    <div id="js-course-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前端工程师就业班之深度JSDOM+讲师辅导-第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"}
        ]
    </div>
    <!-- 模板 -->
    <script type="text/html" id="js-card-item-tpl">
        <li class="card-item">
            <a href="" class="item-img"><img src="img/{{img}}" /></a>
            <h4 class="item-tt"><a href="" class="tt-lk">{{courseName}}</a></h4>
            <div class="item-line">
                <span class="item-price {{isFree}}">{{price}}</span>
                <span class="item-info">共{{hours}}课时</span>
            </div>
        </li>
    </script>
    <script src="js/course.js"></script>
</body>

</html>

2. 样式文件-css

common.css

body {
    margin: 0;
}

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

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

h1,
h2,
h3,
h4,
h5,
h6,
p {
    margin: 0;
    font-weight: bold;
}

div {
    box-sizing: border-box;
}

input,
button {
    outline: none;
    box-sizing: border-box;
}

course.css

.courses-warp {
    width: 1200px;
    margin: 50px auto;
}

.clearfix::after {
    content: "";
    clear: both;
}

.course-tab-list .tab-item {
    float: left;
    margin-right: 20px;
}

.course-tab-list .current {
    color: #288ff0;
}

.couse-card-list {
    display: flex;
    flex-flow: wrap;
}

.couse-card-list .card-item {
    position: relative;
    width: 220px;
    height: 224px;
    padding: 7px 7px 10px;
    margin-bottom: 20px;
    margin-right: 10px;
    border: 1px solid transparent;
}

.couse-card-list .card-item:hover {
    border: 1px solid #eee;
}

.couse-card-list .card-item .item-img img {
    width: 220px;
}

.couse-card-list .card-item .tt-lk {
    font-size: 14px;
    color: #333;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
}

.couse-card-list .card-item .item-line {
    position: absolute;
    bottom: 10px;
    left: 10px;
}

.couse-card-list .card-item .item-line .free {
    color: #f4621f;
}

.couse-card-list .card-item .item-line .item-info {
    color: #999;
    margin-left: 10px;
    font-size: 12px;
}

3. js文件-course.js

var initCourseTab = (function (doc, win) {
    var courseData = JSON.parse(doc.getElementById('js-course-data').innerHTML), //获取数据，并转成json对象
        cardItemTpl = doc.getElementById('js-card-item-tpl').innerHTML, // 模板
        oCouseCardList = doc.getElementsByClassName('couse-card-list')[0]; //获取课程列表ul      

    return {
        //初始化，加载全部课程
        initCourseList: function () {
            oCouseCardList.innerHTML = this.renderList(courseData);
        },

        // 初始化列表，默认选择全部
        restoreList: function () {
            oCouseCardList.innerHTML = this.renderList(courseData);
        },
   
        //列表为空提示
        showTip: function (text) {
            return '<div class="course-list-tip"><span>' + text + '</span></div>'
        },

        //列表渲染
        renderList: function (data) {
            var list = '';
            data.forEach(function (elem) {
                list += cardItemTpl.replace(/{{(.*?)}}/g, function (node, key) {
                    return {
                        img: elem.img,
                        courseName: elem.course,
                        isFree: elem.is_free === '1' ? 'free' : 'vip',
                        price: elem.is_free === '1' ? '免费' : ("￥" + Number(elem.price).toFixed(2)),
                        hours: elem.classes
                    } [key];
                });
            });
            return list;
        },

    }
})(document, window);

;
(function (doc) {
    var init = function () {
        initCourseTab.initCourseList(); //初始化，加载全部课程
    }
    init();
})(document);

5 - 模板替换案例

1. 页面布局-html

2. 样式文件-css

3. js文件-course.js

4. 效果