互联网前端模块化的一些思考

前段时间参与了我的第一个互联网项目——公司主页改版，主要是负责前端的组件实现（html+js+css）。为了响应领导使用YUI的号召，项目中引入了YUI的延迟加载机制，再加以jquery做为底层库以及一些简单的UI组件，就构成了我们的UI组件库。实现过程没什么难度，不过使用过程却碰到不少问题。

1.页面加载中组件样式错乱。这是因为延迟加载样式造成的，如果css文件加载很快看不出什么来，但要是比较慢的话就会一上来就给用户带来页面凌乱的感觉。简单的解决办法就是把组件的css文件引用添加到页面中来，不过我觉得更好的解决方案是不对样式文件进行延迟加载，而是把组件样式所需的代码块拷贝到当前页面的css文件中，那样做更利于个性化当前页面的组件以及减少服务器请求数。这点很不同与以往我做的内网项目——以前没有设计师，组件效果上的一致性有利于快速开发，但是互联网上相同功能的组件往往是每个页面都有不同的设计。

2.资源请求数大幅增加。YUI的核心思想之一就是细粒度的组件，优点是实现按需加载，减少了JS的大小，提高了网站访问速度，但是同时增大了文件请求数，增加了网站符合，而且yui的异步加载是一个接一个下载，这种方式会造成访问速度的下降。yui官方的做法是使用combo的方式结合它们自己的phploader在服务器端合并请求，悲剧的是yahoo并没有开源此项目，我们要是想玩合并就只能靠自己开发了。

3.样式修改不便。相比于jqueryUI那种统一的样式风格，yui形式的组件在修改样式方面还是方便了许多了，但是碰到同样组件在不同页面间样式不同的情况处理起来还是比较麻烦。通常我们会通过id选择器进行约束，但是我发现由于一个组件的样式分散于不同的css文件，查找起来也是个麻烦事。我以为最靠谱的办法就是把组件对应的css放入所在页面的css文件中，而不是把某个组件的所有东西都放入一个文件夹进行维护，毕竟css不像js那样存在依赖关系而变得不易维护。

评论

1 楼 hopesfish 2010-08-03  

针对我们现在N多项目压的压力,只能玩内网上EXT,外网上延迟加载理念的框架了。。。
上ext还有2个好处 加快项目开发速度 让新人更快的熟悉js 可以挑出前端开发的好苗子