jQuery Drupal 行为

Drupal behaviors

提问by Shoaib Nawaz

• What are Drupal behaviors at all?
• What type of service layer it offers to module developers?
• What type of relation it maps to jQuery.ready?

• Drupal 的行为到底是什么？
• 它为模块开发人员提供什么类型的服务层？
• 它映射到什么类型的关系jQuery.ready？

回答by wildpeaks

Long version: Drupal.behaviors is not simply a replacement for jQuery.ready since the latter only runs once (when DOM is ready for manipulation): behaviors can be fired multiple times during page execution and can be run whenever new DOM elements are inserted into the document.

长版：Drupal.behaviors 不仅仅是 jQuery.ready 的替代品，因为后者只运行一次（当 DOM 准备好进行操作时）：行为可以在页面执行期间多次触发，并且可以在新的 DOM 元素插入时运行文件。

Also, modules could override or extend an existing behavior (e.g. if one module has a behavior of adding a bounce effect on all links, a second module could replace the behavior by a different bounce effect).

此外，模块可以覆盖或扩展现有行为（例如，如果一个模块具有在所有链接上添加反弹效果的行为，则第二个模块可以用不同的反弹效果替换该行为）。

Short version: it's more modular, though the documentation could be improved.

简短版本：虽然文档可以改进，但它更加模块化。

---

---

Also, starting in Drupal 7, settings defined using drupal_add_js(PHP) or in Drupal.settings.modulename(Javascript) are directly passed as second parameter (the first one being the context) to the behavior.

此外，从 Drupal 7 开始，使用drupal_add_js(PHP) 或Drupal.settings.modulename(Javascript)定义的设置直接作为第二个参数（第一个是上下文）传递给行为。

For example:

例如：

Drupal.behaviors.changeLinks = function(context, settings){
    if (!settings) settings = Drupal.settings.changeLinks;
    $("a", context).hover(function() {
        $(this).css('color', settings.color);
    });
};

And if one of your script (or another) creates new nodes, it could still have the behaviors applied to the new nodes without having to know what other modules are iinstalled:

如果您的一个脚本（或另一个）创建了新节点，它仍然可以将行为应用于新节点，而无需知道安装了哪些其他模块：

var newNodes = $('<a href="#">Hello</a> <a href="#">World</a>').appendTo('#someDiv');

Drupal.attachBehaviors(newNodes);

回答by dreftymac

Duplicated Functionality

重复的功能

Note that the Drupal.behaviors architecture duplicates functionalityalready in jQuery.

请注意，Drupal.behaviors 架构复制了 jQuery 中已有的功能。

Also, as of this writing, there does not appear to be any documentation or case studiesfor Drupal.behaviors outside of Drupal itself; and the documentation within Drupal (as stated above) could benefit considerably from improvements. As of this writing, it appears that the primary detailed documentation is restricted-access for-fee only.

此外，在撰写本文时，似乎没有任何关于 Drupal.behaviors 的文档或案例研究超出 Drupal 本身；Drupal 中的文档（如上所述）可以从改进中受益匪浅。在撰写本文时，主要的详细文档似乎仅限于收费访问。

This means you may notice performance degredation, anomalies, and unexpected results not consistent with standard jQuerythat are endemic to the Drupal.behaviors ecosystem.

这意味着您可能会注意到Drupal.behaviors 生态系统特有的与标准 jQuery 不一致的性能下降、异常和意外结果。

Native jQuery Functionality

原生 jQuery 功能

In contrast to Drupal.behaviors, the built-in functionality of the standard jQuery API is extensively documentedincluding in-line demonstrations and examples. Moreover, there are numerous live examples freely available on sites such as jsfiddle.

与 Drupal.behaviors 相比，标准 jQuery API 的内置功能被广泛记录，包括在线演示和示例。此外，在 jsfiddle 等网站上还有许多免费的现场示例。

The links in the see also section enumerate the jQuery api calls relevant to handling new DOM elements inserted into the document.

另请参阅部分中的链接列举了与处理插入到文档中的新 DOM 元素相关的 jQuery api 调用。

See also

也可以看看

• http://api.jquery.com/on/
• http://api.jquery.com/live/
• http://api.jquery.com/bind/
• http://api.jquery.com/delegate/

• http://api.jquery.com/on/
• http://api.jquery.com/live/
• http://api.jquery.com/bind/
• http://api.jquery.com/delegate/

回答by Sameer

Along with answers mentioned above on of the key things is you can pass data from php to javascript which is as follows

除了上面提到的关键问题的答案之外，您可以将数据从 php 传递到 javascript，如下所示

Passing values from PHP to Javascript with "Drupal.settings"

使用“Drupal.settings”将值从 PHP 传递到 Javascript

You can easily make variables from PHP available to Javascript on the front end with Drupal.settings using drupal_add_js()function

您可以使用drupal_add_js()函数轻松地使用Drupal.settings将 PHP 中的变量提供给前端的 Javascript

