• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号
您的位置:首页 > 程序设计 >JavaScript > 常用的javascript设计模式

常用的javascript设计模式

作者:咸鱼老弟 字体:[增加 减小] 来源:互联网 时间:2017-05-11

咸鱼老弟通过本文主要向大家介绍了javascript设计模式,javascript模式,javascript严格模式,javascript模式 pdf,javascript 模块模式等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com

阅读目录

  • 什么是设计模式
  • 单体模式:
  • 工厂模式:
  • 单例模式
  • 观察者模式(发布订阅模式)
  • 策略模式
  • 模板模式
  • 代理模式
  • 外观模式

设计模式太多了,貌似有23种,其实我们在平时的工作中没有必要特意去用什么样的设计模式,或者你在不经意间就已经用了设计模式当中的一种。本文旨在总结平时相对来说用的比较多的设计模式。

什么是设计模式

百度百科:

设计模式(Design pattern)是一套被反复使用、多数人知晓的、经过分类编目的、代码设计经验的总结。

使用设计模式是为了可重用代码、让代码更容易被他人理解、保证代码可靠性。 毫无疑问,设计模式于己于他人于系统都是多赢的;设计模式使代码编制真正工程化;设计模式是软件工程的基石脉络,如同大厦的结构一样。

实际情况:

设计模式绝对不是纸上谈兵的知识,光看书就以为自己懂了,那只是井底之蛙之见,设计模式绝对是从实践中来到实践中去的!如果编码经验很少,也不太可能能理解好设计模式,但凡软件设计能力强的人编码功底都是相当扎实的。

如果没有能深刻理解面向对象,也不太可能理解好设计模式,刚刚毕业或者才工作一两年就说自己面向对象能力强的人,基本上就是夸夸其谈的人。

很明显,我就是属于那种夸夸其谈的人,哈哈,不过希望对本文的总结,让自己更加了解这些设计模式,理解的更加透彻。

单体模式:

概念:

单体是一个用来划分命名空间并将一批相关的属性和方法组织在一起的对象,如果他可以被实例化,那么他只能被实例化一次。

特点: 

可以来划分命名空间,从而清除全局变量所带来的危险。

利用分支技术来来封装浏览器之间的差异。

可以把代码组织的更为一体,便于阅读和维护。

代码实现:

/*Basic Singleton*/
var Singleton = {
  attribute:true,
  method1:function(){},
   method2:function(){}
};
</div>

应用场景:

单体模式在我们平时的应用中用的比较多的,相当于把我们的代码封装在一个起来,只是暴露一个入口,从而避免全部变量的污染。

工厂模式:

概念:

工厂模式的定义:提供创建对象的接口,意思就是根据领导(调用者)的指示(参数),生产相应的产品(对象)。

创建一个对象常常需要复杂的过程,所以不适合在一个复杂的对象中。

创建对象可能会导致大量的重复代码,也可能提供不了足够级别的抽象。

工厂就是把成员对象的创建工作转交给一个外部对象,好处在于消除对象之间的耦合(也就是相互影响)

分类:

简单工厂模式:使用一个类,通常为单体,来生成实例。

复杂工厂模式定义是:将其成员对象的实列化推到子类中,子类可以重写父类接口方法以便创建的时候指定自己的对象类型。

父类只对创建过程中的一般性问题进行处理,这些处理会被子类继承,子类之间是相互独立的,具体的业务逻辑会放在子类中进行编写。

代码实现:

简单工厂模式: 

var XMLHttpFactory =function(){};      //这是一个简单工厂模式
  XMLHttpFactory.createXMLHttp =function(){
    var XMLHttp = null;
    if (window.XMLHttpRequest){
      XMLHttp = new XMLHttpRequest()
    }else if (window.ActiveXObject){
      XMLHttp = new ActiveXObject("Microsoft.XMLHTTP")
    }
  return XMLHttp;
  }
  //XMLHttpFactory.createXMLHttp()这个方法根据当前环境的具体情况返回一个XHR对象。
  var AjaxHander =function(){
    var XMLHttp = XMLHttpFactory.createXMLHttp();
    ...
  }
</div>

复杂工厂模式:流程==》 先设计一个抽象类,这个类不能被实例化,只能用来派生子类,最后通过对子类的扩展实现工厂方法

