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 相关文章推荐
JObj预览一个JS的框架
Mar 13 Javascript
动态创建的表格单元格中的事件实现代码
Dec 30 Javascript
一个背景云变换js特效 鼠标移动背景云变化
Dec 28 Javascript
改变隐藏的input中value的值代码
Dec 30 Javascript
extjs 时间范围选择自动判断的实现代码
Jun 24 Javascript
jQuery解决浏览器兼容性问题案例分析
Apr 15 Javascript
RequireJS简易绘图程序开发
Oct 28 Javascript
jQuery遮罩层实例讲解
May 11 jQuery
JS实现手写parseInt的方法示例
Sep 24 Javascript
关于自定义Egg.js的请求级别日志详解
Dec 12 Javascript
解决vue bus.$emit触发第一次$on监听不到问题
Jul 28 Javascript
如何利用React实现图片识别App
Feb 18 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加密解密函数代码
2013/06/19 PHP
CodeIgniter实现更改view文件夹路径的方法
2014/07/04 PHP
PHP实现递归复制整个文件夹的类实例
2015/08/03 PHP
适用于初学者的简易PHP文件上传类
2015/10/29 PHP
php pdo oracle中文乱码的快速解决方法
2016/05/16 PHP
PHP观察者模式示例【Laravel框架中有用到】
2018/06/15 PHP
PHP simplexml_load_string()函数实例讲解
2019/02/03 PHP
javascript 学习之旅 (2)
2009/02/05 Javascript
Javascript实现关联数据(Linked Data)查询及注意细节
2013/02/22 Javascript
js改变鼠标的形状和样式的方法
2014/03/31 Javascript
js与jQuery实现checkbox复选框全选/全不选的方法
2016/01/05 Javascript
javascript瀑布流式图片懒加载实例
2020/06/28 Javascript
利用jquery获取select下拉框的值
2016/11/23 Javascript
JS中对数组元素进行增删改移的方法总结
2016/12/15 Javascript
jQuery.parseHTML() 函数详解
2017/01/09 Javascript
tracking.js页面人脸识别插件使用方法
2020/04/16 Javascript
基于node.js实现爬虫的讲解
2019/02/18 Javascript
JsonProperty 的使用方法详解
2019/10/11 Javascript
Django框架中render_to_response()函数的使用方法
2015/07/16 Python
python模拟事件触发机制详解
2018/01/19 Python
python实现任意位置文件分割的实例
2018/12/14 Python
浅谈python requests 的put, post 请求参数的问题
2019/01/02 Python
使用Template格式化Python字符串的方法
2019/01/22 Python
简单了解Python matplotlib线的属性
2019/06/29 Python
Python3远程监控程序的实现方法
2019/07/15 Python
树莓派3 搭建 django 服务器的实例
2019/08/29 Python
Python实现CAN报文转换工具教程
2020/05/05 Python
财政局长自荐信范文
2013/12/22 职场文书
经典大学生求职信范文
2014/01/06 职场文书
先进个人事迹材料
2014/01/25 职场文书
师德师风事迹材料
2014/12/20 职场文书
幼儿园感谢信
2015/01/21 职场文书
2016新年问候语大全
2015/11/11 职场文书
2016年优秀少先队辅导员事迹材料
2016/02/26 职场文书
管理者们如何制定2019年的工作计划?
2019/07/01 职场文书
2019年特色火锅店的创业计划书模板
2019/08/28 职场文书