如何使用Yii2进行编程：使用资产捆绑包

最新推荐文章于 2024-07-15 15:40:07 发布

cunjie3951

最新推荐文章于 2024-07-15 15:40:07 发布

阅读量182

点赞数

文章标签： java javascript php web python ViewUI

如果您问“ Yii是什么？” 查阅我之前的教程： Yii Framework简介 ，它回顾了Yii的优点，并概述了2014年10月发布的Yii 2.0的新功能。

在“ 使用Yii2编程”系列中，我指导读者使用新升级的PHP Yii2框架。在本教程中，我将向您展示如何向Yii应用程序添加自定义JavaScript和CSS脚本以及库。 Yii使用称为资产捆绑的概念来简化管理这些资源的过程。

对于这些示例，我们将继续以先前教程中的简单状态应用程序为基础。

提醒一下，我确实参与了下面的评论主题。如果您有不同的方法，其他想法，或者想为以后的教程提出建议，我特别感兴趣。

什么是资产捆绑包？

Yii的资产捆绑包表示需要一起包含在特定页面或整个网站上JavaScript和CSS文件组。使用资产捆绑包，可以轻松地将网站的特定区域的特定脚本和样式组组合在一起。例如，在我的Meeting Planner应用程序上，我可以轻松地仅在需要它们的页面上包含Google Places API。

这是一个简单的例子。我们创建一个\frontend\assets\LocateAsset.php文件：

<?php

namespace frontend\assets;

use yii\web\AssetBundle;

class LocateAsset extends AssetBundle
{
    public $basePath = '@webroot';
    public $baseUrl = '@web';
    public $css = [
    ];
    public $js = [
      'js/locate.js',
      'js/geoPosition.js',
      'http://maps.google.com/maps/api/js?sensor=false',
    ];
    public $depends = [
    ];
}

然后，将其加载到我们的视图文件中，实际上非常简单：

<?php

use yii\helpers\Html;
use yii\helpers\BaseHtml;
use yii\widgets\ActiveForm;

use frontend\assets\LocateAsset;
LocateAsset::register($this);

...

当您查看页面的源代码时，您将看到为表单，Bootstrap等生成的脚本以及其他Yii2标准资产：

<script src="/mp/js/locate.js"></script>
<script src="/mp/js/geoPosition.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script src="/mp/assets/d9b337d3/jquery.js"></script>
<script src="/mp/assets/ed797b77/yii.js"></script>
<script src="/mp/assets/ed797b77/yii.validation.js"></script>
<script src="/mp/assets/ed797b77/yii.activeForm.js"></script>
<script src="/mp/assets/8c5c0263/js/bootstrap.js"></script>

在本教程中，我将指导您使用资产捆绑包将字符计数集成到“状态”表单中。我们将使用它来强制执行类似于Twitter最大140个字符的字符限制。

如果您有兴趣在Yii1.x上看到这一功能，请在构建Twitter的API中实现此功能：OAuth，阅读和发布（Tuts +）。

建立资产捆绑

创建资产捆绑

在\assets目录中，我们创建StatusAsset.php ：

<?php
/**
 * @link http://www.yiiframework.com/
 * @copyright Copyright (c) 2008 Yii Software LLC
 * @license http://www.yiiframework.com/license/
 */

namespace app\assets;

use yii\web\AssetBundle;

/**
 * @author Qiang Xue <qiang.xue@gmail.com>
 * @since 2.0
 */
class StatusAsset extends AssetBundle
{
    public $basePath = '@webroot';
    public $baseUrl = '@web';
    public $css = [];
    public $js = [
      '/js/jquery.simplyCountable.js',
      '/js/twitter-text.js',
      '/js/twitter_count.js',  
      '/js/status-counter.js',
    ];
    public $depends = [
            'yii\web\YiiAsset',
            'yii\bootstrap\BootstrapAsset',
        ];
}

我结合使用了jQuery simplyCountable插件， twitter-text.js （基于JavaScript的Twitter文本处理脚本）和完成URL调整繁重的脚本： twitter_count.js ；在Twitter中，URL计为20个字符。这些文件都在\web\js 。

我还创建了一个文档就绪函数，以在\web\js\status-counter.js调用它们。在$depends数组中包含yii\web\YiiAsset将确保在实例化此资产时加载JQuery。

$(document).ready(function()
{
  $('#status-message').simplyCountable({
    counter: '#counter2',
    maxCount: 140,
    countDirection: 'down'
  });
});

加载资产捆绑包

实例化Asset Bundle很容易，如下面的\views\status\_form.php所示：

<?php

use yii\helpers\Html;
use yii\widgets\ActiveForm;

use app\assets\StatusAsset;
StatusAsset::register($this);

/* @var $this yii\web\View */
/* @var $model app\models\Status */
/* @var $form yii\widgets\ActiveForm */
?>

<div class="status-form">
    <?php $form = ActiveForm::begin(); ?>
    
    <div class="row">
      <div class="col-md-8">
      <?= $form->field($model, 'message')->textarea(['rows' => 6]) ?>
      </div>
      <div class="col-md-4">
      <p>Remaining: <span id="counter2">0</span></p>
      </div>
    </div>

这就是激活我们的Twitter风格字符计数器所需的全部工作：

我发现Yii资产捆绑包简单明了，易于管理。它们帮助我以有组织的方式在应用程序的某些区域重复使用JavaScript和CSS的某些部分。

下一步是什么？

《 Yii2权威指南》介绍了资产捆绑包的许多高级功能。您可以控制每个捆绑软件（例如POS_HEAD ， POS_END的脚本加载位置。您可以设置资产地图以加载特定兼容版本的库。您可以设置JavaScript和CSS选项，以进一步有条件地加载捆绑包。您还可以使用资产转换器将LESS代码编译为CSS或将TypeScript编译为JavaScript。

在我们继续研究框架的不同方面时，请观看我的《使用Yii2编程》系列中即将发布的教程。您可能还需要查看我的“ 使用PHP构建您的启动”系列，该系列在构建现实应用程序时使用了Yii2的高级模板。

我欢迎功能和主题要求。您可以在下面的评论中发布它们，或在我的Lookahead Consulting网站上给我发送电子邮件。

如果您想知道下一个Yii2教程何时到达，请在Twitter上关注我@reifman或查看我的讲师页面。发布后，我的讲师页面将包含本系列中的所有文章。