所以说, 趋势就是趋势, 并不在于谁提出来, 该有的东西自然便会有. 我不知道我们这一代人是否算是见证了DOP的诞生, 但至少在这些年, DOP被用得越来越多了.

说到这个, 首先想提两点. 一个是之前众所周知的变成模式, 面向对象编程(OOP). 对与我来说, 面向对象在我的代码中扮演了相当重要的角色. 它让程序内部的交流变得更加清晰, 提升了程序的可读性, 降低了出现bug的概率. 在有些应用上, 到目前还是不能替代的. 另一个是今后Web编程的发展, 我目测会有几个大方向: 1. 基于Canvas或CSS3的Web游戏. 2. 功能复杂的Web应用程序(如在线办公). 3. 以内容呈现与交互为主的Web页面(如SNS). 只所以想要提这两点, 是为之后将要说到的OOP的局限性, 和DOP的应用范畴做铺垫.

那首先说说, 什么是DOP. 老实说, 我并非是从这个名字开始接触这个概念的, 而是从很多Web页面的改变上开始思考这个问题. 不过很自然地, 使用了同一个词语来描述这样同一个概念. 其实其中有一点YY的成分, 但我想也应该八九不离十.

如果说OOP让人们只用关心如何去调用一个功能, 而不用关心功能的实现的话, 那么DOP则只用人们去关心一个模块/对象所管理的数据, 而不用关心这些数据的改变会对其他模块/对象造成什么影响. 当然, 对自己的影响还是要关心的. 其实细想, 在一些高级编程语言中, 对象的属性就是一种简单地DOP模型. 但显然, 它是局限在某一个对象上的. 然而很多时候, 同一个数据在多个对象上是公用的, 这或许就是DOP和传统OOP一个很大的区别, 也是传统OOP的局限.

但说到这里, 大家可能也会有种想法, 认为DOP也是OOP. 我认为这种想法是正确的, DOP的最佳实践应该对象化/模块化, 只是与直接调用其他对象的方法不同, 通过数据来间接达到目的. 这一点来讲, 倒和面向事件的编程(EOP)有些相似, 但事件是瞬时的, 而数据则是可持续的. 或许DOP约等于OOP+EOP+Data?

近年来, 在很多网站中出现了Hash, 很多MVC框架也支持相应的技术, 极大地方便了复杂的无刷新页面的实现, 这应该算是典型的DOP. 不过如果仅仅是这样, 还只能说是Hash上的数据在和整个页面一个对象交互, 这就有点伤感了. 还好看到一些框架, 并非这样的如果, 比如淘宝的MagixJS似乎就不错. 不过很显然, DOP也有其局限性, 毕竟中间穿插了一个环节, 在效率上或许比不过传统的变成手段. 所以像Web游戏的有些部分则是不便于使用的, 但我想做做UI还是完全能够胜任.

按我的理解, 相对于OOP, DOP能进一步减小复杂程序的思维难度, 提高开发效率, 以及降低bug的概率, 应该是未来Web编程某些方面的趋势, 于是我也有自己的DOP框架计划, 只是准备在DOP的基础上, 增加强大的模板功能, 也许未来, 很多AJAX操作, 都只需要一个简单的模板了.

Original link of this archive: http://www.vilic.info/blog/archives/791
本文的原始链接: http://www.vilic.info/blog/archives/791

这两天在做淘吧首页的重构, 有很多地方会有图片的展示. 图片之后会由运营上传, 所以无法硬性规定图片的规格. 于是写代码的时候, 则要加以注意, 防止因为图片的问题破坏了布局.

最开始我的做法很直接, 确定图片大小, 问题则是, 如果图片高宽比不对, 则会变形. 但考虑到运营通常会按照规则传图片, 所以其实也是可行的.

但是妙净大似乎不是很能接受这种做法, 于是给出了这边通用的一个解决方案, 可以实现任意大小图片的垂直居中, 并且过于大的图片也不会破坏布局, 缺点是结构层次太多:

<div><a><img /></a></div>

总共三层, 一方面觉得有点累赘, 一方面因为自己都是两层, 图片出现的位置很多, 要改也很麻烦, 后来想出了一个觉得不错的办法. 为了简洁, 我就直接把style写到HTML里了:

<a href="#" style="display: block; width: 120px; height: 100px; overflow: hidden;">
<img alt="vilic" src="vilic.png" style="display: block; margin: auto; height: 100px;" />
</a>

这段代码也很好理解, 将内外元素display: block; (当然, 对于外面的元素, 使用float, 或者是position: absolute;也是可以的), 外面的元素定高宽, 且overflow: hidden; 保证图片不会在过大的时候超出. 而对于img, 变为块级元素后, 使用margin: auto; 则可以在图片较小, 或者高宽比较大时水平居中. 而height: 100px; 与a元素等高, 宽度不定, 这样一方面可以限制图片的高度, 一方面使图片不至于变形.

所以总体来说, 这个方案除了在图片高宽比较小时, 显示会左对齐(即图片右边可能会被挡住), 其他时候, 都能比较完美地展现图片, 重要的是, 兼容性很好, 结构简单.

试一下吧~

补充下, 后来想到, 如果说把容器宽度设置得足够宽, 然后再调节margin或者其他东西, 让超出部分隐藏, 那么, 即可实现较宽的图片也能居中了.

Original link of this archive: http://www.vilic.info/blog/archives/740
本文的原始链接: http://www.vilic.info/blog/archives/740