<?php
  drupal_add_js(array('myModule' => array('key' => 'value')), 'setting');
?>

or

或者

<?php
$element['#attached']['js'][] = array(
  'type' => 'setting',
  'data' => array('myModule' => array('key' => 'value')),
);
?>

This will be available in Javascript as:

这将在 Javascript 中可用，如下所示：

  if (Drupal.settings.myModule.key === 'value') {
    alert('Got it!');
  }

回答by th.sigit

Looking for a similar answer and arrived here, still without clues. Finally found a little more explanation (and examples) from an article here: https://benmarshall.me/drupal-behaviors/

寻找类似的答案并到达这里，仍然没有线索。终于从这里的一篇文章中找到了更多解释（和示例）：https: //benmarshall.me/drupal-behaviors/

I am not the original author, so I can only quote some texts:

我不是原作者，所以只能引用一些文字：

What are Drupal Behaviors?

In short, Drupal.behaviors is a more modular and better way to implement jQuery.ready. Unlike jQuery.ready which only runs once when the DOM is ready for manipulation, Drupal.behaviors can be ran multiple times during page execution. Even better, they can be ran whenever new DOM elements are inserted into the document (i.e. AJAX driven content).

Drupal.behaviors can also override or even extend an existing behavior. So for instance, if a module behavior adds a bounce effect on all links, another module could replace that behavior with a different bounce effect.

Another added bonus of Drupal.behaviors (starting in Drupal 7), is the ability to use the drupal_add_js (PHP) or Drupal.settings.modulename (JS) and pass settings as a second parameter (the first being the context) to the behavior.

什么是 Drupal 行为？

简而言之，Drupal.behaviors 是实现 jQuery.ready 的更加模块化和更好的方式。与 jQuery.ready 仅在 DOM 准备好操作时运行一次不同，Drupal.behaviors 可以在页面执行期间多次运行。更好的是，只要将新的 DOM 元素插入文档（即 AJAX 驱动的内容），它们就可以运行。

Drupal.behaviors 还可以覆盖甚至扩展现有行为。因此，例如，如果一个模块行为在所有链接上添加了反弹效果，另一个模块可以用不同的反弹效果替换该行为。

Drupal.behaviors 的另一个额外好处（从 Drupal 7 开始）是能够使用 drupal_add_js (PHP) 或 Drupal.settings.modulename (JS) 并将设置作为第二个参数（第一个是上下文）传递给行为.

回答by Pappu Kumar Singh

Drupal has a ‘behaviors' system to provide a modular and better way for attaching JavaScript functionality to place elements on a page. Drupal Behaviors allows you to override or extend the existing behavior. These Drupal behaviors are event triggered programs that get attached to the page elements to be changed. While behaviours can be attached to specific contents, multiple behaviours are also attached and can be ablazed multiple times for a quick remake.

Drupal 有一个“行为”系统，为附加 JavaScript 功能以在页面上放置元素提供模块化和更好的方式。Drupal Behaviors 允许您覆盖或扩展现有行为。这些 Drupal 行为是附加到要更改的页面元素的事件触发程序。虽然行为可以附加到特定内容，但也可以附加多个行为，并且可以多次点燃以进行快速重制。

JavaScript by attaching logic to Drupal.behaviors. Here is an example taken from that page:

JavaScript 通过将逻辑附加到 Drupal.behaviors。这是从该页面获取的示例：

Drupal.behaviors.exampleModule = {
  attach: function (context, settings) {
    $('.example', context).click(function () {
      $(this).next('ul').toggle('show');
    });
  }
}

;

;

回答by khurrami

Drupal behaviors are used if your JavaScript needs to be executed on page load and after an AJAX request (some new elements added in your document/html).

如果您的 JavaScript 需要在页面加载时和 AJAX 请求（在您的文档/html 中添加一些新元素）之后执行，则使用 Drupal 行为。

Drupal.behaviors.yourmodulename = {
  attach: function (context, settings) {
     // Code to be run on page load, and
    // on ajax load added here
  }
};

yourmodulename: This is your namespace and should be unique. For example, this is typically the name of your module, but it isn't mandatory.

yourmodulename：这是您的命名空间，应该是唯一的。例如，这通常是您的模块的名称，但它不是强制性的。

context: This is actually really really cool, on page load the context will contain the entire document and after an AJAX request will have all the newly loaded elements. This way you can treat content that is loaded in via AJAX differently than others.

上下文：这实际上真的很酷，在页面加载时上下文将包含整个文档，并且在 AJAX 请求之后将包含所有新加载的元素。通过这种方式，您可以区别对待通过 AJAX 加载的内容。

settings: This contains information passed on to JavaScript via PHP, it is similar to accessing it via Drupal.settings.

设置：这包含通过 PHP 传递给 JavaScript 的信息，类似于通过 Drupal.settings 访问它。