The Flyweight Pattern in Javascript

     Flyweight Pattern，中文可译作享元模式。它的核心是分离对象的：内在属性和外部属性，然后共享内在属性，组装外在属性。看一个汽车的例子： 

/* Car class, un-optimized. */
var Car = function (make, model, year, owner, tag, renewDate) {
    this.make = make;
    this.model = model;
    this.year = year;
    this.owner = owner;
    this.tag = tag;
    this.renewDate = renewDate;
};
Car.prototype = {
    getMake: function () {
        return this.make;
    },
    getModel: function () {
        return this.model;
    },
    getYear: function () {
        return this.year;
    },
    transferOwnership: function (newOwner, newTag, newRenewDate) {
        this.owner = newOwner;
        this.tag = newTag;
        this.renewDate = newRenewDate;
    },
    renewRegistration: function (newRenewDate) {
        this.renewDate = newRenewDate;
    },
    isRegistrationCurrent: function () {
        var today = new Date();
        return today.getTime() < Date.parse(this.renewDate);
    }
};

很OOP，但是当需要很多Car的实例时，浏览器可能就慢了。 分析Car的属性，前3者终生不变，并且可以大量复制，作为内在属性。改进如下：

/* Car class, optimized as a 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;
    }
};

/* CarFactory singleton. */
var CarFactory = (function () {
    var createdCars = {};
    return {
        createCar: function (make, model, year) {
            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;
            }
        }
    };
})();

/* CarRecordManager singleton. */
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
            };
            return carRecordDatabase[tag];
        },
        getCar: function (tag) {
            return carRecordDatabase[tag];
        },
        transferOwnership: function (tag, newOwner, newTag, newRenewDate) {
            var record = this.getCar(tag);
            record.owner = newOwner;
            record.tag = newTag;
            record.renewDate = newRenewDate;
        },
        renewRegistration: function (tag, newRenewDate) {
            this.getCar(tag).renewDate = newRenewDate;
        },
        isRegistrationCurrent: function (tag) {
            var today = new Date();
            return today.getTime() < Date.parse(this.getCar(tag).renewDate);
        }
    };
})();


// test
(function () {
    var car = CarRecordManager.addCarRecord("test make", "test model", "2011", "Ray", "JB001", "2012-09-29");
    var car2 = CarRecordManager.addCarRecord("test make", "test model", "2011", "Tina", "JB002", "2011-08-27");
    var car1 = CarRecordManager.getCar("JB001");
    console.log(car == car1);               // true
    console.log(car1.car == car2.car);      // true
    console.log(car2.owner);                // tina
})();   

可以看到，即便需要很多的car，有CarFactory的控制，每个make + model + year的组合的Car实例实质上分别只会存在一个。 而对于Car实例的全部操作均通过CarRecordManager来实现，它通吃汽车的内外在全部属性。 

     基于js的灵活性，将Car类的声明迁移到CarFactory类中，将CarFactory类声明迁移到CarRecordManager中： 

/* CarRecordManager singleton. */
var CarRecordManager = (function () {
    var carRecordDatabase = {};

    /* CarFactory singleton. */
    var CarFactory = (function () {
        var createdCars = {};

        /* Car class, optimized as a 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;
            }
        };

        return {
            createCar: function (make, model, year) {
                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;
                }
            }
        };
    })();

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


// test
(function () {
    var car = CarRecordManager.addCarRecord("test make", "test model", "2011", "Ray", "JB001", "2012-09-29");
    var car2 = CarRecordManager.addCarRecord("test make", "test model", "2011", "Tina", "JB002", "2011-08-27");
    var car1 = CarRecordManager.getCar("JB001");
    console.log(car == car1);               // true
    console.log(car1.car == car2.car);      // true
    console.log(car2.owner);                // tina

    //var cc = new Car("test make", "test model", "2012");  //error
})();   

这时候，还是Flyweight，但是封装性更好了。 Car的用户看不到CarFactory，更看不到Car。即便你如倒数第二行那样声明var car = new Car(...)，得到的也唯有error。同时，它完全不影响原有的正常使用。

    关于Flyweight，它的内在属性比较好管理，因为实例对象比较少。而外在属性怎么管理？ Car的Flyweight实现，是将它们存储在一个内部的类数组对象：carRecordDataBase中。 发散一下，想到没有，一棵树，它利用Composite Pattern也可以完美的存储很多对象实例。 我们用它来实现一下Flyweight。看如下Calendar的例子： 

/* CalendarItem interface. */
var CalendarItem = new Interface('CalendarItem', ['display']);

/* CalendarYear class, a composite. */
var CalendarYear = function (year, parent) {
    this.year = year;
    this.element = document.createElement('div');
    this.element.style.display = 'none';
    parent.appendChild(this.element);
    function isLeapYear(y) {
        return (y > 0) && !(y % 4) && ((y % 100) || !(y % 400));
    }
    this.months = [];
    this.numDays = [31, isLeapYear(this.year) ? 29 : 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
    for (var i = 0, len = 12; i < len; i++) {
        this.months[i] = new CalendarMonth(i, this.numDays[i], this.element);
    }
};
CalendarYear.prototype = {
    display: function () {
        for (var i = 0, len = this.months.length; i < len; i++) {
            this.months[i].display(); 
        }
        this.element.style.display = 'block';
    }
};

/* CalendarMonth class, a composite. */
var CalendarMonth = function (monthNum, numDays, parent) {
    this.monthNum = monthNum;
    this.element = document.createElement('div');
    this.element.style.display = 'none';
    parent.appendChild(this.element);
    this.days = [];
    for (var i = 0, len = numDays; i < len; i++) {
        this.days[i] = new CalendarDay(i, this.element);
    }
};
CalendarMonth.prototype = {
    display: function () {
        for (var i = 0, len = this.days.length; i < len; i++) {
            this.days[i].display();
        }
        this.element.style.display = 'block';
    }
};

/* CalendarDay class, a leaf. */
var CalendarDay = function (date, parent) {
    this.date = date;
    this.element = document.createElement('div');
    this.element.style.display = 'none';
    parent.appendChild(this.element);
};
CalendarDay.prototype = {
    display: function () {
        this.element.style.display = 'block';
        this.element.innerHTML = this.date;
    }
};

CalendarYear、CalendarMonth、CalendarDay均实现了CalendarItem接口，CalendarMonth中引用和组装CalendarDay，CalendarYear引用和组装CalendarMonth。初看起来很不多，但是想一想一年得有365天，我连续加载个10年，页面估计就得挂了。 

    利用Singleton Pattern将CalendarDay一步到位改进如下： 

/* CalendarDay class, a leaf. */
var CalendarDay = (function () {
    var innerDay = null;
    var InnerCalendarDay = function () { };
    InnerCalendarDay.prototype = {
        display: function (date, parent) {
            var element = document.createElement('div');
            element.innerHTML = date;
            element.style.display = "block";
            parent.appendChild(element);
        }
    };

    return {
        getInstance: function () {
            if (innerDay == null) {
                innerDay = new InnerCalendarDay();
            }

            return innerDay;
        }
    };
})();

可以看到，我们将它的date和parent作为外在属性，在调用display方法时通过参数传入。这时候CalendarDay内部实例仅有1份。基于这个变化，修改CalendarMonth如下： 

/* CalendarMonth class, a composite. */
var CalendarMonth = function (monthNum, numDays, parent) {
    this.monthNum = monthNum;
    this.element = document.createElement('div');
    this.element.style.display = 'none';
    parent.appendChild(this.element);
    this.days = [];
    for (var i = 0, len = numDays; i < len; i++) {
        this.days[i] = CalendarDay.getInstance();
    }
};
CalendarMonth.prototype = {
    display: function () {
        for (var i = 0, len = this.days.length; i < len; i++) {
            this.days[i].display(i, this.element);
        }
        this.element.style.display = 'block';
    }
};

至此，CalendarDay级别已经优化。 你可以参考这个思路继续。 另外，创建的那些DOM元素其实也可以根据需要来进行共享。 这里暂不进行。

    这里再列举Tooltip的例子。一般性的代码：

var Tooltip = function(targetElement, text) {
    this.target = targetElement;
    this.text = text;
    this.delayTimeout = null;
    this.delay = 1500;

    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);
    this.element.innerHTML = this.text;

    var that = this; 
    addEvent(this.target, 'mouseover', function(e) { that.startDelay(e); });
    addEvent(this.target, 'mouseout', function(e) { that.hide(); });
};
Tooltip.prototype = {
    startDelay: function (e) {
        if (this.delayTimeout == null) {
            var that = this;
            var x = e.clientX;
            var y = e.clientY;
            this.delayTimeout = setTimeout(function () {
                that.show(x, y);
            }, this.delay);
        }
    },
    show: function (x, y) {
        clearTimeout(this.delayTimeout);
        this.delayTimeout = null;
        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';
    }
};

//test
var linkElement = $('link-id');
var tt = new Tooltip(linkElement, 'Lorem ipsum...');

 同样可能会导致N对类似对象被大量创建。改进如下： 

/* TooltipManager singleton, a flyweight factory and manager. */
var TooltipManager = (function () {
    var storedInstance = null;

    /* Tooltip class, as a flyweight. */
    var Tooltip = function () {
        this.delayTimeout = null;
        this.delay = 1500;
        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;
        }
    };
})();

/* Tooltip usage. */
TooltipManager.addTooltip($('link-id'), 'Lorem ipsum...');

全部源码download