Google lukkeværktøjer for begyndere

Google har en trio af open source-teknologier til udviklere, der skriver JavaScript-applikationer i stor skala. Inkluderet i den første udgivelse var Closure Compiler, en sofistikeret JavaScript-kompiler, Closure Library, et enormt JavaScript-kodebibliotek designet til brug med den compiler, og Closure Templates, et skabelonsystem implementeret i JavaScript og Java.

Dette er teknologien, der har drevet funktionerne i Gmail og adskillige andre højprofilerede Google-applikationer (bl.a. Google Docs, Reader, Calendar, Maps). Google har udpeget dette som deres standardbibliotek for JavaScript-baserede applikationer. Closure Tools er til gengæld et bibliotek designet til andre formål end andre populære biblioteker, såsom jQuery og Prototype.js.

Det er almindeligvis forbundet med dynamiske løsninger såsom Closure Compiler, som giver et effektivt fodaftryk til applikationer af enhver størrelse og skalerbarhed. Indlæringskurven er dog ret stejl, der er meget færre eksempler, og du skal finde en måde at integrere compileren i din arbejdsgang. Med et bibliotek som jQuery skal du blot tilføje en scriptreference (hvis du f.eks. bruger et CDN, behøver du ikke engang fysisk downloade filen) og begynde at kode.

Så ud over de fantastiske Google-webapplikationer er lukningen til hvad? Det er en fremragende mulighed at overveje for enhver mellemstor eller stor applikation, uanset niche af teknologier, der bruges i bagenden. Disse applikationer involverer næsten altid flere udviklere og vil sandsynligvis indeholde mindst 100 kb kildekode, når de refererer til tredjepartsbiblioteker. Hvis der ikke er noget indbygget byggesystem, der matcher scripts, refererer en gennemsnitlig side af en applikation af denne størrelse sandsynligvis 5 til 10 eksterne scripts, hvis ikke mere.

Lukningskompiler

Closure Compiler er uden tvivl hovedkomponenten i Closure Tools. Det understøtter to primære optimeringstilstande: “minifikation” (hvor hele indholdet af filen er sat på en enkelt linje) og “avanceret kompilering“.

JavaScript-minifiers er ikke noget nyt i udviklingssamfundet. En JavaScript-compiler er heller ikke nødvendigvis noget nyt, ligesom compilere af andre sprog også har taget fat på dette problem med at kompilere deres koder native. Det unikke ved Closure Compiler er, at det er en JavaScript-til-JavaScript-kompiler, der er i stand til at udføre kodeoptimeringer, som tidligere var ukendte og umulige at lave med konventionelle værktøjer. Closure Compiler kan bruges som en selvstændig komponent i en eksisterende JavaScript-kodebase eller i forbindelse med Closure Library, som er designet til maksimal optimering, når det bruges sammen med compileren.

Lukningsbibliotek

Closure Library er et enormt bibliotek af JavaScript-kode optimeret til brug med Closure Compiler. I teorien er parring med Compiler valgfri. Og faktisk er dette en ekstremt vigtig funktion i udviklingsmiljøer, da det gør byggefasen valgfri og dramatisk fremskynder nogle stadier af udviklingen. I produktionsmiljøet er brugen af ​​compileren dog ikke valgfri, fordi bibliotekets ukompilerede kode er for stor, og den strategi, der bruges til at inkludere filerne, er ikke designet til at være effektiv.

Lukningsbibliotekskode opdateres med jævne mellemrum i et offentligt subversion-lager, som fødes fra Googles interne kildekontrolsystem. Det betyder ikke, at kvaliteten er “pre-release” (eller “beta”), det betyder blot, at Google er sikker nok til at frigive mere stabile versioner. Mange dele af Closure Library er aktivt i produktion hos Google, og det kommer med et stort sæt enhedstests. I sidste ende er det op til dig eller din organisation at afgøre, om den er stabil nok til dine behov.

Hej Verdenslukning!

Lad os starte med at installere miljøet til at håndtere udvikling ved hjælp af lukkebiblioteket. For at gøre dette skal du installere Git og køre følgende kommando:

git clone https://github.com/google/closure-library 

Dette vil være nok til at importere alle projektfiler, afhængigheder, JavaScript osv. Hvis du bruger Node.js, kan du udføre importen via kommandoen:

npm install google-closure-library

I samme mappe skal du oprette en ny JavaScript-fil med navnet hej.js og tilføje følgende kode til det. Bemærk, at vi i første omgang har brug for, at modulet i Google Closure DOM overføres til det via JavaScript, en ny h1 element og dets stil:

goog.require('goog.dom');
 
function hello() {
   var header = goog.dom.createDom('h1', {'style': 'background-color:#fff'}, 'Hello Closure!');
   goog.dom.appendChild(document.body, header);
}

Følgende kodeliste viser HTML-indholdet (gem det i hello.html-filen) for at importere Closure JavaScript-filerne og opkaldet til Hej() funktion af hello.js-filen:

<html>
  <head>
	<meta charset="utf-8" />
    <script src="https://www.htmlgoodies.com/javascript/google-closure-tools/closure-library/closure/goog/base.js"></script>
    <script src="hello.js"></script>
  </head>
  <body onload="hello()">
  </body>
</html> 

Resultatet af denne udførelse kan visualiseres i figur 1.

Figur 1. Hello World Closure eksempel

Lad os nu sige, at vi vil have muligheden for at ændre indholdet af et div-tag hvor som helst i vores HTML. Lad os starte med lidt HTML som følgende struktur:

<html>
<head>
    <meta charset="utf-8" />
    <title>Closure Div Test</title>
</head>
<body>
    <div id="myDiv"></div>

    <script src="https://www.htmlgoodies.com/javascript/google-closure-tools/closure-library/closure/goog/base.js"></script>
    <script src="dynamicDiv.js"></script>
    <script>dynamicDiv.insert('myDiv');</script>
</body>
</html> 

Bemærk, at vi på dette tidspunkt replikerer de samme oplysninger om import af lukning. Denne gang har vi dog en tom div i brødteksten på siden, hvis id vil blive brugt som identifikator i Lukning via indsæt() funktion placeret i