首页 / 帖子
drupal大学几近完美的UI是如何做出来的?

浏览本网站,能够感受到drupal大学背后的技术团队对drupal UI超强的把控能力,请问能否介绍下技术层面上,做UI的改动都运用了一下什么技术和技巧?


3个答案
Amanda Song
发布于:2014-02-19 21:27

首先,应该是模块划分,每一个模块都有自己的template文件、js、css文件,这样做的好处是不至于所有的前端代码都放到theme。就是主要涉及到本模块的UI(不过不包含整站的Theme风格和样式),都放到当前模块里面。

1. 整站的css不至于很庞大

2. 升级该模块,删掉不用的css也比较方便,不至于css无线膨胀。

3. 分功明确。


其次,Javascript也做了对应的调整,并且没有用Drupal自带的behavior系统,因为Drupal默认的这个系统听起来比较合理,但是对于富客户端来说,不理想。

因为在ajax重新load的时候attachBehaviors的时候,并不是所有函数都要执行,并且有的函数再执行一遍的时候,会产生一些bug。

//只有一个drupal的behavior,这个函数调用其他命名空间的ready和pageLoad函数
Drupal.behaviors.sys_init = function(context){
  var dummy = function(){};
  
  for (i in d) {
    (d[i]['ready']||dummy)(context);
  }
  if (context.location) {
    for (i in d) { //pageLoad init
      (d[i]['onLoad']||dummy)(context);
    }
  }
}

d.attachBehaviors = function(object, context, op) {
  jQuery.each(object, function() {
    this(context || document, op);
  });
};

另外,js使用了命名空间,封装每一个系统,比如answer、question、vote、share等大的划分,加上自定义的事件机制,使整个站点js、ajax、html等都协调工作完好。


再次,Drupal大学运用了大量ajax、web2.0效果,重写了很多用户的操作返回结果,很多api都是ajax执行,因此用户体验比较好。


以上就是几点有关Drupal大学UI和JS的相关经验分享。

发布于:2014-02-20 11:05

感谢分享。非常精彩,所以感觉还不够尽兴。记得楼主曾早几年就自己写过javascript框架。看来用drupal做出好东西还是非常需要全方位的技术实力的。希望那个楼主单独开贴,在技术实现上,对本站的实现细节做个案例说明。无限期待中!

王斌
发布于:2014-08-11 11:52

哇, 好美丽的UI啊,呵呵