当前位置:首页 » 网页前端 » 前端弹幕用什么设计模式
扩展阅读
webinf下怎么引入js 2023-08-31 21:54:13
堡垒机怎么打开web 2023-08-31 21:54:11

前端弹幕用什么设计模式

发布时间: 2023-01-05 06:00:03

前端设计模式之责任链模式

责任链模式

什么是责任链模式

责任链(Chain of Responsibility)模式的定义:为了避免请求发送者与多个请求处理者耦合在一起,将所有请求的处理者通过前一对象记住其下一个对象的引用而连成一条链;当有请求发生时,可将请求沿着这条链传递,直到有对象处理它为止。(此处引自 gof 设计模式)

在责任链模式中,客户只需要将请求发送到责任链上即可,无须关心请求的处理细节和请求的传递过程,所以责任链将请求的发送者和请求的处理者解耦了。

责任链模式是一种对象行为型模式,其主要优点如下:

1.降低了对象之间的耦合度。该模式使得一个对象无须知道到底是哪一个对象处理其请求以及链的结构,发送者和接收者也无须拥有对方的明确信息。

2.增强了系统的可扩展性。可以根据需要增加新的请求处理类,满足开闭原则。

3.增强了给对象指派职责的灵活性。当工作流程发生变化,可以动态地改变链内的成员或者调动它们的次序,也可动态地新增或者删除责任。

4.责任链简化了对象之间的连接。每个对象只需保持一个指向其后继者的引用,不需保持其他所有处理者的引用,这避免了使用众多的 if 或者 if···else 语句。

5.责任分担。每个类只需要处理自己该处理的工作,不该处理的传递给下一个对象完成,明确各类的责任范围,符合类的单一职责原则。

其主要缺点如下。

1.不能保证每个请求一定被处理。由于一个请求没有明确的接收者,所以不能保证它一定会被处理,该请求可能一直传到链的末端都得不到处理。

2.对比较长的职责链,请求的处理可能涉及多个处理对象,系统性能将受到一定影响。

3.职责链建立的合理性要靠客户端来保证,增加了客户端的复杂性,可能会由于职责链的错误设置而导致系统出错,如可能会造成循环调用。

其他说明
责任链模式,总的一个核心就是请求者不必知道是谁哪个节点对象处理的请求,由于处理请求的可以在不同对象下处理,所以请求者跟接受者是解耦的。

纯的责任链:要求请求在这些对象链中 必须被处理 ,而且一个节点处理对象,要么只处理请求,要么把请求转发给下个节点对象处理;

不纯的责任链:要求在责任链里 **不一定会有处理结构 **,而且一个节点对象,即可以处理部分请求,并把请求再转发下个节点处理;

javascript 中介者模式
责任链模式对前端开发来说可能有点陌生,但是看了前面的描述又感觉似曾相识

实际上 express、rex 里的 middleware 都可以简单理解为责任链模式的运用

要实现中间件模式,最重要的实现细节是:

1.可以通过调用 use() 函数来注册新的中间件

2.当接收到需要处理的新数据时,注册的中间件在执行流程中被依次调用。每个中间件都接受上一个中间件的执行结果作为输入值

3.每个中间件都可以停止数据的进一步处理,只需要简单地不调用它的回调函数或者将错误传递给回调函数。当发生错误时,通常会触发执行另一个专门处理错误的中间件

项目实战
通用中间件开发

通用中间件使用 ajax

如上我们在发送请求之前加入了类型转换、数据校验,将数据的业务处理使用中间件模式剥离,使得处理过程模块化,维护性提升。

中间件升级-事件回调

每个中间件的过程都是不可控制的,全部都交由中间类去统一调用,我们可以加入事件回调,方便我们在中间件处理过程中拥有额外的逻辑能力

将上述的使用方法再改造一下,方便实际业务中使用

上述的项目实例是采用 ajax 来演示,实际通用的中间件类,可以在业务中将一些 **流程化执行的任务 **拆分出来,例如表单验证、多重条件判断等等

