js设计模式小结

1 构造函数模式

var Person = function(name){
this.name = name;
this.getName = function(){
console.log(this.name);
}
};

var Person1= new Person(‘xiaoming‘);
Person1.getName();
var Person2 = new Person(‘xiaohua‘);
Person2.getName();

使用构造函数模式可以实现重复创建多个相似对象,且可以实现自定义传参,但缺点是每次实例化一个对象时就相当于将该对象方法重新创建了一遍。

 2 原型模式

var Person = function(){
};
Person.prototype.name = ‘xiaoming‘;
Person.prototype.getName = function() {
console.log(this.name);
};

var Person1 = new Person();
Person1.getName();
var Person2 = new Person();
Person2.getName();

原型模式的优点在于,每次实例化一个对象时,不需要重新创建该对象方法,而是通过指针引用原型链的方法,缺点是不能自定义传参,所以就有了下面的构造函数和原型组合使用的模式
 3 构造函数+原型模式

var Person = function(name){
this.name = name;
};

Person.prototype.getName = function() {
console.log(this.name);
};

var Person1 = new Person(‘xiaoming‘);
Person1.getName();
var Person2 = new Person(‘xiaohua‘);
Person2.getName();

综合了构造函数和原型模式的双方优点
4 工厂模式

function createPerson(name){
var Person = new Object();
Person.name = name;
Person.getName = function(){
console.log(this.name);
}
return Person;
}

var Person1= createPerson(‘xiaoming‘);
Person1.getName();
var Person2= createPerson(‘xiaohua‘);
Person2.getName();

工厂模式也可以用于创建多个相似对象,与构造函数函数模式相似,主要区别是在内部通过new Object()创建对象最后return 出来,但是存在无法判断对象类型的问题

5 模块模式

var person = function(name){

function getName(name){
console.log(name);
}

return {
getName: getName
}
}();

person.getName(‘xiaoming‘);

特别是在单页应用中常用的模式,可以理解为引入了私有变量特权方法的单例。

时间: 2024-07-30 08:42:43

js设计模式小结的相关文章

JS设计模式(门面模式)

<!--JS设计模式(门面模式)--> // 门面模式的概念:简化API接口 最经典的就是事件 // 做一件事情: 必须要调用2个函数分别是 a , b //案例:获得页面上多个元素并设置css样式 window.onload=function(){ setCss(["div1","div2","div3"],{ background:"blue", color:"#fff" }); } fun

JS 设计模式(工厂模式环境搭建)

<!--引入的核心JS文件--> <script type="text/javascript" src="CommonUtil.js"></script> <script type=text/javascript charset=utf-8> <!--JS设计模式(工厂模式)--> //搭建一个工厂环境 //卖车店 function CarShop(){}; CarShop.prototype={ cons

js 设计模式学习(1)

最近一个人外出旅行 顺便在那座城市买了一本关于JS设计模式的书 供无聊的时候阅读 却发现小有收获 旅游回来以后立马写下心得 做了一个地图 并以此总结此次旅行的经过的地方 尝试1: 尝试写JS类 1 var TianDiTu = function (lat, lng, zoom) { 2 if (this instanceof TianDiTu) { 3 var zoomSize = { maxZoom: 18, minZoom: 5 }, 4 normalm = L.tileLayer.chin

JS设计模式(桥接模式)

<!--引入的核心JS文件--> <script type="text/javascript" src="CommonUtil.js"></script> <script type=text/javascript charset=utf-8> <!--JS设计模式(桥接模式)--> //桥接模式:主要是把抽象和现实分离开来,使他们独立开来 //应用场景:事件监听回掉机制 window.onload=func

JS设计模式(动态工厂模式)

<!--引入的核心JS文件--> <script type="text/javascript" src="CommonUtil.js"></script> <script type=text/javascript charset=utf-8> <!--JS设计模式(细粒度工厂模式)--> //搭建一个工厂环境 买什么车——(去什么店)卖车的店——卖车——生产车 //卖车店 super Shop 只有卖车的方

设计模式小结——六大设计原则

设计模式是一套由软件界前辈们总结出的可以反复使用的编程经验,旨在提高代码的可重用性,提高系统的可维护性,以及解决一系列复杂问题.设计模式包括6大设计原则和23种种设计模式.6大设计原则:单一职责原则SRP 应该有却仅有一个原因引起类的变更,即类最好只实现一种功能.高内聚. 单一职责的实现方式是一个职责一个接口. 单一职责适用于类和接口,同样适用于方法,一个方法也应该只做好一件事.里氏替换原则LSP 所有能使用父类的地方必须能透明地使用其子类的对象. 子类必须完全实现父类的方法,如果子类不能完整实

js加强小结

一)回顾JavaScript基础 (1)函数的定义方式 *>>正常方式 function add(num1,num2){...} >>构造器方式 var add = new Function("num1","num2","return num1+num2"); *>>匿名/无名方式 var add = function(num1,num2){函数体} (2)window对象是什么 在JS中,window表示整个

【转】JS设计模式开篇

(原文地址:http://blog.chinaunix.net/uid-26672038-id-3904513.html) 本文主要讲述一下,什么是设计模式(Design pattern),作为敲键盘的我们要如何学习设计模式.设计模式真的是一把万能钥匙么? 各个代码的设计模式几乎每个人都知晓,就算不会那也一定在一些装逼的大牛(部分而已)口中听过.但可能很少有人知道设计模式的由来: 设计模式该术语源自Erich Gamma等人在上世纪90年代从建筑设计领域引入到计算机科学的(很难想象到底有多大关联

JS设计模式(一)

刚入职时,看过一段时间的设计模式,似懂非懂.不知不觉过去七个月了,对JS的理解更深刻了,数据结构与算法的基础也基本上算是过了一遍了,接下来要把设计模式搞定,然后不再深层次研究JS了,而是学习前端自动化.linux.数据库.服务器等的基础知识. 设计模式的学习主要参考<JavaScript设计模式与开发实践>一书,很多笔记也会从该书抄录.开始JS设计模式的学习. 1.原型模式 原型模式既是一种设计模式,也是一种编程泛型.原型模式是JS最基础的继承实现,在这儿就不多讲了,写一下JS原型继承的基本原