〖大前端 - 基础入门三大核心之JS篇(58)〗- 面向对象案例

  • 说明:该文属于 大前端全栈架构白宝书专栏,目前阶段免费如需要项目实战或者是体系化资源,文末名片加V!
  • 作者:哈哥撩编程,十余年工作经验, 从事过全栈研发、产品经理等工作,目前在公司担任研发部门CTO。
  • 荣誉:2022年度博客之星Top4、2023年度超级个体得主、谷歌与亚马逊开发者大会特约speaker全栈领域优质创作者

  • 🏆 白宝书系列
    • 🏅 启示录 - 攻城狮的自我修养
    • 🏅 Python全栈白宝书
    • 🏅 ChatGPT实践指南白宝书
    • 🏅 产品思维训练白宝书
    • 🏅 全域运营实战白宝书
    • 🏅 大前端全栈架构白宝书


文章目录

  • ⭐ 面向对象案例 - 红绿灯
  • ⭐ 面向对象案例 - 炫彩小球

⭐ 面向对象案例 - 红绿灯

接下来我们来做一个面向对象的小案例。

案例: 用面向对象编程的方法制作100个红绿灯,要求:鼠标每点击一次红绿灯,红绿灯的颜色就发生变化,变化顺序如下:红->黄->绿->红…(点击红灯就变黄,点击黄灯就变绿,点击绿灯就变红),效果图如下:

image-20231108111159036

第一步:定义类(面向对象最重要的就是编写类),完成初始化方法

首先定义一个TrafficLight(红绿灯)类

这个类的属性包括:当前颜色color属性、自己的DOM元素dom(因为在js中定义一个对象,这个对象是一个很抽象的数据结构,这个对象必须要通过自己的DOM属性才能管理自己下辖的这一片DOM,它的图片就是它的DOM)

这个类的方法包括:初始化init()、绑定事件bindEvent()、切换颜色changeColor()

实例化的对象本身是个key-value对的组合,包含color和dom对象,所以初学者可以理解为实例化类出来的这个对象比dom对象要”大“

第一步的代码如下:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="box"></div><script>// 定义红绿灯类function TrafficLight() {// 颜色属性,一开始都是红色// 红色1、黄色2、绿色3this.color = 1;// 调用自己的初始化方法this.init();}TrafficLight.prototype.init = function () {// 创建自己的domthis.dom = document.createElement('img');// 设置src属性this.dom.src = '/images/' + this.color + '.jpg';box.appendChild(this.dom);    // 上树}new TrafficLight();</script>
</body>
</html>

第一步定义了“红绿灯”类,并编写了这个类的初始化方法init(),在init()方法里利用DOM放了一个红绿灯的图片在网页上。每实例化一次类,网页上就会创建一个“独立”的红绿灯对象,对象和对象之间不会互相影响。

第二步:完成绑定监听方法

第二步的代码如下:

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><div id="box"></div><script>// 定义红绿灯类function TrafficLight() {// 颜色属性,一开始都是红色// 红色1、黄色2、绿色3this.color = 1;// 调用自己的初始化方法this.init();// 绑定监听this.bindEvent();}TrafficLight.prototype.init = function () {// 创建自己的domthis.dom = document.createElement('img');// 设置src属性this.dom.src = '/images/' + this.color + '.jpg';box.appendChild(this.dom);    // 上树}// 绑定监听TrafficLight.prototype.bindEvent = function () {//备份上下文,这里的this指的是JS的实例var self = this;// 当自己的dom被点击的时候this.dom.onclick = function () {// 当被点击的时候,调用自己的changeColor方法self.changeColor();}}new TrafficLight();</script>
</body></html>

第三步:完成改变颜色方法,利用循环语句实例化100次对象