多种条件判断

将流程化执行的多种条件判断通过中间件解耦,可以使得条件判断方法更加清晰。一般当你需要使用中介者来改造业务逻辑的时候,前端的项目确实有点复杂了。

现在STAR现在是在腾讯课堂里面分享自己的经验,感谢兴趣的朋友可以加Q群:1146649671

中获取STAR在腾讯课堂分享的链接,还可以获取学习资料 面试文档等

Ⅱ web前端开发的主要做什么

学习前端出来社会上就是大概率从事写代码工作的了,写代码这件事情我们是相当专业的,下面从几个典型的应用场景给大家分析一下!
一、前端开发应用场景
1、企业官方网站的开发与维护
这个应该是最简单的了,基本上是纯静态页面的展示,就算有交互模块,应该也是比较简单的那种。
2、门户类型网站的开发与维护
例如像搜狐一样的门户网站,相对来说也不难,这种网站一般分成很多个模块,每个模块的展现结构是非常类似的。
如何做到可复用性强,对产品需求变更迭代时更加友好,那就很考验开发人员前端三大语言的设计模式了。
3、电商网站
例如京东和淘宝,里面不仅有对用户友好的展现方式,合乎逻辑的交互方式,还会涉及到网站、商品的色彩设计、排版设计、交互设计,虽然可能都由设计师来出方案,但是前端开发同学可以从中学到很多东西。
此外,除了单纯的展现,你需要考虑更多的东西了。
例如,不同端的字体展现,响应式布局,图片大小,静态资源缓存,CDN部署,Ajax动态数据交互。这些还都是偏纯展现的。
还会有涉及到个人信息填写、支付款项、密码输入等等,会涉及到一系列的前端安全问题,这部分也是很锻炼人的。
4、后台管理系统
一般这个是给内部人员使用的,所以可以不用考虑太多的兼容性,直接要求统一使用谷歌浏览器或者火狐。
5、H5的活动营销页、红包落地页、明星投票页等等一系列与营销活动相关的移动端页面。
这些需要你的CSS功底非常扎实,常常要写一些动态效果、动画效果,越生动越吸引用户参与。
6、移动端视频播放页面
最近短视频崛起,但是很多短视频App中的页面是Web前端页面,这样做的原因是App过审麻烦且时间周期长,业务需要快速迭代和修复的情况下,前端责无旁贷。
那么这时候考验的是你对视频的操作能力,对流式播放技术和能力的掌握。此外,视频挂件、贴纸、弹幕、互动、美颜、变老挑战等等,都是现在短视频必备的能力。
7、微信小程序
噢,不,应该是小程序。微信、支付宝、网络等大企业,先后推出了小程序,当然身为前端开发的我们是必须掌握的一门技巧,虽然不是新的语言,但代码组织方式、调试方式、底层原理,也是值得关注和学习。
8、造轮子写工具、写框架,搭建基础设施
公司逐渐发展壮大以后,会面临一个问题,那就是如何将前端基础设施做起来。基础设施对前端的工程搭建与发展来说,太重要了。
希望以上的回答能帮到大家。

Ⅲ JS常用设计模式(MVC、MVP、MVVM及其他设计模式)

一、MVC

MVC模式的意思是,软件可以分成三个部分。

视图(View):用户界面。

控制器(Controller):业务逻辑

模型(Model):数据保存

各部分之间的通信方式如下。

View 传送指令到 Controller

Controller 完成业务逻辑后,要求 Model 改变状态

Model 将新的数据发送到 View,用户得到反馈

所有通信都是单向的。

二、互动模式

接受用户指令时,MVC 可以分成两种方式。一种是通过 View 接受指令,传递给 Controller。

另一种是直接通过controller接受指令。

三、实例:Backbone

实际项目往往采用更灵活的方式,以 Backbone.js 为例。

1. 用户可以向 View 发送指令(DOM 事件),再由 View 直接要求 Model 改变状态。

2. 用户也可以直接向 Controller 发送指令(改变 URL 触发 hashChange 事件),再由 Controller 发送给 View。

