观察者模式（ES6）

最新推荐文章于 2022-12-30 08:58:36 发布
最新推荐文章于 2022-12-30 08:58:36 发布
阅读量204 收藏
点赞数
文章标签： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44739336/article/details/109899170
版权 
<!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>
        .div0{
            width: 538px;
            height: 540px;
            position: relative;
            overflow: hidden;
        }
        input{
            width: 420px;
            height: 40px;
            font-size: 30px;
            float: left;
        }
        button{
            float: right;
            width: 80px;
            height: 46px;
            background-color: #d34949;
            border: none;
            border-radius: 5px;
        }
        button:focus {
            border: 0 none;
            outline: none;
        }
    </style>
</head>
<body>
    <div class="div0">
        <video src="./test3.mp4" controls autoplay muted></video>
        <br>
        <input type="text">
        <button type="submit">发送</button>
    </div>
    <script type="module">
        import Bullet from "./ServiceAMD/Bullet.js";

        var input=document.querySelector("input");
        document.addEventListener("keyup",keyHandler);
        var bn=document.querySelector("button");
        bn.addEventListener("click",clickHandler);
        function keyHandler(e){
            
            if(e.keyCode!==13) return;
            // 如果是，生成弹幕，并设置格式以及显示内容
            if(input.value.trim().length===0) return;
            var bullet=new Bullet(input.value);
            console.log(bullet);
            bullet.appendTo(".div0");
            input.value="";
        }
        function clickHandler(e){
            if(e.type==="click") {
                var input=document.querySelector("input");
                if(input.value.trim().length===0) return;
                var bullet=new Bullet(input.value);
                bullet.appendTo(".div0");
                input.value="";
            }
        }
    </script>