完整代码如下:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>#box img{width: 80px;}</style>
</head>
<body><div id='box'></div><script>// 定义红绿灯类function TrafficLight() {// 颜色属性,一开始都是红色// 红色1、黄色2、绿色3this.color = 1;// 调用自己的初始化方法this.init();// 绑定监听this.bindEvent();}// 初始化方法TrafficLight.prototype.init = function () {// 创建自己的DOMthis.dom = document.createElement('img');// 设置src属性this.dom.src = '/images/' + this.color + '.jpg';box.appendChild(this.dom)   // 上树}// 绑定监听TrafficLight.prototype.bindEvent = function () {//备份上下文,这里的this指的是JS的实例var self = this;// 当自己的dom被点击的时候this.dom.onclick = function () {// 当被点击的时候,调用自己的changeColor方法self.changeColor();}}// 改变颜色TrafficLight.prototype.changeColor = function () {// 改变自己的color属性,从而有一种“自治”的感觉,自己管理自己,不干扰别的红绿灯this.color ++;if (this.color == 4) {this.color = 1;}// 光color属性变化没有用,还要更改自己的dom的src属性this.dom.src = '/images/' + this.color + '.jpg';}// 实例化100个var count = 100;while (count--) {new TrafficLight();}</script></body>
</html>

⭐ 面向对象案例 - 炫彩小球

编写代码,在网页上实现下方的动画效果:

20231108_1727482023118172952

思路分析:

实现一个效果,就要书写一个效果的类。要实现炫彩小球,就要先书写炫彩小球的类,我们在这里定义为Ball

  • Ball类包含下面的属性:
    • x:圆心坐标x
    • y:圆心坐标y
    • r:圆半径
    • opacity:透明度
    • color:颜色
    • dom:DOM元素
  • Ball类包含下面的方法:
    • init:初始化
    • update:更新方法

那么如何实现多个小球的动画呢?

思路如下:把每个小球实例都放到同一个数组中;使用1个定时器,在每一帧遍历每个小球,调用它们的update方法实现小球的移动。此时,定时器在拼命的工作,定时器每执行一次就要遍历每一个小球,比如定时器每秒执行50帧,那么就相当于每20ms就要遍历一遍小球。但是不用担心服务器会撑不住,因为CPU本身的优势就是可以快速执行大量的运算,我们平时玩的游戏的计算量要比这些要大得多的多。

第一步:定义类(面向对象最重要的就是编写类),完成初始化方法

第一步代码如下:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>body {background-color: black;}.ball {position: absolute;border-radius: 50%;}</style>
</head>
<body><script>// 定义小球类function Ball(x, y) {// 属性x,y是圆心坐标this.x = x;this.y = y;// 定义小球的半径this.r = 20;// 定义小球的背景颜色this.color = 'red';  // 这一步先固定一个颜色,方便调试// 初始化this.init()}// 初始化方法Ball.prototype.init = function () {// 创建自己的domthis.dom = document.createElement('div');       // 小球用盒子元素来实现this.dom.className = 'ball';                    // 给定小球的classname属性,方便在css中选择到this.dom.style.width = this.r * 2 + 'px';       // 小球的宽度=半径*2this.dom.style.height = this.r * 2 + 'px';      // 小球的高度=半径*2this.dom.style.left = this.x - this.r + 'px';   // 小球的left=圆心坐标-半径this.dom.style.top = this.y - this.r + 'px';    // 小球的top=圆心坐标-半径this.dom.style.backgroundColor = this.color;    // 小球的背景颜色// 上树document.body.appendChild(this.dom)}new Ball(200, 100);   // 第一步先实例化一个小球,观察下页面效果</script>
</body>
</html>

这一步完成后,页面上出现了一个红色的小球

第二步:完成定时器,编写update方法、定时器

update方法实现的功能有:使小球的位置移动(随机)、小球的大小变大、透明度变小

