1 关注者

使用客户端脚本

现代 Web 应用程序除了渲染并发送到浏览器的静态 HTML 页面外，还包含用于修改浏览器中页面的 JavaScript，方法是操作现有元素或通过 AJAX 加载新内容。本节介绍 Yii 提供的将 JavaScript 和 CSS 添加到网站以及动态调整这些内容的方法。

注册脚本

在使用 yii\web\View 对象时，您可以动态注册前端脚本。为此，有两种专门的方法

注册内联脚本

内联脚本对于配置、动态生成的代码和包含在 部件 中的可重用前端代码创建的小代码片段很有用。添加这些脚本的 registerJs() 方法可以按如下方式使用

$this->registerJs(
    "$('#myButton').on('click', function() { alert('Button clicked!'); });",
    View::POS_READY,
    'my-button-handler'
);

第一个参数是我们想要插入页面的实际 JS 代码。它将被包装在一个 <script> 标签中。第二个参数确定脚本应该插入页面中的哪个位置。可能的值是

最后一个参数是用于标识脚本代码块并用相同 ID 的现有代码块替换现有代码块而不是添加新代码块的唯一脚本 ID。如果未提供，则 JS 代码本身将用作 ID。它用于避免多次注册相同的代码。

注册脚本文件

registerJsFile() 的参数与 registerCssFile() 的参数类似。在下面的示例中，我们注册了依赖于 yii\web\JqueryAsset 的 main.js 文件。这意味着 main.js 文件将添加到 jquery.js 之后。如果没有这样的依赖项规范，main.js 和 jquery.js 之间的相对顺序将是不确定的，代码将无法正常工作。

外部脚本可以像以下这样添加

$this->registerJsFile(
    '@web/js/main.js',
    ['depends' => [\yii\web\JqueryAsset::class]]
);

这将为位于应用程序 基本 URL 下的 /js/main.js 脚本添加一个标签。

强烈建议使用 资产包 来注册外部 JS 文件，而不是使用 registerJsFile()，因为它们提供了更好的灵活性以及更细粒度的依赖关系配置。此外，使用资产包可以将多个 JS 文件合并和压缩，这对流量很大的网站非常有用。

注册 CSS

与 JavaScript 相似，您可以使用 registerCss() 或 registerCssFile() 注册 CSS。前者注册一段 CSS 代码，而后者注册一个外部 CSS 文件。

注册内联 CSS 

$this->registerCss("body { background: #f00; }");

上面的代码将导致在页面的 <head> 部分添加以下内容

<style>
body { background: #f00; }
</style>

如果要指定 style 标签的附加属性，请将一个包含名称-值对的数组传递给第二个参数。最后一个参数是一个唯一 ID，用于标识样式块，并确保在从代码的不同位置注册相同样式时，它只添加一次。

注册 CSS 文件

可以使用以下代码注册一个 CSS 文件

$this->registerCssFile("@web/css/themes/black-and-white.css", [
    'depends' => [\yii\bootstrap\BootstrapAsset::class],
    'media' => 'print',
], 'css-print-theme');

上面的代码将在页面的 <head> 部分添加指向 /css/themes/black-and-white.css CSS 文件的链接。

  • 第一个参数指定要注册的 CSS 文件。在这个例子中，@web 是一个 应用程序基本 URL 的别名。
  • 第二个参数指定生成的 <link> 标签的 HTML 属性。depends 选项是专门处理的。它指定此 CSS 文件依赖于哪些资产包。在本例中，依赖的资产包是 yii\bootstrap\BootstrapAsset。这意味着 CSS 文件将在 yii\bootstrap\BootstrapAsset 中的 CSS 文件之后添加。
  • 最后一个参数指定一个标识此 CSS 文件的 ID。如果没有提供，将使用 CSS 文件的 URL 代替。

强烈建议使用 资产包 来注册外部 CSS 文件，而不是使用 registerCssFile()。使用资产包可以让您合并和压缩多个 CSS 文件，这对流量很大的网站非常有用。它还提供了更大的灵活性，因为您应用程序的所有资产依赖关系都集中在一个地方配置。

注册资产包

如前所述，建议使用资产包而不是直接注册 CSS 和 JavaScript 文件。您可以在 "资产" 部分 中了解如何定义资产包的详细信息。至于使用已定义的资产包，则非常简单

\frontend\assets\AppAsset::register($this);

在上面的代码中，在视图文件的上下文中，AppAsset 包被注册到当前视图（由 $this 表示）上。在小部件中注册资产包时，您将传递小部件的 $view 代替（$this->view）。

生成动态 JavaScript

在视图文件中，HTML 代码通常不是直接写出来的，而是由一些依赖于视图变量的 PHP 代码生成的。为了使生成的 HTML 可以用 Javascript 操作，JS 代码也必须包含动态部分，例如 jQuery 选择器的 ID。

要将 PHP 变量插入 JS 代码，必须对其值进行适当的转义。特别是在 JS 代码被插入到 HTML 中，而不是驻留在专门的 JS 文件中时。Yii 提供了 htmlEncode() 方法，该方法来自 Json 助手，用于此目的。其用法将在以下示例中显示。

注册全局 JavaScript 配置

在这个例子中，我们使用一个数组将全局配置参数从应用程序的 PHP 部分传递到 JS 前端代码。

$options = [
    'appName' => Yii::$app->name,
    'baseUrl' => Yii::$app->request->baseUrl,
    'language' => Yii::$app->language,
    // ...
];
$this->registerJs(
    "var yiiOptions = ".\yii\helpers\Json::htmlEncode($options).";",
    View::POS_HEAD,
    'yiiOptions'
);

上面的代码将注册一个包含 JavaScript 变量定义的 <script> 标签，例如：

var yiiOptions = {"appName":"My Yii Application","baseUrl":"/basic/web","language":"en"};

在您的 JavaScript 代码中，您现在可以像 yiiOptions.baseUrl 或 yiiOptions.language 那样访问它们。

传递翻译后的消息

您可能会遇到这样的情况：您的 JavaScript 需要打印一条消息来响应某个事件。在一个使用多种语言的应用程序中，此字符串必须翻译成当前应用程序语言。实现此目的的一种方法是使用 Yii 提供的 消息翻译功能，并将结果传递给 JavaScript 代码。

$message = \yii\helpers\Json::htmlEncode(
    \Yii::t('app', 'Button clicked!')
);
$this->registerJs(<<<JS
    $('#myButton').on('click', function() { alert( $message ); });
JS
);

上面的示例代码使用了 PHP Heredoc 语法 以提高可读性。这还使大多数 IDE 中的语法高亮显示更加出色，因此它是编写内联 JavaScript 的首选方式，对于长度超过一行的代码尤其有用。变量 $message 在 PHP 中创建，由于 Json::htmlEncode，它包含了有效的 JS 语法的字符串，可以插入到 JavaScript 代码中，以便将动态字符串放置在 alert() 函数调用中。

注意：使用 Heredoc 时，请注意 JS 代码中的变量命名，因为以 $ 开头的变量可能会被解释为 PHP 变量，其内容将被替换。jQuery 函数的形式 $( 或 $. 不会被解释为 PHP 变量，可以安全使用。

yii.js 脚本

注意：本节尚未编写。它应该包含对 yii.js 提供的功能的解释。

  • Yii JavaScript 模块
  • CSRF 参数处理
  • data-confirm 处理程序
  • data-method 处理程序
  • 脚本过滤
  • 重定向处理
数据小部件
返回顶部
主题

发现拼写错误或您认为此页面需要改进？
在 github 上编辑 !