一、面向对象初步认识

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. spring boot 1.5.10.RELEASE ,spring boot admin 1.5.7 添加 security

    生产环境的客户端actuator最好是加上security校验,不然配置信息不登录就能直接获取到 server端配置,参考官方 文档,https://codecentric.github.io/spr ...

  2. python时间模块time,时间戳,结构化时间,字符串时间,相互转换,datetime

    time.time() 时间戳 time.localtime() time.localtime() 得到的是一个对象,结构化时间对象 struct_time 通过对象.属性,拿到对应的值 time.g ...

  3. virutalenv一次行安装多个requirements里的文件

  4. js获取select下拉框中的值

    现在有一id为userType的下拉框,怎么获取选中的值: 用户类型: <select name="type" id="userType"> < ...

  5. this,static,执行程序的顺序等等留意点

    self.static 和 $this 的区别为了更好地理解 self.static 和 $this 的区别,先来看一个示例. <?phpclass A { protected $name = ...

  6. 牛客小白月赛16 A 小石的签到题 ( 博弈)

    链接:https://ac.nowcoder.com/acm/contest/949/A来源:牛客网 时间限制:C/C++ 1秒,其他语言2秒 空间限制:C/C++ 262144K,其他语言52428 ...

  7. F. Fixing Banners

    http://codeforces.com/gym/102394/problem/F F. Fixing Banners time limit per test 1 second memory lim ...

  8. Python 中的 os 模块常见方法?

    os.remove() 删除文件 os.rename() 重命名文件 os.walk() 生成目录树下的所有文件名 os.chdir() 改变目录 os.mkdir/makedirs 创建目录/多层目 ...

  9. HTML5中的Web Worker

    什么是 Web Worker? 当在 HTML 页面中执行脚本时,页面是不可响应的,直到脚本已完成. Web worker 是运行在后台的 JavaScript,独立于其他脚本,不会影响页面的性能.您 ...

  10. Linux-安装python3环境

    Linux-安装python3环境 [root@node1 ~]# yum -y groupinstall "Development tools" [root@node1 ~]# ...