定时器,每20秒小球调用一次update方法,让小球连续的变化产生动画效果

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>body {background-color: black;}.ball {position: absolute;border-radius: 50%;}</style>
</head><body><script>// 定义小球类function Ball(x, y) {// 属性x,y是圆心坐标this.x = x;this.y = y;// 定义小球的半径this.r = 20;// 定义小球的透明度this.opacity = 1;// 定义小球的背景颜色this.color = 'red';  // 这一步先固定一个颜色,方便调试// 小球x、y的移动增量do {this.dX = parseInt(Math.random() * 20 - 10);  // 范围是0~2的一个增量值this.dY = parseInt(Math.random() * 20 - 10);} while (this.dX == 0 && this.dY == 0)   // 当产生的增量刚好等于0时再次循环,避免产生的增量恰好是0导致小球不移动// 初始化this.init()// 把自己推入数组,注意,这里的this不是类本身,而是实例ballArr.push(this);}// 初始化方法Ball.prototype.init = function () {// 创建自己的domthis.dom = document.createElement('div');       // 小球用盒子元素来实现this.dom.className = 'ball';                    // 给定小球的classname属性,方便在css中选择到this.dom.style.width = this.r * 2 + 'px';       // 小球的宽度=半径*2this.dom.style.height = this.r * 2 + 'px';      // 小球的高度=半径*2this.dom.style.left = this.x - this.r + 'px';   // 小球的left=圆心坐标-半径this.dom.style.top = this.y - this.r + 'px';    // 小球的top=圆心坐标-半径this.dom.style.backgroundColor = this.color;    // 小球的背景颜色// 上树document.body.appendChild(this.dom)}// 更新方法Ball.prototype.update = function () {// 位置改变this.x += this.dX;this.y += this.dX;// 半径改变this.r += 0.2;// 透明度改变this.opacity -= 0.01;this.dom.style.width = this.r * 2 + 'px';       // 小球的宽度=半径*2this.dom.style.height = this.r * 2 + 'px';      // 小球的高度=半径*2this.dom.style.left = this.x - this.r + 'px';   // 小球的left=圆心坐标-半径this.dom.style.top = this.y - this.r + 'px';    // 小球的top=圆心坐标-半径this.dom.style.opacity = this.opacity;}// 把所有的小球实例都放到一个数组中var ballArr = [];var ball1 = new Ball(200, 100);   // 第一步先实例化一个小球,观察下页面效果// 定时器,负责更新所有的小球实例setInterval(function () {// 遍历数组,调用小球的update方法for (var i = 0; i < ballArr.length; i++) {ballArr[i].update();}}, 20);</script>
</body></html>

这一步完成后,页面上的红色小球会随机的移动位置,并且大小和透明度也会发生变化

第二步:添加鼠标移动事件监听

鼠标移动时实例化类(创建小球)

优化小球的颜色取值,使效果更好看(颜色随机取数组中的一个颜色)

优化update方法,当小球的透明度为0时,删除数组中的小球,否则数组会越来越大,占用很大的内存

完整代码如下:

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>body {background-color: black;}.ball {position: absolute;border-radius: 50%;}</style>
</head><body><script>// 定义小球类function Ball(x, y) {// 属性x,y是圆心坐标this.x = x;this.y = y;// 定义小球的半径this.r = 20;// 定义小球的透明度this.opacity = 1;// 定义小球的背景颜色this.color = colorArr[parseInt(Math.random() * colorArr.length)];// 小球x、y的移动增量do {this.dX = parseInt(Math.random() * 20 - 10);  // 范围是0~2的一个增量值this.dY = parseInt(Math.random() * 20 - 10);} while (this.dX == 0 && this.dY == 0)   // 当产生的增量刚好等于0时再次循环,避免产生的增量恰好是0导致小球不移动// 初始化this.init()// 把自己推入数组,注意,这里的this不是类本身,而是实例ballArr.push(this);}// 初始化方法Ball.prototype.init = function () {// 创建自己的domthis.dom = document.createElement('div');       // 小球用盒子元素来实现this.dom.className = 'ball';                    // 给定小球的classname属性,方便在css中选择到this.dom.style.width = this.r * 2 + 'px';       // 小球的宽度=半径*2this.dom.style.height = this.r * 2 + 'px';      // 小球的高度=半径*2this.dom.style.left = this.x - this.r + 'px';   // 小球的left=圆心坐标-半径this.dom.style.top = this.y - this.r + 'px';    // 小球的top=圆心坐标-半径this.dom.style.backgroundColor = this.color;    // 小球的背景颜色// 上树document.body.appendChild(this.dom)}// 更新方法Ball.prototype.update = function () {// 位置改变this.x += this.dX;this.y += this.dX;// 半径改变this.r += 0.2;// 透明度改变this.opacity -= 0.01;this.dom.style.width = this.r * 2 + 'px';       // 小球的宽度=半径*2this.dom.style.height = this.r * 2 + 'px';      // 小球的高度=半径*2this.dom.style.left = this.x - this.r + 'px';   // 小球的left=圆心坐标-半径this.dom.style.top = this.y - this.r + 'px';    // 小球的top=圆心坐标-半径this.dom.style.opacity = this.opacity;// 当透明度为0时,删除数组中的小球if (this.opacity <= 0) {// 从数组中删除自己for (var i = 0; i < ballArr.length; i++) {if (ballArr[i] == this) {ballArr.splice(i, 1);}}// 还要删除自己的domdocument.body.removeChild(this.dom);}};// 把所有的小球实例都放到一个数组中var ballArr = [];// 定义颜色数组var colorArr = ['#66CCCC', '#CCFF66', '#FF99CC', '#FF6666', '#CC3399', '#FF6600'];// 定时器,负责更新所有的小球实例setInterval(function () {// 遍历数组,调用小球的update方法for (var i = 0; i < ballArr.length; i++) {ballArr[i].update();}}, 20);// 鼠标指针的监听document.onmousemove = function (e) {// 得到鼠标指针坐标var x = e.clientX;var y = e.clientY;new Ball(x, y);}</script>
</body></html>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/235820.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Linux(一)Linux理论

