JAVASCRIPT API 总览

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

JAVASCRIPT API - Drupal8 引用JavaScript

翻译者:长风Drupal开发

翻译地址:长风http://www.5188jxt.com/technology/drupal8-include-javascript.html

原文链接:https://www.drupal.org/docs/8/api/javascript-api/add-javascript-to-your-theme-or-module

一、Drupal8引用JavaScript的前提

有一个在Drupal8中可以正常运行的模块或者主题。

二、Drupal8引用JavaScript基本步骤

这里有两个基本步骤向你的drupal8主题或者drupal8模块来添加Javascript 
1、定义一个library
2、添加这个library到一个实体

 

1、定义一个library
在Drupal8主题或者Drupal8模块的根目录创建一个*.libraries.yml的文件,例如example.libraries.yml,内容如下:
example:
version: 1.x
js:
js/example.js: {}

备注:
1、根元素exmple通常是模块或者主题的名字,也可以是你想用的其他任何名字,
2、定义library的版本
3、使用js元素 引用JavaScript
4、在JavaScript后面的{}中,你可以定义一些属性,例如
external:bool(告诉Drupal8这个js是不是外部的资源)
header:bool(告诉Drupal8是否在header中加载脚本,而不是footer);
minified:bool(告诉Drupal8是否需要压缩脚本);
preprocess:bool(告诉Drupal8是否需要预处理);

 

三、引用js文件


根据你在Drupal8开发中的实际需求,可以有不同的方式引用library。library总是通过Drupla8模块或者Drupal8主题进行注册的,
module: hook_element_info_alter()
module: hook_page_attachments()
theme: template_preprocess_HOOK()
twig: {{ attach_library(‘example/example’) }}
hook_page_attachments() 和template_preprocess_HOOK()都是相似的,如下:

 

function example_preprocess_node__page(array &$variables) : void {
// Theme name: 'example', library name: 'example'. 
$variables['#attached']['library'][] = 'example/example';
}

hook_element_info_alter()的例子如下,如果你希望在所有radio按钮的地方加载libarary,
function d8_theme_element_info_alter(array &$info) : void {
if (!isset($info['radio'])) {
$info['radio']['#attached']['library'][] = 'example/example';
}
}

四、引用依赖

如果你的Drupal8 JavaScript依赖于其他的资源,比如jQuery或者Drupal settings,你可以使用依赖属性 

 

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