WebNinja-對象封裝的粒度

最近看了幾篇關於前端開發的文章，結合實際體驗總結分享下，

什麼是對象封裝的粒度??

 

先扯淡打個比方

有一天你和你朋友們在路上偶遇一漂亮MM，無一不下巴下吊口不合攏，還差點撞到鳳姐～～在這裡，“漂亮”僅僅是對眾人那位MM的籠統感覺，或許你覺得她從頭到腳都很贊呢，你的朋友A覺得她眼睛水汪汪，抑或是朋友B就喜歡她腰細胸大。。。每個人對漂亮的定義，除了角度不一樣外，也建立在不同的和範圍。對象的粒度即該對象所覆蓋的範圍。

 

在web前端世界裡，一個完整的對象涵蓋了相關的HTML結構、CSS樣式和對應的互動指令碼。

如果看過物件導向的CSS（OOCSS）相關知識，你也會發現在針對某個對象比如產品(product)定義它的HTML結構時，同樣要對粒度進行分析和把握，粒度大一點，可以將產品的基本資料和產品相關的評論當成是產品對象的一部分(結果可能是一個div.product，裡麵包著div.product-info和div.product-comments，後兩者的樣式可能會依賴前者甚至互相依賴)；粒度要小一點，可以將產品的基本資料和評論資訊分別當成是獨立的對象，CSS樣式也相互獨立。

試想一下，如果某天上頭決定把產品評論撤掉，換成產品常見問題QA。。。很顯然，當產品評論和產品基本資料是獨立的對象時，UI的改動會最小，即使把div.product-comments直接幹掉，也不至於影響整體布局排版。

所以，粒度的把握很大程度上決定了對象的耦合度，代碼的複用度，維護成本高低。

在JS編程中也一樣，對象封裝（定義一個類、一個單件，甚至是一個執行某些功能的匿名函數）也有一個粒度的問題。對於簡單沒太多JS邏輯的頁面，可以直接一個匿名函數（減少全域變數），邏輯裡面隨便寫寫即可。對於互動複雜的頁面，建議對獨立的互動功能封裝成類，提供隨插即用的便利性。

 

例如，產品明細頁，主要的JS互動可能會有

1，產品當月價格的曲線圖表
2，產品圖片播放效果
…

 

如果不考慮物件導向(OO)，你可以一股勁將幾百上千行JS代碼全部放到一個叫product.js檔案裡面。。。。（哪天你穿越到別的部門或公司，別的要維護product.js的人估計會吐血）。

如果應用OO的思想，對象粒度放大一點，還是一個product.js，但寫一個product的類，將不同的互動功能放到不同的方法裡面，如
…product.prototype={
priceChart:function(){},
picsSlide:function(){}
}

 

如果priceChart和picsSlide都相當複雜，對象粒度便可小一點，將priceChart和picsSlide都封裝到單獨的類裡面去，代碼也可物理性分離到不同的js檔案比如product.chart.js和product.pics.js（部署的時候再利用工具將它們合并下下）。

 

關於OOCSS，可以看看這裡http://www.slideshare.net/stubbornella/object-oriented-css [謝謝楊琨推薦]

引用一句：How to create CSS objects? Get the granularity right!