前端学习案例2-设计模式之单例模式2
2023-03-15
126
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《
阿里云开发者社区用户服务协议》和
《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写
侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：
前端学习案例2-设计模式之单例模式2
目录
相关文章
|
1月前
|
前端开发
JavaScript
算法
【CSS】前端三大件之一，如何学好？从基本用法开始吧！（八）：学习transition过渡属性；本文学习property模拟、duration过渡时间指定、delay时间延迟 等多个参数
transition过渡属性
早期在Web中要实现动画效果，都是依赖于JavaScript或Flash来完成。
但在CSS3中新增加了一个新的模块transition，它可以通过一些简单的CSS事件来触发元素的外观变化，
让效果显得更加细腻。简单点说，就是通过鼠标经过、获得焦点，被点击或对元素任何改变中触发，
并平滑地以动画效果改变CSS的属性值。
在CSS中创建简单的过渡效果可以从以下几个步骤来实现：
在默认样式中声明元素的初始状态样式；
声明过渡元素最终状态样式，比如悬浮状态；
在默认样式中通过添加
179
0
1
|
1月前
|
前端开发
JavaScript
算法
【CSS】前端三大件之一，如何学好？从基本用法开始吧！（七）：学习ransform属性；本文学习 rotate旋转、scale缩放、skew扭曲、tanslate移动、matrix矩阵 多个参数
transform变形
css3在原来的基础上新增了变形和动画相关属性，通过这些属性可以实现以前需要大段JavaScript才能实现的
功能。
CSS3的变形功能可以对HTML组件执行位移、旋转、缩放、倾斜4种几何变换，这样的变换可以控制HTML组件
呈现出丰富的外观。
借助于位移、旋转、缩放、倾斜这4种几何变换，CSS3提供了transition动画。
transition动画比较简单，只要指定HTML组件的哪些CSS属性需要使用动画效果来执行变化，并指定动画时间，就可保证动画播放。
比transitio
137
0
1
|
1月前
|
前端开发
算法
Java
【CSS】前端三大件之一，如何学好？从基本用法开始吧！（一）：CSS发展史；CSS样式表的引入；CSS选择器使用，附带案例介绍
上下文选择器(迭代选择器)：基于祖先或同胞元素选择一个元素
ID和类选择器：基于id#和class的属性值进行选择元素。
属性选择器：基于属性的有无和特征进行选择。
①上下文选择器：
上下文选择器的语法格式：标签1 标签2{属性:值;}
//注意：组合选择器和上下文选择器的区别，组合选择器以逗号隔开，
上下文选择器以空格隔开
②特殊的上下文选择器
子选择器> :
语法格式:标签1>标签2 解释说明：标签1和标签2
197
1
1
|
9月前
|
设计模式
存储
缓存
「全网最细 + 实战源码案例」设计模式——享元模式
享元模式（Flyweight Pattern）是一种结构型设计模式，旨在减少大量相似对象的内存消耗。通过分离对象的内部状态（可共享、不变）和外部状态（依赖环境、变化），它有效减少了内存使用。适用于存在大量相似对象且需节省内存的场景。模式优点包括节省内存和提高性能，但会增加系统复杂性。实现时需将对象成员变量拆分为内在和外在状态，并通过工厂类管理享元对象。
348
92
92
|
9月前
|
设计模式
存储
算法
「全网最细 + 实战源码案例」设计模式——命令模式
命令模式（Command Pattern）是一种行为型设计模式，将请求封装成独立对象，从而解耦请求方与接收方。其核心结构包括：Command（命令接口）、ConcreteCommand（具体命令）、Receiver（接收者）和Invoker（调用者）。通过这种方式，命令的执行、撤销、排队等操作更易扩展和灵活。
适用场景：
1. 参数化对象以操作。
2. 操作放入队列或远程执行。
3. 实现回滚功能。
4. 解耦调用者与接收者。
优点：
- 遵循单一职责和开闭原则。
- 支持命令组合和延迟执行。
- 可实现撤销、恢复功能。
缺点：
- 增加复杂性和类数量。
303
14
14
|
9月前
|
设计模式
存储
Java
「全网最细 + 实战源码案例」设计模式——责任链模式
责任链模式（Chain of Responsibility Pattern）是一种行为型设计模式，允许将请求沿着处理者链进行发送。每个处理者可以处理请求或将其传递给下一个处理者，从而实现解耦和灵活性。其结构包括抽象处理者（Handler）、具体处理者（ConcreteHandler）和客户端（Client）。适用于不同方式处理不同种类请求、按顺序执行多个处理者、以及运行时改变处理者及其顺序的场景。典型应用包括日志处理、Java Web过滤器、权限认证等。
203
13
13
|
9月前
|
设计模式
算法
开发者
「全网最细 + 实战源码案例」设计模式——策略模式
策略模式（Strategy Pattern）是一种行为型设计模式，用于定义一系列可替换的算法或行为，并将它们封装成独立的类。通过上下文持有策略对象，在运行时动态切换算法，提高代码的可维护性和扩展性。适用于需要动态切换算法、避免条件语句、经常扩展算法或保持算法独立性的场景。优点包括符合开闭原则、运行时切换算法、解耦上下文与策略实现、减少条件判断；缺点是增加类数量和策略切换成本。示例中通过定义抽象策略接口和具体策略类，结合上下文类实现动态算法选择。
304
8
8
|
9月前
|
设计模式
SQL
算法
「全网最细 + 实战源码案例」设计模式——模板方法模式
模板方法模式是一种行为型设计模式，定义了算法的骨架并在父类中实现不变部分，将可变部分延迟到子类实现。通过这种方式，它避免了代码重复，提高了复用性和扩展性。具体步骤由抽象类定义，子类实现特定逻辑。适用于框架设计、工作流和相似算法结构的场景。优点包括代码复用和符合开闭原则，缺点是可能违反里氏替换原则且灵活性较低。
232
7
7
|
10月前
|
设计模式
Java
开发者
「全网最细 + 实战源码案例」设计模式——适配器模式
适配器模式（Adapter Pattern）是一种结构型设计模式，通过引入适配器类将一个类的接口转换为客户端期望的另一个接口，使原本因接口不兼容而无法协作的类能够协同工作。适配器模式分为类适配器和对象适配器两种，前者通过多重继承实现，后者通过组合方式实现，更常用。该模式适用于遗留系统改造、接口转换和第三方库集成等场景，能提高代码复用性和灵活性，但也可能增加代码复杂性和性能开销。
353
28
29
|
9月前
|
设计模式
存储
安全
「全网最细 + 实战源码案例」设计模式——组合模式
组合模式（Composite Pattern）是一种结构型设计模式，用于将对象组合成树形结构以表示“部分-整体”的层次结构。它允许客户端以一致的方式对待单个对象和对象集合，简化了复杂结构的处理。组合模式包含三个主要组件：抽象组件（Component）、叶子节点（Leaf）和组合节点（Composite）。通过这种模式，客户端可以统一处理简单元素和复杂元素，而无需关心其内部结构。适用于需要实现树状对象结构或希望以相同方式处理简单和复杂元素的场景。优点包括支持树形结构、透明性和遵循开闭原则；缺点是可能引入不必要的复杂性和过度抽象。
283
22
22
热门文章
最新文章
1
前端如何存储数据：Cookie、LocalStorage 与 SessionStorage 全面解析
2
Java 设计模式之策略模式：灵活切换算法的艺术
3
Java 设计模式之状态模式：让对象的行为随状态优雅变化
4
Java 设计模式之观察者模式：构建松耦合的事件响应系统
5
Java 设计模式之责任链模式：优雅处理请求的艺术
6
现货期权交易所开发模块化设计模式
7
前端工程化演进之路：从手工作坊到AI驱动的智能化开发
8
Vue 3 + TypeScript 现代前端开发最佳实践（2025版指南）
9
【CSS】前端三大件之一，如何学好？从基本用法开始吧！（五）：背景属性；float浮动和position定位；详细分析相对、绝对、固定三种定位方式；使用浮动并清除浮动副作用
10
【CSS】前端三大件之一，如何学好？从基本用法开始吧！（六）：全方面分析css的Flex布局，从纵、横两个坐标开始进行居中、两端等元素分布模式；刨析元素间隔、排序模式等
1
现货期权交易所开发模块化设计模式
152
2
Java 设计模式之策略模式：灵活切换算法的艺术
256
3
Java 设计模式之观察者模式：构建松耦合的事件响应系统
217
4
Java 设计模式之状态模式：让对象的行为随状态优雅变化
258
5
Java 设计模式之责任链模式：优雅处理请求的艺术
211
6
【JUC】（6）带你了解共享模型之 享元和不可变 模型并初步带你了解并发工具 线程池Pool，文章内还有饥饿问题、设计模式之工作线程的解决于实现
143
7
【JUC】（3）常见的设计模式概念分析与多把锁使用场景！！理解线程状态转换条件！带你深入JUC！！文章全程笔记干货！！
172
8
基于多设计模式的状态扭转设计：策略模式与责任链模式的实战应用
172
9
软考中级软件设计师专项-设计模式篇
279
10
LangChain 源码 深度历险：基于GOF的设计模式，穿透 LangChain 源码
192