Come programmare con Yii2 lavorare con pacchetti di asset

Cosa starai creando

Se stai chiedendo "Cos'è Yii?" guarda il mio tutorial precedente: Introduzione al framework Yii, che rivede i vantaggi di Yii e include una panoramica delle novità in Yii 2.0, rilasciata nell'ottobre 2014.

In questa serie di programmazione con Yii2, guido i lettori all'uso del nuovo Yii2 Framework per PHP. In questo tutorial, ti mostrerò come aggiungere JavaScript e script e librerie CSS personalizzati alla tua applicazione Yii. Yii usa un concetto che chiama Asset Bundles per rendere più facile la gestione di queste risorse.

Per questi esempi, continueremo a costruire sulla semplice applicazione di stato dei tutorial precedenti.

Solo un promemoria, parteciperò alle discussioni dei commenti qui sotto. Sono particolarmente interessato se hai approcci diversi, idee aggiuntive o vuoi suggerire argomenti per futuri tutorial.

Cos'è un pacchetto di beni?

I pacchetti di asset di Yii rappresentano gruppi di file JavaScript e CSS che devono essere inclusi insieme su pagine specifiche o attraverso il sito. I pacchetti di asset semplificano il raggruppamento di gruppi specifici di script e stili per aree specifiche del tuo sito. Ad esempio, nell'applicazione Meeting Planner, posso facilmente includere le API di Google Places solo nelle pagine in cui sono necessarie.

Ecco un rapido esempio di ciò. Creiamo a \ frontend \ beni \ LocateAsset.php file:

Quindi lo carichiamo nel nostro file di visualizzazione: è piuttosto semplice, in realtà:
Quando visualizzi la fonte della nostra pagina, vedrai gli script generati insieme ad altre risorse standard Yii2 per moduli, Bootstrap, ecc .:
       
In questo tutorial, ti guiderò attraverso l'utilizzo dei pacchetti di asset per integrare il conteggio dei caratteri nel nostro modulo di stato. Lo useremo per imporre un limite di caratteri simile al massimo di 140 caratteri di Twitter. 
Se sei interessato a vederlo in azione in Yii1.x, ho implementato questa funzione in Building With the Twitter API: OAuth, Reading and Posting (Tuts +).
Costruire un pacchetto di beni
Crea il pacchetto di asset
Nel \risorse directory, creiamo StatusAsset.php:
 * @since 2.0 * / class StatusAsset estende 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',]; 
Ho usato una combinazione del plug-in justtable di jQuery, di twitter-text.js (uno script per l'elaborazione di testo di Twitter basato su JavaScript) e di uno script che ha comportato il pesante aumento delle rettifiche di URL: twitter_count.js; in Twitter, gli URL contano come 20 caratteri. Questi file sono tutti in \ Web \ js.
Ho anche creato una funzione pronta per il documento per chiamarli \ web \ js \ status-counter.js. Compreso Yii \ web \ YiiAsset nel nostro $ dipende array assicurerà che JQuery venga caricato ogni volta che istanziamo questa risorsa.
$ (document) .ready (function () $ ('# status-message'). simplyCountable (counter: '# counter2', maxCount: 140, countDirection: 'down'););
Caricamento del pacchetto di asset
Istanziare il pacchetto di asset è facile, come mostrato in \ Vista \ Stato \ _form.php sotto:
     campo ($ model, 'message') -> textarea (['rows' => 6])?> 
  Rimanente: 0
 
 
È tutto ciò che serve per attivare il nostro contatore di caratteri in stile Twitter:
Ho trovato che i pacchetti di asset di Yii sono semplici e facili da gestire. Mi aiutano a riutilizzare parti di JavaScript e CSS solo in alcune aree della mia applicazione in modo organizzato. 
Qual'è il prossimo?
La Guida definitiva a Yii2 descrive una serie di funzioni avanzate dei pacchetti di asset. Puoi controllare il posizionamento del caricamento degli script per ciascun pacchetto, ad es. POS_HEAD, POS_END. È possibile impostare Asset Maps per caricare specifiche versioni compatibili di librerie. Puoi impostare le opzioni JavaScript e CSS per un ulteriore caricamento condizionale dei tuoi bundle. Puoi anche utilizzare Asset Converters per compilare il codice LESS in CSS o TypeScript in JavaScript.
Guarda le prossime esercitazioni nella mia serie Programming With Yii2 mentre continuiamo a esplorare i diversi aspetti del framework. Potresti anche voler controllare la mia creazione della tua startup con la serie PHP, che usa il template avanzato di Yii2 mentre costruisco un'applicazione del mondo reale.
Accolgo richieste di argomenti e argomenti. Puoi postarli nei commenti qui sotto o mandarmi una e-mail sul mio sito Web di Lookahead Consulting.
Se vuoi sapere quando arriverà il prossimo tutorial di Yii2, seguimi @reifman su Twitter o controlla la mia pagina di istruttore. La mia pagina di istruttore includerà tutti gli articoli di questa serie non appena saranno pubblicati. 
Link correlati
 La guida definitiva su Yii2: Asset
  Yii2 AssetBundle Documentazione di classe 
  Yii2 Developer Exchange, il sito di risorse Yii2 dell'autore
 



		
			
	   
	




Codice