10 dalykų, kurių nežinojote, kad „JavaScript“ gali padaryti

Autorius: Randy Alexander
Kūrybos Data: 2 Balandis 2021
Atnaujinimo Data: 14 Gegužė 2024
Anonim
JavaScript Pro Tips - Code This, NOT That
Video.: JavaScript Pro Tips - Code This, NOT That

Turinys

„JavaScript“ nuėjo ilgą kelią nuo savo gimimo 1995 m. Tikrai nelengvas kelias, kupinas nesusipratimų, netinkamo naudojimo ir nežinojimo. Tačiau laikai pasikeitė, nes per pastaruosius penkerius metus „JavaScript“ sulaukė vis daugiau dėmesio. Skiriant daugiau dėmesio, daugiau kūrėjų iš tikrųjų naudoja „JavaScript“, naudoja jį įvairiems tikslams ir mėgaujasi jo grožiu. Klasikinė „Bjaurojo ančiuko“ istorija, jei manęs paklausite.

Šiame straipsnyje aptiksime 10 „JavaScript“ naudojimo atvejų, kurie skiriasi nuo įprastų „naršyklėje“.

01. Atėjo laikas dalyvauti „Hangout“

Ar prisimenate 80-ųjų viziją apie „Facetime“ panašų vaizdo ryšį?

Praėjo tik 20 metų, kol tai tapo įprasta dėl beveik visur prieinamo plačiajuosčio interneto ir intensyvaus mažos programinės įrangos, vadinamos „Skype“, naudojimo.

Turėdami „Adobe Flash“ galimybes ir „Google“ bandymą sukurti socialinį tinklą, mes jau turime vaizdo ryšio galimybes naršyklėje. Ar nebūtų šaunu turėti tuos sugebėjimus nenaudojant trečiųjų šalių papildinio, pavyzdžiui, „Flash“?


Laimei, naršyklės pardavėjai manė tą patį ir įdiegė „getUserMedia“ API į savo programinę įrangą. Tai buvo pirmas žingsnis norint pasiekti įrenginius, pvz., Fotoaparatus ar mikrofonus, tiesiogiai iš jūsų naršyklės.

Naudojant „Node.js“ kaip serverį tokios programos gale, yra nepaprastai lengva perduoti vaizdo signalą oru vienam ar daugiau klientų. Nelaimei, kol parašysite tai, tik „Chrome“ ir „Opera“ palaiko API, tačiau kiti greitai pasivys.

Švaresnis požiūris į dvipusį ryšį šiuo metu yra vienintelis „Chrome“ dalykas, vadinamas „WebRTC“. Dėl „WebRTC“ klientams suteikiama galimybė atidaryti tarpusavio ryšio kanalus, tiesiogiai sujungiant klientą su klientu.

Kad būtų linksma, patikrinkite Sindre Sorhus Photo Booth įgyvendinimą, atliktą 121 baitais!

var video = document.getElementsByTagName (’video’) [0],
navigator.getUserMedia (’video’, successCallback, errorCallback);

funkcijos sėkmėCallback (srautas) {
video.src = srautas;
}

function errorCallback (klaida) {
console.log (klaida);
}


02. $ (’šviesa’). FadeIn ();

„Arduino“ mikrovaldiklio platforma yra „A“ dėžutės „JavaScript“ naudojimo atvejo pavyzdys. Tiems iš jūsų, kurie nėra susipažinę su „Arduino“ platforma, pateikiame labai garsią citatą iš jos svetainės:

"„ Arduino "yra atviro kodo elektronikos prototipų kūrimo platforma, pagrįsta lanksčia, lengvai naudojama aparatine ir programine įranga. Ji skirta menininkams, dizaineriams, mėgėjams ir visiems, norintiems kurti interaktyvius objektus ar aplinką."

Pats „Arduino“ palaiko tik C parašytą kodą, kuris vis dar nėra didelis dalykas. Turėdamas kelias C eilutes (be to, kiti už tave atliko šį darbą), „Arduino“ gali gauti komandas per savo USB prievadą per nuoseklaus prievado protokolą.

Bet kaip galite pasiekti nuoseklųjį prievadą naudodami „JavaScript“? Aišku ne iš naršyklės.
Node.js į pagalbą!


