跳转到主要内容
qingkong 提交于 28 July 2015

7.1 主题中的JS

和上一章类似,本章我们会讲一些Drupal主题中和JS有关的知识点,但是并不讲JS本身。如果你对JS还不很了解,建议你花时间去学习一下,因为JS真的非常有用。

在你往主题中写入JS语句之前,你应该了解以下事实:

1.  Drupal程序自带jQuery和jQuery UI

2.  在页面上写任意一句JS语句,Drupal就会自动为你载入jQuery(及另一个自带的js文件:drupal.js)

3.  Drupal 7中自带的jQuery版本是1.4.4,jQuery UI的版本是1.8.7

4.  Drupal 8中目前自带的jQuery版本是2.0,jQuery UI的版本是1.10(这也意味着drupal正式抛弃ie6/7/8),如果你发现当你读这个内容的时候,版本又变化了,不妨在下面留个言。

5.  使用jQuery Update模块可以让你在后台管理/升级你的jQuery版本(暂无d8版)官网地址:https://www.drupal.org/project/jquery_update

6.   如果你需要在你的主题中使用多个版本的jQuery库,你可以使用jQuery Multi模块(暂无d8版)。官网地址:https://www.drupal.org/project/jqmulti

7.  Drupal7中的jQuery使用的是 no-conflict mode,详见http://api.jquery.com/jQuery.noConflict/,你要用以下代码将你写的jQuery代码包起来,不然你会遇到类似:Uncaught TypeError: Property '$' of object [object DOMWindow] is not a function的错误:

(function ($) {

  // 你的代码

})(jQuery);

或者 

(function ($) {

  // 你的代码

}(jQuery));

以上两种写法都是被允许的,用来关闭第一个左括号的右括号,可以写在(jQuery)的前面,也可以写在它的后面。

8.  其实你也可以直接把你的js写在tpl中(就好像写静态页面那样),但是这样就不能使用drupal的JS aggregation功能,所以正式场合并不推荐。

9.  为了更好的性能,你可以使用Core   Library模块(暂无d8版)来改善核心提供的aggregation机制,官网地址:https://www.drupal.org/project/core_library,或者使用Advanced CSS/JS Aggregation模块(暂无d8版),官网地址: https://www.drupal.org/project/advagg

Drupal 版本