3. Controller 非常薄,只起到路由的作用,而 View 非常厚,业务逻辑都部署在 View。所以,Backbone 索性取消了 Controller,只保留一个 Router(路由器) 。

四、MVP

MVP 模式将 Controller 改名为 Presenter,同时改变了通信方向。

1. 各部分之间的通信,都是双向的。

2. View 与 Model 不发生联系,都通过 Presenter 传递。

3. View 非常薄,不部署任何业务逻辑,称为"被动视图"(Passive View),即没有任何主动性,而 Presenter非常厚,所有逻辑都部署在那里。

五、MVVM

MVVM 模式将 Presenter 改名为 ViewModel,基本上与 MVP 模式完全一致。

唯一的区别是,它采用双向绑定(data-binding):View的变动,自动反映在 ViewModel,反之亦然。 Angular 和 Ember 都采用这种模式。

1、js工厂模式

说明:

在函数中定义对象,并定义对象的各种属性,虽然属性可以为方法,但是建议将属性为方法的属性定义到函数之外,这样可以避免重复创建该方法。

引用该对象的时候,这里使用的是 var x = Parent()而不是 var x = new object(); 因为后者可能会出现很多问题(前者也成为工厂经典方式,后者称之为混合工厂方式),不推荐使用new的方式使用该对象。

在函数的最后返回该对象。

不推荐使用这种方式创建对象,但应该了解。  

2、js构造函数模式

说明:

与工厂方式相比,使用构造函数方式创建对象无需在函数内部创建对象,而使用this指代,并而函数无需明确return。

同工厂模式一样,虽然属性的值可以为方法,仍建议将该方法定义在函数之外。

同样的,不推荐使用这种方式创建对象,但仍需了解。

3、js原型模式

说明:

函数中不对属性进行定义。

利用prototype属性对属性进行定义。

同样的额,不推荐使用这样的方式创建对象。

4、构造函数+原型的js混合模式(推荐)

说明:

该模式是指混合搭配使用构造函数和原型方式。

将所有的属性,不是方法的定义在函数中(构造函数的方式),将所有属性值为方法的利用prototype在函数之外定义(原型方式)。

推荐使用这样的方式创建对象,这样有好处。

5、构造函数+原型的动态原型模式(推荐)

说明:

动态原型方式可以理解为混合构造函数,原型方式的一个特例。

该模式中,属性为方法的属性直接在函数中进行了定义,但是因为

if(typeof Parent.lev == "undefined"){

          Parent.prototype.lev = function(){

            return this.name;

          }

   Parent.lev = true;

    } 

从而保证创建该对象的实例时,属性的方法不会被重复的创建。

Ⅳ 开发中用到哪些设计模式 用在什么场合

一共23种设计模式!

引用《软件秘笈-设计模式那点事》书籍:

按照目的来分,设计模式可以分为创建型模式、结构型模式和行为型模式。
创建型模式用来处理对象的创建过程;结构型模式用来处理类或者对象的组合;行为型模式用来对类或对象怎样交互和怎样分配职责进行描述。

创建型模式用来处理对象的创建过程,主要包含以下5种设计模式:
 工厂方法模式(Factory Method Pattern)
 抽象工厂模式(Abstract Factory Pattern)
 建造者模式(Builder Pattern)
 原型模式(Prototype Pattern)
 单例模式(Singleton Pattern)

结构型模式用来处理类或者对象的组合,主要包含以下7种设计模式:
 适配器模式(Adapter Pattern)
 桥接模式(Bridge Pattern)
 组合模式(Composite Pattern)
 装饰者模式(Decorator Pattern)
 外观模式(Facade Pattern)
 享元模式(Flyweight Pattern)
 代理模式(Proxy Pattern)

