So programmieren Sie mit Yii2 Arbeiten mit Asset-Bundles

Wenn Sie fragen: "Was ist Yii?" Schauen Sie sich mein früheres Tutorial an: Einführung in das Yii-Framework, Hier werden die Vorteile von Yii beschrieben und ein Überblick über die Neuerungen in Yii 2.0 (Oktober 2014) gegeben.

In dieser Programmierserie mit Yii2 leite ich die Leser beim Einsatz des neu aktualisierten Yii2-Frameworks für PHP. In diesem Tutorial zeige ich Ihnen, wie Sie Ihrer Yii-Anwendung benutzerdefinierte JavaScript- und CSS-Skripts und -Bibliotheken hinzufügen. Yii verwendet ein Konzept, das als Asset Bundles bezeichnet wird, um die Verwaltung dieser Ressourcen zu vereinfachen.  

Für diese Beispiele bauen wir weiterhin auf der einfachen Statusanwendung aus vorherigen Lernprogrammen auf.

Nur zur Erinnerung, ich beteilige mich an den Kommentarthreads unten. Ich bin besonders interessiert, wenn Sie unterschiedliche Ansätze, zusätzliche Ideen haben oder Themen für zukünftige Tutorials vorschlagen möchten.

Was ist ein Asset-Bundle??

Yii's Asset Bundles stellen Gruppen von JavaScript- und CSS-Dateien dar, die auf bestimmten Seiten oder auf der gesamten Website zusammengefügt werden müssen. Mit Asset Bundles können Sie leicht bestimmte Gruppen von Skripts und Stilen für bestimmte Bereiche Ihrer Site zusammenfassen. In meiner Meeting Planner-Anwendung kann ich Google Places-APIs beispielsweise nur auf den Seiten einfügen, auf denen sie benötigt werden.

Hier ist ein schnelles Beispiel dafür. Wir schaffen ein \ frontend \ assets \ LocateAsset.php Datei:

Dann laden wir es in unsere Ansichtsdatei. Es ist ganz einfach:
Wenn Sie den Quellcode unserer Seite anzeigen, werden die Skripts zusammen mit anderen Yii2-Standardassets für Formulare, Bootstrap usw. angezeigt:
       
In diesem Tutorial werde ich Sie durch die Verwendung von Asset-Bundles führen, um die Anzahl der Charaktere in unser Statusformular zu integrieren. Wir verwenden dies, um eine Zeichenbegrenzung durchzusetzen, die der von Twitter maximal 140 Zeichen entspricht. 
Wenn Sie daran interessiert sind, dies in Aktion in Yii1.x zu sehen, habe ich diese Funktion in Building With the Twitter-API implementiert: OAuth, Lesen und Buchen (Tuts +)..
Asset-Bundle erstellen
Erstellen Sie das Asset-Bundle
In dem \Vermögenswerte Verzeichnis erstellen wir StatusAsset.php:
 * @since 2.0 * / class StatusAsset erweitert 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 $ changes = ['yii \ web \ YiiAsset', 'yii \ bootstrap \ BootstrapAsset']]; 
Ich habe eine Kombination aus dem jQuery simplyCountable-Plugin, twitter-text.js (einem JavaScript-basierten Twitter-Textverarbeitungsskript) und einem Skript verwendet, das das Anheben von URL-Einstellungen erheblich beschleunigte: twitter_count.js; In Twitter zählen URLs als 20 Zeichen. Diese Dateien sind alle in \ web \ js.
Ich habe auch eine dokumentbereite Funktion erstellt, um sie einzuladen \ web \ js \ status-counter.js. Einschließlich yii \ web \ YiiAsset in unserer $ hängt davon ab array stellt sicher, dass JQuery geladen wird, wenn wir dieses Asset instanziieren.
$ (document) .ready (function () $ ('# status-message'). simplyCountable (counter: '# counter2', maxCount: 140, countDirection: 'down'););
Laden des Asset-Pakets
Das Instantiieren des Asset-Pakets ist einfach, wie in gezeigt \ views \ status \ _form.php unten:
 
  
 
 Feld ($ model, 'message') -> Textbereich (['Zeilen' => 6])?> 
 
 
Verbleibend: 0
 
 
Das ist alles, was Sie brauchen, um unseren Charakterzähler nach Twitter zu aktivieren:
Ich habe festgestellt, dass Yii Asset Bundles unkompliziert und einfach zu verwalten sind. Sie helfen mir, Teile von JavaScript und CSS in bestimmten Bereichen meiner Anwendung auf organisierte Weise wiederzuverwenden. 
Was kommt als nächstes?
Das Definitive Guide to Yii2 beschreibt eine Reihe erweiterter Funktionen von Asset Bundles. Sie können die Positionierung des Skriptladens für jedes Bundle steuern, z. POS_HEAD, POS_END. Sie können Asset Maps so einstellen, dass bestimmte kompatible Versionen von Bibliotheken geladen werden. Sie können JavaScript- und CSS-Optionen zum weiteren bedingten Laden Ihrer Bundles festlegen. Sie können Asset Converter auch verwenden, um weniger Code in CSS oder TypeScript in JavaScript zu kompilieren.
Achten Sie auf kommende Tutorials in meiner Programmierreihe "Programmieren mit Yii2", während wir uns weiter mit verschiedenen Aspekten des Frameworks beschäftigen. Vielleicht möchten Sie auch die Serie "Erstellen Sie Ihr Startup mit PHP" ausprobieren, die die erweiterte Vorlage von Yii2 verwendet, während ich eine Anwendung aus der realen Welt baue.
Ich freue mich über Feature- und Themenanfragen. Sie können sie in den Kommentaren unten posten oder mich auf meiner Lookahead Consulting-Website per E-Mail benachrichtigen.
Wenn Sie wissen möchten, wann das nächste Yii2-Tutorial ankommt, folgen Sie mir @reifman auf Twitter oder besuchen Sie meine Instructor-Seite. Meine Ausbilderseite enthält alle Artikel dieser Serie, sobald sie veröffentlicht sind. 
ähnliche Links
 
Der endgültige Leitfaden zu Yii2: Assets
 
 Yii2 AssetBundle-Klassendokumentation 
 
 Yii2 Developer Exchange, die Website für Yii2-Ressourcen des Autors
 



		
			
	   
	




Code