Dėl bendruomenės gynėjo Chriso Williamso pastangų turime „Node“ nuoseklaus uosto biblioteką, kur galime siųsti duomenis per senąjį SP protokolą. Tai buvo pradinis lūžis, remiantis biblioteka, kiti žmonės pateikė abstraktesnį požiūrį į Arduino galimybes. Pavyzdžiui, „node-arduino“ ir „duino“ bibliotekos.

Karščiausia ir šauniausia biblioteka aplink JS valdomo „Arduino“ programavimo bloką yra jonny-five. Peržiūrėkite „Bocoup“ tinklaraštį, kur rasite karštų šūdų, kuriuos jie padarė naudodami „Arduino“ platformą, ir daugybę papildinių. Be to, Nicolai Onken ir Jörn Zaefferer vaizdo įrašas „JSConf“ gali suteikti jums galimybę pasukti tai, kas šiandien įmanoma su mažu kodu.

03. Jūsų rankos sukurtos naršyklei

„Minority Report“ ateities vizija (ta, kurioje jie valdo kompiuterius rankomis, o ne bjaurūs automobiliai) kasdien artėja. Didžiulis žingsnis šia linkme buvo „Microsoft“ valdiklio bandymas mažiau žaisti „Kinect“. Nuostabus žaidimo būdas, kurį pagalvoji, bet ką tai turi bendro su „JavaScript“ ?!

Su „Microsoft“ „Kinect SDK“ leidimu krūva žmonių perėjo „Kinect“ naršyklės naudojimo tiltą. Pirmiausia „ChildNodes“ vaikinai, sukūrę pilną veikiančią kinect.js biblioteką, kuri leidžia naršyklėje naudoti „Microsoft“ „Kinect“.

