js常见的封装模式

方式一:
[code]//音乐控件
var bgAuido={
audio : pingfan.$$(‘audio’),
audioBtn : pingfan.$$(‘audioBtn’),
init : function(){
var _this=this;
window.addEventListener(touchStart,function(){
_this.audio.play();
window.removeEventListener(touchStart,arguments.callee)
},false);
this.audioBtn.addEventListener(touchStart,function(){
if(_this.audioBtn.className.replace(/(^s+)|(s+$)/g,”)==’off’){
_this.audio.play();
_this.audioBtn.className=”;
}else if(_this.audioBtn.className==”){
_this.audio.pause();
_this.audioBtn.className=’off’;
}
},false)

        }
    }

    bgAuido.init(); [/code]

属性与方法,都通过自变量定义给对象,然后通过init()方法整体驱动,但是不方便继承,与赋值更改属性(由于属性值没有预留参数,所以,只能单个更改)。

方式二:

[code]function BgAuido(opt){
opt=opt || {};
this.audio = pingfan.$$(‘audio’),
this.audioBtn = pingfan.$$(‘audioBtn’),
this.width=opt.width || 400;
}
BgAuido.prototype={
say:function(){
alert(this.width);
},
init : function(){
var _this=this;
window.addEventListener(touchStart,function(){
_this.audio.play();
window.removeEventListener(touchStart,arguments.callee)
},false);
this.audioBtn.addEventListener(touchStart,function(){
if(_this.audioBtn.className.replace(/(^s+)|(s+$)/g,”)==’off’){
_this.audio.play();
_this.audioBtn.className=”;
}else if(_this.audioBtn.className==”){
_this.audio.pause();
_this.audioBtn.className=’off’;
}
},false)

}

}[/code]
方便继承和赋予参数。

创建对象通常有两种方式:①object构造函数创建②对象字面量,而所讲的继承是继承原型链,及在有些情况下叫做“类”。

[color=Red]原型链继承的一个疑难点:[/color]
这个是大家通常使用的继承方法:

[code] //父构造函数
function Parent(name){
this.name=name || “gaolu”,
this.age=”24″;
}
Parent.prototype.sayName=function(){
return this.name;
}
//子类
function Child(name){
this.sex=”male”,
//实现继承属性
Parent.call(this,name);
}
//实现继承原型,但导致重复继承了属性,Child的constructor构造函数依然指向Parent
Child.prototype=new Parent();[/code]

var child=new Child();console.log(child);继承后实例结果如图:

js常见的封装模式
这种方式有点:可以继承父对象中的一切东西,但同时这种方法也能够安全的修改自身的属性,且不会带来修改其父对象的风险。
缺点:父构造函数调用了两次,因此导致其效率低下的问题,而且,自身的属性(比如name属性)会被继承两次。

通过自己的思索,改进以上继承方式:

js常见的封装模式
这种方式同样能达到继承的效果,不会出现重复继承属性,同时回正构造函数指向问题,其实jquery里面也用到这个原理,但是会存在一个问题,就是后代对象更改prototype原型会导致整个祖辈更改prototype。

以下是利用空对象F,实现继承,效率最高

[code]
//利用空对象做媒介,进行继承效果最佳
function inhert(C,P){
var F=function(){};
F.protototype = P.prototype;
C.prototype = new F();
C.prototype.constructor = C;
}[/code]

» 本文来自:前端开发者 » 《js常见的封装模式》
» 本文链接地址:https://www.rokub.com/5290.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!