Her er hva utviklere bør se etter i den nyeste Chrome-utgivelsen

Google har lagt til en rekke funksjoner i den siste versjonen av Chrome-nettleseren for å hjelpe utviklere med å lage rikere nettsteder og apper.

Chrome 38, som ble utgitt denne uken, introduserer støtte for ny HTML- og JavaScript-funksjonalitet. Her er en oversikt over hva som er nytt for utviklere.

element

Å laste bilder som ser bra ut på alt fra widescreen-skjermer til telefoner i palmestørrelse, kan være vanskelig uten hjelp fra JavaScript og CSS.

Utgivelsen legger til støtte for HTML-bildeelementet, som lar utviklere instruere nettleseren om å justere oppløsningen på bildet det laster avhengig av størrelsen på enheten, og å gjøre det ved hjelp av HTML.

Slik fungerer det:

Bildet og kildeelementet ber nettleseren om å laste inn ett av tre forskjellige bilder, avhengig av størrelsen på nettleserens visningsområde. Hvis visningsområdet er over 700 piksler bredt, laster det høyoppløsnings.jpg, over 450 piksler bredt laster det middels oppløsning.jpg og alle andre størrelser, og det laster lavoppløsnings.jpg.

Bildeelementet er en beholder for kildeelementet, som er det som avgjør hvilke bilder som lastes inn av nettleseren.

Kildeelementet har et medieattributt, som godtar ethvert gyldig CSS-mediesøk, og et srcset-attributt, som er en bane til bildefilen som skal lastes.

Hvert bildeelement må også inneholde et img-element for å spesifisere et bilde som skal lastes i tilfelle nettleseren ikke støtter bildeelementet.

Bildeelementet er i stand til å lede nettleseren til å tjene flere versjoner av et bilde basert på en rekke egenskaper, for eksempel enhetsstørrelse, oppløsning, retning og mer. For Googles detaljer, se Googles veiledning om grunnleggende nett.

Bilde: Google under Creative Commons Attribution 3.0-lisensen

Kart og sett

Utgivelsen introduserer enklere, bedre utførende måter å iterere på gjennom samlinger av verdier, med støtte for Set og Map-klasser i JavaScript.

I motsetning til matriser eller objekter, vil Sets bare godta unike verdier, med hver nye verdi lagt til settet for å forhindre at duplikater blir lagt til. Imidlertid kan et sett inneholde heltal 5 og strengen "5", ettersom konvertering av type ikke utføres når du sjekker likhet.

Denne muligheten til bare å lagre unike verdier kan være nyttig i en rekke scenarier, for eksempel hvis du ville lagre hvert ord i et stykke tekst.

For å lage et nytt sett, ring bare Sett konstruktøren.

var firstSet = nytt sett ();


Konstruktøren Set () godtar et enkelt argument, et iterbart objekt som en Array eller et kart som kan angi verdiene.

// Pass i array som inneholder 1, 2, 3 for å lage et sett som holder disse verdiene

var firstSet = nytt sett (1, 2, 3);


Det er forskjellige metoder for å samhandle med Set.

// add () lar nye verdier legges til

firstSet.add (10); // Legger til 10

firstSet.add ("Hello World"); // Legger til Hello World

firstSet.add (10); // Tilfører ikke verdi som 10 allerede i firstSet


// has () sjekker for å se om en verdi er i et sett

firstSet.has (10) // Returnerer true

firstSet.has ("Fish") // Returnerer usant


// clear () fjerner alle verdier fra et sett

firstSet.clear ();

firstSet.has (10) // Returnerer usant


// Antall verdier i et sett lagres i størrelsesegenskapen

firstSet.add (1);

firstSet.add (2);

console.log (firstSet.size) // Skriver ut 2


Kart er samlinger av nøkkel / verdipar. I motsetning til nøkkel- / verdiparene som finnes i JavaScript-objekter, der nøkkelen må være en streng, godtar Kart en hvilken som helst verdi - objekter eller primitive verdier - som en nøkkel.

