JavaScript设计模式初探


Posted in Javascript onJanuary 07, 2016

目的:设计模式众多,尝试记录下学到的不同设计模式的优劣,方便以后查阅。

前言:半年前看高程的时候看到设计模式这章,云里雾里,不是看不明白,而是不明白为啥要如此麻烦只为创建一个对象。直到最近完成了自己第一个小项目,才体会到当代码量多起来时没有适当的规范与限制是多么大的灾难。于是重新翻开高程,总结下几种我学到的简单设计模式的优劣。

正文:本文一共介绍7种设计模式以及他们的应用场景、优劣。

1.工厂模式

直接用函数来封装对象,将对象作为返回值。

function person (name,age) {
  var obj=new Object();
  obj.name=name;
  obj.age=age;
  obj.sayName=function () {
    alert(this.name);
  };
  return obj;
}
var me=person("Su",25);

缺点:对象识别的问题,所有创建出的对象都是Object的实例,不好区分。

2.构造函数模式

function Person (name,age) {
  this.name=name;
  this.age=age;
  this.sayName=function () {
    alert(this.name);
  };
}
var me=new Person("Su",25);

优点:运用构造函数模式可以将实例标示为一种特定的类型。

缺点:创建的对象的方法都是私有的,如果只是想产生公用的方法,会造成不必要的性能浪费。

3.原型模式

利用原型链继承

function Person () {}
Person.prototype.name="Su";
Person.prototype.sayName=function () {
alert(this.name);}
var me =new Person();

缺点:所有属性和方法被实例共享。当属性、方法中包含引用类型的值时,修改一个实例的属性、方法会影响所有其他实例。

4.原型+构造函数模式

私有属性、方法用构造函数产生,公有属性、方法用原型来继承。融合两种方法的优点。

function Person (name,age) {
  this.name=name;
  this.age=age;
}
Person.prototype={
  constructor:Person,
  sayName:function () {
      alert(this.name);
  }
}
var me=new Person("Su",25);

缺点:注意引用类型值的原型继承。

ps:上图代码重写了Person构造函数的原型对象,将原型对象指针指向了一个对象,所以constructor属性此时指向Object而不是Person,所以要显式的将其设置成Person。

5.动态原型模式

本质上还是构造函数,只在指定方法不存在时在原型对象中添加他。

function Person (name,age) {
  this.name=name;
  this.age=age;
  if (typeof this.sayName!="function") {
    Person.prototype.sayName=function () {
      alert(this.name);
    }
  }
}
var me =new Person("Su",25);

缺点:不能使用对象字面量重写原型对象。因为这会使实例的指针指向新的原型对象。也就是说上图中原型对象中添加的sayName方法会失效。

6.寄生构造函数模式

 调用时使用new操作符,除此以外我看不出和工厂模式有什么区别。望高人指点。

function person (name,age) {
  var obj=new Object();
  obj.name=name;
  obj.age=age;
  obj.sayName=function () {
    alert(this.name);
  };
  return obj;
}
var me=new person("Su",25); //这里使用new操作符

7.稳妥构造函数模式

没有公共属性,禁用this,仅暴露必须的API用于数据调用。适用于对安全有需求的领域。

function Person (name) {
 var o=new Object();
 o.sayName=function () {
 alert(name);  
 }  
 return o;
}
var me=Person("Su");

如上代码,只能通过sayName方法才能访问到内部的name属性。

本文给大家介绍了七种设计模式,分别介绍了他们的优缺点,希望对学习js设计模式相关知识有所帮助。

Javascript 相关文章推荐
JS getMonth()日期函数的值域是0-11
Feb 15 Javascript
制作高质量的JQuery Plugin 插件的方法
Apr 20 Javascript
javascript event在FF和IE的兼容传参心得(绝对好用)
Jul 10 Javascript
jQuery实现的动态伸缩导航菜单实例
May 07 Javascript
javascript bom是什么及bom和dom的区别
Nov 26 Javascript
JavaScript中eval函数的问题
Jan 31 Javascript
浅谈Javascript数组(推荐)
May 17 Javascript
Javascript中JSON数据分组优化实践及JS操作JSON总结
Dec 22 Javascript
vue的token刷新处理的方法
Jul 17 Javascript
Vue.js实现可排序的表格组件功能示例
Feb 19 Javascript
简单通过settimeout看javascript的运行机制
May 10 Javascript
JavaScript实现简单随机点名器
Nov 21 Javascript
JavaScript类型系统之Object详解
Jan 07 #Javascript
7个去伪存真的JavaScript面试题
Jan 07 #Javascript
jQuery表格插件datatables用法详解
Nov 23 #Javascript
详解JavaScript UTC时间转换方法
Jan 07 #Javascript
jQuery formValidator表单验证
Jan 07 #Javascript
JavaScript中的原始值和复杂值
Jan 07 #Javascript
理解JS事件循环
Jan 07 #Javascript
You might like
最新用php获取谷歌PR值算法,附上php查询PR值代码示例
2011/12/25 PHP
PHP基于单例模式实现的数据库操作基类
2016/01/15 PHP
CI(CodeIgniter)框架中URL特殊字符处理与SQL注入隐患分析
2019/02/28 PHP
数据结构之利用PHP实现二分搜索树
2020/10/25 PHP
javascript 操作文件 实现方法小结
2009/07/02 Javascript
ext 同步和异步示例代码
2009/09/18 Javascript
JS实现超过长度限制后自动跳转下一款文本框的方法
2015/02/23 Javascript
Javascript实现商品秒杀倒计时(时间与服务器时间同步)
2015/09/16 Javascript
理解javascript中try...catch...finally
2015/12/25 Javascript
给angular加上动画效遇到的问题总结
2016/02/17 Javascript
XML、HTML、CSS与JS的区别整理
2016/02/18 Javascript
jquery实现自适应banner焦点图
2017/02/16 Javascript
利用JavaScript的%做隔行换色的实例
2017/11/25 Javascript
Angular 向组件传递模板的两种方法
2018/02/23 Javascript
JS获取月的第几周和年的第几周实例代码
2018/12/05 Javascript
配置node服务器并且链接微信公众号接口配置步骤详解
2019/06/21 Javascript
Vue 使用beforeEach实现登录状态检查功能
2019/10/31 Javascript
JS面试题中深拷贝的实现讲解
2020/05/07 Javascript
python实现基于两张图片生成圆角图标效果的方法
2015/03/26 Python
Python下载网络文本数据到本地内存的四种实现方法示例
2018/02/05 Python
python实现彩票系统
2020/06/28 Python
CentOS 7下安装Python3.6 及遇到的问题小结
2018/11/08 Python
对python自动生成接口测试的示例讲解
2018/11/30 Python
用Python徒手撸一个股票回测框架搭建【推荐】
2019/08/05 Python
Django中自定义查询对象的具体使用
2019/10/13 Python
python def 定义函数,调用函数方式
2020/06/02 Python
python根据用户需求输入想爬取的内容及页数爬取图片方法详解
2020/08/03 Python
python七种方法判断字符串是否包含子串
2020/08/18 Python
python 使用openpyxl读取excel数据
2021/02/18 Python
伦敦眼门票在线预订:London Eye
2018/05/31 全球购物
Java的五个基础面试题
2016/02/26 面试题
公益活动策划方案
2014/01/09 职场文书
上课不认真检讨书
2014/09/17 职场文书
初中毕业生感言
2015/07/31 职场文书
2016春季小学开学寄语
2015/12/03 职场文书
入党申请书怎么写?
2019/06/11 职场文书