如果您問「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：在程式設計中利用資源包的力量的詳細內容。更多資訊請關注PHP中文網其他相關文章！
