Closure Library
De Closure-bibliotheek is een JavaScript-bibliotheek, vergelijkbaar met andere moderne producten zoals jQuery, Angular, Vue.js, Dojo en MooTools. De coderingsstijl en het gebruik van opmerkingen in de Closure-bibliotheek zijn op maat gemaakt voor Closure Compiler. In vergelijking met andere JavaScript-bibliotheken is het de belangrijkste onderscheidende factor van Closure Compiler. Een eenvoudig compressie-experiment ontdekte dat wanneer Closure Compiler wordt gebruikt in plaats van YUI Compressor, de Closure Lib-code met 85% kan worden verminderd, wat een enorme impact kan hebben op de codecompressiecapaciteit van de compiler.
De implementatie van de closure bibliotheek richt zich ook op leesbaarheid en prestaties. Wees zuinig bij het maken van objecten, maar wees genereus bij het benoemen en opnemen van objecten. Het heeft ook een prachtig gebeurtenissysteem, ondersteuning voor klassen en overerving en verschillende UI-componenten, waaronder bijvoorbeeld een rich text-editor. De Closure-bibliotheekcode wordt regelmatig in alle browsers getest en kan, voor zover mogelijk, ook worden gebruikt in niet-browser JavaScript-omgevingen.
Omdat de bibliotheek in de eerste plaats een bron is voor Google-ingenieurs en ten tweede een open source-project, is het zeker dat elke regel code in de bibliotheek is ontwikkeld om ten minste één Google-product te ondersteunen.
Closure sjablonen bieden een intuïtieve syntaxis voor het maken van efficiënte JavaScript-functies (of objecten in Java) die HTML kunnen genereren. Dit maakt het gemakkelijk om grotere HTML / XML-strings te maken, die vervolgens kunnen worden gebruikt om de DOM te bouwen. Helaas hebben de meeste programmeertalen geen native ondersteuning voor sjablonen, dus het maken van een aparte sjabloonoplossing is gebruikelijk voor webframeworks (Python-ontwikkelaars gebruiken vaak Django's sjabloonsysteem, J2EE heeft JSP ASP MVC enz.). Het unieke aan het uitschakelen van sjablonen is dat dezelfde sjabloon tegelijkertijd in Java en JavaScript kan worden gecompileerd. Daarom kunnen die draaien waarop servers in Java (of JavaScript!) Zijn geschreven, dezelfde sjabloon gebruiken op zowel de server als de client.
Het kan worden gebruikt met andere sjabloonsystemen zoals lit-html, een efficiënte, uitbreidbare en HTML-sjabloonbibliotheek voor JavaScript. De volgende generatie HTML-sjabloon in JavaScript. lit-html stelt u in staat om HTML-sjablonen met JavaScript te schrijven en vervolgens die sjablonen en gegevens efficiënt te renderen en opnieuw te renderen om de DOM te maken en bij te werken. Creëer en update de DOM efficiënt lit-html is geen raamwerk, noch bevat het een componentmodel. Het richt zich op één ding, en slechts één ding: het effectief maken en updaten van de DOM. Het kan alleen worden gebruikt voor eenvoudige taken, of gecombineerd met frameworks of componentmodellen (zoals webcomponenten) voor een volledig functioneel UI-ontwikkelplatform. We zagen deze combinatie bijvoorbeeld op de YouTube-website.
Voor bestaande JavaScript-applicaties is de Closure-compiler waarschijnlijk de meest directe en nuttige Closure-tool. Hoewel het gebruiken ervan voor het compileren van code geschreven in de stijl van de Closure-bibliotheek de meest effectieve methode is, kan het vervangen van de bestaande jQuery- of Dojo-afhankelijkheden door de bibliotheek tijdrovend zijn. Daarentegen kan Closure Compiler worden gebruikt om bestaande JavaScript-compressoren (zoals minifier of JSMin YUI-compressor) te vervangen, wat veel moeite bespaart. Er zijn zelfs online diensten te vinden.
De Closure-compiler is een JavaScript-geoptimaliseerde compiler: het neemt JavaScript-broncode als invoer en genereert broncode met een gelijkwaardig gedrag als uitvoer. Met andere woorden, wanneer de uitvoercode wordt gebruikt in plaats van de invoercode, zal het waarneembare effect hetzelfde zijn (hoewel de uitvoersnelheid van de uitvoercode hoger kan zijn dan de originele code). Bovendien kan de compiler, net als JSLint, een groot aantal fouten detecteren door statische controles uit te voeren tijdens het compileren. Dit helpt om fouten eerder te vinden, wat de ontwikkeling van JavaScript enorm versnelt. Het gebruik van een compiler om problemen te identificeren is geen vervanging voor het testen van eenheden, maar het kan.
Closure CSS
Enkele woorden over code
Het is bijvoorbeeld acceptabel om een uitgebreide hulpprogramma-bibliotheek te schrijven, zolang de compiler de ongebruikte delen kan verwijderen. Complementaire methoden moeten worden vervangen door een enkele geparametriseerde methode (setStatus (status) heeft bijvoorbeeld de voorkeur boven statusOn () en statusOff ()). Dit vermindert het aantal methodedeclaraties en maakt het gemakkelijker om functies uit te voeren. Om de Closure-bibliotheek volledig te begrijpen, moet u daarom ook begrijpen hoe Compiler JavaScript-code herschrijft.
Je kunt je afvragen of je je moet concentreren op het gebruik van een compiler om JavaScript met betere prestaties te produceren. Het korte antwoord is ja, maar aangezien runtime-prestaties veel moeilijker zijn dan codegrootte, kostte het meer engineeringstijd om de krimpende prestaties te verbeteren. Gelukkig verbeteren veel verkleining van de codegrootte ook de prestaties, omdat veel optimalisaties het resultaat zijn van het evalueren van expressies tijdens het compileren in plaats van tijdens runtime.
De compiler is ontworpen om onmiddellijk alle code te compileren die in het applicatieproces kan worden uitgevoerd. Er zijn veel potentiële invoerbronnen, maar de compiler ontvangt ze allemaal tegelijkertijd. Dit in tegenstelling tot andere talen, waar een deel van de broncode wordt gecompileerd in herbruikbare modules. Bij Closure is de situatie het tegenovergestelde: de broncode wordt in eerste instantie samen gecompileerd en vervolgens opgesplitst in modules die geleidelijk kunnen worden geladen door de webapplicatie. Dit wordt gedaan om ervoor te zorgen dat de variabelenamen die in elke module worden gebruikt, globaal uniek zijn.
Net als de meeste moderne programmeertalen beheert JavaScript zijn eigen geheugen. Gelukkig kan dit de mogelijkheid van geheugenlekken niet uitsluiten, omdat het onvermogen om verwijzingen vrij te geven naar objecten die niet langer nodig zijn, er nog steeds toe kan leiden dat de applicatie onvoldoende geheugen heeft. De sluitingsbibliotheek gebruikt goog.Disposable om ervoor te zorgen dat de referentie zo snel mogelijk wordt vrijgegeven, zodat het object kan worden opgehaald.
Closure Compiler is niet de eerste tool die problemen in JavaScript-code probeert te identificeren door statische controles uit te voeren. Er zijn echter grenzen aan hoeveel u alleen uit de broncode kunt afleiden. Om de informatie in de code zelf aan te vullen, gebruikt de compiler de commentaren van de ontwikkelaar, die verschijnen in de vorm van JavaScript-commentaren.
Door de code te becommentariëren om de parameters en retourtypen van de functie aan te geven, kan de compiler bepalen wanneer onjuiste typen parameters aan de functie moeten worden doorgegeven. Maak op dezelfde manier aantekeningen in de code om aan te geven welke gegevens privé moeten zijn, zodat de compiler kan herkennen wanneer de gegevens illegaal worden geopend. Door deze annotaties in de code te gebruiken, kunt u de compiler gebruiken om het vertrouwen in de juistheid van de code te vergroten.
Hoewel de compiler veel nuttige conversies voor zijn invoer biedt, wordt verwacht dat de code van de Closure-bibliotheek ook wordt uitgevoerd zonder door de compiler te worden verwerkt. Dit zorgt er niet alleen voor dat de invoertaal puur JavaScript is, maar maakt het debuggen ook gemakkelijker omdat er altijd duidelijke code beschikbaar is.
De bibliotheekcode die wordt gebruikt met alle algemeen beschikbare objecten (strings, arrays, functies, enz.) In de JavaScript-omgeving, is echter niet afhankelijk van API's die alleen beschikbaar zijn voor de browser. Dit maakt de Closure-bibliotheek ook zeer geschikt voor gebruik met server-side JavaScript.
Ingebouwde prototypes van objecten, zoals objecten, functies, arrays en strings, mogen niet worden gewijzigd. Hierdoor kan Closure worden gebruikt met andere JavaScript-bibliotheken zoals jQuery. In de praktijk is het gebruik van Closure met andere bibliotheken echter meestal niet efficiënt. Elke bibliotheek heeft zijn eigen logica voor gebeurtenisbeheer, stringverwerking, enz. Dit betekent dat deze dubbele logica kan bevatten, waardoor de hoeveelheid te laden JavaScript-code toeneemt.
Elk gereedschap in de Closure-kit kan onafhankelijk worden gebruikt. Dit komt voornamelijk doordat de beslissing om een bepaalde "gesloten" tool te gebruiken wordt genomen door één technisch team bij Google, dus er is geen garantie dat het team dat de compiler gebruikt ook de bibliotheek zal gebruiken. Nu Closure volwassener is, is de belangrijkste reden om de ene tool te adopteren in plaats van de andere, omdat de afhankelijkheid van de originele code al afhankelijk is van vergelijkbare tools. Wanneer u besluit hoe u Closure het beste in een bestaand project kunt integreren, kunt u een vergelijkbare situatie tegenkomen.
Momenteel moet elke tool in de Closure-suite afzonderlijk worden gedownload en geïnstalleerd. Omdat deze tools onafhankelijk van elkaar zijn, wordt elke tool als een eigen project onderhouden op https://developers.google.com/closure. De meeste projecten bevatten een sectie "Aanbevolen download", waarin de tool en de bijbehorende documentatie kunnen worden gedownload als een soort zipbestand. Helaas biedt de Closure-repository dergelijke gebundelde software niet, dus de enige manier om de code te krijgen, is door deze te bekijken in de Subversion-repository die aan het project is gekoppeld.
npm install google-closure-library
Or you can checkout current version from git or svn
https://github.com/google/closure-library.git
Default Hello example: vim hello.html
<html>
<head>
<script src="closure-library/closure/goog/base.js"></script>
<script src="hello.js"></script>
</head>
<body onload="sayHi()">
</body>
</html> vim hello.js
goog.require('goog.dom');
goog.require('goog.dom.TagName');
function sayHi() {
var newHeader = goog.dom.createDom(goog.dom.TagName.H1, {'style': 'background-color:#EEE'},
'Hello world!');
goog.dom.appendChild(document.body, newHeader);
}
Extra JavaScript-bestanden geladen door Closure.
Aan de slag met Closure Library wordt uitgelegd hoe u Closure Library in uw project kunt gebruiken. In dit gedeelte wordt beschreven hoe u ClosureBuilder en Closure Compiler in een project kunt gebruiken om het bestand te verkleinen tot een minimaal JavaScript-bestand
Het is je misschien opgevallen dat de browser meerdere HTTP-verzoeken heeft gedaan tijdens het laden van de pagina. Voor elk Closure Library-bestand dat vereist is door goog.require (), wordt een nieuwe script-tag gemaakt om het bestand te laden. Elk Closure Library-bestand wordt geladen als een afzonderlijk HTTP-verzoek.
Dit is zeer effectief voor ontwikkeling, omdat u ongecompileerde broncode kunt zien en bestaande foutopsporingstools kunt gebruiken. Maar dit is niet bevorderlijk voor het verlenen van diensten aan gebruikers. Al deze bestanden afzonderlijk laden is niet nodig en traag. Voor real-time applicaties die echte gebruikers bedienen, moet u een "gecompileerde" versie van de applicatie opgeven. Closure Compiler neemt uw code en vereiste Closure Library-bestanden, verwijdert de opmerkingen, voert enkele optimalisaties uit en maakt een groter bestand als uitvoer. Op deze manier kan uw server slechts één bestand leveren in plaats van meerdere individuele bestanden.
De tool closurebuilder.py in closures / bin / build is een tool die wordt gebruikt om gecompileerde JavaScript-bestanden te bouwen. Het scant uw bestanden en Closure Library-bestanden en kan de volgorde van scriptbestanden berekenen in volgorde van relevantie. Het kan de bestandsnaam van het script of de inhoud ervan in afhankelijkheidsvolgorde uitvoeren, of het bestand doorgeven aan Closure Compiler om een gecompileerde versie te genereren.
Elke --root-vlag vertelt ClosureBuilder om de .js-bestanden in die map te scannen. De goog.provide- en goog.require-instructies worden in elk bestand gescand, wat aangeeft dat het bestand een naamruimte biedt of een naamruimte vereist in een ander bestand. Door alle bestanden te scannen, kan ClosureBuilder geheugenafhankelijkheidsbomen bouwen voor alle naamruimten. De --namespace-vlag vertelt ClosureBuilder om te starten vanuit de naamruimte myproject.start in de boom en alle afhankelijkheden op te halen. Standaard voert het de resultaten op volgorde uit als een bestandslijst. Voor elk bestand in de lijst wordt elke vereiste naamruimte geleverd door een ander bestand dat eerder in de lijst verschijnt.
De implementatie van de closure bibliotheek richt zich ook op leesbaarheid en prestaties. Wees zuinig bij het maken van objecten, maar wees genereus bij het benoemen en opnemen van objecten. Het heeft ook een prachtig gebeurtenissysteem, ondersteuning voor klassen en overerving en verschillende UI-componenten, waaronder bijvoorbeeld een rich text-editor. De Closure-bibliotheekcode wordt regelmatig in alle browsers getest en kan, voor zover mogelijk, ook worden gebruikt in niet-browser JavaScript-omgevingen.
Omdat de bibliotheek in de eerste plaats een bron is voor Google-ingenieurs en ten tweede een open source-project, is het zeker dat elke regel code in de bibliotheek is ontwikkeld om ten minste één Google-product te ondersteunen.
Closure Templates
Het kan worden gebruikt met andere sjabloonsystemen zoals lit-html, een efficiënte, uitbreidbare en HTML-sjabloonbibliotheek voor JavaScript. De volgende generatie HTML-sjabloon in JavaScript. lit-html stelt u in staat om HTML-sjablonen met JavaScript te schrijven en vervolgens die sjablonen en gegevens efficiënt te renderen en opnieuw te renderen om de DOM te maken en bij te werken. Creëer en update de DOM efficiënt lit-html is geen raamwerk, noch bevat het een componentmodel. Het richt zich op één ding, en slechts één ding: het effectief maken en updaten van de DOM. Het kan alleen worden gebruikt voor eenvoudige taken, of gecombineerd met frameworks of componentmodellen (zoals webcomponenten) voor een volledig functioneel UI-ontwikkelplatform. We zagen deze combinatie bijvoorbeeld op de YouTube-website.
Closure Compiler
De Closure-compiler is een JavaScript-geoptimaliseerde compiler: het neemt JavaScript-broncode als invoer en genereert broncode met een gelijkwaardig gedrag als uitvoer. Met andere woorden, wanneer de uitvoercode wordt gebruikt in plaats van de invoercode, zal het waarneembare effect hetzelfde zijn (hoewel de uitvoersnelheid van de uitvoercode hoger kan zijn dan de originele code). Bovendien kan de compiler, net als JSLint, een groot aantal fouten detecteren door statische controles uit te voeren tijdens het compileren. Dit helpt om fouten eerder te vinden, wat de ontwikkeling van JavaScript enorm versnelt. Het gebruik van een compiler om problemen te identificeren is geen vervanging voor het testen van eenheden, maar het kan.
Closure Testing Framework
Closure Testing Framework is een framework voor het testen van eenheden dat in de browser wordt uitgevoerd, vergelijkbaar met Jasmine.js, QUnit of Mocha.js. De meeste Closure Library-code heeft overeenkomstige tests die in het Framework worden uitgevoerd. Een goede programmeerpraktijk is om tests voor uw eigen code te maken en deze regelmatig uit te voeren om regressies te identificeren. Omdat Closure Testing Framework in de browser wordt uitgevoerd, is er andere software nodig om het proces van het starten van de browser, het uitvoeren van tests en het opnemen van resultaten te automatiseren. Selenium (python WebDriver) is misschien de beste oplossing voor dit doel.
Closure CSS
Closure Stylesheets is een systeem dat veel Google-extensies toevoegt aan de standaard CSS-taal. Met behulp van deze extensies kunt u variabelen, functies, voorwaarden en hybride tabellen in de stylesheet definiëren en gebruiken, waardoor de stylesheet beter leesbaar en onderhoudbaar wordt. De meegeleverde tools kunnen style sheets compileren naar standaard CSS, en ondersteunen minificatie, directionaliteit (omdraaien van rechts naar links) en het hernoemen van klassen.
Enkele woorden over code
Het is belangrijk om de ontwerpdoelen en -principes te begrijpen die aanleiding geven tot de implementatie van gesloten tools. Het merendeel van het ontwerp van de toolkit wordt aangestuurd door de functies van de compiler en de stijl van de bibliotheek.
Het belangrijkste doel van Closure Compiler is om de grootte van JavaScript-code te verkleinen. Aangezien Google JavaScript voor veel pagina's levert en trots is op zijn snelheid (Google-technici dragen T-shirts met de woorden "Snel is mijn favoriete functie"), moet het JavaScript dat nodig is om de pagina weer te geven zo klein mogelijk zijn. Zelfs als de browser JavaScript in de cache opslaat, moet een pagina die JavaScript gebruikt opnieuw worden geladen, deze worden geparseerd en opnieuw worden uitgevoerd. Hoe kleiner het JavaScript, hoe minder tijd het kost. Het enige dat uw gebruikers kan maken (of wegjagen) is de snelheid en bruikbaarheid van de applicatie.
Neem bijvoorbeeld APM voor informatieve pagina's, het verschil is erg groot. APM-pagina's worden 50% meer gebruikt dan gewone HTML met javascript. Omdat ze comfortabel laden op mobiele apparaten.
De manier om JavaScript-code te schrijven, moet efficiënt door de compiler worden gecompileerd. Dit is de basis voor het begrijpen van het ontwerp van sluitingsbibliotheken: de breedsprakigheid van de code kan de grootte van de compiler niet weergeven. Als u meer code (of opmerkingen) moet schrijven om kleinere gecompileerde code te produceren, is dit beter dan minder code schrijven om grotere gecompileerde code te produceren.
Je kunt je afvragen of je je moet concentreren op het gebruik van een compiler om JavaScript met betere prestaties te produceren. Het korte antwoord is ja, maar aangezien runtime-prestaties veel moeilijker zijn dan codegrootte, kostte het meer engineeringstijd om de krimpende prestaties te verbeteren. Gelukkig verbeteren veel verkleining van de codegrootte ook de prestaties, omdat veel optimalisaties het resultaat zijn van het evalueren van expressies tijdens het compileren in plaats van tijdens runtime.
De compiler is ontworpen om onmiddellijk alle code te compileren die in het applicatieproces kan worden uitgevoerd. Er zijn veel potentiële invoerbronnen, maar de compiler ontvangt ze allemaal tegelijkertijd. Dit in tegenstelling tot andere talen, waar een deel van de broncode wordt gecompileerd in herbruikbare modules. Bij Closure is de situatie het tegenovergestelde: de broncode wordt in eerste instantie samen gecompileerd en vervolgens opgesplitst in modules die geleidelijk kunnen worden geladen door de webapplicatie. Dit wordt gedaan om ervoor te zorgen dat de variabelenamen die in elke module worden gebruikt, globaal uniek zijn.
Memory Matters bezorgde de Gmail-ingenieurs veel pijn, het dwong hen extra moeite te doen om het geheugen op de client te beheren.
Net als de meeste moderne programmeertalen beheert JavaScript zijn eigen geheugen. Gelukkig kan dit de mogelijkheid van geheugenlekken niet uitsluiten, omdat het onvermogen om verwijzingen vrij te geven naar objecten die niet langer nodig zijn, er nog steeds toe kan leiden dat de applicatie onvoldoende geheugen heeft. De sluitingsbibliotheek gebruikt goog.Disposable om ervoor te zorgen dat de referentie zo snel mogelijk wordt vrijgegeven, zodat het object kan worden opgehaald.
Closure Compiler is niet de eerste tool die problemen in JavaScript-code probeert te identificeren door statische controles uit te voeren. Er zijn echter grenzen aan hoeveel u alleen uit de broncode kunt afleiden. Om de informatie in de code zelf aan te vullen, gebruikt de compiler de commentaren van de ontwikkelaar, die verschijnen in de vorm van JavaScript-commentaren.
Door de code te becommentariëren om de parameters en retourtypen van de functie aan te geven, kan de compiler bepalen wanneer onjuiste typen parameters aan de functie moeten worden doorgegeven. Maak op dezelfde manier aantekeningen in de code om aan te geven welke gegevens privé moeten zijn, zodat de compiler kan herkennen wanneer de gegevens illegaal worden geopend. Door deze annotaties in de code te gebruiken, kunt u de compiler gebruiken om het vertrouwen in de juistheid van de code te vergroten.
Hoewel de compiler veel nuttige conversies voor zijn invoer biedt, wordt verwacht dat de code van de Closure-bibliotheek ook wordt uitgevoerd zonder door de compiler te worden verwerkt. Dit zorgt er niet alleen voor dat de invoertaal puur JavaScript is, maar maakt het debuggen ook gemakkelijker omdat er altijd duidelijke code beschikbaar is.
De bibliotheekcode die wordt gebruikt met alle algemeen beschikbare objecten (strings, arrays, functies, enz.) In de JavaScript-omgeving, is echter niet afhankelijk van API's die alleen beschikbaar zijn voor de browser. Dit maakt de Closure-bibliotheek ook zeer geschikt voor gebruik met server-side JavaScript.
Ingebouwde prototypes van objecten, zoals objecten, functies, arrays en strings, mogen niet worden gewijzigd. Hierdoor kan Closure worden gebruikt met andere JavaScript-bibliotheken zoals jQuery. In de praktijk is het gebruik van Closure met andere bibliotheken echter meestal niet efficiënt. Elke bibliotheek heeft zijn eigen logica voor gebeurtenisbeheer, stringverwerking, enz. Dit betekent dat deze dubbele logica kan bevatten, waardoor de hoeveelheid te laden JavaScript-code toeneemt.
Momenteel moet elke tool in de Closure-suite afzonderlijk worden gedownload en geïnstalleerd. Omdat deze tools onafhankelijk van elkaar zijn, wordt elke tool als een eigen project onderhouden op https://developers.google.com/closure. De meeste projecten bevatten een sectie "Aanbevolen download", waarin de tool en de bijbehorende documentatie kunnen worden gedownload als een soort zipbestand. Helaas biedt de Closure-repository dergelijke gebundelde software niet, dus de enige manier om de code te krijgen, is door deze te bekijken in de Subversion-repository die aan het project is gekoppeld.
Using with Node.js
Install the official package from npm.
<head>
<script src="closure-library/closure/goog/base.js"></script>
<script src="hello.js"></script>
</head>
<body onload="sayHi()">
</body>
</html>
goog.require('goog.dom.TagName');
function sayHi() {
var newHeader = goog.dom.createDom(goog.dom.TagName.H1, {'style': 'background-color:#EEE'},
'Hello world!');
goog.dom.appendChild(document.body, newHeader);
}
Aan de slag met Closure Library wordt uitgelegd hoe u Closure Library in uw project kunt gebruiken. In dit gedeelte wordt beschreven hoe u ClosureBuilder en Closure Compiler in een project kunt gebruiken om het bestand te verkleinen tot een minimaal JavaScript-bestand
Het is je misschien opgevallen dat de browser meerdere HTTP-verzoeken heeft gedaan tijdens het laden van de pagina. Voor elk Closure Library-bestand dat vereist is door goog.require (), wordt een nieuwe script-tag gemaakt om het bestand te laden. Elk Closure Library-bestand wordt geladen als een afzonderlijk HTTP-verzoek.
Dit is zeer effectief voor ontwikkeling, omdat u ongecompileerde broncode kunt zien en bestaande foutopsporingstools kunt gebruiken. Maar dit is niet bevorderlijk voor het verlenen van diensten aan gebruikers. Al deze bestanden afzonderlijk laden is niet nodig en traag. Voor real-time applicaties die echte gebruikers bedienen, moet u een "gecompileerde" versie van de applicatie opgeven. Closure Compiler neemt uw code en vereiste Closure Library-bestanden, verwijdert de opmerkingen, voert enkele optimalisaties uit en maakt een groter bestand als uitvoer. Op deze manier kan uw server slechts één bestand leveren in plaats van meerdere individuele bestanden.
De tool closurebuilder.py in closures / bin / build is een tool die wordt gebruikt om gecompileerde JavaScript-bestanden te bouwen. Het scant uw bestanden en Closure Library-bestanden en kan de volgorde van scriptbestanden berekenen in volgorde van relevantie. Het kan de bestandsnaam van het script of de inhoud ervan in afhankelijkheidsvolgorde uitvoeren, of het bestand doorgeven aan Closure Compiler om een gecompileerde versie te genereren.
closure-library/closure/bin/build/closurebuilder.py \ --root=closure-library/ \ --root=projectmap/ \ --namespace="myproject.start"
closure-library/closure/bin/build/closurebuilder.py \ --root=closure-library/ \ --root=projectmap/ \ --namespace="myproject.start" \ --output_mode=compiled \ --compiler_jar=compiler.jar \ > myproject/start-compiled.js
ClosureBuilder schrijft de uitvoer van de compiler naar standaarduitvoer. Hier zetten we het over naar een bestand met de naam start-compiled.js. Als alternatief kunt u --output_file gebruiken om het te schrijven bestand op te geven
Zet start-compiled.js naast myproject.html en pas het HTML-bestand aan om de gecompileerde versie te gebruiken:
Zet start-compiled.js naast myproject.html en pas het HTML-bestand aan om de gecompileerde versie te gebruiken:
<!doctype html>
<html>
<head>
<script src="start-compiled.js"></script>
</head>
<body>
<script>
myproject.start();
</script>
</body>
</html>
Het gebruik van de afsluitingscompiler en het compilatieniveau van ADVANCED_OPTIMIZATIONS samen met het compilatieniveau met SIMPLE_OPTIMIZATIONS of WHITESPACE_ONLY kan een betere compressie opleveren. Compileren met ADVANCED_OPTIMIZATIONS kan agressiever zijn door code te converteren en symbolen te hernoemen om extra compressie te bereiken. Deze agressievere methode betekent echter dat u extra voorzichtig moet zijn bij het gebruik van ADVANCED_OPTIMIZATIONS om ervoor te zorgen dat de uitvoercode op dezelfde manier werkt als de invoercode.
closure-library/closure/bin/build/closurebuilder.py \ --root=closure-library/ \ --root=myproject/ \ --namespace="myproject.start" \ --output_mode=compiled \ --compiler_jar=compiler.jar \ --compiler_flags="--js=closure-library/closure/goog/deps.js" \ --compiler_flags="--compilation_level=ADVANCED_OPTIMIZATIONS" \ > start-compiled.js
To run your code you need a web server
Je kunt natuurlijk zoiets gebruiken
python -m SimpleHTTPServer
Maar ik zou een Firebase-project aanbevelen.
Firebase is het mobiele platform van Google waarmee u snel kunt ontwikkelen ...
Firebase-projecten worden ondersteund door Google Cloud Platform, zodat u uw app kunt schalen en u deze tools kunt gebruiken om een webapplicatie naar een moderne hosting te publiceren.
Zie minimale installatie op de Firebase-projectwebsite.
Dat is een voorbeeldtoepassing van officieel Google aan de slag.
Comments
Post a Comment