首頁  >  文章  >  web前端  >  掌握 Yii2:在程式設計中利用資源包的力量

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

WBOY
WBOY原創
2023-08-31 15:49:081234瀏覽

掌握 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 風格的字元計數器所需的全部內容:

掌握 Yii2:在编程中利用资源包的力量

我發現 Yii Asset Bundles 簡單且易於管理。它們幫助我以有組織的方式在應用程式的某些區域重複使用 JavaScript 和 CSS 的部分內容。

下一步是什麼?

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

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

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

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

#相關連結

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

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

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn