JS设计模式9 - The Flyweight pattern

享元模式

Flyweight

目的

服用小而多的对象，减少内存使用。

何时使用

1. 对象太多消耗内存
2. 大部分对象的状态是外在的（和对象本身无关）
3. 用一些共享的对象代替大量对象

代码

http://codepen.io/staskh/pen/xEEwmN?editors=0010
首先看一个非享元模式，看看我们如何改进下面这个例子

/**
 * Created by shenyin.sy on 17/3/23.
 */

var Book = function( id, title, author, genre, pageCount,publisherID, ISBN, checkoutDate, checkoutMember, dueReturnDate,availability ){

    this.id = id;
    this.title = title;
    this.author = author;
    this.genre = genre;
    this.pageCount = pageCount;
    this.publisherID = publisherID;
    this.ISBN = ISBN;
    this.checkoutDate = checkoutDate;
    this.checkoutMember = checkoutMember;
    this.dueReturnDate = dueReturnDate;
    this.availability = availability;

};

Book.prototype = {

    getTitle: function () {
        return this.title;
    },

    getAuthor: function () {
        return this.author;
    },

    getISBN: function (){
        return this.ISBN;
    },

    // For brevity, other getters are not shown
    updateCheckoutStatus: function( bookID, newStatus, checkoutDate, checkoutMember, newReturnDate ){

        this.id = bookID;
        this.availability = newStatus;
        this.checkoutDate = checkoutDate;
        this.checkoutMember = checkoutMember;
        this.dueReturnDate = newReturnDate;

    },

    extendCheckoutPeriod: function( bookID, newReturnDate ){

        this.id = bookID;
        this.dueReturnDate = newReturnDate;

    },

    isPastDue: function(bookID){

        var currentDate = new Date();
        return currentDate.getTime() > Date.parse( this.dueReturnDate );

    }
};

我们看到例子中的书本，关键的属性是

    this.id = id;
    this.title = title;
    this.author = author;
    this.genre = genre;
    this.pageCount = pageCount;
    this.publisherID = publisherID;
    this.ISBN = ISBN;

和书本身无关的属性是

    this.checkoutDate = checkoutDate;
    this.checkoutMember = checkoutMember;
    this.dueReturnDate = dueReturnDate;
    this.availability = availability;

现在每次创建一个书本对象，都会创建上面的属性。

---

看看改进版。

// Flyweight optimized version
var Book = function ( title, author, genre, pageCount, publisherID, ISBN ) {

    this.title = title;
    this.author = author;
    this.genre = genre;
    this.pageCount = pageCount;
    this.publisherID = publisherID;
    this.ISBN = ISBN;

};

// Book Factory singleton
var BookFactory = (function () {
    var existingBooks = {}, existingBook;

    return {
        createBook: function ( title, author, genre, pageCount, publisherID, ISBN ) {

            // Find out if a particular book meta-data combination has been created before
            // !! or (bang bang) forces a boolean to be returned
            existingBook = existingBooks[ISBN];
            if ( !!existingBook ) {
                return existingBook;
            } else {

                // if not, let's create a new instance of the book and store it
                var book = new Book( title, author, genre, pageCount, publisherID, ISBN );
                existingBooks[ISBN] = book;
                return book;

            }
        }
    };

})();

// BookRecordManager singleton
var BookRecordManager = (function () {

    var bookRecordDatabase = {};

    return {
        // add a new book into the library system
        addBookRecord: function ( id, title, author, genre, pageCount, publisherID, ISBN, checkoutDate, checkoutMember, dueReturnDate, availability ) {

            var book = BookFactory.createBook( title, author, genre, pageCount, publisherID, ISBN );

            bookRecordDatabase[id] = {
                checkoutMember: checkoutMember,
                checkoutDate: checkoutDate,
                dueReturnDate: dueReturnDate,
                availability: availability,
                book: book
            };
        },
        updateCheckoutStatus: function ( bookID, newStatus, checkoutDate, checkoutMember, newReturnDate ) {

            var record = bookRecordDatabase[bookID];
            record.availability = newStatus;
            record.checkoutDate = checkoutDate;
            record.checkoutMember = checkoutMember;
            record.dueReturnDate = newReturnDate;
        },

        extendCheckoutPeriod: function ( bookID, newReturnDate ) {
            bookRecordDatabase[bookID].dueReturnDate = newReturnDate;
        },

        isPastDue: function ( bookID ) {
            var currentDate = new Date();
            return currentDate.getTime() > Date.parse( bookRecordDatabase[bookID].dueReturnDate );
        }
    };

})();

改进点在于，创建书本的时候，并不需要借书的信息，图书馆又可能又很多书，同样ISBN的书属性又都一样。

1. 创建书的时候用ISBN
2. 借书的时候用bookID
3. 共享了相同书本身的属性，节约了内存。

---

技术上的例子

上面的设计模式是一个业务逻辑的例子，看看在我们日常使用的库中，有没有这样的思想。
可以看一下这个测评：
http://jsperf.com/jquery-fly/3

$("div").on( "click", function () {
  console.log( "You clicked: " + $( this ).attr( "id" ));
});
 
// we should avoid using the DOM element to create a
// jQuery object (with the overhead that comes with it)
// and just use the DOM element itself like this:
 
$( "div" ).on( "click", function () {
  console.log( "You clicked:"  + this.id );
});

没必要每次都用DOM创建一个Jquery对象。

结论

其实UI库中往往有这个模式，像控件都有一些可以共享的属性，比如主题颜色等，有一些根据情况增加的属性，比如绑定的事件，名字等，所以在比较大的系统中，这个模式还是很有用的，能节省不少内存。