JavaScript面向对象初步认识 | 易学教程

一、面向对象初步认识

1.什么是对象？

一句话解释：

万物皆对象

对象是有属性的：用{ }来写入！

2.对象的应用（接口）

json

接口简单的说就是后台提供给前端提供数据的，让我们进行渲染！

请求接口的时候我们会用到一个boom函数

fetch（）

3.小例子

代码如下：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        ul {
            list-style: none;
        }

        ul li {
            float: left;
            width: 224px;
            margin: 0 20px 20px 0;

        }

        .pic {
            width: 224px;
            height: 291px;
        }

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

        .qian {
            overflow: hidden;
        }

        .left {
            float: left;
            font-size: 16px;
            color: #f36;
        }

        .right {
            float: right;
        }

        .right em {
            width: 13px;
            height: 13px;
            display: inline-block;
        }

        .right em img {
            width: 100%;
        }

        .right span {
            color: #999;
            line-height: 14px;
            margin-left: 3px;
        }

        .bottom {
            width: 224px;
            color: #666;
            display: block;
            height: 16px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            font-size: 12px;
        }
    </style>
</head>

<body>
    <ul id="tblyifu">
        <!-- <li>
            <div class="pic">
                <img src="180512_2jcaf5j764850al4he48c3gehkgfe_640x960.jpg" alt="">
            </div>
            <div class="qian">
                <div class="left">
                    <em>¥</em>
                    <span>25.00</span>
                </div>
                <div class="right">
                    <em>
                        <img src="170328_88giad0l4lcl61kg8ak02567ddhfd_32x30.png" alt="">
                    </em>
                    <span>22</span>
                </div>
            </div>
            <div class="bottom">
                背心吊带 无袖打底衫 内搭 露背 短款 v领 针织 修身显瘦 纯色 韩版 夏季
            </div>
        </li> -->
    </ul>
    <script>
        var url = 'http://192.168.1.106:8000/data.json';

        fetch(url)
            .then((Response) => {
                return Response.text();
            })
            .then((data) => {
                var yifu = JSON.parse(data)

                console.log(data);
                var html = '';

                for (var i = 0; i < yifu.length; i++) {
                    var yifuhtml = '<li><div class="pic"><img src="' + yifu[i].pic + '" alt=""></div><div class="qian"><div class="left"><em>¥</em><span>' + yifu[i].jiage + '</span></div><div class="right"><em><img src="170328_88giad0l4lcl61kg8ak02567ddhfd_32x30.png" alt=""></em><span>' + yifu[i].shouchang + '</span></div></div><div class="bottom">' + yifu[i].biaoqian + '</div></li>';
                    console.log(yifuhtml);
                    html = yifuhtml + html;
                }
                tblyifu.innerHTML = html;
            })
    </script>
</body>

</html>

接口文件：

[
    {"pic":"1.jpg","jiage":55,"shouchang":88,"biaoqian":" 背心吊带 无袖打底衫 内搭 露背 短款 v领 针织 修身显瘦 纯色 韩版 夏季"},
    {"pic":"2.jpg","jiage":28,"shouchang":25,"biaoqian":"短袖衬衫 小方领 蓝色 宽松显瘦 学院风 百搭 中长款 简约 韩版"},
    {"pic":"3.jpg","jiage":79,"shouchang":117,"biaoqian":"长袖雪纺衫 碎花 polo领 宽松 中长款 单排扣 粉色 复古 韩版"}
]

以上就是我们通过调用接口数据渲染到前台的代码！

接下来我们看下效果：

新手小白，希望大家指教！

来源：https://www.cnblogs.com/homehtml/p/11848435.html

标签

pic