mass ui在内存利用上的一些设计

新一年起,开始着手开发UI库，首先是八大行为组件：draggable， droppable, resizable, selectable, sortable, fixedable, scrollable, switchable。这些其他UI库也有。因此多少有点参考它们的。mass 是一个类jQuery式的模块化框架，因此mass ui会重点参考jquery ui。在开发时渐渐察觉得jquery ui的重大缺憾了，庞大的基类让它所有子类化怎么瘦身都显得臃肿不堪，因此mass ui不得不刻意避开这点——统一的基类被砍掉了。

这里说说jQuery ui的设计，首先它在jquery.ui.widget搞了个类工厂，因此它可以写得非常OO，并且专门搞了插件机制。这插件机制可不是我们写jQuery插件那种简单的东西。此外这个基类还统一传参形式，规定了构造函数与销毁函数。不幸的是，jQuery是集化操作，选择器一圈就是一打元素，jQuery对于每个元素都单独创建这样一个庞大基类的子类的实例放进缓存系统，然后当用户触发预设好的原生事件时，通过它们的回调内部trigger控件的自定义事件调用实例的行为。

mass ui对此改进是，不要为每个匹配的元素创建单独的实例，只在缓存系统中保持少有的数据与触发器，经由原生事件到触发器再到统一的UI方法处理器。

但这样对每个元素要缓存的数据也很庞大，比如$.fn.draggable(hash)，用户传参对象hash，或者不传，我们也要在内部补上一个空的对象，然后混入(mixin)默认配置对象，组成真正可用的配置对象，然后取得元素的宽高位置作为特有的参数。为此，mass ui 在混入配置对象就存入缓存系统，对于元素个体特有的参数组成另一个缓存体放进缓存系统。这样配置对象就可以共享于所有匹配元素，节省内存(这有点像享元模式中的内蕴状态与外蕴状态)。内存在手机中非常宝贵，这也是jQuery modile吃不开的原因。

此外，mass ui还非常重视事件代理的运用。要求每个控件都能处理动态插入的元素。mass ui使用大量使用模板技术来生成UI及安置UI的布局容器。

最后动用一切手段，减少对元素进行添加样式，类名，事件，子元素或包裹元素。比如jquery ui中的resizable，则会在元素内容插入8个子元素作手柄，用于八个方向缩放元素。如果元素是select, input, textarea, canvas等不能插入子元素，则创建一个包裹元素把元素包起来放进它的原位置，再插入手柄。mass ui参考easyui的聪明实现，通过mousemove计算鼠标离边缘的距离来改变鼠标样式。

在实现mass ui过程中也很好地验证了mass基础库的可用性与实用性。