一、面向对象初步认识

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. 【FICO系列】SAP FICO 基本概念

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[FICO系列]SAP FICO 基本概念   ...

  2. django配置mysql报错 no model named "MySQLdb"

    官网上面连接mysql数据库的参数很少,入了不少坑,一直排错和检查参数都没有问题,只能manage.py mirgrate 更新数据库的信息创建数据库的表. 很是郁闷.报了一大堆的错误,大概意思就是说 ...

  3. Hadoop运行模式：本地模式、伪分布模式、完全分布模式

    1.本地模式:默认模式 - 不对配置文件进行修改. - 使用本地文件系统,而不是分布式文件系统. - Hadoop不会启动NameNode.DataNode.ResourceManager.NodeM ...

  4. Mybatis中SqlSessionFactory和SqlSession学习和原理

    源码git地址:https://github.com/mybatis/mybatis-3 目标结构: mybatis是数据持久化解决方案将用户从JDBC访问中解放出来,用户只需要定义需要操作的SQL语 ...

  5. 【洛谷p1314】聪明的质监员

    聪明的质监员[题目链接] 有关算法: 二分答案: 但是你只二分答案是不够的,因为你check会炸,所以还要考虑前缀和: 首先假装我们的check已经写好了,main函数: int main() { n ...

  6. Rest_Framework的视图与路由

    视图与路由 drf除了在数据序列化部分简写代码以外,还在视图中提供了简写操作.所以在django原有的django.views.View类基础上,drf封装了多个子类出来提供给我们使用. Django ...

  7. java 线程池（线程的复用）

    一. 线程池简介 1. 线程池的概念: 线程池就是首先创建一些线程,它们的集合称为线程池.使用线程池可以很好地提高性能,线程池在系统启动时即创建大量空闲的线程,程序将一个任务传给线程池,线程池就会启动 ...

  8. C# System.Web.Caching.Cache类 缓存 各种缓存依赖

    原文:https://www.cnblogs.com/kissdodog/archive/2013/05/07/3064895.html Cache类,是一个用于缓存常用信息的类.HttpRuntim ...

  9. Node 12 值得关注的新特性

    前言 时隔一年,Node.js 12 如约而至,正式发布第一个 Current 版本. 该版本带来了诸如: V8 更新带来好多不错的特性. HTTP 解析速度提升. 启动速度大幅提升. 更好的诊断报告 ...

  10. windows 安装nodejs 和 npm

    1.从nodejs官网下载 安装文件,我安装的版本是  node-v10.15.0-x64.msi ,双击进行安装. 2.安装完成后可以查看相关目录,这里会有一个node_modules目录和node ...