分享文章

source/_posts/jQuery中的设计模式.md

+---
+title: jQuery从$开始
+date: 2022/05/31 16:25:23
+updated: 2022/05/31 16:25:23
+tags:
+- 前端
+- JQuery
+- 设计模式
+author: 王许晓
+---
+
+**设计模式（Design pattern）** 是解决软件开发某些特定问题而提出的一些解决方案也可以理解成解决问题的一些思路。通过设计模式可以帮助我们增强代码的可重用性、可扩充性、 可维护性、灵活性好。我们使用设计模式最终的目的是实现代码的 **高内聚** 和 **低耦合**。
+
+<!-- more -->
+
+适配器模式将一个类的接口转换成客户希望的另一个接口。适配器模式使得原本由于接口不兼容而不能一起工作的那些类可以一起工作。
+主要解决在软件系统中，常常要将一些‘现存的对象’放到新的环境中，而新环境要求的接口是现对象不能满足的。
+
+优点：1、可以让任何两个没有关联的类一起运行。2、提高了复用、灵活性好。
+缺点：过多使用适配器会让系统非常混乱。适配器解决已经完成继续增加内容
+的实用场景。
+
+在jQuery中使用的适配器的例子：
+jQuery.fn.css(),这个方法帮助规范了不同浏览器之间样式的应用方式，使我们使用简单的语法，这些语法被适配成为浏览器背后真正支持的语法
+
+```
+// 下面的例子将返回首个匹配元素的 background-color 值
+$("p").css("background-color");
+```
+```
+// 设置指定的 CSS 属性
+$("p").css("background-color","yellow");
+```
+```
+// 设置多个 CSS 属性
+$("p").css({"background-color":"yellow","font-size":"16px"});
+```
+
+```
+css: function( name, value ) {
+		return access( this, function( elem, name, value ) {
+			var styles, len,
+				map = {},
+				i = 0;
+			if ( Array.isArray( name ) ) {
+				styles = getStyles( elem );
+				len = name.length;
+
+				for ( ; i < len; i++ ) {
+					map[ name[ i ] ] = jQuery.css( elem, name[ i ], false, styles );
+				}
+
+				return map;
+			}
+
+			return value !== undefined ?
+				jQuery.style( elem, name, value ) :
+				jQuery.css( elem, name );
+		}, name, value, arguments.length > 1 );
+}
+```
+
+# 外观模式
+外观模式为子系统中的一组接口提供一个一致的界面，外观模式定义了一个高层接口，这个接口使得这一子系统更加容易使用。
+解决问题：降低访问复杂系统的内部子系统的负责度，简化客户端之间的接口。
+优点：1、减少系统相互依赖。2、提高灵活性。3、提高安全性。
+缺点：不符合开闭原则，如果要改东西很麻烦。
+
+# 观察者模式
+在观察者模式下，系统中的对象可以在关注的事件发生的时候给其他对象发送消息，可以被其他对象所通知。
+解决问题：一个对象状态改变给其他对象通知的问题，而且要考虑到易用和低耦合，保证高度的写作。
+优点：观察者和被观察者是抽象耦合的。
+缺点：如果一个被观察者对象有很多的直接和间接的观察者，将所有的观察者都通知到会话费很多时间。2、如果观察者和被观察着之间有循环依赖的话，观察目标会触发他们之间进行循环调用，可能导致系统崩溃。
+
+## 附录
+开闭原则：对扩展开放，对修改关闭。在程序需要进行扩展的时候，不能去修改原有的代码，实现一个热插拔的效果。简言之，是为了使程序的扩展性好，易于维护和升级。
+
+![]()
\ No newline at end of file