Hoe te programmeren met Yii2 werken met activabundels

Als je vraagt: "Wat is Yii?" bekijk mijn eerdere tutorial: Introductie tot het Yii Framework, die de voordelen van Yii bekijkt en een overzicht bevat van wat er nieuw is in Yii 2.0, uitgebracht in oktober 2014.

In deze serie Programming With Yii2 begeleid ik lezers in gebruik van het onlangs bijgewerkte Yii2 Framework voor PHP. In deze zelfstudie laat ik u zien hoe u aangepaste JavaScript- en CSS-scripts en -bibliotheken toevoegt aan uw Yii-toepassing. Yii gebruikt een concept dat het Asset-bundels noemt om het gemakkelijker te maken om deze bronnen te beheren.  

Voor deze voorbeelden blijven we bouwen op de eenvoudige statustoepassing van eerdere zelfstudies.

Ter herinnering, ik neem wel deel aan de commentaarthreads hieronder. Ik ben vooral geïnteresseerd in verschillende benaderingen, aanvullende ideeën of onderwerpen voor toekomstige zelfstudies.

Wat is een activabundel?

De Asset-bundels van Yii vertegenwoordigen groepen JavaScript- en CSS-bestanden die moeten worden opgenomen op specifieke pagina's of op de hele site. Met assetbundels kunt u specifieke groepen scripts en stijlen groeperen voor specifieke delen van uw site. In mijn Meeting Planner-toepassing kan ik bijvoorbeeld Google Places API's eenvoudig opnemen op de pagina's waar ze nodig zijn.

Hier is een snel voorbeeld van. We creëren een \ Frontend \ activa \ LocateAsset.php het dossier:

Vervolgens laden we het in ons viewbestand - het is vrij simpel, echt:
Wanneer u de bron van onze pagina bekijkt, ziet u de scripts samen met andere Yii2-standaardactiva voor formulieren, Bootstrap, enz. Worden gegenereerd:
       
In deze tutorial ga ik u helpen met het gebruik van Asset Bundles om het tellen van tekens in ons statusformulier te integreren. We gebruiken dit om een ​​tekenlimiet af te dwingen die vergelijkbaar is met Twitter's maximum van 140 tekens. 
Als u geïnteresseerd bent om dit in actie in Yii1.x te zien, heb ik deze functie geïmplementeerd in Building with the Twitter API: OAuth, Reading and Posting (Tuts +).
Een activabundel opbouwen
Maak de Asset-bundel
In de \middelen directory, maken we StatusAsset.php:
 * @since 2.0 * / class StatusAsset breidt AssetBundle uit 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',]; 
Ik gebruikte een combinatie van de eenvoudige plugbare jQuery, twitter-text.js (een op JavaScript gebaseerd tekstverwerkingsscript voor Twitter) en een script dat het zware werk van URL-aanpassingen deed: twitter_count.js; in Twitter tellen URL's als 20 tekens. Deze bestanden zijn allemaal in \ Web \ js.
Ik heb ook een document-ready-functie gemaakt om ze op te roepen \ Web \ js \ de status-counter.js. Inclusief Yii \ web \ YiiAsset in onze $ afhangt array zorgt ervoor dat JQuery wordt geladen wanneer we dit item instantiëren.
$ (document) .ready (function () $ ('# status-bericht'). simplyCountable (counter: '# counter2', maxCount: 140, countDirection: 'down'););
De activabundel laden
Instantiëren van de Asset-bundel is eenvoudig, zoals getoond in \ Uitzicht \ staat \ _form.php hieronder:
 
  
 
 field ($ model, 'message') -> textarea (['rows' => 6])?> 
 
 
overige: 0
 
 
Dat is alles wat nodig is om onze Twitter-stijltekenteller te activeren:
Ik vond Yii Asset Bundles eenvoudig en gemakkelijk te beheren. Ze helpen me delen van JavaScript en CSS in bepaalde delen van mijn toepassing op een georganiseerde manier te hergebruiken. 
Wat is het volgende?
De Definitieve gids voor Yii2 beschrijft een aantal geavanceerde functies van Asset Bundles. U kunt de positionering van de scriptbelading voor elke bundel bepalen, bijvoorbeeld. POS_HEAD, POS_END. U kunt Asset Maps instellen om specifieke compatibele versies van bibliotheken te laden. U kunt JavaScript- en CSS-opties instellen voor verder voorwaardelijk laden van uw bundels. U kunt ook activaconverters gebruiken om LESS-code in CSS of TypeScript in JavaScript te compileren.
Kijk uit naar komende tutorials in mijn Programming With Yii2-serie terwijl we doorgaan met duiken in verschillende aspecten van het framework. Je kunt ook mijn Building Your Startup With PHP-serie bekijken, die de geavanceerde sjabloon van Yii2 gebruikt terwijl ik een toepassing in de echte wereld samenstel.
Ik verwelkom aanvragen voor functies en onderwerpen. Je kunt ze plaatsen in de reacties hieronder of e-mail me op mijn Lookahead Consulting-website.
Als je wilt weten wanneer de volgende Yii2-handleiding aankomt, volg me dan @reifman op Twitter of bekijk mijn instructeurspagina. Op mijn instructeurspagina staan ​​alle artikelen uit deze serie zodra ze zijn gepubliceerd. 
Gerelateerde Links
 
De definitieve gids over Yii2: Activa
 
 Yii2 AssetBundle Class-documentatie 
 
 Yii2 Developer Exchange, de Yii2-bronsite van de auteur
 



		
			
	   
	




Code