翻译者：长风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