設計模式之模式

1、介紹模式（Flyweight），運行共享技術有效地支持大量細粒度的對象，避免大量擁有相同內容的小類的開銷(如耗費內存)，使大家共個類(元類)。模式可以避免大量非常相似類的開銷，在程序設計中，有時需要生產大量細粒度的類實例來表示數(shù)據(jù)，如果能發(fā)現(xiàn)這些實例除了幾個參數(shù)以外，開銷基本相同的 話，就可以大幅度較少需要實例化的類的數(shù)量。如果能把那些參數(shù)移動到類實例的外面，在方法調用的時候將他們傳遞進來，就可以通過共享大幅度第減少單個實例 的數(shù)目。那么如果在JavaScript 中應用 模式呢？有兩種方式，第一種是應用在數(shù)據(jù)層上，主要是應用在內存里大量相似的對象上；第二種是應用在DOM 層上， 可以用在 事

2、件管理器上用來避免給父容器里的每個子元素都附加事件句柄。與數(shù)據(jù)層Flyweight 中有兩個重要概念-狀態(tài)rinsic 和外部狀態(tài) extrinsic 之分，狀態(tài)就是在對象里通過方法管理，而外部信息可以在通過外部刪除或者保存。說白點,就是先捏一個的原始模型，然后隨著不同場合和環(huán)境,再產生各具特征的具體模型，很顯然,在這里需要產生不同的新對象，所以 Flyweight 模式中常出現(xiàn) Factory 模式，F(xiàn)lywe ight 的狀態(tài)是用來共享的，F(xiàn)lyweight factory 負責一個 Flyweight pool(模式池)來存放狀態(tài)的對象。使用模式讓來演示一下如果通過一個類庫讓系統(tǒng)來管理所

3、有的書籍，每個書籍的元數(shù)據(jù)暫定為如下內容：IDTitle Author GenrePage count Publisher ID ISBN還需要定義每本書被借出去的時間和借書人，以及退書日期和是否可用狀態(tài)：checkoutDate checkoutMember設計模式之模式dueReturnDate availability因為 book 對象設置成如下代碼，注意該代碼還未被優(yōu)化：var Book = function( id, title, author, genre, pageCount,publisherID, ISBN, checkoutDate, checkoutMember, du

4、eReturnDate,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.availabil

5、ity = availability;Btotype = getTitle:function()return this.title;,getAuthor: function() return this.author;,getISBN: function() return this.ISBN;,/*其它 get 方法在這里就不顯示了*/ 更新借出狀態(tài)updateCheckoutSus: function(bookID, newSus, checkoutDate,checko utMember, newReturnDate)this.id= bookID; this.availability =

6、newSus; this.checkoutDate = checkoutDate;this.checkoutMember = checkoutMember; this.dueReturnDate = newReturnDate;,/續(xù)借extendCheckoutPeriod: function(bookID, newReturnDate) this.id =bookID;this.dueReturnDate = newReturnDate;,/是否到期isPastDue: function(bookID)var currentDate = new Date();return currentD

7、ate.getTime() Date.parse(this.dueReturnDate);程序剛開始可能沒問題，但是隨著時間的增加，可能大批量增加，并且每種都有不同的版本和數(shù)量，你將會發(fā)現(xiàn)系統(tǒng)變得越來越慢。幾千個 book 對象在內存里可想而 知，需要用模式來優(yōu)化?？梢詫?shù)據(jù)分成和外部兩種數(shù)據(jù)，和book 對象相關的數(shù)據(jù)（title, author 等）可以歸結為屬性，而（checkoutMember, dueReturnDate 等）可以歸結為外部屬 性。這樣，如下代碼就可以在同一本書里共享同一個對象了，因為不管誰借的書，只要書是同一本書，基本信息是一樣的：/*模式優(yōu)化代碼*/var Boo

8、k = function(title, author, genre, pageCount, publisherID, ISB N)this.title = title; this.author = author; this.genre = genre; this.pageCount = pageCount;this.publisherID = publisherID; this.ISBN = ISBN;定義基本工廠讓來定義一個基本工廠，用來檢查之前是否創(chuàng)建該 book 的對象，如果有就返回，沒有就重新創(chuàng)建并以便后面可以繼續(xù)，這確保為每一種書只創(chuàng)建一個對象：/* Book 工廠 單例 */var

