Hur man programmerar med Yii2 Arbeta med tillgångsbonder

Vad du ska skapa

Om du frågar, "Vad är Yii?" kolla in min tidigare handledning: Introduktion till Yii Framework, som granskar fördelarna med Yii och innehåller en översikt över vad som är nytt i Yii 2.0, släppt i oktober 2014.

I denna programmering med Yii2-serien guidar jag läsare som använder den nyuppgraderade Yii2 Framework for PHP. I denna handledning visar jag dig hur du lägger till anpassade JavaScript- och CSS-skript och bibliotek till din Yii-applikation. Yii använder ett koncept som kallar Asset Bundles för att underlätta hanteringen av dessa resurser.

För dessa exempel fortsätter vi att bygga vidare på det enkla statusprogrammet från tidigare handledning.

Bara en påminnelse, jag deltar i kommentera trådarna nedan. Jag är särskilt intresserad om du har olika tillvägagångssätt, ytterligare idéer, eller vill föreslå ämnen för framtida handledning.

Vad är en tillgångssats?

Yii Asset Bundles representerar grupper av JavaScript och CSS-filer som måste ingå ihop på specifika sidor eller över hela webbplatsen. Asset Bundles gör det enkelt att gruppera specifika grupper av skript och stilar för specifika områden på din webbplats. Till exempel, i min mötesplaneringsprogram kan jag enkelt inkludera Google Places APIs på de sidor där de behövs.

Här är ett snabbt exempel på det. Vi skapar en \ frontend \ tillgångar \ LocateAsset.php fil:

Då laddar vi det i vår synfil - det är ganska enkelt, verkligen:

När du tittar på källan till vår sida ser du skript som genereras tillsammans med andra Yii2-standardtillgångar för formulär, Bootstrap, etc .:

I denna handledning kommer jag att vägleda dig genom att använda Asset Bundles för att integrera teckenräkning i vår statusform. Vi använder detta för att genomdriva en teckengräns som motsvarar kvittens maximala 140 tecken.

Om du är intresserad av att se detta i åtgärd i Yii1.x implementerade jag den här funktionen i Building With Twitter API: OAuth, läsning och postning (Tuts +).

Bygga en Asset Bundle

Skapa Asset Bundle

I \tillgångar katalog, vi skapar StatusAsset.php:

 * @since 2.0 * / class StatusAsset utökar AssetBundle public $ basePath = '@webroot'; allmän $ baseUrl = '@web'; offentliga $ css = []; offentlig $ js = ['/js/jquery.simplyCountable.js', '/js/twitter-text.js', '/js/twitter_count.js', '/js/status-counter.js',]; offentlig $ beror = ['yii \ web \ YiiAsset', 'yii \ bootstrap \ BootstrapAsset',];

Jag använde en kombination av plugin-programmet jQuery simplyCountable, twitter-text.js (ett JavaScript-baserat Twitter textbehandlingsskript) och ett skript som gjorde det tunga att lyfta URL-justeringar: twitter_count.js; I Twitter räknas webbadresser som 20 tecken. Dessa filer är alla in \ Web \ js.

Jag skapade också en dokument redo funktion för att ringa in dem \ web \ js \ status-counter.js. Inklusive Yii \ web \ YiiAsset i vår $ beror array kommer att se till att JQuery laddas när vi instanserar den här tillgången.

$ (dokument) .ready (funktion () $ ('# status-meddelande'). simplyCountable (counter: '# counter2', maxCount: 140, countDirection: 'down';);

Laddar Asset Bundle

Instantiering av Asset Bundle är enkelt, som visas i \ Visningar \ status \ _form.php Nedan:

     fält ($ modell, meddelande) -> textarea (['rows' => 6])?> 
  Återstående: 0

Det är allt som krävs för att aktivera vår Twitter-stil teckenräknare:

Jag har hittat Yii Asset Bundles för att vara enkel och lätt att hantera. De hjälper mig att återanvända delar av JavaScript och CSS på bara vissa områden i min ansökan på ett organiserat sätt.

Vad kommer härnäst?

Den slutgiltiga guiden till Yii2 beskriver ett antal avancerade funktioner i Asset Bundles. Du kan styra positioneringen av manusläget för varje bunt, t.ex.. POS_HEAD, POS_END. Du kan ställa in tillgångskartor för att ladda specifika kompatibla versioner av bibliotek. Du kan ställa in JavaScript och CSS-alternativ för ytterligare villkorlig laddning av dina buntar. Du kan också använda Asset Converters för att kompilera LESS-kod i CSS eller TypeScript i JavaScript.

Titta på kommande handledningar i min programmering med Yii2-serien när vi fortsätter att dyka in i olika aspekter av ramen. Du kanske också vill kolla in min Building Your Startup With PHP-serie, som använder Yii2s avancerade mall när jag bygger en verklig världsapplikation.

Jag välkomnar funktion och ämnesförfrågningar. Du kan skicka in dem i kommentarerna nedan eller maila mig på min Lookahead Consulting webbplats.

Om du vill veta när nästa Yii2 handledning kommer, följ mig @ reifman på Twitter eller kolla min instruktörssida. Min instruktörssida kommer att innehålla alla artiklar från denna serie så snart de publiceras.

relaterade länkar

Den slutgiltiga guiden på Yii2: Tillgångar
Yii2 AssetBundle klassdokumentation
Yii2 Developer Exchange, författarens Yii2 resurs webbplats

Koda