云客Drupal源码分析之前端JavaScript（一）全局设置与前端API

由于drupal前端js内容庞大，本系列将分多个主题逐个讲述较常用和较重要的前端资源库，并以序号进行标识，推荐按序号阅读

前言：

在开始前端js探索前有一些注意事项：

ES6升级：

从Drupal8.4开始核心使用ES6开发js程序，但为每个ES6版本的js文件都添加了自动转码的ES5版本文件，因此我们在查看源代码时应该查看ES6版本（也就是.es6.js后缀的文件），里面有开发者清晰的注释说明，ES5版本的js是依据ES6版本自动转码生成的，注释均被去除了，在使用上目前依然使用ES5版本的js

JS代码风格：

在Drupal中js程序采用airbnb编码风格，参看地址：

  https://github.com/airbnb/javascript

也可以查看drupal官网上对代码风格的介绍：

  https://www.drupal.org/docs/develop/standards/javascript

drupal使用ESLint来检查代码风格，ESLint 是一个js代码规范和错误检查工具，官网地址为：

  https://cn.eslint.org/

在核心目录下存放了ESLint的配置文件，drupal以前的js编码风格存放在“.eslintrc.legacy.json”配置中，现在推荐的风格保存在“.eslintrc.json”中

准备：

如果你还不清楚后端是怎么处理js文件的，请参考本系列以下主题：

  《资源库assets library详解》

  《响应附属处理attachments_processor》

  《资源解析器AssetResolver》

如果你需要整理补充自己的js知识体系，云客为你准备了以下资料：

  《PHP开发者的JavaScript快速文档》

 

核心库core/drupalSettings：

用于后端向前端提供js设置信息，渲染数组的“$render_array['#attached']['drupalSettings']”键和资源库的“drupalSettings”键用于在后端保存将传递到前端的js设置信息，在最终页面上设置信息将被合并，并以json方式保存到前端的如下标签中：

  <script type="application/json" data-drupal-selector="drupal-settings-json"></script>

该标签称为js设置保存标签，后端模块可以通过以下钩子向页面提供js设置数据：

  hook_js_settings_build(&$settings, $assets);

  hook_js_settings_alter(array &$settings, \Drupal\Core\Asset\AttachedAssetsInterface $assets)

详见本系列《资源解析器AssetResolver》，对应类：\Drupal\Core\Asset\AssetResolver::getJsAssets

渲染数组提供的设置优先级高于资源库。“core/drupalSettings”库仅有一个js文件：

  /core/mi