群组首页 → Web前端 → MooTools → 论坛
发表回复

[讨论] Mootools缺陷列表

littcai 2009-03-12

PS：请大家踊跃跟帖，将Mootools的缺陷整理出来，共同维护这张缺陷列表，以及解决方案。

格式：

 

Mootools缺陷列表
缺陷描述 解决方案 备注
     

 
chaely 2009-03-20
描述：使用window.addEvent('domready', function(){}) 进行table排序等操作时，比较慢而且页面首先会显示一个表格然后再显示排序表格，效果不好。
解决方案：还不知道。
littcai 2009-03-20
表格排序问题不是mootools的缺陷吧？我这里指的缺陷是mootools的功能性缺陷，或是因为使用了mootools后无法实现的问题。
1、关于速度慢：
table排序本身根据数据量和排序要求会是个耗时的任务。且需要先从表格中读出单元格内容，转换为相应的数据格式，排完序后再调整表格。
2、关于显示效果：
可考虑在排序前隐藏表格内容，显示个loading条，待排序成功后再显示内容
chaely 2009-03-24
我觉得是'domready' 的问题
littcai 2009-03-24
你说的慢是页面渲染慢还是表格排序慢？请上传代码我可以测一下
chaely 2009-03-31
上传了一个sortTable看一下效果就知道了，表格数据多的话会更明显
littcai 2009-04-01

这个控件表格数据是直接HTML的，然后调用了sortableTable对这个表格进行渲染。我插了200条，呈现是一瞬间的事，渲染延迟比较明显。


看了一下代码初始化的时候先遍历内容区tr，设置了鼠标时间，然后设置表头的样式，事件；耗时的是它居然默认按照第一列数据进行了排序操作！


这个操作遍历了所有的表头，设置其样式；遍历了所有行和第一列的所有单元格数据，对数据进行了比较排序然后插入表格体中，还设置了隔行显示的样式。

 

如果数据不是在js对象中而是需要先从表格元素里取出来再排序再插入的话，是比较耗时的，这个控件是采用标准的DOM事件的，老外的东西嘛。如果需要提高性能的话，可以将表格数据缓存到JS对象中，内存消耗会多一点，但效果会很明显。其次排好序填充表格的时候，可以采用拼HTML字符串的形式，然后用innerHTML渲染，，网上有个做过表格插入的测试，跟DOM插入基本差一个数量级。

 

PS：通常页面表格不会有大数据量，大数据量通常都做服务器端分页了，页面显示也不会多，这个控件基本够用了。排序的话也是客户端排序，在分页情况下没什么意义，完全不用在初始化的时候进行一次排序。

 

初步改进方案：
1、去掉初始化时对第一列的排序
2、遍历内容区的时候直接设置隔行显示
chaely 2009-04-02
分析的不错，多谢。
tianke66 2009-04-02
js没有包的概念，所以我同时使用多个js库的时候，会出现命名冲突，不知道改怎么解决比较好
littcai 2009-04-02
tianke66 写道
js没有包的概念，所以我同时使用多个js库的时候，会出现命名冲突，不知道改怎么解决比较好


在项目中引入JS库的时候要非常谨慎！！！更不要为了使用一个组件而引入！自己写的话，通常可定义命令空间，即前缀+方法名；或者是创建一个自己的对象，在其中实现不同的方法
发表回复
Global site tag (gtag.js) - Google Analytics