行为型模式用来对类或对象怎样交互和怎样分配职责进行描述,主要包含以下11种设计模式:
 责任链模式(Chain of Responsibility Pattern)
 命令模式(Command Pattern)
 解释器模式(Interpreter Pattern)
 迭代器模式(Iterator Pattern)
 中介者模式(Mediator Pattern)
 备忘录模式(Memento Pattern)
 观察者模式(Observer Pattern)
 状态模式(State Pattern)
 策略模式(Strategy Pattern)
 模板方法模式(Template Method Pattern)
访问者模式(Visitor Pattern)

详情请参考书籍《软件秘笈:设计模式那点事》,该书中详细讲解了各种设计模式的使用场合,里面讲解设计模式例子也很生动,容易理解,还有JDK中设计模式应用情况,看了收获挺大的!好东西大家一起分享!
祝你早日学会设计模式!

Ⅳ web前端开发的主要做什么

前端开发是创建Web页面或app等前端界面呈现给用户的过程,通过HTML,CSS及JavaScript以及衍生出来的各种技术、框架、解决方案,来实现互联网产品的用户界面交互。Web前端的学习起来相对简单,未来的发展前景也是非常不错的。

web全栈工程师5.0课程包括:

①计算机基础以及PS基础

②前端开发基础(HTML5开发、JavaScript基础到高级、jQuery网页特效、Bootstrap框架)

③移动开发

④前端高级开发(ECMAScript6、Veu.js框架开发、webpack、前端页面优化、React框架开发、AngularJS 2.0框架开发等)

⑤小程序开发

⑥全栈开发(MySQL数据库、Python编程语言、Django框架等)

⑦就业拓展(网站SEO与前端安全技术)

互联网行业目前还是最热门的行业之一,学习IT技能之后足够优秀是有机会进入腾讯、阿里、网易等互联网大厂高薪就业的,发展前景非常好,普通人也可以学习。

想要系统学习,你可以考察对比一下开设有相关专业的热门学校,好的学校拥有根据当下企业需求自主研发课程的能力,能够在校期间取得大专或本科学历,中博软件学院、南京课工场、南京北大青鸟等开设相关专业的学校都是不错的,建议实地考察对比一下。

祝你学有所成,望采纳。

Ⅵ 什么是MVC设计模式,为什么使用MVC

MVC(Model-View-Controller)把系统的组成分解为M(模型)、 V(视图)、C(控制器)三种部件。视图表示数据在屏幕上的显示。控制器提供处理过程控制,它在模型和视图之间起连接作用。控制器本身不输出任何信息和做任何处理,它只负责把用户的请求转成针对Model的操作,和调用相应的视图来显示Model处理后的数据。
用户界面逻辑的更改往往比业务逻辑频繁,尤其是在基于Web的应用程序中。例如,可能添加新的用户界面页,或者可能完全打乱现有的页面布局。对显示的更改,尽可能地不要影响到数据和业务逻辑。

目前大部分Web应用都是将数据代码和表示混在一起。经验比较丰富的开发者会将数据从表示层分离开来,但这通常不是很容易做到的,它需要精心的计划和不断的尝试。MVC从根本上强制性的将它们分开。尽管构造MVC应用需要一些额外的工作,但它带来的好处是无庸质疑的

Ⅶ 设计一个聊天室程序能用到23种设计模式里的哪些

注解⑴寥落:寂寞冷落。

Ⅷ 请列举一些您用到过的设计模式以及在什么情况下使用该模式

1.原型模式(Prototype Pattern):用原型实例指定创建对象的种类,并且通过拷贝这些原型创建新的对象。
使用场景:一个对象需要提供给其他对象访问,而且各个调用者可能都需要修改其值时,可以考虑使用原型模式拷贝多个对象供调用者使用

2.组合模式(Composite Pattern)也叫合成模式:将对象组合成树形结构以表示"部分-整体"的层次结构,使得用户对单个对象和组合对象的使用具有一致性。
使用场景:组合模式在项目中到处都有,比如现在的页面结构一般都是上下结构,上面放系统的Logo,下边分为两部分:左边是导航菜单,右边是展示区,左边的导航菜单一般都是树形的结构,比较清晰,有非常多的JavaScript源码实现了类似的树形菜单,大家可以到网上搜索一把。