</body>
</html>
```javascript

Bullet.js

import TimeManager from "./TimeManager.js";
export default class Bullet{
    elem;
    rect;
    x;
    speed=2;
    width;
    constructor(txt){
        this.elem=this.createElem(txt);
    }
    createElem(txt){
        if(this.elem){
            return this.elem;
        } 
        var div=document.createElement("div");
        // 设置div样式
        Object.assign(div.style,{
            whiteSpace:"nowrap",
            position:"absolute",
            color:"rgba("+Math.floor(Math.random()*256)+","
            +Math.floor(Math.random()*256)+","+Math.floor(Math.random()*256)+")",
        })
        div.textContent=txt;
        return div;
    }
    appendTo(parent){
        if(typeof parent==="string") parent=document.querySelector(parent);
        parent.appendChild(this.elem);
        this.rect=parent.getBoundingClientRect();
        Object.assign(this.elem.style,{
            top:Math.random()*this.rect.height/4+"px",
            left:this.rect.width+"px",
        });
        this.x=this.rect.width;
        this.width=this.elem.offsetWidth;
        TimeManager.instance.add(this);
    }
    update(){
        if(!this.width) return;
        this.x-=this.speed;
        this.elem.style.left=this.x+"px";
        if(this.x<-this.width){
            TimeManager.instance.remove(this);
            this.elem.remove();
            this.elem=null;
        }
    }
}
TimeManager.js
import TimeManager from "./TimeManager.js";
export default class Bullet{
    elem;
    rect;
    x;
    speed=2;
    width;
    constructor(txt){
        this.elem=this.createElem(txt);
    }
    createElem(txt){
        if(this.elem){
            // Object.assign(this.elem.style,{
            //     color:"rgba("+Math.floor(Math.random()*256)+","
            // +Math.floor(Math.random()*256)+","+Math.floor(Math.random()*256)+")",
            // });
            return this.elem;
        } 
        var div=document.createElement("div");
        // 设置div样式
        Object.assign(div.style,{
            whiteSpace:"nowrap",
            position:"absolute",
            color:"rgba("+Math.floor(Math.random()*256)+","
            +Math.floor(Math.random()*256)+","+Math.floor(Math.random()*256)+")",
        })
        div.textContent=txt;
        return div;
    }
    appendTo(parent){
        if(typeof parent==="string") parent=document.querySelector(parent);
        parent.appendChild(this.elem);
        this.rect=parent.getBoundingClientRect();
        Object.assign(this.elem.style,{
            top:Math.random()*this.rect.height/4+"px",
            left:this.rect.width+"px",
        });
        this.x=this.rect.width;
        this.width=this.elem.offsetWidth;
        TimeManager.instance.add(this);
    }
    update(){
        if(!this.width) return;
        this.x-=this.speed;
        this.elem.style.left=this.x+"px";
        if(this.x<-this.width){
            TimeManager.instance.remove(this);
            this.elem.remove();
            this.elem=null;
        }
    }
}
weixin_44739336
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
ES6 Proxy 实现观察者模式
雾里看花叹朦胧
02-18 788
观察者模式（Observer mode）指的是函数自动观察数据对象，一旦对象有变化，函数就会自动执行。 const person = observable({ name: '张三', age: 20 }); function print() { console.log(`${person.name}, ${person.age}`) } observe(print); person...
es6的观察者模式
weixin_43492777的博客
10-18 216
const queuedObservers = new Set(); const observe = fn => queuedObservers.add(fn); const observable = obj => new Proxy(obj, {set}); function set(target, key, value, receiver) { const result = Ref...
es6原生实现观察者模式
aliven1的博客
08-24 879
es6利用Reflect实现观察者模式，并详解Reflect对象
leleshuo
10-13 981
利用Reflect对象生成一个简易观察者模式，并从中窥探Reflect对象的秘密
es6 观察者模式
weixin_42601547的博客
12-30 88
ES6 (ECMAScript 6) 是 JavaScript 的一个版本，它在 2015 年发布。观察者模式是软件设计模式的一种，它定义了对象之间的一对多依赖关系，当一个对象的状态发生改变时，它的所有依赖者都会收到通知并自动更新。 在 ES6 中，可以使用 class 和 extends 关键字来实现观察者模式。首先，你可以定义一个基础的 Subject 类，该类有一个观察者列表和一个方法来添加...
vue双向绑定及观察者模式详解
10-17
主要介绍了vue双向绑定及观察者模式，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
js代码-观察者模式
07-15
观察者模式，也被称为发布-订阅（Publish-Subscribe）模式，是软件设计模式中的一个经典概念，主要用于处理对象之间的依赖关系。在这个模式中，当一个对象的状态发生改变时，所有依赖于它的对象都会得到通知并自动...
使用JavaScript的观察者设计模式
04-11
在JavaScript中，观察者模式可以用来处理事件驱动编程，比如用户交互、数据变化等场景。通过引入观察者模式，我们可以创建松耦合的代码，提高代码的可维护性和可扩展性。 实现观察者模式的关键在于两个核心角色：...
design-cart:ES6 设计模式购物车
04-29
3. **观察者模式**：当购物车中的商品发生变化时，如添加、删除或修改商品数量，其他依赖于购物车状态的部分（如总价计算、优惠策略等）应当能立即得到通知并作出相应更新。观察者模式提供了一种解耦的方式，使得...
Babel-ES6:用 Babel+ES6 学习 JavaScript 的设计模式
06-02
- 观察者模式：`EventEmitter`或者`Promise`的链式调用都是观察者模式的应用。 - 装饰器模式：ES7提案的装饰器可以用来修改类的行为或属性。 - 策略模式：函数组合和高阶函数可以实现策略模式，允许在运行时选择...
ES6设计模式之观察者模式
weixin_30241919的博客
12-22 89
下面是观察者模式,其实是一对多的关系，向观察者发送数据。发送方式有两种，主动发送和被动发送。存在一个问题是主题可能把观察者不感兴趣的数据发送过去。方法简单实现也好实现。并且也容易理解。 class OriginData{ constructor(temperature,humidity,weather){ this.observerList = []; this.temperature = te...
ES6观察者模式，代理
minimorezhd的博客
03-11 153
观察者模式，见名知意，就是自己作为一个观察者，观察所发生的事情。 <body> <p>监听dom里面的变化</p> <ul id="container"> <li>不为谁而作的歌</li> </ul> <button id="btn">clivk</button> <script> let ul = document
es6观察者模式实现
脚步
04-17 809
  //es6实现 借助set实现 function obfunction(oldval,newval){ console.log(oldval+'变成了'+newval); } class targetObser{ constructor(age,name){ this.age=age; this.name=name; } set name(val){ console.log(nam...
ES6中如何使用单例模式和观察者模式，单例模式和观察者模式的详细介绍，使用ES6模块化的案例。
超cccccccc的博客
08-16 645
单例模式 单例模式可以保证系统中，应用该模式的类一个类只有一个实例。在JS中的单例 模式，就相当于给一个类中假如一个静态方法，然后使它返回这个类的实例化对象，他返回的这个实例化对象就是唯一的，通过这个单例模式我们就可以在其他js文件中不引用其他js获取到其中的方法，也可以用侦听来得到我们需要的数据。 举例如下，使用单例模式使用get相当于常量，ES6中是没有常量的。 get和set可以参考我之前的setter和getter文章。 html中的代码 script的代码 <script type="m
js利用ES6中的Proxy实现观察者模式
李大人的博客
12-21 1286
ES6语法中新增了一个Proxy类，名字的意思为代理，在实际使用中，通常用于监听对某个对象的操作，例如：获取属性值，设置属性值、对属性值进行修改等等。这个类相当用来管理对象的操作，里面定义的方法，可以对应上对象的操作，当操作Proxy实例对象时，可以重新定义操作的逻辑，当然，如果自己不重新定义就是默认的。在对象的操作方法里面，建议使用ES6新增的Reflect,而Reflect里定义了对象操作的方...
初学es6写了个观察者模式，请多指教！！！！
瓶起子的博客
07-19 868
/** * Created by richard on 2017/7/19. */ console.log("------------observer观察者模式-------------"); class Observer{ constructor(){ this.handle = [];//相关订阅fn } addSubscribe(t
那些年 你需要解决的观察者模式/发布-订阅模式(ES6语法)
qq_42755014的博客
09-23 650
这是参考的地址: https://www.jb51.net/article/137419.htm;(看了很多版本觉得这个很不错) 在笔试和一些面试经验交流的帖子中进程出现订阅者模式,想着自己还不是很清楚,所以得解决,但是我们的目的应该不仅仅是对付笔试和面试,应该了解这个模式的思想:松散耦合代码形式!更多的大家看别的描述吧,会比我更清楚,这里也不累述,只是加入自己更加通俗的理解:我们的_event...
自定义事件（观察者模式）
chanda_yang的博客
08-04 862
观察者模式由两类对象组成：主体和观察者。主体负责发布事件，同时观察者通过订阅这些事件来观察该主体。该模式的一个关键概念是主体并不知道观察者的任何事情，也就是说它可以独自存在并正常运作即使观察者不存在。从另一方面来说，观察者知道主体并能注册事件的回调函数（事件处理程序）。涉及DOM 上时，DOM 元素便是主体，你的事件处理代码便是观察者。 事件是与DOM 交互的最常见的方式，但它们也可以用于
浅谈JavaScript设计模式——观察者模式（发布订阅模式）
筱葭的博客
04-02 2163
观察者模式，又称为发布订阅模式，它定义了一种一对多的关系，让多个观察者对象同时监听某一个主题对象，这个主题对象的状态发生变化时就会通知所有的观察者对象，使得它们能够自动更新自己的状态。   在观察者模式中，并不是一个对象调用另一个对象的方法，而是一个对象订阅另一个对象的特定活动并在状态改变后获得通知。订阅者也称为观察者，而被观察的对象称为发布者或主题。当发生了一个重要的事件时，发布者将会通知（
es6 常用设计模式
最新发布
02-07
3. 观察者模式：使用 ES6 的观察者模式实现事件驱动的应用程序。 4. 装饰器模式：使用 ES6 的装饰器语法来实现装饰器模式。 5. 代理模式：使用 ES6 的 Proxy 类来实现代理模式。 6. 迭代器模式：使用 ES6 的迭代...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值