如果您問「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中文網其他相關文章!