9、 BookFactory = (function() var existingBooks = ; returncreateBook: function(title, author, genre,pageCount,publisherI D,ISBN)/*查找之前是否創(chuàng)建*/var existingBook = existingBooksISBN; if(existingBook)return existingBook;else/* 如果沒有，就創(chuàng)建一個，然后保存*/var book = new Book(title, author, genre,pageCount,publisherID,IS

10、BN);existingBooksISBN =book;return book;);管理外部狀態(tài)外部狀態(tài)，相對就簡單了，除了封裝好的book，其它都需要在這里管理：/*BookRecordManager 借書管理類 單例*/ var BookRecordManager = (function()var bookRecordDatabase = ; return/*添加借書 */addBookRecord: function(id, title, author, genre,pageCount,pub lisherID,ISBN, checkoutDate, checkoutMember, du

11、eReturnDate, availabil ity)var book = bookFactory.createBook(title, author, genre,pag eCount,publisherID,ISBN);bookRecordDatabaseid = checkoutMember: checkoutMember, checkoutDate: checkoutDate, dueReturnDate: dueReturnDate, availability: availability, book: book;,updateCheckoutSus: function(bookID,

12、newSus, checkoutDate, c heckoutMember,newReturnDate)var record = bookRecordDatabasebookID; record.availability = newSus; record.checkoutDate = checkoutDate; record.checkoutMember = checkoutMember; record.dueReturnDate = newReturnDate;,extendCheckoutPeriod: function(bookID, newReturnDate) bookRecordD

13、atabasebookID.dueReturnDate = newReturnDate;,isPastDue: function(bookID)var currentDate = new Date();return currentDate.getTime() Date.parse(bookRecordDatabaseb ookID.dueReturnDate););通過這種方式，做到了將同一種的相同信息保存在一個bookmanager 對象里，而且只保存一份；相比之前的代碼，就可以發(fā)現(xiàn)節(jié)約了很多內存。模式與 DOM關于 DOM 的事件冒泡，在這里就不多說了，相信大家都已經知道了，舉兩個例子。例

14、1：事件集中管理舉例來說，如果又很多相似類型的元素或者結構（比如菜單，或者 ul 里的多個 li）都需要他的 click 事件的話，那就需要多每個元素進行事件綁定，如果元素有非常非常多，那性能就可想而知了，而結合冒泡的知識，任何一個子元素有事件觸發(fā)的話，那觸發(fā)以后事件將冒泡到上一級元素，所以利用這個特性，可以使用模式，可以對這些相似元素的父級元素進行事件行進一步的操作。，然后再判斷里面哪個子元素有事件觸發(fā)了，再進在這里結合一下jQuery 的 bind/unbind 方法來舉例。HTML:信息(地址)這里是信息iframe src=信息(地圖)ondon&;address=london%2C%

15、20england&;width=500.gt;JavaScript:seManager = fly: function()var self =this;$(#container).unbind().bind(click, function(e)var= $(e.original| e.srcElement);/ 判斷是哪一個子元素if(.is(div.toggle)self.handleClick(););,handleClick: function(elem) elem.find(span).toggle(slow););例2：應用 模式 性能另外一個例子，依然和 jQuery 有關，一般

16、 在事件的回調函數(shù)里使用元素對象是會后，經常會用到$(this)這種形式，其實它重復創(chuàng)建了新對象，因為本身回調函數(shù)里的 this 已經是 DOM 元素自身了， 要必要使用如下這樣的代碼：$(div).bind(click, function()console.log(You clicked: + $(this).attr(id););/ 上面的代碼，要避免使用，避免再次對 DOM 元素進行生成 jQuery 對象，因為這里可以直接使用 DOM 元素自身了。$(div).bind(click, function() console.log(You clicked: + this.id););其實

17、，如果非要用$(this)這樣的形式，也可以實現(xiàn)自己版本的單實例模式，比如來實現(xiàn)一個jQuery.signle(this)這樣的函數(shù)以便返回DOM 元素自身：jQuery.single = (function(o)var collection = jQuery(1); return function(element) / 將元素放到集合里collection0 = element;/ 返回集合return collection;);使用方法：$(div).bind(click, function()var html = jQuery.single(this).next().html();console.log(html););這樣，就是原樣返回DOM 元素自身了，而且不進行jQuery 對象的創(chuàng)建?？偨YFlyweight 模式是一個提高程序效率和性能的模式,會大大加快程序的運行速