文章目录 一、Linux概述1.1 体系结构1.1.1 Linux内核1.1.2 用户态与内核态1.1.3 交换空间1.1.4 CLI和GUI 1.2 开机启动过程1.3 系统运行级别1.4 Linux进程1.4.1 Linux进程通信的方法1.4.2 Linux进程状态 二、文件2.1 Linux文件系统2.2 目录结构2.3 绝对路径和相对路径2.4 日志文…

[SWPUCTF 2021 新生赛]caidao

打开环境 这显示的就是一句话木马呗&#xff0c;直接用中国蚁剑连接&#xff0c;密码是wllm 根目录找到flag

Python Opencv实践 - 手势音量控制

本文基于前面的手部跟踪功能做一个手势音量控制功能&#xff0c;代码用到了前面手部跟踪封装的HandDetector.这篇文章在这里&#xff1a; Python Opencv实践 - 手部跟踪-CSDN博客文章浏览阅读626次&#xff0c;点赞11次&#xff0c;收藏7次。使用mediapipe库做手部的实时跟踪&…

c++输出简单日志带日期时间功能

最近项目需要简单输出日志&#xff0c;用巨大的日志类未免繁琐&#xff0c;于是写了这个简单的日志函数&#xff0c;带日期&#xff0c;MFC下可以直接使用。 直接上代码&#xff1a; template <typename T> std::string ConvertToStringS(T value) {std::stringstream …

nginx转发ingress-nginx问题记录

背景 想直接通过域名访问k8s上的服务. 想到k8s上可以直接通过ingress配置. 不过ingress默认启动的端口3xxxxx. 一般不可能让用户访问我们的服务加上端口. 所以现在要解决直接通过80端口访问ingress的问题. 方案 修改ingress-nginx端口(这个是在网上搜到的方案, 但未选择) 这…

【数据结构和算法】定长子串中元音的最大数目

其他系列文章导航 Java基础合集数据结构与算法合集 设计模式合集 多线程合集 分布式合集 ES合集 文章目录 其他系列文章导航 文章目录 前言 一、题目描述 二、题解 2.1 方法一&#xff1a;滑动窗口 2.2 方法二&#xff1a;滑动窗口优化版 三、代码 3.1 方法一&#xf…

Spring Boot构建项目常用注解

忙着去耍帅&#xff0c;后期补充完整.....................................

搭建esp32-idf开发环境并烧入第一个程序

ESP32下载idf并烧入第一个程序 一.官网下载idf安装包二.安装idf三 .测试安装是否成功3.1进入idf控制台3.2 查看安装版本3.3 编译工程 四.下载程序4.1查看所在端口4.2下载程序4.3 监听串口 一.官网下载idf安装包 点击下载 如图&#xff1a; 我们选择离线下载&#xff0c;注意…

Qt 国际化——创建中英文翻译步骤

Qt 国际化——创建中英文翻译步骤 说明&#xff1a;之前我的csdn博客&#xff0c;第一篇文章发表的就是Qt国际化的文章&#xff08;点击打开&#xff09;&#xff0c;写的也过于简单了&#xff1a; 今天&#xff0c;这篇文章再详细的记录下&#xff0c;中英文翻译的步骤。 一…

diffusers-训练自己的模型

一、搭建dataset 基于datasets这个库创建的dataloader&#xff0c;底层代码还待探索 二、修改模型结构&#xff08;非必要&#xff09; 尽量可以利用已有的预训练权重去训练模型&#xff0c;但是权重并不一定能够完全是适配&#xff0c;所以还需要自己来视情况做修改&#xf…

