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 相关文章推荐
var与Javascript变量隐式声明
Sep 17 Javascript
JavaScript初学者需要了解10个小技巧
Aug 25 Javascript
工作中常用到的JS表单验证代码(包括例子)
Nov 11 Javascript
javascript中的onkeyup和onkeydown区别介绍
Apr 28 Javascript
jquery实现简单的拖拽效果实例兼容所有主流浏览器(优化篇)
Jun 28 Javascript
JQuery中attr方法和removeAttr方法用法实例
May 18 Javascript
JavaScript中的return语句简单介绍
Dec 07 Javascript
js获取Html元素的实际宽度高度的方法
May 19 Javascript
jQuery 插件实现随机自由弹跳气泡样式
Jan 12 Javascript
js实现悬浮窗效果(支持拖动)
Mar 09 Javascript
js禁止表单重复提交
Aug 29 Javascript
浅析JS抽象工厂模式
Dec 14 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与MySQL开发中页面出现乱码的一种解决方法
2007/07/29 PHP
PHP的PDO常用类库实例分析
2016/04/07 PHP
利用php抓取蜘蛛爬虫痕迹的示例代码
2016/09/30 PHP
IE 条件注释详解总结(附实例代码)
2009/08/29 Javascript
JavaScript中去掉数组中的重复值的实现方法
2011/08/03 Javascript
JQuery each()函数如何优化循环DOM结构的性能
2012/12/10 Javascript
解析Jquery取得iframe中元素的几种方法
2013/07/04 Javascript
jquery win 7透明弹出层效果的简单代码
2013/08/06 Javascript
js控制文本框只输入数字和小数点的方法
2015/03/10 Javascript
详解Vue生命周期的示例
2017/03/10 Javascript
pm2 部署 node的三种方法示例
2017/10/20 Javascript
vue-devtools的安装步骤
2018/04/23 Javascript
基于VUE实现的九宫格抽奖功能
2018/09/30 Javascript
JSON的parse()方法介绍
2019/01/31 Javascript
layui输入框中只允许输入整数的实现方法
2019/09/18 Javascript
[01:12]快闪回顾DOTA2亚洲邀请赛(DAC) 静候2018新征程开启
2018/03/11 DOTA
Python实现字符串格式化输出的方法详解
2017/09/20 Python
python利用paramiko连接远程服务器执行命令的方法
2017/10/16 Python
基于Django的乐观锁与悲观锁解决订单并发问题详解
2019/07/31 Python
python3 mmh3安装及使用方法
2019/10/09 Python
Python爬虫库BeautifulSoup获取对象(标签)名,属性,内容,注释
2020/01/25 Python
python主要用于哪些方向
2020/07/05 Python
Python 合并拼接字符串的方法
2020/07/28 Python
用python写一个带有gui界面的密码生成器
2020/11/06 Python
香港No.1得奖零食网:香港零食大王
2016/07/22 全球购物
JAVA程序员面试题
2012/10/03 面试题
银行办公室岗位职责
2014/03/10 职场文书
秋天的雨教学反思
2014/04/27 职场文书
建筑安全生产责任书
2014/07/22 职场文书
教师批评与自我批评
2014/10/15 职场文书
天堂的孩子观后感
2015/06/11 职场文书
六五普法先进个人主要事迹材料
2015/11/03 职场文书
最美劳动诗,致敬所有的劳动者!
2019/07/12 职场文书
MongoDB安装使用并实现Python操作数据库
2021/06/28 MongoDB
PyCharm 配置SSH和SFTP连接远程服务器
2022/05/11 Python
Java中Dijkstra(迪杰斯特拉)算法
2022/05/20 Java/Android