Программируем с Yii2: работа с бандлами ресурсов

Если вы спрашиваете: «Что такое Yii?» то ознакомьтесь с моим предыдущим учебным пособием: Введение в Yii Framework, в котором рассматриваются преимущества Yii и которое включает обзор нового в Yii 2.0, выпущенного в октябре 2014 года.

В этой серии Yii2 я рассказываю читателям про Yii2 - фреймворк для PHP. В этом уроке я покажу вам, как добавить пользовательские скрипты и библиотеки JavaScript и CSS в приложение Yii. Yii использует концепцию, которую он называет Asset Bundles, чтобы упростить управление этими ресурсами.

В этих примерах мы продолжим работу над простым статусом из предыдущих руководств.

Просто напоминаю, что я участвую в нижеуказанных комментариях. Меня особенно интересует, если у вас разные подходы, дополнительные идеи или вы хотите предложить темы для будущих уроков.

Что такое бандл ресурсов?

Бандлы ресурсов Yii представляют собой группы файлов JavaScript и CSS, которые должны быть включены вместе на определенные страницы или на всём сайте. Asset Bundles позволяют легко группировать определенные группы скриптов и стилей для определенных областей вашего сайта. Например, в приложении Meeting Planner я могу легко включать API Google Адресов только на тех страницах, где они нужны.

Вот краткий пример этого. Мы создаем файл \frontend\assets LocateAsset.php:

1

<?php

2

3

namespace frontend\assets;

4

5

use yii\web\AssetBundle;

6

7

class LocateAsset extends AssetBundle

8

{

9

    public $basePath = '@webroot';

10

    public $baseUrl = '@web';

11

    public $css = [

12

    ];

13

    public $js = [

14

      'js/locate.js',

15

      'js/geoPosition.js',

16

      'https://maps.google.com/maps/api/js?sensor=false',

17

    ];

18

    public $depends = [

19

    ];

20

}

Затем мы загружаем его в наш файл отображения - это довольно просто:

1

<?php

2

3

use yii\helpers\Html;

4

use yii\helpers\BaseHtml;

5

use yii\widgets\ActiveForm;

6

7

use frontend\assets\LocateAsset;

8

LocateAsset::register($this);

9

10

...

Когда вы просматриваете источник нашей страницы, вы увидите скрипты, созданные вместе с другими стандартными ресурсами Yii2 для форм, Bootstrap и т.д .:

1

<script src="/mp/js/locate.js"></script>

2

<script src="/mp/js/geoPosition.js"></script>

3

<script src="http://maps.google.com/maps/api/js?sensor=false"></script>

4

<script src="/mp/assets/d9b337d3/jquery.js"></script>

5

<script src="/mp/assets/ed797b77/yii.js"></script>

6

<script src="/mp/assets/ed797b77/yii.validation.js"></script>

7

<script src="/mp/assets/ed797b77/yii.activeForm.js"></script>

8

<script src="/mp/assets/8c5c0263/js/bootstrap.js"></script>

В этом уроке я собираюсь провести вас через Asset Bundles, чтобы интегрировать подсчет символов в нашу форму статуса. Мы будем использовать это, чтобы обеспечить ограничение символов, похожее на максимум 140 символов в Twitter.

Если вам интересно увидеть это в действии в Yii1.x, я применил эту функцию в Работа с Twitter API: OAuth, Чтение и отправка (Tuts +).

Создание Asset Bundle

Создайте пакет Asset Bundle

В каталоге \assets мы создаем StatusAsset.php:

1

<?php

2

/**

3

 * @link http://www.yiiframework.com/

4

 * @copyright Copyright (c) 2008 Yii Software LLC

5

 * @license http://www.yiiframework.com/license/

6

 */

7

8

namespace app\assets;

9

10

use yii\web\AssetBundle;

11

12

/**

13

 * @author Qiang Xue <qiang.xue@gmail.com>

14

 * @since 2.0

15

 */

16

class StatusAsset extends AssetBundle

17

{

18

    public $basePath = '@webroot';

19

    public $baseUrl = '@web';

20

    public $css = [];

21

    public $js = [

22

      '/js/jquery.simplyCountable.js',

23

      '/js/twitter-text.js',

24

      '/js/twitter_count.js',  

25

      '/js/status-counter.js',

26

    ];

27

    public $depends = [

28

            'yii\web\YiiAsset',

29

            'yii\bootstrap\BootstrapAsset',

30

        ];

31

}

Я использовал комбинацию плагина jQuery simpleCountable, twitter-text.js (скрипт для текстовой обработки Twitter на основе JavaScript) и сценарий, который значительно облегчил корректировки URL: twitter_count.js; в Twitter, URL-адреса считаются 20 символами. Эти файлы находятся в \web\js.

Я также создал функцию ready для документа, чтобы вызвать их в \web\js\status-counter.js. В том числе yii\web\YiiAsset в нашем массиве $depends будет гарантировать, что JQuery загружается всякий раз, когда мы создаем этот ресурс.

1

$(document).ready(function()

2

{

3

  $('#status-message').simplyCountable({

4

    counter: '#counter2',

5

    maxCount: 140,

6

    countDirection: 'down'

7

  });

8

});

Загрузка Asset Bundle

Создать экземпляра Asset Bundle легко, как показано в \views\status\_form.php ниже:

1

<?php

2

3

use yii\helpers\Html;

4

use yii\widgets\ActiveForm;

5

6

use app\assets\StatusAsset;

7

StatusAsset::register($this);

8

9

/* @var $this yii\web\View */

10

/* @var $model app\models\Status */

11

/* @var $form yii\widgets\ActiveForm */

12

?>

13

14

<div class="status-form">

15

    <?php $form = ActiveForm::begin(); ?>

16

17

    <div class="row">

18

      <div class="col-md-8">

19

      <?= $form->field($model, 'message')->textarea(['rows' => 6]) ?>

20

      </div>

21

      <div class="col-md-4">

22

      <p>Remaining: <span id="counter2">0</span></p>

23

      </div>

24

    </div>

Это все, что нужно, чтобы активировать ваш счетчик символов в стиле Twitter:

Я нашел Yii Asset Bundles простым и легким в управлении. Они помогают мне повторно использовать части JavaScript и CSS только в определенных областях моего приложения.

Что дальше?

Полное руководство по Yii2 описывает ряд дополнительных возможностей Asset Bundles. Вы можете управлять позиционированием загрузки скрипта для каждого пакета, например. POS_HEAD, POS_END. Вы можете настроить Asset Maps для загрузки определенных совместимых версий библиотек. Вы можете установить параметры JavaScript и CSS для дальнейшей условной загрузки ваших пакетов. Вы также можете использовать Asset Converters для компиляции кода LESS в CSS или TypeScript в JavaScript.

Следите за предстоящими учебниками в нашей серии Yii2, когда мы продолжаем погружаться в разные аспекты структуры. Вы также можете ознакомиться с моей серией статей Пишем свой стартап на PHP, в которой используется расширенный шаблон Yii2.

Я приветствую пожелания по темам. Вы можете оставить их в комментариях ниже или отправить мне по электронной почте на моем веб-сайте Lookahead Consulting.

Если вы хотите узнать, когда выйдет следующий учебник Yii2, подпишитесь на меня @reifman в Twitter или проверьте мою страницу инструктора. Моя страница инструктора будет включать все статьи из этой серии, как только они будут опубликованы.

Ссылки по теме

• Поле руководство по Yii2: Ресурсы
• Документация класса Yii2 AssetBundle
• Yii2 Developer Exchange, ресурсный сайт автора Yii2