Aš labai rekomenduoju peržiūrėti jų demonstracines versijas ir vaizdo įrašus, tai yra sprogimas. Tačiau vienas pagrindinių kinect.js bibliotekos trūkumų yra tas, kad kliento gale turi veikti „WebSocket“ serverio programa (tai iš tikrųjų yra „Kinect“ -> C # -> JS klijai).

Keletas MIT šlovės studentų kuria sprendimą, kaip nugriauti šią sieną, vadinamą „DepthJS“,
naršyklės papildinys, leidžiantis „Kinect“ naudoti „Chrome“ ir „Safari“, net ir svetainėms, kurios nėra optimizuotos naudoti „Kinect“ bet kokia forma. Šiuo metu „DepthJS“ yra ankstyvoje kūrimo stadijoje, tačiau tikrai verta tai sekti.

04. 3D žaidimai, valdomi jūsų žaidimų pultu

Ar kada nors bandėte žaisti ne „Flash“ naršyklės žaidimą šiais laikais? Grafinės galimybės yra nuostabios, ypač kai matote tokius žaidimų klonus kaip „Quake“.

Bet žaisdami šiuos dalykus visada esate pririšti prie klaviatūros ir (dažniausiai) griozdiškos pelės. Tai yra pagrindinis trūkumas, ypač veiksmo žaidimams, jis tikrai sulaiko juos nuo naršyklės.

Ar nebūtų šaunu, jei tiesiog galėtumėte prijungti „Xbox“ valdiklį prie kompiuterio ir pradėti žaisti mėgstamą naršyklės žaidimą? Tai nebe ateities vizija, pasisveikink su „Gamepad“ API!

Jei prie stalo yra žaidimų pultas, prijunkite jį dabar ir mėgaukitės kai kuriais žaidimais, kurie jau naudojasi „Gamepad“ API. Įvesties valdiklių programavimas taip pat yra tortas, patikrinkite šį kodo fragmentą arba dar geriau, paleiskite jį patys:

div id = "gamepads"> / div>
scenarijus>
funkcija gamepadConnected (įvykis) {
var gamepads = document.getElementById ("žaidimų pultai"),
gamepadId = event.gamepad.id;

gamepads.innerHTML + = "Prijungtas žaidimų pultas (id =" + gamepadId + ")";
}

window.addEventListener („MozGamepadConnected“, gamepadConnected, false);
/ scenarijus>

Jei norite sužinoti daugiau apie naršyklių 3D galimybes, peržiūrėkite „Three.js“ ir „Jens Arps“ atvirojo kodo 3D simuliatoriaus variklį „Ascent“, pastatytą ant jo. Markas Hammilas saugokis, mums gali prireikti kito „Wing Commander“ tęsinio!

05. „Flash“ paleidimas „iPad“

Kaip atvirų standartų mėgėja ir „Apple“ gerbėja, turiu pripažinti, kad labai norėčiau padėkoti „Apple“ už tai, kad „Flash“ nedėjo „iPad“ ir „iPod“, tai iš tikrųjų pradėjo judėti atviromis technologijomis, tokiomis kaip HTML5, CSS3 ir „JavaScript“.

Kaip agentūros darbuotojas turiu pasakyti, kad tai tikrai bloga situacija mūsų klientams.
Daugelis jų turi mokėti du kartus už paprastą skelbimą ar kampaniją, kurią jie pradeda, kad interaktyvus turinys būtų rodomas senoje IE7 ar IE8 per „Flash“ ir šiuolaikinėse naršyklėse, taip pat „iDevices“ per HTML5.

Senų naršyklių funkcijų užpildymas turi savo ribas, dažniausiai pavadintas našumu. Taigi ar nėra galimybės paleisti „Flash“ tuose „Flash“ „iDevices“?

Žinoma, yra vienas, ir, žinoma, jis yra sukurtas „JavaScript“.

Istorijos dalis: 2010 m. Tobiasas Schneideris išleido nedidelę biblioteką pavadinimu „Gordon“
tai leido SWF failams paleisti tiesiai naršyklėje. Tai gana gerai veikė mažiems „Flash“ failams, pvz., Skelbimams, kuriuose buvo naudojamos tik iki 2 versijos „Flash“ funkcijos, tačiau aukštesnio lygio funkcijos visiškai nebuvo įtrauktos.

Kai Tobiasas prisijungė prie „ueberJS“ kompanijos „UXEBU“, jie pasiūlė naują idėją.
Taigi, gimė Bikešedas. Pats „Bikeshed“ yra tam tikras „JavaScript“ animacijos pagrindas, bet taip pat yra „Flash“ „JavaScript“ viskam, ko norite, kad jis būtų kompiliatorius (jis pagrįstas adapteriu, todėl galite rašyti adapterius viskam, ko norite, nors standartinė elgsena yra „Flash“ kompiliavimas į „JavaScript“). . Jis suderinamas su „Flash 10“ ir „ActionScript 3“. Pažvelkite į jo tinklalapį, kad sužinotumėte daugiau apie daugybę funkcijų, išskyrus kompiliatorių.

06. Programų rašymas išmaniajam telefonui

Vietinių programų rašymas mobiliųjų telefonų aplinkai yra akmeninis kelias. Tai prasideda nuo sprendimo, kurią platformą norite palaikyti. Ar jūsų programa turėtų veikti „iPhone“ ir „iPad“, „Android“ valdomame mobiliajame įrenginyje, „Windows Mobile“, „Blackberry“ įrenginiuose, „WebOS“ pagrįstoje plokštelėje ir pan.

Kiekviena iš šių platformų turi savo API ir dažniausiai naudoja skirtingas programavimo kalbas.
Jei išgyvenote naršyklių karus, leiskite man pasakyti, kad tai yra sunkesnė kova patekti. Kūrėjui beveik neįmanoma sukurti programos visoms šioms platformoms laiku ir biudžetu.

Taigi ką daryti? Samdyti daugiau kūrėjų? Mokestis daugiau už programas? Arba ieškokite geresnio požiūrio, kad įsitikintumėte, jog kodo bazė veikia kiekviename įrenginyje? Aš, kaip dauguma jūsų, norėčiau paskutinio požiūrio.

Tačiau kaip turėtų būti kuriamos šios programos? Ką bendro turi visos šios platformos? Galbūt žinote atsakymą, tai yra interneto naršyklė, taigi ir „JavaScript“ variklis.

Tai yra „Apache Cordova“, geriau žinomos ankstesniu pavadinimu „PhoneGap“, idėja.
„Cordova“ yra „JavaScript“ sistema, kuri apibendrina kiekvienos mobiliosios aplinkos API ir atskleidžia tvarkingą „JavaScript“ API, kad jas visas valdytų. Tai leidžia jums išlaikyti vieną kodo bazę, kurią tada sukursite ir pritaikysite skirtinguose mobiliuosiuose įrenginiuose.

Peržiūrėkite čia esančius išteklius, kad sužinotumėte, kaip naudoti „Cordova“ kuriant „kick ass“ mobilias programas, kurias sukūrėte vieną kartą ir kurios bus vykdomos visur.

07. „Ruby“ ir „Python“ paleidimas jūsų naršyklėje

Garsiosios „Firefox“ naršyklės kompanija „Mozilla“ dirba daug geekų, tai tikrai. Vienas iš jų yra „Mozilla“ tyrimų grupės inžinierius Alonas Zakai, kuris sukūrė keistą įrankį, pavadintą „Emscripten“.

„Emscripten“ leidžia jums perkelti „LLVM“ kodą, kurį galima sugeneruoti iš C / C ++ pagrįstų bibliotekų, į „JavaScript“. Tai daro kompiliuodamas bibliotekas į bitų kodą, tada paimdamas tą bitų kodą ir paversdamas jį „JavaScript“. Tvarkinga, bet ką aš iš tikrųjų galiu su tuo padaryti, galite savęs paklausti?

Turiu jums priešinį klausimą: ar kada nors girdėjote frazę „„ CoffeeScript “ir„ Prototype “naudojimas yra artimiausias, kai galite paleisti„ Ruby “naršyklėje? Ne? Nesijaudinkite, nes tai netiesa.

Naudodamiesi „Emscripten“ galite paprasčiausiai paimti „Ruby“ šaltinius, paversti juos „JavaScript“ ir „voilà“, leisti tikrąjį „Ruby“ paleisti jūsų naršyklėje! Bet tai netaikoma tik „Ruby“, pavyzdžiui, „Python“ taip pat buvo išrašytas.

Arba patikrinkite naršyklės h.264 dekoderį „Broadway“. Tai iš tikrųjų yra išrašyta C ++ biblioteka!

Eikite į „repl.it“, kad pamatytumėte kelias naršyklėje veikiančias programavimo kalbas (įskaitant „Ruby“ ir „Python“)!

08. Rašymas nuo OS nepriklausomų darbalaukio programų

Anksčiau kalbėjome apie taikymą į kelias mobilias platformas, naudojant „Apache Cordova“. Nenuostabu, kad „JavaScript“ galima naudoti ne tik mobiliųjų platformų taikymui, bet ir senam mūsų draugui - staliniam kompiuteriui.

Pirmuosius sprendimus pateikė „Appcelerator“ vaikinai su „Titanium Desktop Suite“ ir „Adobe“ plačiai naudojama „Air“ platforma.

Kaip atvirojo kodo mėgėjai, kokie esame visi, mes ieškome atviresnės ir „Node.js“ pagrįstos technologijos. Susipažinkite su app.js! „app.js“ yra atvira internetinių technologijų ir „Node.js“ pagrindu sukurta darbalaukio programų kūrimo priemonė, leidžianti mums rašyti tikras darbalaukio programas su prieiga prie failų sistemos, langų valdikliais ir dar daugiau. Mes galime pasikliauti stabiliomis „Node“ platformų API ir kurti savo programinės įrangos vartotojo sąsają su HTML ir CSS. Kaip ir populiariausi nauji dalykai šiame sąraše čia.

„app.js“ yra gana jaunas projektas, todėl šiuo metu palaiko tik „Windows“ ir „Linux“, tačiau, remiantis pašto adresų sąrašu, „Mac“ palaikymas yra kelyje.

09. Tinklalapio paleidimas

Šiais laikais jūs nieko nešokiruojate, kai pasakote jiems, kad jūsų svetainę aptarnauja „JavaScript“ pagrįstas interneto serveris. Jei pagalvotumėte prieš dvejus ar trejus metus ir pasakytumėte interneto kūrėjams lygiai tą patį, jie tikriausiai būtų juokęsi iš jūsų ar dar blogiau.

Tačiau su neįtikėtina „Node.js“ sėkme, laimei, toli gražu ne dabar. Dėl nesinchroninio pobūdžio „Node.js“ ne tik nustebina žmones, bet ir yra našus, ypač kai tenka susidurti su daugelio lygiagrečių ryšių problema. Ne tik jo našumas yra sprogimas, bet ir tikrai paprasta API pritraukia daug kūrėjų. Patikrinkime „Labas pasaulis“ pavyzdį iš „Node“ pasaulio, tai ne tik ekrano pavyzdžio spausdinimo „Sveikas pasaulis“ pavyzdys, bet ir http tinklo serveris!

var http = reikalauti (’http’);
http.createServer (funkcija (req, res) {
res.writeHead (200, {’Content-Type’: ’text / plain’});
res.end (‘Sveikas pasaulis n’);
}). klausyk (1337, ’127.0.0.1’);

Jei jūsų neapleidžia šis paprastumas, gerai, aš taip pat negaliu jums padėti.

Viena iš geriausių „Node“ populiarumo (arba ažiotažo) dalių yra ta, kad tokios didžiosios kompanijos kaip „Microsoft“ iš tikrųjų ją palaiko, ty savo „Azure Cloud Services“!

10. Svetainės ir ekrano kopijavimas

Taigi, paskutinis, bet ne mažiau svarbus dalykas, pažvelkime į projektą, kuris man asmeniškai patinka, nes leido man atlikti savo QUnit testus be galvos komandinėje eilutėje. „PhantomJS“ yra naršyklė be galvos „WebKit“, turinti tvarkingą „JavaScript“ (arba „CoffeScript“) pagrįstą API.

Tačiau „JavaScript“ ir DOM testavimas nėra vienintelis „Phantom“ naudojimo atvejis. Kas mane tikrai žavi, yra jos galimybės nukopijuoti svetaines ir leisti jums padaryti jų ekrano kopijas!
Taip, jūs skaitote teisingai, naudodamiesi „Phantom“ galite išleisti tinklalapius skirtingais grafiniais formatais ir, žinoma, tai taip pat lengva, kaip pavogti saldainius iš kūdikio.

Pažvelkime į scenarijų, kuris tiksliai tai daro:

var puslapis = naujas tinklalapis ();
page.open (’http://google.com’, function (status) {
page.render (’google.png’);
fantomas.išeiti ();
});

