跳转到主要内容
长风 提交于 12 September 2018

翻译者:长风Drupal开发

翻译地址:http://www.5188jxt.com/technology/javascript-api-zong-lan.htm

原文链接:https://www.drupal.org/docs/8/api/javascript-api/javascript-api-overview

 

可用的JavaScript库在Drupal 8中发生了很大变化。JavaScript文件,在Drupal 7中的.info文件中引用,现在被引用到.YML文件中。 在Drupal 8中,的样式表(CSS)8,stylesheets (CSS) and JavaScript (JS) 是通过系统加载的Drupal模块(代码)和Drupal8主题:asset libraries。 Drupal8使用高级原则:Drupal8只加载你告诉它应该加载的assets (CSS和JS)。Drupal8不是在载所有页面上的assets (CSS/JS) ,因为这对前端性能很不利。 可配置的JavaScript与drupalSettings(与Drupal7中的Drupal.settings类似)的继承是可用的。但是,为了使drupalSettings 可以用于JavaScript文件:我们必须声明对它的依赖。 Drupal.behaviors 当使用jQuery时,对于大多数情况来说,将$(document).ready()函数中的几乎所有代码包装起来是标准的,如下所示: $(document).ready(function () { // Do some fancy stuff. });

这确保了我们的代码只在DOM加载后以及所有元素都可用的情况下才运行。然而,Drupal8有另一种更好的方法:使用Drupal.behaviors and once()的功能。如果使用得当,这将确保您的代码运行在正常页面负载和数据加载时,由Ajax(或BigPi管!)-但不是应该避免的像load()这样的jQuery方法,因为Drupal.behaviors对将无法加载除ajax()之外的函数。Drupal.behaviors对象本身是Drupal8对象的属性,当我们希望我们的模块/主题添加新的jQuery行为时,最好的方法是简单地扩展这个对象。 一个真实的基本的例子 Drupal.behaviors.myBehavior = { attach: function (context, settings) { // Using once() to apply the myCustomBehaviour effect when you want to run just one function. $('input.myCustomBehavior', context).once('myCustomBehavior').addClass('processed'); // Using once() with more complexity. $('input.myCustom', context).once('mySecondBehavior').each(function () { if ($(this).visible()) { $(this).css('background', 'green'); } else { $(this).css('background', 'yellow').show(); } }); } };

定义为Drupal.actions属性的任何对象都将在DOM最初加载时以及在任何AJAX调用之后调用.()方法。drupal.js有一个$(document).ready() 函数,调用Drupal.attachBehaviors() 函数,该函数依次循环调用Drupal.behaviors对象的每个属性,所有这些都是由各种模块如上声明的函数,并将文档作为上下文传入。在Ajax加载中,除了上下文仅是加载Ajax调用的新内容之外,发生了同样的事情。(而且由于BigPipe在内部构建在AJAX系统之上,所以任何与AJAX系统一起工作的东西都会与BigPipe一起工作。)

每当调用附加行为时,就会触发Drupal行为。传入的上下文变量通常可以让您更好地了解正在处理什么DOM元素,但是它不是确定是否再次处理某个元素的方法。使用带有“context”的jQuery选择器是一个很好的实践,因为只有给定的上下文被搜索,而不是整个文档。当在Ajax请求之后附加行为时,这一点变得更为重要。

注意:因为Drupal8使用jQuery.noConflict()并在需要时只加载JavaScript文件,所以要使用jQuery和jQuery的$符号,必须在MODULE.libraries.yml中的库定义中包括jQuery和Drupal作为依赖项,并在函数.libraries.yml周围添加包装器。所以整个JavaScript文件看起来都是这样的:

(function ($, Drupal) { Drupal.behaviors.myModuleBehavior = { attach: function (context, settings) { $('input.myCustomBehavior', context).once('myCustomBehavior').each(function () { // Apply the myCustomBehaviour effect to the elements only once. }); } };})(jQuery, Drupal);

要将jQuery作为自定义库的显式依赖项添加一次,请添加core/jquery.once,如下面的MODULE.libraries.yml或THEME.libraries.yml所示: foobar: js: js/foobar.js: {} dependencies: - core/jquery - core/jquery.once