JavaScript-objekter konverterer automatisk nøkler til strenger, noe som betyr at ikke-identiske, ikke-strengverdier som brukes som nøkler kan konverteres til identiske strenger. Dette kan føre til uønsket atferd, som påpekt i dette kodeeksemplet.

// element blir konvertert til en streng

var data = {},

metadata = 'element1',

metadata2 = 'element2',

element = document.getElementById ("my-div"),

element2 = document.getElementById ("my-div2");

data element = metadata;

data element2 = metadata2;


Mens intensjonen over er å bruke referanser til forskjellige HTML-elementobjekter som nøkler i dataobjektet, blir hvert elementobjekt i stedet konvertert til en identisk streng langs linjene til "Object HTMLDivElement".

Utfallet er opprettelse av et dataobjekt som har et enkelt nøkkelverdipar {"Object HTMLDivElement": "element2"}, i stedet for det tiltenkte {Reference to my-div Object: "element1", Reference to my-div2 Object : "element2"}. Denne oppførselen stammer fra at de to separate objektreferansene blir konvertert til en identisk streng, noe som får objektet til å overskrive den eksisterende metadataverdien med metadata2, i stedet for å opprette et nytt nøkkelverdipar.

Den andre vanskeligheten når du bruker JavaScript-objekter som kart, er de ekstra trinnene som trengs for å sikre at du bare itererer gjennom objektets egenskaper, og ikke egenskapene til andre objekter i prototypekjeden.

I likhet med nøkkelen, kan verdien i et kartnøkkelverdipar også være av hvilken som helst type.

Kart opprettes ved å ringe Kartkonstruktøren. For å angi verdier for kartet passerer konstruktøren et iterbart objekt med elementer som nøkkelverdipar, for eksempel en matrise.

var firstMap = nytt kart ('produkt', 'tomat', 'type', 'frukt');


Det er forskjellige metoder for å samhandle med Map.

// set () angir data på kartet

var firstMap = nytt kart ();

firstMap.set ( "navn", "Andy"); // Legger til "navn": "Andy" nøkkelverdipar til Map


// get () henter en verdi fra kartet

firstMap.get ( "navn"); // Henter Andy


// has () sjekker om det finnes en verdi på kartet

firstMap.has ("Andy"); // Returnerer sant


// Antall elementer i et kart lagres i størrelsesegenskapen

console.log (firstSet.size); // Skriver ut 1


for ... av løkker

Et annet tillegg er for ... av løkker, som gir en måte å iterere over iterable objekter, for eksempel Array, Map, Set og argumenter-objektet.

Den for ... for sløyfe itererer over matriser og sett som slik:

var arr = 1, 2, 3,

firstSet = nytt sett (4, 5, 6);

for (element av arr) {

console.log (pos); // Skriver ut 1, 2, 3

}

for (item of firstSet) {

console.log (pos); // Trykker 4, 5, 6

}


Det skiller seg fra for ... i sløyfen som brukes til å itereere over objekter, ved at den returnerer egenskapens verdier i stedet for egenskapenavn.

for (vare på arr) {

console.log (pos); // Skriver ut 0, 1, 2 - den nullbaserte indeksposisjonen for hvert element i matrisen

}


for ... av løkker kan også bruke generatormetoder når de itererer gjennom samlinger for å returnere enten bare nøkkelen, bare verdien eller en matrise med både nøkkelen og verdien.

var firstMap = nytt kart ('produkt', 'tomat', 'type', 'frukt');


// taster () -metoden

for (nøkkel til firstMap.keys ()) {

console.log (nøkkel); // Skriver ut 'produkt', 'type'

}


// verdier () -metoden

for (verdien av firstMap.values ​​()) {

console.log (value); // Skriver ut 'tomat', 'frukt

}


// items () -metoden

for (item of firstMap.items ()) {

console.log (pos); // Viser en matrise som inneholder 'produkt', 'tomat', 'type', 'frukt'

}


Chrome 38 inneholder en rekke andre funksjoner, inkludert nye matematikkfunksjoner og en programmatisk metode for å konstruere filobjekter. Besøk her for en fullstendig liste over funksjoner.

© Copyright 2021 | pepebotifarra.com