等等。

如果你想了解每一种模式的使用场景,可以看看《设计模式之禅》,里面介绍了23种设计模式分别的使用方法,还有设计模式混搭和PK,对于想了解设计模式的人来说是比较不错的参考手册

Ⅸ java EE在web开发中常用的设计模式有哪些好处是什么

当然是23种设计模式了
1、Singleton,单例模式:保证一个类只有一个实例,并提供一个访问它的全局访问点
2、Abstract Factory,抽象工厂:提供一个创建一系列相关或相互依赖对象的接口,而无须指定它们的具体类。
3、Factory Method,工厂方法:定义一个用于创建对象的接口,让子类决定实例化哪一个类,Factory Method使一个类的实例化延迟到了子类。
4、Builder,建造模式:将一个复杂对象的构建与他的表示相分离,使得同样的构建过程可以创建不同的表示。
5、Prototype,原型模式:用原型实例指定创建对象的种类,并且通过拷贝这些原型来创建新的对象。
行为型有:
6、Iterator,迭代器模式:提供一个方法顺序访问一个聚合对象的各个元素,而又不需要暴露该对象的内部表示。
7、Observer,观察者模式:定义对象间一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都得到通知自动更新。
8、Template Method,模板方法:定义一个操作中的算法的骨架,而将一些步骤延迟到子类中,TemplateMethod使得子类可以不改变一个算法的结构即可以重定义该算法得某些特定步骤。
9、Command,命令模式:将一个请求封装为一个对象,从而使你可以用不同的请求对客户进行参数化,对请求排队和记录请求日志,以及支持可撤销的操作。
10、State,状态模式:允许对象在其内部状态改变时改变他的行为。对象看起来似乎改变了他的类。
11、Strategy,策略模式:定义一系列的算法,把他们一个个封装起来,并使他们可以互相替换,本模式使得算法可以独立于使用它们的客户。
12、China of Responsibility,职责链模式:使多个对象都有机会处理请求,从而避免请求的送发者和接收者之间的耦合关系
13、Mediator,中介者模式:用一个中介对象封装一些列的对象交互。
14、Visitor,访问者模式:表示一个作用于某对象结构中的各元素的操作,它使你可以在不改变各元素类的前提下定义作用于这个元素的新操作。
15、Interpreter,解释器模式:给定一个语言,定义他的文法的一个表示,并定义一个解释器,这个解释器使用该表示来解释语言中的句子。
16、Memento,备忘录模式:在不破坏对象的前提下,捕获一个对象的内部状态,并在该对象之外保存这个状态。
结构型有:
17、Composite,组合模式:将对象组合成树形结构以表示部分整体的关系,Composite使得用户对单个对象和组合对象的使用具有一致性。
18、Facade,外观模式:为子系统中的一组接口提供一致的界面,fa?ade提供了一高层接口,这个接口使得子系统更容易使用。
19、Proxy,代理模式:为其他对象提供一种代理以控制对这个对象的访问
20、Adapter,适配器模式:将一类的接口转换成客户希望的另外一个接口,Adapter模式使得原本由于接口不兼容而不能一起工作那些类可以一起工作。
21、Decrator,装饰模式:动态地给一个对象增加一些额外的职责,就增加的功能来说,Decorator模式相比生成子类更加灵活。
22、Bridge,桥模式:将抽象部分与它的实现部分相分离,使他们可以独立的变化。
23、Flyweight,享元模式
好处是遵循7大设计原则
1.开闭原则(Open Close Principle)
2.里氏代换原则(Liskov Substitution Principle)
3.依赖倒转原则(Dependence Inversion Principle)
4.接口隔离原则(Interface Segregation Principle)
5.组合/聚合复用原则
6.迪米特法则(Law Of Demeter)
7.单一职责原则(Single Responsibility Principle)

Ⅹ web前端开发 怎样实现动态弹幕

跟标题滚动是一个意思,弹幕滚动也是定时器,只不过加了一个高度的赋值