jquery Drupal行为

e5nqia27  于 12个月前  发布在  jQuery
关注(0)|答案(8)|浏览(105)
  • Drupal行为到底是什么?
  • 它为模块开发人员提供了什么类型的服务层?
  • 它Map到jQuery.ready的关系类型是什么?
q3qa4bjr

q3qa4bjr1#

  • 长版本 *:Drupal.behaviors不仅仅是jQuery.ready的替代品,因为后者只运行一次(当DOM准备好进行操作时):行为可以在页面执行期间多次触发,并且可以在新的DOM元素插入到文档中时运行。

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

  • 简短版本 *:它更加模块化,尽管文档可以改进。

此外,从Drupal 7开始,使用drupal_add_js(PHP)或Drupal.settings. modulus(JavaScript)定义的设置直接作为第二个参数(第一个是上下文)传递给行为。
举例来说:

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

如果你的一个脚本(或另一个)创建了新节点,它仍然可以将行为应用到新节点上,而不必知道安装了哪些其他模块:

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

Drupal.attachBehaviors(newNodes);
f45qwnt8

f45qwnt82#

重复功能

注意Drupal.behaviors架构重复了jQuery中已经存在的功能
此外,在撰写本文时,似乎没有任何Drupal.behaviors的文档或案例研究在Drupal本身之外**; Drupal中的文档(如上所述)可以从改进中受益匪浅。在撰写本文时,主要的详细文档似乎是收费的限制访问。
这意味着您可能会注意到性能降级,异常和意外结果与Drupal.behaviors生态系统特有的标准jQuery不一致。

原生jQuery功能

与Drupal.behaviors相比,标准jQuery API的内置功能有广泛的文档,包括内联演示和示例。此外,在jsfiddle等网站上有许多免费的示例。
请参阅部分中的链接列举了与处理插入到文档中的新DOM元素相关的jQuery API调用。

参见

f2uvfpb9

f2uvfpb93#

沿着上面提到的答案的关键是你可以把数据从php传递到JavaScript,如下所示
使用“Drupal.settings”将值从PHP传递到JavaScript
您可以使用Drupal.settings在前端使用**drupal_add_js()**函数轻松地将PHP中的变量提供给JavaScript

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

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

这将在JavaScript中可用:

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

wgmfuz8q4#

寻找类似的答案,到了这里,仍然没有线索。最后从这里的一篇文章中找到了更多的解释(和例子):https://benmarshall.me/drupal-behaviors/
我不是原作者,所以只能引用一些文字:
什么是Drupal行为?
简而言之,Drupal.behaviors是实现jQuery.ready的更模块化和更好的方法。jQuery.ready只在DOM准备好操作时运行一次,而Drupal.behaviors可以在页面执行期间多次运行。更好的是,每当新的DOM元素插入到文档中时,它们都可以运行(即,AJAX驱动的内容)。
Drupal.behaviors还可以覆盖甚至扩展现有的行为。例如,如果一个模块行为在所有链接上添加了反弹效果,另一个模块可以用不同的反弹效果替换该行为。
Drupal.behaviors的另一个额外好处(从Drupal 7开始)是能够使用drupal_add_js(PHP)或Drupal.settings. modulus(JS)并将设置作为第二个参数(第一个是上下文)传递给行为。

mbzjlibv

mbzjlibv5#

Drupal有一个“行为”系统,它提供了一种模块化的更好的方式来附加JavaScript功能,以将元素放置在页面上。Drupal Behaviors允许你覆盖或扩展现有的行为。这些Drupal行为是事件触发的程序,附加到要更改的页面元素。虽然行为可以附加到特定的内容,但也可以附加多个行为,并且可以多次燃烧以快速重拍。
通过将逻辑附加到Drupal. behaviors来实现JavaScript。下面是从该页面中提取的一个示例:

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

;

wwodge7n

wwodge7n6#

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

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

