如何在YII2view(视图)中优雅的书写Javascript

yii2 Yii2 · best · 于 5个月前 发布 · 246 次阅读

概述

文件引用

$this->registerJsFile($url, $options = [], $key = null);

参数:

  • url JS文件的URL
  • options 其他属性
    • depends 数组, 依赖引用, 指定Asset 类
    • position 注入的位置
      • POS_HEAD:头部(header内)
    • POS_BEGINbody 开始
    • POS_END body 结束前
    • appendTimestamp 添加时间戳(一般用于刷新cdn缓存)
  • key 设置文件引用的key, 同名文件的时候不会被覆盖.

页面嵌入

如下例中, ajax请求中,经常会是动态请求, url地址、参数等会随着页面的上下文环境而变化. 在js里面嵌入php代码就显得非常不友好. 所以,可以用下面方法构建,来减少php代码和js代码的复杂混合.


$options = Json::encode([
    'url' => Url::to(['update']),
    'type' => 'post',
    'data' => [
        'query' => $package->getFullName(),
    ],
    'success' => new \yii\web\JsExpression("function (html) {
        versions.removeClass('updating').html(html);
        btn.button('reset');
    }"),
    'beforeSend' => new \yii\web\JsExpression("function (event) {
        versions.addClass('updating').html($('<i class=\"fa fa-cog fa-spin fa-3x fa-fw\"></i>'));
        btn.button('loading');
    }"),
]);

$this->registerJs(<<<JS
    $('#fetch-btn').on('click', function () {
        var versions = $('.versions'), btn = $('#fetch-btn');
        $.ajax({$options});
    })
JS
);

本文由 best 创作,采用 知识共享署名 3.0 中国大陆许可协议 进行许可。 可自由转载、引用,但需署名作者且注明文章出处。

共收到 3 条回复
whatcq#13个月前 0 个赞

php写数组不如js-object便捷,我一般习惯用变量混入js代码中

best#23个月前 0 个赞

玩php的本质还是拼接字符串, 关键是如何避免嵌套时的手误导致不必要的错误. 本例中只不过示范了一下需要结合很多php代码的时候的一种玩法. 如果你有更好的方法可以分享一下.

whatcq#33个月前 0 个赞

拼接字符串而已,怎么方便怎么来, 有很多php代码需要组织的时候我会选你这种方式。

添加回复 (需要登录)
需要 登录 后方可回复, 如果你还没有账号请点击这里 注册