分享
超级会员免费看
kitt15
web开发
展开
-
javascript设计模式----访问者模式
访问者模式：针对于对象结构中的元素，定义在不改变改对象的前提下访问结构中元素的新方法。原创 2024-04-16 18:33:41 · 58 阅读 · 2 评论 -
javascript设计模式----命令模式
命令模式：将请求与实现解耦并封装成独立对象，从而使不同的请求对客户端的实现参数化。var viewCommand = (function(){ var tpl = { product : [ '<div>', '<img src="{#src#}" />', '<p>{#img#}</p>', '<div/&...原创 2024-04-16 18:32:44 · 42 阅读 · 2 评论 -
javascript设计模式----职责链模式
职责链模式：解决请求的发送者与请求的接受者之间的耦合，通过职责链的多个对象对分解请求流程，实现请求在多个对象之间的传递，直到最后一个对象完成请求的处理。半成品需求场景：给表单输入框添加事件，做输入提示和输入验证处理，完成这类需求要想服务器端发送请求还要在原有页面中创建其他组件，但是具体输入框有哪些还不确定。做法：把事件源，异步请求，创建组件模块解耦。完成一个需求要做很多事情，那么把每件事情独...原创 2024-04-16 18:32:25 · 27 阅读 · 0 评论 -
javascript设计模式----观察者模式
观察者模式：又被称作发布-订阅者模式或消息几支，定义了一种依赖关系，解决了主体对象与观察者之间功能的耦合。观察者模式有3个接口，注册信息接口，发布信息接口，移除信息接口注册信息接口：判断消息是否存在于消息容器_messages中，如果不存在，那么将该消息类型推入到消息容器_messages中，注意这里推入的是数组形式的消息，所以_massages[type]=[fn]。如果该消息已存在于消息容...原创 2024-04-16 18:32:07 · 42 阅读 · 2 评论 -
javascript设计模式----装饰者模式
装饰者模式：在不改变原对象的基础上，通过对其进行包装拓展（添加属性或者方法）使原有对象可以满足用户的更复杂需求。这样一个场景，用户信息表单需求变化，以前是当用户点击输入框时，如果输入框输入的内容有限制，那么气候变显示用户输入内容的限制格式的提示文案，现在需要加一条，默认输入框上边显示一行提示文案，当用户点击输入框时文案消失。//以前写的代码var telInput = document.ge...原创 2024-04-16 18:31:10 · 13 阅读 · 2 评论 -
javascript设计模式----适配器模式
适配器模式：将一个类（对象）的接口（方法或者属性）转化成另外一个接口，以满足用户需求，使类（对象）之间的接口不兼容问题通过适配器得以解决。更换框架当前页面所使用的框架(A)不能支持更多特效，需要换另一个框架Jquery，这样需要将所有页面重新用Jquery重写一次吗？使用适配器模式不需要重写了。两种情况。第一种，如果A框架与Jquery相似的话，那么所做的事情就简单多了。window.A...原创 2024-04-16 18:26:34 · 40 阅读 · 2 评论 -
javascript设计模式----外观模式
外观模式：为一组复杂的子系统接口提供一个更高级的统一接口，通过这个接口使得对子系统接口的访问更容易。一个简单的例子：封装document.getElementById()，这样每次获取元素时都不需要写那么多code了。function g(id){ return document.getElementById(id);}解决兼容性问题在Javascript中有时也用于对底层结构兼容性...原创 2024-04-16 18:26:18 · 16 阅读 · 1 评论 -
javascript设计模式----单例模式
单例模式，只允许实例化一次的对象类。有时我们也用一个对象来规划一个命名空间，井井有条地管理对象上的属性与方法。创建一个小型代码库var A = { Util : { util1_method1:function(){}, util1_method2:function(){} }, Tool:{ tool_method1:function(){}, tool_method2...原创 2024-04-16 18:26:00 · 30 阅读 · 2 评论 -
javascript设计模式----原型模式
原型模式：用原型实例指向创建对象的类，使这些类共享原型对象的方法与属性，使用于创建新的对象的类共享原型对象的属性以及方法。焦点图为例：假设页面中有很多焦点图，那么我们要实现这些焦点图最好的方式就是通过创建对象来一一实现。并且，切换动画一般是多样化的，有可能上下切换，也有可能左右切换，或者渐隐切换，放缩切换等。因此我们应该抽象出一个基类，让不同特效类去继承这个基类，然后对于差异化的需求通过重写这些...原创 2024-04-16 18:25:46 · 15 阅读 · 1 评论 -
javascript设计模式----建造者模式
建造者模式：将一个复杂对象的构建层与其表示层相互分离，同样的构建过程可采用不同的表示创建应聘者实例为例，我们不仅仅要创建应聘者这个实例，我们还要在创建过程中注意这位应聘者都有哪些兴趣爱好，姓名等信息，所期望的职位等等。//创建一位人类var Human = function(param){ //技能 this.skill = param && param.skill ||...原创 2024-04-16 18:25:23 · 23 阅读 · 2 评论 -
javascript设计模式----抽象工厂模式
抽象工厂模式：通过对类的工厂抽象使其业务用于对产品类簇的创建，而不负责创建某一类产品的实例。抽象类是一种声明但不能使用的类。抽象工厂模式：定义了一种类，并定义了改类所必备的方法，如果在子类中没有重写这些方法，那么当调用时能招到这些方法变回报错。var Car = function(){}Car.prototype = { getPrice:function(){ return new...原创 2024-04-16 18:24:05 · 17 阅读 · 2 评论 -
javascript设计模式-----简单工厂模式
简单工厂模式：又叫静态工厂方法，由一个工厂对象决定创建某一种产品对象类的实例。创建不同类型的对象比如每种体育用品都有相关的介绍。var Baskeball = function(){ this.intro = '篮球'}Basketball.prototype = { getMember : function(){ console.log('每个队伍需要5名球员') }}v...原创 2024-04-16 16:51:35 · 22 阅读 · 1 评论 -
javascript设计模式----工厂方法模式
工厂方法模式：通过对产品类的抽象使其创建业务主要负责用于创建多类产品。上回讲到的简单工厂模式的第一种方案有所缺陷，缺陷是：如果增加了新类型的产品，必须修改两处以上的地方，即添加新的类以及修改工厂方法里添加新的返回类型。//创建安全模式类，避免忘记使用newvar Factory = function(type,content){ if(this instanceof Factory){ ...原创 2024-04-16 16:52:04 · 15 阅读 · 1 评论 -
javascript设计模式----对象
为什么要用到对象。对象可以收编变量，使得页面中的全局变量减少比如，以下代码在页面中创建了3个全局变量。var checkName = function(){};var checkEmail = function(){};var checkPassword = function(){};我们可以使用对象来收编这些变量从而达到减少全局变量的效果。var CheckObject = {...原创 2024-04-16 16:41:24 · 38 阅读 · 1 评论