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 相关文章推荐
javascript XMLHttpRequest对象全面剖析
Apr 24 Javascript
js写一个字符串转成驼峰的实例
Jun 21 Javascript
Node.js刷新session过期时间的实现方法推荐
May 18 Javascript
jQuery+HTML5实现弹出创意搜索框层
Dec 29 Javascript
基于JavaScript定位当前的地理位置
Apr 11 Javascript
详解使用vue实现tab 切换操作
Jul 03 Javascript
vue实现文章内容过长点击阅读全文功能的实例
Dec 28 Javascript
详解jQuery中的easyui
Sep 02 jQuery
VUE DEMO之模拟登录个人中心页面之间数据传值实例
Oct 31 Javascript
vue-cli3使用mock数据的方法分析
Mar 16 Javascript
vue props default Array或是Object的正确写法说明
Jul 30 Javascript
JS检测浏览器开发者工具是否打开的方法详解
Oct 02 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
ThinkPHP3.1新特性之动态设置自动完成及自动验证示例代码
2014/06/23 PHP
JavaScript 字符串乘法
2009/08/20 Javascript
Extjs学习笔记之八 继承和事件基础
2010/01/08 Javascript
JS获取页面input控件中所有text控件并追加样式属性
2013/02/25 Javascript
jquery.Ajax()方法调用Asp.Net后台的方法解析
2014/02/13 Javascript
js实现遮罩层划出效果是生成div而不是显示
2014/07/29 Javascript
在Python中使用glob模块查找文件路径的方法
2015/06/17 Javascript
Json解析的方法小结
2016/06/22 Javascript
[原创]jQuery常用的4种加载方式分析
2016/07/25 Javascript
Node.js 日志处理模块log4js
2016/08/28 Javascript
jQuery实现的背景颜色渐变动画效果示例
2017/03/24 jQuery
JavaScript数组_动力节点Java学院整理
2017/06/26 Javascript
详解VueRouter进阶之导航钩子和路由元信息
2017/09/13 Javascript
如何从头实现一个node.js的koa框架
2019/06/17 Javascript
echarts实现折线图的拖拽效果
2019/12/19 Javascript
[04:27]2014DOTA2国际邀请赛 NAVI战队官方纪录片
2014/07/21 DOTA
[01:03:41]DOTA2-DPC中国联赛 正赛 Dynasty vs XG BO3 第三场 2月2日
2021/03/11 DOTA
使用Python的Scrapy框架编写web爬虫的简单示例
2015/04/17 Python
Python使用gensim计算文档相似性
2016/04/10 Python
深入解析Python编程中super关键字的用法
2016/06/24 Python
flask + pymysql操作Mysql数据库的实例
2017/11/13 Python
50行Python代码实现人脸检测功能
2018/01/23 Python
Django contenttypes 框架详解(小结)
2018/08/13 Python
Python实现滑动平均(Moving Average)的例子
2019/08/24 Python
python os.path.isfile 的使用误区详解
2019/11/29 Python
Python sorted排序方法如何实现
2020/03/31 Python
基于python实现简单网页服务器代码实例
2020/09/14 Python
HTML4和HTML5之间除了相似以外的10个主要不同
2012/12/13 HTML / CSS
Shopee马来西亚:随拍即卖,最佳行动电商拍卖平台
2017/06/05 全球购物
广州一家公司的.NET面试题
2016/06/11 面试题
用C#语言写出在本地创建一个UDP接收端口的具体过程
2016/02/22 面试题
公司财务工作总结的自我评价
2013/11/23 职场文书
cf战队收人口号
2014/06/21 职场文书
2014年领导班子专项整治整改方案
2014/09/28 职场文书
学生不讲诚信检讨书
2014/09/29 职场文书
门面租赁合同范文
2019/08/06 职场文书