JavaScript设计模式学习——FlyWeight

数据集中管理：

var Car = function(make, model, year){
    this.make = make;
    this.model = model;
    this.year = year;
};

Car.prototype = {
    getMake: function(){
        return this.make;
    },
    getModel: function(){
        return this.model;
    },
    getYear: function(){
        return this.year;
    }
};

var CarFactory = (function(){
    var createdCars = {};
   
    return {
        createCar: function(make, model, yeah){
            if (createdCars[make + '-' + model + '-' + year]) {
                return createdCars[make + '-' + model + '-' + year];
            }
            else {
                var car = new Car(make, model, year);
                createdCars[make + '-' + model + '-' + year] = car;
                return car;
            }
        }
    }
})();

var carRecordManager = (function(){
    var carRecordDatabase = {};
   
    return {
        addCarRecord: function(make, model, year, owner, tag, renewDate){
            var car = CarFactory.createCar(make, model, year);
            carRecordDatabase[tag] = {
                owner: owner,
                renewDate: renewDate,
                car: car
            };
        },
        transferOwnership: function(tag, newOwner, newTag, newRenewDate){
            var record = carRecordDatabase[tag];
            record.owner = newOwner;
            record.tag = newTag;
            record.renewDate = newRenewDate;
        },
        renewRegistration: function(tag, newRenewDate){
            carRecordDatabase[tag].renewDate = newRenewDate;
        },
        isRegistrationCurrent: function(tag){
            var today = new Date();
            return today.getTime() < Date.parse(carRecordDatabase[tag].renewDate);
        }
    };
   
})();

 

=============================================

 

数据在叶节点：

var TooltipManager = (function() {
var storedInstance = null;

 

/* Tooltip class, as a flyweight. */
var Tooltip = function() {
this.delayTimeout = null;
this.delay = 1500; // in milliseconds.
// Create the HTML.
this.element = document.createElement('div');
this.element.style.display = 'none';
this.element.style.position = 'absolute';
this.element.className = 'tooltip';
document.getElementsByTagName('body')[0].appendChild(this.element);
};
Tooltip.prototype = {
startDelay: function(e, text) {

if(this.delayTimeout == null) {
var that = this;
var x = e.clientX;
var y = e.clientY;
this.delayTimeout = setTimeout(function() {
that.show(x, y, text);
}, this.delay);
}
},
show: function(x, y, text) {
clearTimeout(this.delayTimeout);
this.delayTimeout = null;
this.element.innerHTML = text;
this.element.style.left = x + 'px';
this.element.style.top = (y + 20) + 'px';
this.element.style.display = 'block';
},
hide: function() {
clearTimeout(this.delayTimeout);
this.delayTimeout = null;
this.element.style.display = 'none';
}
};

 

return {
addTooltip: function(targetElement, text) {
// Get the tooltip object.
var tt = this.getTooltip();

// Attach the events.
addEvent(targetElement, 'mouseover', function(e) { tt.startDelay(e, text); });
addEvent(targetElement, 'mouseout', function(e) { tt.hide(); });
},
getTooltip: function() {
if(storedInstance == null) {
storedInstance = new Tooltip();
}
return storedInstance;
}
};
})();

 

=============================================

 

采用池的方式：

 

/* DisplayModule interface. */
var DisplayModule = new Interface('DisplayModule', ['show', 'hide', 'state']);
/* DialogBox class. */
var DialogBox = function() { // implements DisplayModule
...
};
DialogBox.prototype = {
show: function(header, body, footer) { // Sets the content and shows the
... // dialog box.
},
hide: function() { // Hides the dialog box.
...
},
state: function() { // Returns 'visible' or 'hidden'.
...
}
};

 

/* DialogBoxManager singleton. */
var DialogBoxManager = (function() {
var created = []; // Stores created instances.
return {
displayDialogBox: function(header, body, footer) {
var inUse = this.numberInUse(); // Find the number currently in use.
if(inUse > created.length) {
created.push(this.createDialogBox()); // Augment it if need be.
}
created[inUse].show(header, body, footer); // Show the dialog box.
},
createDialogBox: function() { // Factory method.
var db = new DialogBox();
return db;
},
numberInUse: function() {
var inUse = 0;

for(var i = 0, len = created.length; i < len; i++) {
if(created[i].state() === 'visible') {
inUse++;
}
}
return inUse;
}
};
})();