var XMLHttpFactory =function(){};    //这是一个抽象工厂模式
XMLHttpFactory.prototype = {
  //如果真的要调用这个方法会抛出一个错误,它不能被实例化,只能用来派生子类
  createFactory:function(){
   throw new Error('This is an abstract class');
  }
}
var XHRHandler =function(){}; //定义一个子类
// 子类继承父类原型方法
extend( XHRHandler , XMLHttpFactory );
XHRHandler.prototype =new XMLHttpFactory(); //把超类原型引用传递给子类,实现继承
XHRHandler.prototype.constructor = XHRHandler; //重置子类原型的构造器为子类自身
//重新定义createFactory 方法
XHRHandler.prototype.createFactory =function(){
  var XMLHttp =null;
  if (window.XMLHttpRequest){
   XMLHttp =new XMLHttpRequest();
  }else if (window.ActiveXObject){
   XMLHttp =new ActiveXObject("Microsoft.XMLHTTP")
  }
  return XMLHttp;
}
</div>

应用场景:

以下几种情景下工厂模式特别有用:

(1)对象的构建十分复杂

(2)需要依赖具体环境创建不同实例

(3)处理大量具有相同属性的小对象

优点:

可以实现一些相同的方法,这些相同的方法我们可以放在父类中编写代码,那么需要实现具体的业务逻辑,那么可以放在子类中重写该父类的方法,去实现自己的业务逻辑;

也就是说有两点:  

 1、弱化对象间的耦合,防止代码的重复。在一个方法中进行类的实例化,可以消除重复性的代码。

 2、重复性的代码可以放在父类去编写,子类继承于父类的所有成员属性和方法,子类只专注于实现自己的业务逻辑。

缺点:

当工厂增加到一定程度的时候,提升了代码的复杂度,可读性下降。而且没有解决对象的识别问题,即怎么知道一个对象的类型。

单例模式

概念:

单例模式定义了一个对象的创建过程,此对象只有一个单独的实例,并提供一个访问它的全局访问点。也可以说单例就是保证一个类只有一个实例,实现的方法一般是先判断实例存在与否,如果存在直接返回,如果不存在就创建了再返回,这就确保了一个类只有一个实例对象。

代码实现:

单例的实现有很多种,下面只介绍其中的一种,使用闭包方式来实现单例,代码如下:

var single = (function(){
  var unique;
  function getInstance(){
    // 如果该实例存在,则直接返回,否则就对其实例化
    if( unique === undefined ){
      unique = new Construct();
    }
    return unique;
  }
  function Construct(){
    // ... 生成单例的构造函数的代码
  }
  return {
    getInstance : getInstance
  }
})();
</div>

上面的代码中,unique便是返回对象的引用,而 getInstance便是静态方法获得实例。Construct 便是创建实例的构造函数。

可以通过 single.getInstance() 来获取到单例,并且每次调用均获取到同一个单例。这就是 单例模式 所实现的效果。

使用场景:

单例模式是一种常用的模式,有一些对象我们往往只需要一个,比如全局缓存、浏览器的window对象。在js开发中,单例模式的用途同样非常广泛。试想一下,当我们

单击登录按钮的时候,页面中会出现一个登录框,而这个浮窗是唯一的,无论单击多少次登录按

分享到:QQ空间新浪微博腾讯微博微信百度贴吧QQ好友复制网址打印

您可能想查找下面的文章:

  • javascript设计模式之中介者模式学习笔记
  • javascript设计模式之单体模式学习笔记
  • javascript设计模式之模块模式学习笔记
  • javascript设计模式之策略模式学习笔记
  • javascript常用的设计模式
  • 常用的javascript设计模式

相关文章

  • 2017-05-11原生js实现回复评论功能
  • 2017-05-11jQuery弹出层插件popShow用法示例
  • 2017-05-11BootStrap实现带关闭按钮功能
  • 2017-05-11bootstrap表单按回车会自动刷新页面的解决办法
  • 2017-05-11基于JS实现bookstore静态页面的实例代码
  • 2017-05-11基于Vue实现timepicker
  • 2017-05-11JavaScript中清空数组的三种方式
  • 2017-05-11微信小程序 详解Page中data数据操作和函数调用
  • 2017-05-11angular-cli修改端口号【angular2】
  • 2017-05-11Angular.js中ng-if、ng-show和ng-hide的区别介绍

文章分类

  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号

最近更新的内容

    • JavaScript中使用webuploader实现上传视频功能(demo)
    • jQuery插件ajaxFileUpload使用详解
    • 微信小程序 点击控件后选中其它反选实例详解
    • Javascript仿京东放大镜的效果
    • Bootstrap 下拉多选框插件Bootstrap Multiselect
    • JavaScript数组复制详解
    • js实现炫酷的左右轮播图
    • js时间戳和c#时间戳互转方法(推荐)
    • 微信小程序 特效菜单抽屉效果实例代码
    • JS排序之冒泡排序详解

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有