Cum de a programa cu Yii2 Lucrul cu pachetele de active

Ce veți crea

Dacă vă întrebați: "Ce este Yii?" verificați tutorialul meu anterior: Introducere în Cadrul Yii, care analizează beneficiile Yii și include o prezentare generală a ceea ce este nou în Yii 2.0, lansat în octombrie 2014.

În această serie de programare cu seria Yii2, îndrumăm cititorii în folosirea noii tehnologii Yii2 Framework for PHP. În acest tutorial, vă vom arăta cum să adăugați scripturi și biblioteci personalizate JavaScript și script CSS în aplicația Yii. Yii folosește un concept pe care îl numește Asset Bundles pentru a facilita gestionarea acestor resurse.

Pentru aceste exemple, vom continua să construim pe baza aplicației simple de stare din tutorialele anterioare.

Doar un memento, eu particip la comentariile de mai jos. Sunt interesat în special dacă aveți abordări diferite, idei suplimentare sau doriți să sugerați subiecte pentru tutoriale viitoare.

Ce este un pachet de active?

Agențiile de bunuri ale lui Yii reprezintă grupuri de fișiere JavaScript și CSS care trebuie să fie incluse împreună pe anumite pagini sau pe site. Bundlele de active facilitează gruparea grupurilor specifice de scripturi și stiluri pentru anumite zone ale site-ului dvs. De exemplu, în aplicația Planificator de întâlniri, pot include cu ușurință API-uri Google Locații numai în paginile în care sunt necesare.

Iată un exemplu rapid. Creăm a \ \ Frontend al activelor \ LocateAsset.php fişier:

Apoi îl încărcăm în fișierul nostru de vizualizare - este destul de simplu, într-adevăr:
Când vizualizați sursa paginii noastre, veți vedea scripturile generate împreună cu alte elemente standard Yii2 pentru formulare, Bootstrap etc.:
       
În acest tutorial, vă voi îndruma folosind Asset Bundles pentru a integra numărarea caracterelor în formularul Status. Vom folosi acest lucru pentru a impune o limită de caractere similară celei de maxim 140 de caractere din Twitter. 
Dacă sunteți interesat să vedeți acest lucru în acțiune în Yii1.x, am implementat această funcție în construirea cu API-ul Twitter: OAuth, Reading and Posting (Tuts +).
Construirea unui pachet de active
Creați pachetul de active
În \ active directorul pe care îl creăm StatusAsset.php:
 * @since 2.0 * / class StatusAsset extinde 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 $ depinde = ['yii \ web \ YiiAsset', 'yii \ bootstrap \ BootstrapAsset',]; 
Am folosit o combinație a plugin-ului jQuery simpleCountable, twitter-text.js (un script de procesare a textului pe baza JavaScript) și un script care a făcut ridicarea greoaie a ajustărilor adreselor URL: twitter_count.js; în Twitter, numărul de adrese URL este de 20 de caractere. Aceste fișiere sunt toate \ Web \ js.
De asemenea, am creat o funcție pregătită pentru a le apela \ web \ js \ status-counter.js. Inclusiv Yii \ web \ YiiAsset în a noastră $ depinde array va asigura că JQuery este încărcat ori de câte ori instanțiăm acest material.
$ (document) .ready (functie () $ ('# status-message')).
Încărcarea pachetului de active
Instanțializarea pachetului de active este ușor, așa cum se arată în \ Vederi \ statut \ _form.php de mai jos:
     câmp ($ model, 'mesaj') -> textarea (['rows' => 6])?> 
  Rămas: 0
 
 
Asta e tot ce este necesar pentru a activa numarul nostru de caractere in stil Twitter:
Am descoperit că Yii Asset Bundles este simplă și ușor de gestionat. Ele mă ajută să re-utilizez porțiuni de JavaScript și CSS în anumite zone ale aplicației mele într-un mod organizat. 
Ce urmeaza?
Ghidul definitiv pentru Yii2 descrie o serie de caracteristici avansate ale pachetelor de active. Puteți controla poziționarea încărcării de script pentru fiecare pachet, de ex. POS_HEAD, POS_END. Puteți seta Active Maps pentru a încărca versiuni compatibile ale bibliotecilor. Puteți seta opțiunile JavaScript și CSS pentru încărcarea suplimentară condiționată a pachetelor dvs. De asemenea, puteți utiliza Convertoarele de active pentru a compila LESS cod în CSS sau TypeScript în JavaScript.
Urmăriți tutorialele viitoare din programul meu de programare cu seria Yii2, deoarece vom continua să facem scufundări în diferite aspecte ale cadrului. Puteți, de asemenea, doriți să verificați starea mea Building Your Startup With PHP, care utilizează șablonul avansat al lui Yii2, pe măsură ce construiesc o aplicație din lumea reală.
Salut cererile de teme și teme. Puteți să le postați în comentariile de mai jos sau puteți să ne trimiteți un e-mail pe site-ul meu Lookahead Consulting.
Dacă doriți să știți când vine următorul tutorial Yii2, urmați-mă @reifman pe Twitter sau verificați pagina de instructor. Pagina mea de instructor va include toate articolele din această serie de îndată ce vor fi publicate. 
Link-uri conexe
 Ghidul definitiv privind Yii2: Active
  Documentație pentru clasa AssetBundle Yii2 
  Yii2 Developer Exchange, site-ul de resurse al autorului Yii2
 



		
			
	   
	




Cod