, der arbejder med intl,,,,, 46,,,,,,,,,,,,,,,, det cyber - mandag envato tuts + kurser vil blive reduceret til $3.- og' t miss.,, internationalisering - noget, man hører konstant udviklere taler om, men sjældent se folk, der i praksis er ved at blive et spark bagi med den nye ecmascript internationalisering api - grænseflade.i øjeblikket støttes i krom 24, krom til androide firefox 29, dvs. 11 og opera 15 (desværre ikke safari støtte), den nye intl namespace indeholder en række funktioner, at tilføje internationalisering til dine numre, datoer og sortering.i denne artikel vil jeg demonstrere de væsentlige elementer i intl og få dig på vej til at støtte til milliarder af mennesker på internettet, som bor uden for deres eget land.de centrale elementer,,, intl namespace omfatter tre hovedområder for funktioner:,,, formatering numre, formatering datoer, sortering, tråde, og inden for hver af disse er forskellige muligheder for at kontrollere både lokaliteter, der anvendes til formatering og formatering muligheder.som et eksempel, antallet formatter omfatter støtte til håndtering af valuta.den dato, formatter har muligheder for, hvilke dele af den dato, til at vise., lad os se på et par eksempler.,, vores ansøgning, vores første ansøgning er en simpel data, journalist.den bruger ajax at hente et datasæt, der indeholder datoer og tal.for det første: http: //, over 1:, test1. html,:,, <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title></title> <meta name="description" content=""> <meta name="viewport" content="width=device-width"> </head> <body> <h2>Current Stats</h2> <table id="stats"> <thead> <tr> <th>Date</th> <th>Visits</th> </tr> </thead> <tbody></tbody > < /tabel > < manuskript type = "tekst /javascript" src = "http: //ajax. googleapis. kom /ajax /libs /jquery /2.1.0 /jquery. min.js" > < /manuskript > < manuskript src = "app1. er" > < /manuskript > < /organ > < /html >,, gøre opmærksom på det tomt bord.det er, hvor vi vil være at dumpe vores data.lad os tage et kig på den javascript.,, liste 2:, app1. js,:,, $(dokument). klar (function() (//- tabel dom $tabel = $("# statistikker tbody"); //nu, så vi kan få data fra api - grænseflade, der er falsk btw $. getjson ("statistikker. json"). (funktion (er) (//iterate over statistikker og tilføje, at tabel for (var - jeg = 0. jeg < s.length; jeg + +) ($tabel. både ("+ s [i]. dato +". [i]. synspunkter + ");}}). ikke - funktion (e) (konsol. log (", ikke "); konsol. dir (e)})}), alle, at kodeksen gør her, er at foretage en ajax opfordring til en fil, og gøre det resultat, at de data.de data, statistikker. json, er blot en række ti hårde kodede værdier.her er en del af sagen:,, [("date": "4 /1 /2013", "holdninger": 938213} {"date": "4 /2 /2013", "holdninger": 238213},,, som du kan se, er de datoer, som er formateret. dato /måned /år, og antallet er vedtaget, som den er.det gør acceptabel:,,,,,, men bemærker, at tallene er lidt svær at læse uden formatering.lad os begynde med at føje nogle formatering til numrene.,, at tilføje nummer formatering, følgende ændringer kan ses i, app2.js og afprøvet med test2. html.først skal jeg ændre min kode til en ny funktion, numberformat:,, $tabel. både ("+ s [i]. dato +" + numberformat (s [i]. synspunkter) + "), og her er det funktion:,, funktion numberformat (n) (//lager den formatter én gang, hvis (window.intl & &!vindue. numberformatter) window.numberformatter = vindue. intl. numberformat(); hvis (vindue. numberformatter) {tilbage vindue. numberformatter. format (n)} andre {vende n), og den funktion, begynder ved kontrol, hvis intl eksisterer som en del af det, vindue, objekt.hvis det gør, vi så se, om vi har gjort formatter før.den intl, genstand, skaber en formatering objekt, som du kan genbruges, og da vi er formatering en masse tal, vi ønsker at skabe det én gang.hvilket er præcis, hvad vi gør, når vi ser, at vi har brug for.vi behøver ikke alle muligheder for nu bare at holde det enkelt.endelig, hvis der ikke var støtte til intl på alle, vi bare returnere nummer, som det er.resultatet er en betydelig forbedring med minimal arbejde:,,,,, sejt!hvordan skal vi prøve andre sprog? du kan være fristet til at tjekke din browser indstillinger.alle browsere har en forkærlighed for sprog, men desværre, at sprog, i browseren, er ikke nok.at ændre det, har virkning, hvordan browser opfører sig. ,, hvis du åbner din dev værktøjer og se på nettet anmodninger, kan man se, at en overskrift ", acceptere lanage," vil blive baseret på deres omgivelser.hvis man tilføjer franske, f.eks. (jeg formoder, at du ikke er en fransksproget person), vil du se ", en" tilføjes til denne mission.men dette indvirker ikke, intl.men du er nødt til at ændre deres operativsystem sprog og genoptage browser.det er ikke så skræmmende, som det lyder.da jeg testede var jeg bekymret over hele mit styresystem ville ændre straks.men jeg prøver, jeg var i stand til at skifte sprog, genoptage min browser, og se resten.jeg hurtigt ændret tilbage.den intl formatter funktioner giver dig mulighed for at omgå den nuværende locale og bestået en i stedet.,, jeg modificerede anvendelse, således at den endelige bruger til at angive et sprog via en ned.her er den foretagne ændring til html.(denne ændring kan findes i test3. html), < udvælge id = "langdropdown" > < alternativ værdi = "> ingen specificeret < /mulighed > < alternativ værdi =" en os "> engelsk () < /mulighed > < alternativ værdi = fr - fr -" > de franske (frankrig) < /mulighed > < alternativ værdi = "lt" > litauiske < /mulighed > < /udvælge >, de sprog, jeg valgte, er temmelig vilkårlig.næste - jeg opdaterede min ansøgning kode til at lytte til ændringer til denne ned, samt kontrol af den ønskede locale, når formatering., over 3:, app3. js,:,, funktion numberformat (n) (hvis (vindue. intl) {var lang = $("# langdropdown"). val(); hvis (lang = = = ") lang = navigator.language, var formatter = nye vindue. intl.numberformat (lang) tilbage. formatter. format (n)} andre {vende n) funktion getstats() {$. getjson (" statistikker. json "). (funktion (er) (//iterate over statistikker og tilføje, at tabel for (var - jeg = 0. jeg < s.length; jeg + +) {% tabel. både (" + s [i]. dato + "+ numberformat (s [i]. synspunkter) +");}}). ikke - funktion (e) (konsol. log (", ikke"); konsol. dir (e) ');) $(dokument). klar (function() (//- tabel dom $tabel = $("# statistikker tbody"); //bemærker ændringer til ned $("# langdropdown"). ("ændring", funktion (e) ($. empty(); getstats().}); getstats().}), fra bunden - bemærk, at jeg har tilføjet et enkelt tilfælde fører til ændringer i den ned.når en ændring er at påvise, bordet er tømt, og den funktion, getstats, er at flygte.denne nye funktion blot abstracts den ajax - kode, der er anvendt tidligere.den reelle ændringer, nu er i, numberformat,.jeg tjekker det sprog, der vælges, og hvis en af dem blev valgt, vi vedtager, at lokalerne til, numberformat, konstruktøren.bemærk, at hvis noget var ikke valgt, vi misligholdelse, navigatør. sprog.dette giver os en vej til hurtigt at afprøve forskellige steder og se, hvordan de gør numre.,,,,, at tilføje dato, formatering, nu er et perfekt tidspunkt at tage sig af den anden kolonne af data - tallene.I followed the same style as before and added a call to a new function,dateFormat,., ,$table.append(""+dateFormat(s[i].date)+""+numberFormat(s[i].views)+"");, ,And here is ,dateFormat, (You can find the code in ,app4.js,, which is used by ,test4.html,):, ,function dateFormat(n) { //Used for date display var opts = {}; opts.day = "numeric"; opts.weekday = "long"; opts.year = "numeric"; opts.month = "long"; if(window.Intl) { var lang = $("#langDropdown").val(); if(lang === "") lang = navigator.language; var formatter = new window.Intl.DateTimeFormat(lang, opts); n = new Date(n); return formatter.format(n); } else { return n; }den her er meget lig nummer formatering, men denne gang er vi udtrykkeligt, at nogle muligheder, når vi skaber formatter.de muligheder, angive både, hvilke områder der er synlige i den dato, samt hvordan de ser ud.hver del af en dato kan vises eller ej, og alle har forskellige muligheder.mulighederne omfatter:,,, hverdag, era, år, måned, dag, time, minut, for det andet, timezonename,,, en fuldstændig liste over, hvilke værdier, du kan bruge, se mdn dokumentation for, datetimeformat,, men som et eksempel, måneder kan vises som et antal eller i forskellige formelle former.hvad betyder det at skabe?her er den engelske version:,,,,, og her er det på fransk:,,,,, du kan tænke over hvad dækker placering af hvert område?så vidt jeg kan se, du ikke har kontrol over det.naturligvis kan man skabe flere formatters og kombinere dem sammen, men ved hjælp af en formatter opstilling af områder er drevet af indre logik.hvis du slukker den dag i den måned, f.eks. her er, hvad du får: april 2013 på mandag.hvorfor?helt ærligt, så har jeg ingen anelse om.endelig -, opmærksom på, at de er nødt til at gå på en date værdi, ikke en snor til formatter.kan du se, hvor jeg bruger den dato, konstruktøren i formatter at analysere min snor på date.det er en smule løs - - så husk på, når de bruger denne funktion.,, vis mig pengene, valuta, formatering er ikke en særskilt objekt, men snarere en frivillig anvendelse af antallet formatter.for den næste demo, vi har skabt en ny database, stats2. json, og tilføjede en "salg" kolonne til vores data.her er en prøve:,, ("date": "4 /1 /2013", "holdninger": 938213 "salg": 3890.21} {"date": "4 /2 /2013", "holdninger": 238213 "salg": 9890.10}, kolonnen blev tilføjet til html (, test5. html), tilføjes i javascript iterating over rækkerne af data (se app5. js,), og vedtog en ny funktion, currencyformat,.lad os se på det.,, funktion currencyformat (n) (var - vælger = {}; opts.style = "valuta". opts.currency = "." hvis (vindue. intl) {var lang = $("# langdropdown"). val(); hvis (lang = = = ") lang = navigator.language og var formatter = nye vindue. intl.numberformat (lang, vælger); tilbage formatter. format (n)} andre {vende n), viser, at antal valutaer kræver to tilladte værdier.først, en form for "valuta", og så den mønt.andre muligheder (f.eks. hvordan til at vise valutaens navn) er til det.her kommer den del, som kan rejse dig lidt op.du skal angive valutaen type. , mener de måske, hvordan pokker skal jeg finde ud af valuta - for alle de mulige værdier?de mulige værdier er baseret på spec (http://www.currency-iso.org/en/home/tables/table-a1.html) og i teorien, du kunne analysere deres xml, men du vil ikke gøre det.grunden hertil er indlysende, men jeg må ærligt sige, at jeg har glemt det oprindeligt så godt.du ønsker ikke at redisplay et bestemt nummer i et lokale specifikke valuta.hvorfor?for ti dollar er bestemt ikke det samme som ti dollars i pesos.det er ret indlysende, og jeg håber, jeg er den eneste person til at glemme., ved hjælp af kode ovenfor, kan vi se følgende resultater i de franske indbyggere.bemærk, hvordan tallene er formateret ret til locale og valuta symbol anbringes efter nummer.,,,,, sortering, med regnefinger, for vores sidste eksempel, vil vi se på, regnefinger, konstruktøren.collators tillade dig at klare tekst sortering.mens nogle sprog med en simpel fra a til z bestillingssystem andre sprog har forskellige regler.og det bliver endnu mere interessant, når man begynder at sætte accent.kan du sige, for visse, hvis ä kommer efter en?jeg ved, jeg ikke kan, regnefinger konstruktøren tager en række argumenter for at hjælpe det nøjagtigt angiver, hvordan det skal løse, men den misligholdelse, sandsynligvis vil arbejde for dig.,, for det eksempel, vi har skabt et helt nyt demo, men magen til den foregående eksempler.i test6. html, kan du se en ny tabel, for studerende.den nye kodeks vil fylde en json pakke af studerende og løse dem på klienten.den json data er blot en række navne, så jeg springer, der viser en scene.lad os se på anvendelsen logik.,, liste 4:, app6. js,:,, funktion sortere (x, y) (hvis (vindue. intl) {var lang = $("# langdropdown"). val(); hvis (lang = = = ") lang = navigator.language; tilbage vindue. intl.collator (lang). sammenligne (x, y)} andre {tilbage x.localecompare (y)}} funktion getstudents() {$. getjson (" studerende. json "). (funktion (er) (//iterate over statistikker og tilføje, at tabel s.sort (sortere) til (var - jeg = 0; jeg < s.length; jeg + +) ($tabel. både (" + s [i] + ");}}). mislykkes (funktion (e) (konsol. log (", ikke "); konsol. dir (e).})} $(dokument). klar (function() (//- tabel dom $tabel = $("# studerende tbody"); //bemærker ændringer til ned $("# langdropdown"). ("ændring", funktion (e) ($. empty(); getstudents();}); getstudents().}), som jeg sagde, er denne kodeks er ret svarer til den foregående eksempler, så fokuser på, getstudents først.det afgørende her er, s.sort (sortere).vi bruger bygget i funktion for arrays til sortering via en speciel funktion.denne funktion vil blive vedtaget to ting for at sammenligne og skal vende tilbage, - 1, 0, eller 1, repræsenterer, hvordan de to punkter skal sorteres.lad os se på sortere.,, hvis vi har en intl, genstand, vi skaber en ny regnefinger, (og igen, vi lader dig gå i et lokale), og så løber vi, sammenligne funktion.det er det.som jeg sagde, er der muligheder for at ændre den måde, tingene er løst, men vi kan bruge de misligholder sine forpligtelser.den anden er, localecompare,, som også vil forsøge at bruge samme specifikke formatering, men har (i denne form) lidt bedre støtte.vi kunne tjekke for at støtte samt tilføje en reserve til, virkelig god støtte, men jeg vil overlade det til dem, som en øvelse.,, vi har også ændret den forende til brug på svensk et sprog.det gjorde jeg, fordi det fremragende mdn dokumentation viste, at det var en god måde at se sortering i aktion.her er den engelske form af vores studerende navne:,,,,, og her er det på svensk:,,,,, konstatere, hvor ä test er ordnet på forskellig måde.- undskyld, jeg kunne ikke finde på et navn, der begyndte med ä.), pakker, alt i alt, intl, klasse indeholder nogle meget enkle måder at tilføje lokale specifikke formatering til din kode.det er helt sikkert noget, du kan finde nu, sandsynligvis i et par tusinde forskellige javascript biblioteker, men det er godt at se, at i direkte støtte til producenterne browser inden for selve sproget.den manglende programmerbare støtte er en nedtur, men forhåbentlig vil det være tilsat snart.,, tak går til den fremragende mozilla udvikler netværk for dets store intl dokumentation.
