版本：5.1

步骤 7 添加 JavaScript

简介

在本步骤中，我们在“Hello Username”的问候语末尾添加一个“!”，但使用 JavaScript 实现此操作，并将“!”作为变量从 PHP 代码传递。因此，此步骤描述

如何将变量从 PHP 传递到 JavaScript。
如何使用 Joomla Web 资产管理器管理 JavaScript 资产

将变量传递到 JavaScript

为了将变量从 PHP 传递到 js，我们使用 Document::addScriptOptions 函数。

$document = $this->app->getDocument();
$document->addScriptOptions('mod_hello.vars', array('suffix' => "!"));

我们可以通过 Joomla 注入到模块构造函数中的 Application 参数（如上一教程步骤中所述）获取 Document 实例（它是一个与 HTML 文档中将要输出的内容相关的对象）。

然后在 js 代码中，我们可以使用相同的键“mod_hello.vars”检索变量。

const arr = Joomla.getOptions('mod_hello.vars');
console.log(arr);   // outputs Object { suffix: "!" }

您可以将任何字符串设置为传递选项的键，但习惯上以扩展名开头，因为数据是在全局存储中传递的，这样可以确保不会与其他扩展的键冲突。

我们将在要更新的元素上设置一个 HTML 类“mod_hello”，因此我们的 js 代码是

if (!window.Joomla) {
  throw new Error('Joomla API was not properly initialised');
}

const { suffix } = Joomla.getOptions('mod_hello.vars');
document.querySelectorAll('.mod_hello').forEach(element => {
  element.innerText += suffix;
});

Web 资产管理器

如果您不熟悉 Web 资产管理器，则应阅读本手册部分。

对于我们的 js 代码文件，我们在 mod_hello/media/joomla.asset.json 中创建一个资产，如 Web 资产管理器定义中所述。

mod_hello/media/joomla.asset.json
{
  "$schema": "https://developer.joomla.net.cn/schemas/json-schema/web_assets.json",
  "name": "mod_hello",
  "version": "1.0.0",
  "description": "Joomla Module Tutorial",
  "license": "GPL-2.0-or-later",
  "assets": [
    {
      "name": "mod_hello.add-suffix",
      "type": "script",
      "uri": "mod_hello/add-suffix.js",
      "dependencies": [
        "core"
      ],
      "attributes": {
        "type": "module"
      },
      "version": "1.0.0"
    } 
  ]
}

我们使用了 Joomla.getOptions 函数来检索我们在 PHP 代码中设置的后缀。此函数位于 Joomla core.js JavaScript 库（在 media/system/js/core.js 中），因此我们需要将“core”作为依赖项包含在内。

Web 资产管理器不会自动读取模块的 joomla.asset.json 文件，因此我们需要告诉它处理该文件，方法是在 Web 资产管理器注册表上调用 addExtensionRegistryFile。然后我们需要告诉它我们想使用“mod_hello.add-suffix”资产，这样我们的 js 文件就会包含在 HTTP 响应中。

$document = $app->getDocument();
$wa = $document->getWebAssetManager();
$wa->getRegistry()->addExtensionRegistryFile('mod_hello');
$wa->useScript('mod_hello.add-suffix');

Web 资产管理器对 HTML <script> 元素进行排序，以确保我们的依赖项“core”在我们的 add-suffix.js 之前加载。

上面的代码可以包含在我们的 Dispatcher 代码或 tmpl 文件中，但在 Joomla 中，惯例似乎是它应该放在 tmpl 文件中。

我们更新后的 tmpl 文件是

mod_hello/tmpl/default.php
<?php
defined('_JEXEC') or die;

$document = $app->getDocument();
$wa = $document->getWebAssetManager();
$wa->getRegistry()->addExtensionRegistryFile('mod_hello');
$wa->useScript('mod_hello.add-suffix');

// Pass the suffix to add down to js
$document->addScriptOptions('mod_hello.vars', array('suffix' => "!"));

$h = $params->get('header', 'h4');
$greeting = "<{$h} class='mod_hello'>{$hello}</{$h}>"
?>

<?php echo $greeting; ?>

更新的清单文件

我们需要告诉 Joomla 安装程序包含我们的媒体文件夹，并将这些文件放在 /media/mod_hello 文件夹下面。

mod_hello/mod_hello.xml
<?xml version="1.0" encoding="UTF-8"?>
<extension type="module" client="site" method="upgrade">
    <name>MOD_HELLO_NAME</name>
    <version>1.0.7</version>
    <author>me</author>
    <creationDate>today</creationDate>
    <description>MOD_HELLO_DESCRIPTION</description>
    <namespace path="src">My\Module\Hello</namespace>
    <files>
        <folder module="mod_hello">services</folder>
        <folder>src</folder>
        <folder>tmpl</folder>
        <folder>language</folder>
    </files>
    <scriptfile>script.php</scriptfile>
    <media destination="mod_hello" folder="media">
        <filename>joomla.asset.json</filename>
        <folder>js</folder>
    </media>
    <config>
        <fields name="params">
            <fieldset name="basic">
                <field
                    name="header"
                    type="list"
                    label="MOD_HELLO_HEADER_LEVEL"
                    default="h4"
                    >
                    <option value="h3">MOD_HELLO_HEADER_LEVEL_3</option>
                    <option value="h4">MOD_HELLO_HEADER_LEVEL_4</option>
                    <option value="h5">MOD_HELLO_HEADER_LEVEL_5</option>
                    <option value="h6">MOD_HELLO_HEADER_LEVEL_6</option>
                </field>
            </fieldset>
        </fields>
    </config>
</extension>

所有 js 和 css 文件应存储在 Joomla /media 文件夹下面，位于与扩展名同名的子文件夹中。我们的 js 文件最终将位于 /media/mod_hello/js/add-suffix.js 中。

压缩更新后的模块并安装后，网站页面应显示带有末尾“!”的 mod_hello 问候语。

添加 CSS

您可以使用 Web 资产管理器以类似方式添加 CSS 文件。对于名为 example.css 的文件，您应该执行以下操作

将文件存储在 mod_hello/media/css/example.css 中
在同一个 mod_hello/media/joomla.asset.json 文件中包含一个样式资产

    {
      "name": "mod_hello.example",
      "type": "style",
      "uri": "mod_hello/example.css",
      "version": "1.0.0"
    }

（就像 js 一样，“uri”不包含 css 子文件夹）。

在您的 PHP 代码中使用样式

$wa->useStyle('mod_hello.example');

简介​

将变量传递到 JavaScript​

Web 资产管理器​

更新的清单文件​

添加 CSS​

简介

将变量传递到 JavaScript

Web 资产管理器

更新的清单文件

添加 CSS