您的模数:这是您的命名空间,应该是唯一的。例如,这通常是模块的名称,但不是强制性的。
context:这真的很酷,在页面加载时,context将包含整个文档,在AJAX请求后,将包含所有新加载的元素。这样,您可以将通过AJAX加载的内容与其他内容区别对待。
settings:这包含通过PHP传递给JavaScript的信息,它类似于通过Drupal. settings访问它。

fzsnzjdm

fzsnzjdm7#

步骤1.创建信息文件,就像我的模块名是“mymodule.info.yml”。

name: My Module  
 type: module  
 description: 'for js file.'  
 core: '8.x'

第2步.创建.module,以便使用hook将js文件附加到模块。

<?php  
 // use hook for attachment of library to module   
 function mymodule_page_attachments(array &$page) {  
  // using this variable we are creating js file initialization  
   $page['#attached']['library'][] = 'mymodule/mymodule-js';  
   $page['#attached']['drupalSettings']['mymodule'];  
 }  
 ?>

步骤3.为附加的js文件创建mymodule.libraries.yml

mymodule-js:  
  version: 1.x  
  js:  
   js/mymodule.js: {}  
  dependencies:  
   - core/jquery  
   - core/drupalSettings

步骤4.创建库后,您必须创建js文件夹,然后在js文件夹中添加js/mymodule.js文件,然后您可以编写Drupal行为的代码。

Drupal.behaviors.mymodule = {  
  attach: function (context, settings) {  
   // using this code we are just for learning proposed we just add class on site logo 
   you can write code of js below the comment.  
   jQuery('.site-branding__logo' , context).addClass('fancy-pants');  
  }  
 }

以上四个步骤你可以使用Drupal行为添加js,如果你对我的博客文章有疑问,请告诉我这篇文章是否对你有帮助。

djp7away

djp7away8#

回答您的所有问题:
Drupal行为到底是什么?
Drupal.behaviors是Drupal中JavaScript结构中的一个对象,它允许我们在应用程序执行期间的某些时间附加要执行的函数。它在DOM完全加载时被调用,但这些行为可以再次调用。Drupal的官方JavaScript文档建议模块应该通过将逻辑附加到Drupal. behaviors来实现JavaScript。
它为模块开发人员提供了什么类型的服务层?
Behaviors的优点是,它们可以自动重新应用于通过AJAX加载的任何内容。它们可以在任何时候用表示DOM的新添加或更改的上下文来调用。这比$(document).ready()或document DOMContentLoaded要好,后者的代码只运行一次。
Drupal Behaviors什么时候被调用?
在管理覆盖已加载到页面中之后。AJAX Form API提交表单后。当AJAX请求返回一个修改HTML的命令时,例如aExcorder_command_replace()。
它Map到jQuery.ready的关系类型是什么?
答案:使用attach方法
要记住的事情:
新对象至少需要有一个attach方法。任何时候调用Drupal.attachBehaviors,它都会遍历所有行为对象并调用它们各自的attach方法。
范例:

(function (Drupal) {

 Drupal.behaviors.exampleBehaviour1 = {

   attach: (context, settings) => {

     // Add a delicious text to the top of the document

     let header = document.querySelector(".food-list-header");


     // jQuery Equivalent

     // $(".food-list-header");

     if (header) {

       let greatFoodSpan = document.createElement("span");

       greatFoodSpan.textContent = "Get ready for great food!!!!!!";

       header.append(greatFoodSpan);

     }


     // Add the event listener for each click on the food

     let foods = document.querySelectorAll(".views-row");

     foods.forEach((food) => {

       food.addEventListener("click", () => {

         let foodCounter = food.querySelector(".food-click-counter");

         let timesClicked = parseInt(foodCounter.textContent.trim());

         foodCounter.textContent = ++timesClicked;

       });

     });

   },

 };

})(Drupal);

利用Drupal行为可以整合动态交互性,简化用户参与,增强用户反馈,更有效的开发,并为您的网站提供整体改善的用户体验。Drupal.behaviors通过允许在单个页面上执行多个操作,支持对现有行为的覆盖和扩展,并促进对通过Ajax加载的任何内容的自动重新应用,展示了自适应性和模块化。
谢谢,卡姆拉吉

相关问题