AttributeError: module ‘_winapi‘ has no attribute ‘SYNCHRONIZE‘解决方案

大家好,我是爱编程的喵喵。双985硕士毕业,现担任全栈工程师一职,热衷于将数据思维应用到工作与生活中。从事机器学习以及相关的前后端开发工作。曾在阿里云、科大讯飞、CCF等比赛获得多次Top名次。现为CSDN博客专家、人工智能领域优质创作者。喜欢通过博客创作的方式对所学的…

【SplaTAM】基于RGB-D类型SplaTAM的定位与重建

SplaTAM ubuntu配置与运行记录 1. 资料收集2. 环境配置与运行注意问题3. 在线运行 近期各种定会涌现出一种新的基于高斯的方法&#xff0c;备受关注&#xff0c;这里我们也来学习下sota效果的slam用于定位和重建。 1. 资料收集 coda link3D Gaussians 2.1 Dynamic 3D Gaussian…

猫罐头评测:五大平价猫罐头排行榜揭晓!

想必铲屎官都知道给猫咪长期吃主食罐头的好处了吧&#xff01;主食罐头不仅营养丰富&#xff0c;还能让猫咪顺便补充水分。有时候猫咪食欲不佳&#xff0c;一罐主食罐头就能让它们胃口大开呢。 通过本文&#xff0c;我将与大家分享我做宠物医生6年间发现的一些好用的猫罐头&…

超声功率放大器的技术方案是什么

超声功率放大器是一种用于超声波领域的放大器&#xff0c;主要用于将输入的小功率信号放大为高功率的超声波信号。在医学、工业和科学研究等领域&#xff0c;超声功率放大器被广泛应用于超声成像、无损检测、清洗和材料处理等方面。下面将详细介绍超声功率放大器的技术方案和工…

推荐算法架构7:特征工程

1 概述 特征工程[1]&#xff08;Feature Engineering&#xff09;是推荐算法的基础&#xff0c;它对收集到的原始数据进行解析和变换&#xff0c;从而提取出模型所需要的信息。通过挖掘丰富和高质量的特征&#xff0c;并对其进行合理的处理&#xff0c;可以提升模型预估准确度…

判断数据是否为整数--函数设计与实现

#定义函数&#xff1a;is_num(s),判断输入的数据是否整数。 #(1)判断是否是数字 def is_num(s):if s.isdigit(): #isdigit()是一个字符串方法&#xff0c;用于检查字符串是否只包含数字字符。如果字符串只包含数字字符&#xff0c;则返回True&#xff1b;否则返回Falsereturn T…

知识付费小程序源码系统:支持视频课程+音频课程+图文课程+完整的代码包 带搭建安装教程

近年来&#xff0c;人们对于知识的需求越来越大&#xff0c;知识付费行业也逐渐崛起。但是&#xff0c;目前市场上有很多知识付费平台存在一些问题&#xff0c;如内容质量参差不齐、用户体验不佳、支付安全问题等。知识付费小程序源码系统的出现很好的解决了这些问题&#xff0…

【Vue中给输入框加入js验证_blur失去焦点进行校验】

【Vue中给输入框加入js验证_blur失去焦点进行校验】 通俗一点就是给输入框加个光标离开当前文本输入框时&#xff0c;然后对当前文本框内容进行校验判断 具体如下&#xff1a; 1.先给文本框加属性 blur“validatePhoneNumber” <el-input v-model“entity.telephone” blur…

如何用docke启动redis?(解决双击docker服务闪退问题)

要使用Docker启动Redis服务&#xff0c;您可以按照以下步骤进行操作&#xff1a; 安装Docker&#xff1a; 如果您还没有安装Docker&#xff0c;请先在您的系统上安装Docker。您可以从Docker官方网站获取安装说明。 https://www.docker.com/get-started/ 2.在Docker Hub上查找R…

2023 英特尔On技术创新大会直播 |我感受到的“芯”魅力

文章目录 每日一句正能量前言AI时代&#xff0c;云与PC结合为用户带来更好体验全新处理器&#xff0c;首次引入针对人工智能加速的NPU大模型时代&#xff0c;软硬结合带来更好训练成果后记 每日一句正能量 成长是一条必走的路路上我们伤痛在所难免。 前言 在2023年的英特尔On技…