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+xml自动生成表格的东西
Dec 21 Javascript
开发跨浏览器javascript常见注意事项
Jan 01 Javascript
jQuery版Tab标签切换
Mar 16 Javascript
js判断样式className同时增加class或删除class
Jan 30 Javascript
jQuery教程 $()包装函数来实现数组元素分页效果
Aug 13 Javascript
js判断登录与否并确定跳转页面的方法
Jan 30 Javascript
JavaScript实现的一个倒计时的类
Mar 12 Javascript
js表单提交和submit提交的区别实例分析
Dec 10 Javascript
jQuery得到多个值只能用取Class ,不能用取ID的方法
Dec 04 Javascript
Jquery实时监听input value的实例
Jan 26 Javascript
js实现关闭网页出现是否离开提示
Dec 07 Javascript
vue将文件/图片批量打包下载zip的教程
Oct 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中的MVC模式运用技巧
2007/05/03 PHP
PHP程序员编程注意事项
2008/04/10 PHP
php读取xml实例代码
2010/01/28 PHP
PHP转换文件夹下所有文件编码的实现代码
2013/06/06 PHP
Yii隐藏URL中index.php的方法
2016/07/12 PHP
php curl上传、下载、https登陆实现代码
2017/07/23 PHP
php数据库的增删改查 php与javascript之间的交互
2017/08/31 PHP
基于jquery的direction图片渐变动画效果
2010/05/24 Javascript
腾讯与新浪的通过IP地址获取当前地理位置(省份)的接口
2010/07/26 Javascript
浏览器解析js生成的html出现样式问题的解决方法
2012/04/16 Javascript
jquery禁用右键单击功能屏蔽F5刷新
2014/03/17 Javascript
jquery实现动态改变div宽度和高度
2015/05/08 Javascript
今天抽时间给大家整理jquery和ajax的相关知识
2015/11/17 Javascript
微信js-sdk上传与下载图片接口用法示例
2016/10/12 Javascript
ng-options和ng-checked在表单中的高级运用(推荐)
2017/01/21 Javascript
vue-cli构建项目使用 less的方法
2017/10/04 Javascript
node实现的爬虫功能示例
2018/05/04 Javascript
vue通过cookie获取用户登录信息的思路详解
2018/10/30 Javascript
vue生命周期与钩子函数简单示例
2019/03/13 Javascript
layui switch 开关监听 弹出确定状态转换的例子
2019/09/21 Javascript
Node.js web 应用如何封装到Docker容器中
2020/09/01 Javascript
详解 Python 与文件对象共事的实例
2017/09/11 Python
python的构建工具setup.py的方法使用示例
2017/10/23 Python
Windows上安装tensorflow  详细教程(图文详解)
2020/02/04 Python
Python+redis通过限流保护高并发系统
2020/04/15 Python
浅析python 通⽤爬⾍和聚焦爬⾍
2020/09/28 Python
Html5页面上如何禁止手机虚拟键盘弹出
2020/03/19 HTML / CSS
服装公司总经理岗位职责
2013/11/30 职场文书
美容师的职业规划书
2013/12/27 职场文书
拾金不昧的表扬信
2014/01/16 职场文书
2014学雷锋活动心得体会
2014/03/10 职场文书
音乐节策划方案
2014/06/09 职场文书
学用政策心得体会
2014/09/10 职场文书
入党积极分子培养人意见
2015/06/02 职场文书
电力企业职工培训心得体会
2016/01/11 职场文书
MySQL 存储过程的优缺点分析
2021/05/20 MySQL