由于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