JS设计模式初探
目的:设计模式众多,尝试用博客记录下学到的不同设计模式的优劣,方便以后查阅。
前言:半年前看高程的时候看到设计模式这章,云里雾里,不是看不明白,而是不明白为啥要如此麻烦只为创建一个对象。直到最近完成了自己第一个小项目,才体会到当代码量多起来时没有适当的规范与限制是多么大的灾难。于是重新翻开高程,总结下几种我学到的简单设计模式的优劣。
正文:本文一共介绍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",); //这里使用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设计模式初探的更多相关文章
- JS设计模式(一)
刚入职时,看过一段时间的设计模式,似懂非懂.不知不觉过去七个月了,对JS的理解更深刻了,数据结构与算法的基础也基本上算是过了一遍了,接下来要把设计模式搞定,然后不再深层次研究JS了,而是学习前端自动化 ...
- js设计模式(12)---职责链模式
0.前言 老实讲,看设计模式真得很痛苦,一则阅读过的代码太少:二则从来或者从没意识到使用过这些东西.所以我采用了看书(<js设计模式>)和阅读博客(大叔.alloyteam.聂微东)相结合 ...
- JS设计模式——5.单体模式
JS设计模式——5.单体模式 http://www.cnblogs.com/JChen666/p/3610585.html 单体模式的优势 用了这么久的单体模式,竟全然不知!用它具体有哪些好处呢? ...
- js 设计模式-接口
js模拟java接口检测函数:确保子类实现接口中的方法:(出自js设计模式) 上代码: <script type="text/javascript" > <%-- ...
- 前端笔记之JavaScript面向对象(三)初识ES6&underscore.js&EChart.js&设计模式&贪吃蛇开发
一.ES6语法 ES6中对数组新增了几个函数:map().filter().reduce() ES5新增的forEach(). 都是一些语法糖. 1.1 forEach()遍历数组 forEach() ...
- [js]js设计模式小结
js设计模式小结 工厂模式/构造函数--减少重复 - 创建对象有new - 自动创建obj,this赋值 - 无return 原型链模式 - 进一步去重 类是函数数据类型,每个函数都有prototyp ...
- [js]设计模式小结&对原型的修改
js设计模式小结 工厂模式/构造函数--减少重复 - 创建对象有new - 自动创建obj,this赋值 - 无return 原型链模式 - 进一步去重 类是函数数据类型,每个函数都有prototyp ...
- js设计模式总结1
js设计模式有很多种,知道不代表会用,更不代表理解,为了更好的理解每个设计模式,对每个设计模式进行总结,以后只要看到总结,就能知道该设计模式的作用,以及模式存在的优缺点,使用范围. 本文主要参考张容铭 ...
- 转战JS(1) 初探与变量类型、运算符、常用函数与转换
转战JS(1)初探与变量类型.运算符.常用函数与转换 做为一名.NET后台开发人员,正考滤向Web前端开发转型,之前也写过一代前端代码,可是当再回头看JS,并有转向它的意愿的时候,突然发现:原来JS不 ...
随机推荐
- [Android基础论]为何Activity退出之后,系统没有调用onDestroy方法?
首先,问题是如何出现的? 晚上复查代码,发现一个activity没有调用自己的ondestroy方法 我表示非常的费解,于是我检查了下代码. 发现再finish代码之后接了如下代码 finish(); ...
- [OC笔记] Category分类之见解
用过别的语言做过开发的同学都知道,如果你想扩充一个类,就应该去继承这个类.但是OC里面有更好的方法,那就是分类. 那什么是分类呢?就是在不改变原先类,我们可以在其中添加咱们自定义的方法,这样和同事合作 ...
- mac--又发现了一款mac快捷键神器
之前用applescript,还有keyboard maestro,前段时间用机械键盘的时候,用开源的karabiner重新设置机械键盘的键位. 今天因为网上抄的键位F4想换成Launchpad,所以 ...
- [题解]UVa 11082 Matrix Decompressing
开始眨眼一看怎么也不像是网络流的一道题,再怎么看也觉得像是搜索.不过虽然这道题数据范围很小,但也不至于搜索也是可以随随便便就可以过的.(不过这道题应该是special judge,因为一题可以多解而且 ...
- iOS 自定义图片和文字垂直显示按钮<上面是图片,文字显示下面>
#import <UIKit/UIKit.h> @interface VerticalButton : UIButton @end #import "VerticalButton ...
- Java浮点数float,bigdecimal和double精确计算的精度误差问题总结
(转)Java浮点数float,bigdecimal和double精确计算的精度误差问题总结 1.float整数计算误差 案例:会员积分字段采用float类型,导致计算会员积分时,7位整数的数据计算结 ...
- C# NPOI 导入与导出Excel文档 兼容xlsx, xls
之前写了个小程序,导出一些数据成Excel,程序使用的是Microsoft.Office.Interop.Excel类来操作Excel. 在本机测试的时候都好好的,但是将生成文件放到其他电脑上却怎样也 ...
- SQLServer idenity 字段跳值
修改数据库实例的启动参数 然后修改SQLServer启动参数,打开SQLServer configuration manager,然后选择服务实例,点击右键属性,查看实例的属性界面,然后启动参数选项输 ...
- 初识nginx
先来一波官方站点关于nginx介绍.nginx相关历史这里不再赘述啦. nginx 是免费,开源,高性能 HTTP 服务器和反向代理服务器,也可作为IMAP/POP3代理服务器.nginx以它的高 ...
- Nodejs Express下引入本地文件的方法
Express的结构如下: |---node_modules------用于安装本地模块. |---public------------用于存放用户可以下载到的文件,比如图片.脚本文件.样式表 ...