现在的位置: 首页 > 综合 > 正文

js设计模式精讲系列

2012年01月12日 ⁄ 综合 ⁄ 共 1851字 ⁄ 字号 评论关闭

很久没逛园子了,忙于工作,闲话少说,进入正题。

1:构造模式(Constructor Pattern)

先讲下js对象的3中创建方式:

var newObj = {};

var newObj = Object.create(null);

var newObj = new Object();

常用的是第一种和第三种。

接着讲下给对象添加属性和方法的四种方法:

1.Dot语法 即通过“.”点号添加
给对象添加属性和值
newObj.someKey ="Hello javascript! i love u";
获取属性值
var key = newObj.someKey;
2.方括号语法
newObj["someKey"] = "this is the second method!";
var key = newObj["someKey"];
这两种是比较普遍的做法,ECMAScript3 编译通过
3.Object.defineProperty
Object.defineProperty(newObj,"someKey",{
      value:"好处在于可以对属性做更多的行为动作",
       writeable:true,
       enumerable:true,
       configurable:true
});
一种更通俗易懂的简单写法
var defineProp = function ( obj, key, value ){
  config.value = value;
  Object.defineProperty( obj, key, config );
};
使用这种方式,我们创建一个空person 对象
var person = Object.create(null);
defineProp(person,"car","BMW");
defineProp(person,"dateOfBirth","1988");
defineProp(person,"hasbeard",true);
等等
4.Object.defineProperties
如果说刚才只能设置一个属性,这个可以设置多个属性,请看下面
Object.defineProperty(newObj,{
      "someKey":{
             value:"这是一些属性",
             writeable:true},
       "anotherKey":{
             value:"这是另外一 些属性",
             writeable:true}
});
说明:3,4在ECMAScript5下编译通过
可以用1或2的方式获取3或4属性或者方法,改成方法例子把 value:function(args){} 即可

使用这些方法能够用来继承,我们来做个小实验,看如下代码:

创建一个赛车手,继承上面的person对象
var driver = Object.create(person);
添加一些新的属性或方法
defineProp(driver,"topSpeed","100mph");
我们输出日志看下是否继承了person的属性
console.log(driver.dateOfBirth);
//output:1988
在重新获取新设置的属性
console.log(driver.topSpeed);
//output:100mph

上面这些例子也告诉我们Js 没有class的概念,但是支持Object特殊的构造函数,通过简单地加前缀使用关键字“new”调用构造函数,我们可以告诉JavaScript我们希望用函数来表现得像一个构造函数、实例化一个新的对象与成员定义的函数。

简单的介绍后,我们来看基本的构造器模式的写法,如下:

function Car( model, year, miles ) {

  this.model = model;
  this.year = year;
  this.miles = miles;

}
//注意这里我们使用obj.protorype.newMethod 而不是Object.prototype是为了避免重定义原型对象
Car.prototype.toString = function () {
  return this.model + " has done " + this.miles + " miles";
};

// 用法:

var civic = new Car( "Honda Civic", 2009, 20000 );
var mondeo = new Car( "Ford Mondeo", 2010, 5000 );

console.log( civic.toString() );
console.log( mondeo.toString() );

上面的ToString()的单实例,保证每台Car都能共用这个方法。这里就是一个简单的构造器模式。

下章讲解:模块化模式

 

  

 

抱歉!评论已关闭.