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!