一、面向对象初步认识

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领 宽松 中长款 单排扣 粉色 复古 韩版"}

]

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

接下来我们看下效果：

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

JavaScript面向对象初步认识的更多相关文章

  1. JavaScript面向对象编程（一）原型与继承

    原型(prototype) JavaScript是通过原型(prototype)进行对象之间的继承.当一个对象A继承自另外一个对象B后,A就拥有了B中定义的属性,而B就成为了A的原型.JavaScri ...

  2. JavaScript学习笔记(三)——this、原型、javascript面向对象

    一.this 在JavaScript中this表示:谁调用它,this就是谁. JavaScript是由对象组成的,一切皆为对象,万物皆为对象.this是一个动态的对象,根据调用的对象不同而发生变化, ...

  3. JavaScript学习总结(三)——this、原型、javascript面向对象

    一.this 在JavaScript中this表示:谁调用它,this就是谁. JavaScript是由对象组成的,一切皆为对象,万物皆为对象.this是一个动态的对象,根据调用的对象不同而发生变化, ...

  4. Javascript面向对象特性实现封装、继承、接口详细案例——进级高手篇

    Javascript面向对象特性实现(封装.继承.接口) Javascript作为弱类型语言,和Java.php等服务端脚本语言相比,拥有极强的灵活性.对于小型的web需求,在编写javascript ...

  5. javascript面向对象系列第四篇——选项卡的实现

    前面的话 面向对象的应用并非只是读几本书那么容易,需要有大量的工程实践做基础才能真正理解并学会使用它.本文将用面向对象的技术来制作一个简单的选项卡 图示说明 由图示结果看到,这是一个非常简单的选项卡. ...

  6. javascript面向对象系列第三篇——实现继承的3种形式

    × 目录 [1]原型继承 [2]伪类继承 [3]组合继承 前面的话 学习如何创建对象是理解面向对象编程的第一步,第二步是理解继承.本文是javascript面向对象系列第三篇——实现继承的3种形式 [ ...

  7. javascript面向对象系列第一篇——构造函数和原型对象

    × 目录 [1]构造函数 [2]原型对象 [3]总结 前面的话 一般地,javascript使用构造函数和原型对象来进行面向对象编程,它们的表现与其他面向对象编程语言中的类相似又不同.本文将详细介绍如 ...

  8. Javascript面向对象(封装、继承)

    Javascript 面向对象编程(一):封装 作者:阮一峰 Javascript是一种基于对象(object-based)的语言,你遇到的所有东西几乎都是对象.但是,它又不是一种真正的面向对象编程( ...

  9. 《javascript面向对象精要》读书笔记

    <javascript面向对象精要> 买这本书的原因主要是因为作者,Nicholas C. Zakas 牛X闪闪的js专家,读过js高程的应该都知道他,而这本书是他的最新力作,感觉也是js ...

随机推荐

  1. @SuppressWarnings https://www.cnblogs.com/fsjohnhuang/p/4040785.html

    一.前言 编码时我们总会发现如下变量未被使用的警告提示: 上述代码编译通过且可以运行,但每行前面的“感叹号”就严重阻碍了我们判断该行是否设置的断点了.这时我们可以在方法前添加 @SuppressWar ...

  2. 在Window平台是模拟Linux的Shell环境

    在Linux平台模拟Linux的shell环境,可以通过一个软件实现:Cygwin(点击进入官网下载好即可),如下图(选择对应的版本进行下载): 安装: 1. 双击运行下载的安装包(选择从网络安装), ...

  3. 3.Golang的包导入

    1.golang的源码文件可以随意命名,但是属于同一个包的源文件必须声明 package base 2.golang的包引入规则 import ( "fmt" #系统包直接写名字 ...

  4. Python实现视频片头和片尾添加

    import imageio imageio.plugins.ffmpeg.download() from datetime import datetime import os from moviep ...

  5. 小白学Python（10）——pyecharts 绘制仪表图 Gauge

    from pyecharts import options as opts from pyecharts.charts import Gauge, Page gauge=( Gauge() .add( ...

  6. 【CF321E】+【bzoj5311】贞鱼

    决策单调性 + WQS二分 我们首先列出转移式: \(f[i]=Min(f[j]+Sum[j+1 , i])\) 首先我们考虑如果让一段区间的小鱼在一起的代价怎么预处理,我们可以对于一个上三角矩阵求个 ...

  7. Python笔记（读取txt文件中的数据）

    在机器学习中,常常需要读取txt文本中的数据,这里主要整理了两种读取数据的方式 数据内容 共有四列数据,前三列为特征值,最后一列为数据标签 40920 8.326976 0.953952 3 1448 ...

  8. PowerDesigner 使用说明

    1. 附加:工具栏不见了 调色板(Palette)快捷工具栏不见了PowerDesigner 快捷工具栏 palette 不见了,怎么重新打开,找回来呢 上网搜索了一下"powerdesig ...

  9. Ubuntu 安装 ansible

    sudo apt update sudo apt-get install software-properties-common sudo apt-add-repository --yes ppa:an ...

  10. IIS环境下PHP版本过低无法Sql查询的解决

    需求:帝国后台添加个后台框,输入地址,原页面重写成所指链接页面 重点:当输入框输入地址,提交到后台后,打开原链接,该页面会读取php文件GetUrlPage.php <?php header(& ...