js 设计模式

  首先我们得明白JavaScript与俗的面向对象编程(oop)不同,它从未传统意义上之近乎,该语言的一切都是基于对象,依靠的是同仿照原型(prototype)系统。JavaScript通过原型委托的措施贯彻目标与对象中的存续,而不是传统面向对象语言中的类式继承。

  动态类型语言的变量类型要到程序运行时,待变量赋值后,才能够确定某种类型,而JavaScript就是一样派别典型的动态类型语言。

同、原型模式

  原型模式是用于创建对象的平等种植模式,可经过仿制来创造一个靶,最新的ECMAScript5提供了Object.create
方法来克隆对象:

<script>
var fruit={price:15,name:"apple"}
var demo=Object.create(fruit);
alert(demo.name);//apple

//或者:
function sch(){
  this.name="hube";
  this.age=100;
}
var tt=new sch(); 
var t=Object.create(tt);
  alert(t.age);//100


//在不支持的该方法的浏览器中,则可以使用如下polyfill代码:
Object.create=function(obj){
  var F=function(){};//定义了一个隐式的构造函数
  F.prototype=obj;
  return new F();  //还是通过new来实现的
}
</script>

`**Object.create()`法会采用指定的原型对象及其特性去创造一个新的目标。事实上JavaScript有一个根对象的是,它就是Object.prototype**对象,Object.prototype是一个缺损对象,我们创建的各国一个目标都是自Object.prototype克隆而来:

var t={};// 以字面量方式创建的空对象就相当于:var t= Object.create(Object.prototype);
var s=new Object();
alert(Object.getPrototypeOf(t)===Object.prototype);//true
alert(Object.getPrototypeOf(s)===Object.prototype);//true

  上面创建二只”空“对象,利用了ECMAScript5底Object.getPrototypeOf术查相了亚个目标的原型。这里的”空“加引号不是真的的空对象,它还连续了Object的组成部分性质和智。创建一个空对象下Object.create()即可:

var o = Object.create(null);//创建一个原型为null的空对象

  该模式不限于此,它再多之是供了同样栽便利的艺术去创造有项目的靶子。

原型继承:

  实际上通过对目标构造器的原型动态赋值给其它对象来促成”类“与”类“之间的原型继承:

var A=function(){};
A.prototype.sayName=function(){alert("hi");}

var B=function(){};
B.prototype=new A();//这是核心代码:它重写了B的原型,它和把B.prototype直接赋值给字面量对象相比没有本质区别,
                    //都是将对象构造器的原型指向另一个对象,而继承总是发生在对象与对象之间。
var b=new B();
b.sayName();//hi 

 二、单例模式

  单例模式定义:保证一个像样才发一个实例,并提供一个拜访它的大局访问点。

  不过在js中并无“类”这一说,单例模式之着力是管单独发一个实例,并提供全局看。俺们常常会将全局变量当成单例来运,例如这样的花样:

 var d={};

  不过这样以全局变量会特别易导致命名空间的招。我们发必不可少尽量减少全局变量的使用,将污染降低至低于为止。

以下二种植方式好相对下降全局变量带来的命名污染:

1、使用命名空间

  最简易的法是动对象字面量的样式:

var nameSpace={
  a:"jack",
  b:function(){}
};

  这里我们将a和b作为nameSpace的习性,这样可减少变量和大局作用域碰面的会。此外我们还得动态的创命名空间。

2、使用闭包来封装私有变量

  我们得以下就施行函数,来拟块级作用域,把变量封装在闭包的里,只暴露一些接口和外界通信:

<button id="btn">click</button> 

var demo=(function(){
    var name="jack",age=18;

 return {
    getInfo:function(){    
        return name+"-"+age;    
    }     
 }
 })();
 alert(demo.getInfo());//jack-18

  惰性ECMAScript单例:是依靠仅于急需之时段才创建对象的实例。比较实用。

脚是一个惰性单例的事例:

<button id="btn">click</button>
<script>
 var creatediv=(function(){
 var div;
 return function(){
    if(!div){
    div=document.createElement("div");
    div.style.width="200px";
    div.style.height="200px";
    div.style.border="1px solid red";
    div.style.display="none";
    document.body.appendChild(div);
    }
    return div;
 }
 })();
 document.getElementById("btn").onclick=function(){

 var show=creatediv();
    show.style.display="block";
 };
</script>

 

老三、策略模式

季、代理模式

待续