javascript設計モード7

13155 ワード

チェーンコール
(function(){

    function _$(els){

        //...

    }

    _$.prototype={

        each:function(fn){

            for(var i=0,len=this.elements.length;i<len;++i){

                fn.call(this,this.elements[i]);

            }

            return this;

        },

        setStyle:function(prop,val){

            this.each(function(el){

                el.style[prop]=val;

            });

            return this;

        },

        show:function(){

            var that=this;

            this.each(function(el){

                that.setStyle('display','block');

            });

            return this;

        },

        addEvent:function(type,fn){

            var add=function(el){

                if(window.addEventListener){

                    el.addEventListener(type,fn,false);

                }

                else if(window.attachEvent){

                    el.attachEvent('on'+type,fn);

                }

            };

            this.each(function(el){

                add(el);

            });

            return this;

        }

    };

    window.$=function(){

        return new _$(arguments);

    };

})();
チェーンコール対応の方法からデータを取得します.
window.API=window.API||function(){

    var name='Hello World';

    this.setName=function(newName){

        name=newName;

        return this;

    };

    this.getName=function(callback){

        callback.call(this,name);

        return this;

    };

};

var o2=new API;

o2.getName(console.log).setName('Meow').getName(console.log);
簡易工場
var BicycleShop=function(){};

BicycleShop.prototype={

    sellBicycle:function(model){

        var bicycle;

        switch(model){

            case'The Speedster':

            bicycle=new Speedster();

            break;

            case'The Lowrider':

            bicycle=new Lowrider();

            break;

            case'The Comfort Cruiser':

            default:

            bicycle=new ComfortCruiser();

        }

        interface.ensureImplements(bicycle,Bicycle);

        bicycle.assemble();

        bicycle.wash();

        return bicycle;

    }



};
メンバーオブジェクトの作成作業を外部のオブジェクトに渡す
var BicycleFactory={

    createBicycle:function(model){

        var bicycle;

        switch(model){

            case'The Speedster':

            bicycle=new Speedster();

            break;

            case'The Lowrider':

            bicycle=new Lowrider();

            break;

            case'The Flatlander':

            bicycle=new Flatlander();

            break;

            case'The Comfort Cruiser':

            default:

            bicycle=new ComfortCruiser();

        }

        Interface.ensureImplements(bicycle,Bicycle);

    }

};
工場モード(他のクラスやオブジェクトを使って作成するのではなく、サブクラスを使って作成する)
var BicycleShop=function(){};

BicycleShop.prototype={

    sellBicycle:function(model){

        var bicycle=this.createBicycle(model);

        bicycle.assemble();

        bicycle.wash();

        return bicycle;

    },

    createBicycle:function(model){

        throw new Error('...')//   ,      ,        ,       

    }

};
var AcmeBicycleShop=function(){};

extend(AcmeBicycleShop,BicycleShop);

AcmeBicycleShop.prototype.createBicycle=function(model){

    var bicycle;

    switch(model){

        case'The Speedster':

        bicycle=new AcmeSpeedster();

        break;

        case'The Lowrider':

        bicycle=new AcmeLowrider();

        break;

        case'The Comfort Cruiser':

        default:

        bicycle=new AcmeComfortCruiser();

    }

    Interface.ensureImplements(bicycle,Bicycle);

    return bicycle;

};

var GeneralProductsBicycleShop=function(){};

extend(GeneralProductsBicycleShop,BicycleShop);

GeneralProductsBicycleShop.prototype.createBicycle=function(model){

    var bicycle;

    switch(model){

        case'The Speedster':

        bicycle=new GeneralProductsSpeedster();

        break;

        case'The Lowrider':

        bicycle=new GeneralProductsLowrider();

        break;

        case'The Comfort Cruiser':

        default:

        bicycle=new GeneralProductsComfortCruiser();

    }

    Interface.ensureImplements(bicycle,Bicycle);

    return bicycle;

};

//         

//var bobCruisers=new GeneralProductsBicycleShop();

//var yourSecondNewBike=bobCruisers.sellBicycle('The Lowrider');