掌握 Yii2：在程式設計中利用資源包的力量

如果您問「Yii 是什麼？」請參閱我之前的教學：Yii 框架簡介，其中回顧了Yii 的優點，並概述了2014 年10月發布的Yii 2.0 的新增功能。 嗯>

在這個 Yii2 程式設計系列中，我將引導讀者使用新升級的 Yii2 PHP 框架。在本教程中，我將向您展示如何將自訂 JavaScript 和 CSS 腳本及庫添加到您的 Yii 應用程式中。 Yii 使用一個稱為 Asset Bundles 的概念來更輕鬆地管理這些資源。

對於這些範例，我們將繼續以先前教程中的簡單狀態應用程式為基礎。

提醒一下，我確實參與了下面的評論主題。如果您有不同的方法、額外的想法，或者想要為未來的教程提出主題建議，我會特別感興趣。

什麼是資產包？

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',
      'https://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 simpleCountable 外掛程式、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'
  });
});

載入資源包

實例化資源包很簡單，如下面的 \views\status\_form. 所示：

<?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 Asset Bundles 簡單且易於管理。它們幫助我以有組織的方式在應用程式的某些區域重複使用 JavaScript 和 CSS 的部分內容。

下一步是什麼？

Yii2 權威指南描述了 Asset Bundles 的許多高級功能。您可以控制每個套件的腳本載入位置，例如POS_HEAD，POS_END。您可以設定資產映射來載入特定的相容版本的庫。您可以設定 JavaScript 和 CSS 選項，以進一步有條件地載入捆綁包。您也可以使用資源轉換器將 LESS 程式碼編譯為 CSS 或將 TypeScript 編譯為 JavaScript。

請觀看我的「使用 Yii2 程式設計」系列中即將推出的教學課程，我們將繼續深入探討框架的不同面向。您可能還想查看我的「使用 PHP 建立您的新創公司」系列，該系列在我建立實際應用程式時使用 Yii2 的高級模板。

我歡迎功能和主題請求。您可以將它們發佈在下面的評論中，或在我的 Lookahead Consulting 網站上向我發送電子郵件。

#如果您想知道下一個 Yii2 教學何時發布，請在 Twitter 上關注我@reifman 或查看我的講師頁面。我的講師頁面將立即包含本系列的所有文章。

#相關連結

• Yii2 權威指南：資產
• Yii2 AssetBundle 類別文檔
• Yii2 Developer Exchange，作者的 Yii2 資源網站

以上是掌握 Yii2：在程式設計中利用資源包的力量的詳細內容。更多資訊請關注PHP中文網其他相關文章！