Tai viskas, ko jums reikia norint padaryti ekrano kopiją, ir kadangi tai yra „JavaScript“ pagrindu, taip pat galite naudoti „jQuery“ ir manipuliuoti puslapio turiniu prieš jį rodydami ekrane!

Laukti! Yra dar ...

Taigi, tikiuosi, kad jūs stebitės taip pat, kaip ir aš, kai atradau kiekvieną iš šių įrankių. Šis straipsnis tiesiog subraižė tai, kas šiais laikais įmanoma naudojant „JavaScript“. Yra daug daugiau panašių į ID, visiškai parašytus „JS Cloud9“, arba su juo atliktus aukšto saugumo dalykus (jūsų kreditinė kortelė buvo sukurta naudojant „JavaScript“).

Tikiuosi, kad jausitės įkvėptas, skirkite šiek tiek laiko ir žaiskite su kai kuriais čia paminėtais projektais, ar net geriau pasinaudokite kai kuriais iš šių įrankių ir sukurkite aplink juos naujus dalykus. Didžioji dalis čia yra atvirojo kodo ir yra kūrėjų, kurie ieško jūsų, kad padėtumėte jiems pagerinti savo darbą, net jei naudosite tik įrankius, atradę klaidas ir pranešdami apie juos.

Rekomenduojamas
Hover yra miręs, tegyvuoja hover
Skaityti Daugiau

Hover yra miręs, tegyvuoja hover

Tai pra idėjo pokalbiu prieš treju metu , kai pa irodė „iPad“.Didelio JK internetinio mažmenininko produkto direktoriu akė: „Žinoma, turė ime patai yti produktų pa irinkimo pu lapį. Norint parodyti va...
„Anima 3“ apžvalga
Skaityti Daugiau

„Anima 3“ apžvalga

„Anima 3“ ir toliau yra viena geriau ių ir ekonomiškiau ių variantų menininkam , norintiem apgyvendinti avo ceną žmonėmi . „Unreal Engine“ integracija yra šio puikau leidimo glai ta . Nauja pažangi AI...
Miesto iliustracijos išryškina geriausias pasaulio alaus daryklas
Skaityti Daugiau

Miesto iliustracijos išryškina geriausias pasaulio alaus daryklas

Jei ka nor panašau į mū ų dizainerio vadovą Londone yra, galima akyti, kad mie tai yra kupini įkvėpimo. Čia iliu tratoriu ama Brew teri rado kažką bendro u kiekviena avo mie to iliu tracija - juo e vi...