设计模式:
1.单例模式:也叫单体模式。
单例模式是一个将一批属性和方法组织在一起的对象,如果它可以被实例化,那么它只能被实例化一次。
创建方法:
1>.私有变量
var getInstance=(function(){
function Person(_name){
this.name=_name;
}
var instance=null;
return function(_name){
if(instance==null){
instance=new Person(_name);
}
return instance;
}
})();
var p1=getInstance("张三");
var p2=getInstance("李四");
console.log(p1);//张三
console.log(p2);//李四
2>.prototype原型
var Singleton = function( _name ){
if( this.instance == null ){
Singleton.prototype.instance = this;
}
this.name = _name;
return this.instance;
}
var p1 = new Singleton("张三");
var p2 = new Singleton("李四");
console.log( p1 );
console.log( p2 );
3>.静态变量
var Singleton = function( _name ){
if( Singleton.instance == null ){
Singleton.instance = {
name : _name
}
}
return Singleton.instance;
}
var p1 = Singleton("张三");
var p2 = Singleton("李四");
console.log( p1 );
console.log( p2 );
2.代理模式
代理是一个对象,它可以用来控制对本体对象的访问,而本体对象则负责执行所分派的那个对象的函数或者类,简单的来讲本体对象注重的去执行页面上的代码,代理则控制本地对象何时被实例化,何时被使用。
3.适配器模式
适配器模式是将一个类(对象)的接口(方法或属性)转化成客户希望的另外一个接口(方法或属性),适配器模式使得原本由于接口不兼容而不能一起工作的那些类(对象)可以一起工作。
4.工厂模式
工厂模式类似于现实生活中的工厂可以产生大量相似的商品,去做同样的事情,实现同样的效果。
var person = function(_name, _age, _sex){
var obj = new Object();
obj.name = _name;
obj.age = _age;
obj.sex = _sex;
return obj;
}
var p1 = person("张三", 20, "男");
var p2 = person("李四", 18, "女");
console.log( p1 );
console.log( p2 );
5.组合模式
组合模式:将对象组合成树形结构以表示“部分-整体”的层次结构。
常见场景:DOM的机制,一个DOM节点可以包含子节点,不管是父节点还是子节点都有添加、删除、遍历子节点的通用功能。
6.策略模式
策略模式,又叫算法簇模式。
策略模式指的是定义一些列的算法,把他们一个个封装起来,目的就是将算法的使用与算法的实现分离出来。
<body>
<input type="button" value="方法1" id="btn1" />
<input type="button" value="方法2" id="btn2" />
<div id="div1" style=" 100px; height: 100px; border: 1px solid gray;"></div>
</body>
<script>
var ChangeColor = function( elem, fn ){
this.elem = elem;
this.fn = fn;
this.begin = function(){
this.fn( this.elem );
}
}
var red = function(elem){
elem.style.background = "red";
}
var green = function(elem){
elem.style.background = "green";
}
function fn( flag ){
var cc;
if( flag==1 ){
cc = new ChangeColor(div1, red);
}else{
cc = new ChangeColor(div1, green);
}
cc.begin();
}
document.getElementById("btn1").onclick = function(){
fn( 1 );
}
document.getElementById("btn2").onclick = function(){
fn( 2 );
}
</script>
7.观察者模式
观察者模式又叫发布-订阅模式,它定义了对象间的一种一对多的关系,让多个观察者对象同时监听某一个主题对象,当一个对象发生改变时,所有依赖于它的对象都将得到通知。