Share
Acest tutorial vizează înțelegerea și masteringul bibliotecii MooTools. Ea face acest lucru oferind o introducere la nivel înalt a istoriei și a bazelor bibliotecii Core: unde să începeți, unde să explorați, ce să stăpânească și mai mult.
Fundamentul cadrului MooTools se află într-adevăr în modelul prototip al mostenirii JavaScript. În limbile clasice, cum ar fi C ++ sau Java, o clasă reprezintă ceva de genul unui tip de date sau ceea ce Jeff Mott a numit un "plan". Aceste planuri sunt apoi folosite la crearea obiectelor. De fapt, în aceste limbi, nimic nu este creat până când operatorul "nou" le invocă în mod explicit.
Totuși, cu JavaScript, totul este creat imediat, chiar înainte de a instantiza obiectele cu operatorul "nou". Ca un limbaj prototip, acest lucru inseamna in mod eficient nici un plan, nu "clase". În schimb, folosim câteva obiecte ca baze operaționale pentru alte obiecte. După cum a spus Douglas Crawford, exact așa JavaScript devine "mai capabil și oferă o putere mai expresivă". Hai să aruncăm o privire:
Accentsconagua
funcția Nerd (iq) this.iq = iq; this.glasses = true; this.pants = 'mare'; funcția SuperPowers () this.strongerThanLocomotive = true; this.fasterThanBullet = adevărat; this.canLeapBuildings = true; Nerd.prototype = noi SuperPowers (); Nerd.prototype.willWinGirl = funcție (fierbinte) if (this.iq> (hotness * 20) || this.strongerThanLocomotive) console.log ('poate'); altceva console.log ('nope'); nou Nerd (140) .willWinGirl (10); // log-uri "poate" Exemplul de mai sus este de fapt un mijloc destul de popular de a introduce conceptul de prototip. Cu toate acestea, dacă găsiți acest lucru un pic prea abstract, poate că o modalitate mai bună de a aborda acest lucru ar fi să vă uitați la prototiparea unui constructor JavaScript nativ, cum ar fi String, Array etc. De exemplu:
Array.prototype.eachhhh = funcția (fn) pentru (var i = 0, l = această lungime; i < l; i++) fn(this[i]); [0,1,2,3].eachhhh(function(item) console.log(item); // logs: 0,1,2,3 );
Prototyping modele de cod simplu, cum ar fi bucla de mai sus poate salva de tone de timp atunci când lucrează la proiecte mai mari. Când utilizați cadrul MooTools, este important să începeți să vă gândiți la fiecare constructor ca fiind extensibil; acest lucru vă va salva timpul în jos pe linie și va face codul mult mai flexibil. În plus, tocmai această metodă de moștenire este nucleul MooTools-ului, și folosirea acestei puteri de cadru înseamnă a face uz de prototipuri. Desigur, ce MooTools face este de a face acest proces mult mai ușor pentru a vă accesa și de a profita de, dar vom ajunge la exact cum face acest lucru mai târziu în articol.
Wayyyy în 2006, a fost Chris Heilman deja devenind fanatic cu privire la sintaxa literală a obiectului ... vorbind despre pâine tăiată și alte nebuni. În orice caz, din acest motiv nu voi sta prea mult la acest subiect, în schimb vă presupun că ați întâlnit această sintaxă într-un anumit moment sau că atleast îl puteți înțelege prin exemplul simplu de mai jos.
// aceasta nu este obiect literal notație var variabilă1 = null; var variable2 = false; (variabila2: false, init: function () , function1 () // some code function2 () funcția () // un anumit cod, funcția2: funcție () // un anumit cod
Ca majoritatea limbajelor de programare, în JavaScript există un număr mare de preferințe stilistice și "cele mai bune practici". Când lucrați cu MooTools, veți găsi acolo că nu există nici o lipsă a acestora, inclusiv: nu excesiv de înlănțuire, valorificarea numelor de clasă, separarea virgulelor de declarațiile variabilelor, etc ... Cu toate acestea, dintre acestea, notația literală obiect este probabil cea mai importantă pentru înțelegerea nu numai modul în care este structurat cadrul MooTools în sine, dar de fapt cum să profitați de acest cadru în dezvoltarea propriului cod. Vom dezvolta această idee mai departe pe parcursul restului acestui articol și după cum veți vedea, toate exemplele de la acest punct înainte vor beneficia de această sintaxă.
Dacă JavaScript nu are "clase", atunci de ce există toată această hype în jurul motolilor și cursurilor? În luna mai a anului trecut, Aaron Newton a publicat o piesă comparativă excelentă pe jQuery și MooTools. Printre altele, el a adresat exact această întrebare de clase într-un mod foarte succint: "În ciuda numelui său, funcția de clasă MooTools nu este într-adevăr o clasă și nici nu o creează. reaminti ai cursuri într-un limbaj de programare mai tradițional, dar într-adevăr Class este vorba despre obiecte și moșteniri prototip. "
Pe măsură ce Aaron continuă cu detaliile, cadrul MooTools impune modalități puternice și, în cele din urmă, simple de organizare și structurare a codului, modalități care sunt elegante, dar și familiar, și nu doar semantic, ci în capacitatea lor de a se comporta în modelele clasice de design. De fapt, veți găsi utilizarea "clase" în baza de coduri deschide codul dvs. la multe modele de programare puternice: mediatorul, mixinul, etc ...
O clasă MooTools simplă va arăta cam așa (observați sintaxa):
var YourClass = clasa nouă (variable1: false, initialize: function () this.toggleVariable ();, toggleVariable: function () this.variable1 =! variable1;); var yourClassInstance = noua YourClass (); yourClassInstance.toggleVariable (); // this.variable1 == false
Nu prea complicat, nu? După ce începeți să vă structurați codul în astfel de clase, veți descoperi că depozitul de coduri va deveni nu numai mult mai organizat și mai ușor de gestionat, ci mai degrabă mai mic!
Deci, exact cum devine mai mică? Revenind la modelul de moștenire prototip JavaScript și modul în care se referă la constructorul de clasă, MooTools ne oferă Extensii și Implemente. Ca proprietăți, ambele sunt fundamentale pentru producerea subclaselor MooTools și pentru a face acest intreg mizerie protyping un pic mai intuitiv. La un nivel înalt, Extensiile oferă accesul la subclasa la toate metodele din clasa de bază, unde metode și proprietăți cu același nume sunt suprascrise (nu vă faceți griji, ele sunt încă accesibile prin metoda parent ()). Similar cu Extensiile, Implements adoptă proprietăți dintr-una sau mai multe alte clase, dar fără modelul de moștenire.
Luați în considerare în scurt timp pluginul de încărcare al lui Digitarald pentru Mootools. În acest program, Harald definește mai multe clase, dintre care unul se numește clasa "Fișier". Fișierul găzduiește funcționalitatea de bază pe care un obiect de fișier trebuie să o interfețeze cu programul său de încărcare și din acest motiv este perfect pentru a fi extins; s-ar putea crea o subclasă "Fișier imagine", o subclasă "Fișier text" etc. Prin modelarea codului în acest fel, vă puteți construi codul în loc să ieșiți. Luați în considerare exemplul de mai jos pentru utilizarea extensiilor:
var YourSubClass = clasa nouă (Extends: YourClass, // aici extindeți "YourClass" din exemplul nostru precedent variable2: false, initialize: function () this.parent (); bass Class "YourClass", // aici suprascriem funcția Variable variabila a "YourClass" cu o functie noua toggleVariable: function () this.variable1 =! variable1; // nota variabila1 din "YourClass" este in continuare accesibila in YourSubClass this.variable2 =! This.variable1;);
Cea mai obișnuită lucrare de utilizare pe care o găsesc cu Implements include fie constructorul de evenimente, fie constructorul de opțiuni din clasele mele. După cum sugerează și numele, implementarea evenimentelor permite atașarea și tragerea de evenimente personalizate pe obiect, cum ar fi onComplete, onFailure, onSuccess, onAnything. Acest nivel de abstractizare devine deosebit de util atunci când începeți să vă partajați codul în mai multe proiecte, unde evenimentele se comportă ca mediatori între proiectul dvs. curent și pluginurile dvs. În acest fel, puteți să scăpați în sfârșit de acele relații urâte unu-la-unu, legate în pluginurile dvs. De exemplu:
var YourSubClass = Clasa nouă (Implements: Events, // aici îi spunem MooTools să implementeze Evenimentele din clasa noastră sub (acest efect obișnuit nu va avea efectul "YourClass") Extinde: YourClass, variable2: false, initialize: function () this. ()), toggleVariable: function () this.variable1 =! variabila1; this.variable2 =! this.variable1; // afterToggle () - apelarea "afterToggle" ar fi facut aceasta functie o necesara includere a YourSubClass .fireEvent ('toggled'); // în schimb, un eveniment personalizat este declanșat numit "toggled"); var yourSubClassInstance = YourSubClass nou (); var afterToggle = funcția () alert ('am fost toclai!'); ; // aici adăugăm un ascultător pentru evenimentul personalizat, la fel ca orice alt eveniment al tăuSubClassInstance.addEvent ('toggled', afterToggle); Pe lângă evenimente, de multe ori veți dori să implementați opțiunile MooTools. Această clasă de utilitare vă permite să automatizați setarea unei liste de proprietăți opționale care să fie setate pe o instanță a clasei dvs. Din nou, acest lucru poate fi foarte util atunci când scrieți pluginuri pentru diferite proiecte, permițând personalizarea circumstanțială a anumitor proprietăți ale obiectului. Luați în considerare exemplul de mai jos:
var YourSubClass = clasa nouă (// Unul dintre multe lucruri interesante despre proprietățile implementează este faptul că nu are o matrice. Implementează: [Evenimente, Opțiuni], // Aici include opțiunile Extends: YourClass, // opțiunile sunt setate dacă invocatorul nu specifica in mod explicit o optiune: variable2: false, initialize: function (options) this.setOptions (options); // seta optiunile this.parent ();, toggleVariable: this.variable1 =! variabila1; this.options.variable2 =! this.variable1; this.fireEvent ('toggled');); // aceasta va începe clasa cu variable2 = true. var yourSubClassInstance = YourSubClass nou (variable2: true); 
Pe măsură ce programele dvs. devin mai complexe, o înțelegere corectă a domeniului de aplicare devine neprețuită. Domeniul de aplicare este modul în care variabilele din JavaScript se referă la un singur punct de execuție - există variabile globale, care sunt variabile care pot fi menționate de oriunde din document și care ocupă cel mai mic nivel de execuție, variabilele locale, variabile limitate la conținând funcții sau închideri și, în final, referințele de sine, "acest" cuvânt cheie, care sunt modalitatea de a face referire la contextul actual al punctului de execuție al JavaScript.
var global = adevărat; // variabila globală; var aFunction = funcție () var local = true; // variabila locala $ ('butonul') addEvent ('click', function () this.addClass ('clicked'); // auto reference); Când se face referire la o variabilă din codul dvs., JavaScript rulează din poziția de execuție curentă prin toate nivelurile accesibile ale variabilelor până când localizează primul și cel mai apropiat eveniment de potrivire pozitivă. Acest comportament este adesea mai puțin decât de dorit, în special atunci când se ocupă de evenimente în interiorul literalurilor de obiecte, deoarece ele își așează propriile referințe de sine. Deseori, dezvoltatorii se bazează pe ceea ce se numește "închideri lexicale" pentru a eluda astfel de probleme, stocând referința proprie într-o variabilă cu un nume diferit. Cu toate acestea, MooTools oferă o metodă alternativă de a realiza acest lucru prin metoda lor de legare (), care nu este numai mai curată, ci și mult mai elegantă. Luați în considerare exemplul de mai jos:
... addEvents: function () $ ('button') addEvent ('click', function () // binding inlocuieste referinta auto actuala cu aceea a obiectului trecut in this.toggleVariable )); // aici legăm acest lucru la manipulatorul evenimentului de clic, comutaVariable: funcția () // code, ... 
În exemplul de mai sus, am vizat un element deja existent în DOM și am adăugat un ascultător al evenimentului. Cu toate acestea, nu este neobișnuit astăzi că veți vedea întreaga aplicație web să își încarce dinamic conținutul folosind JavaScript. Odată cu evoluția JSON, capacitatea de a genera marcare în zbor a devenit tot mai necesară. Introduceți constructorul elementului MooTools. Noul lucru despre acest constructor este că menține lizibilitatea acestuia, în ciuda capacității sale mari de proprietăți opționale (din nou, datorită notației literale a obiectului!). Elementul acceptă un obiect de evenimente, un obiect de stiluri, plus orice proprietăți individuale, cum ar fi clasa, id, src, href, titlu etc. De asemenea, este încărcat cu o multitudine de metode, lista completă fiind disponibilă din documentele MooTools aici. Mai jos este un exemplu simplu de a începe:
var el = element nou ('div', id: 'buton', 'html': 'hellloooo', stiluri: display: 'block', position: 'relative', float: left; : funcția () // codul dvs.); 
Acum, dacă aveți elementul dvs. dinamic, nu ar fi minunat să îl inserați în DOM? MooTools oferă o listă de metode cu adevărat la îndemână, care include:
Dintre aceste metode, am descoperit capacitatea adoptivei de a accepta o serie de elemente absolut indispensabile, mai ales atunci când structurarea unor cantități mai mari de marcare dinamică. Luați în considerare exemplul de mai jos:
var el = element nou ('div', id: 'buton', stiluri: display: 'block', position: 'relative', float: left; codul) adopta (this.createSpan (), // returneaza un element care poate fi ulterior suprascris de un nou element de subclasa ('a', href: 'http://somewebsite.com'). (nou element ('puternic', 'html': 'lume')))) .inject ($ (document.body), 'top'); Exemplul de mai sus face o abordare cu adevărat orientată spre obiect a manipulării DOM. Când devii ninja Super MooTools, jedi, junky, nerd, poți folosi metoda de mai sus pentru a începe să extragi funcții care returnează elemente sau elemente de elemente, făcând posibil ca subclasele tale să vizeze metode specifice în modificarea afișajului. Minunat.
JavaScript Object Notation sau JSON este formatul ușor de schimb de date pe care îl iubește toată lumea (mai ales după ce a lucrat cu XML). Lucrul cel mai bun despre JSON este, desigur, că structura este recunoscută în mod natural de JavaScript și că multe site-uri mari își deschid datele către public prin intermediul API-urilor, într-adevăr nu există niciun motiv pentru care nu ar trebui să investești timpul pentru a vă familiariza cu aceasta. Nu mai este un cosmar încrucișat în browser, indiferent dacă împingeți date către un serviciu back-end sau dacă solicitați un alt lot de tweets de la twitter, constructorul MooTools Request face JSON și JSONP incredibil de simplu. Funcționează cu mai mulți ascultători de evenimente și recent un timeout, ceea ce este absolut necesar odată ce începeți să ajungeți în JSONP. (Care ar trebui să fie! Este atât de distractiv.) Iată un exemplu simplu:
var JSONRequest = cerere new.JSON (url: "http://yoursite.com/tellMeSomething.php", onFailure: function () alert ('oh nooo!'); ('hooray !:' + răspuns.result);); 
La un nivel înalt, constructorul Fx vă permite să modificați orice proprietate CSS a unui element HTML, care acceptă un singur element și o serie de proprietăți opționale (durată, tip de tranziție etc.) pentru a crea efecte animate netede ale culorilor, diapozitive , scrolls etc. Mai mult, constructorul Fx este pe deplin compatibil cu ecuațiile Easing ale lui Robert Penner, care sunt o modalitate excelentă de a adăuga o notă de unicitate la tranzițiile voastre cum ar fi bounce, elastic, păcat etc..
Dacă sunteți "hardcore" puteți realiza toate efectele de animație folosind fie Fx.Tween (animație unică css stil) sau Fx.Morph (mai multe animații de stil simultan). Desigur, dincolo de acestea există Fx.Slide, Fx.Scroll, Fx.Accordian, etc. Iată un exemplu simplu folosind Fx.Tween:
var myFx = nou Fx.Tween ($ ('buton')); myFx.start ('background-color', '# 000', '# f00'); // aceasta tweens culoarea de fundal a elementului de buton. Dacă sunteți pe moarte pentru a obține mai adânc în acest subiect, a verifica afară Open's tutorial fx pentru o introducere destul de cuprinzătoare la constructor.
Inițial apărut în încărcarea fantezie a lui Digitarald, obiectul Swiff permite JavaScript-ului paginii dvs. să comunice cu Flash. Acest lucru face mult mai ușor să interacționați cu funcțiile unice ale Flash, cum ar fi funcțiile de accesare video, sunet, streaming și clipboard. Mai mult, Swiff vă permite să transmiteți valori și să manipulați filmul Flash folosind convențiile pe care le cunoașteți din JavaScript și Mootools. Integrarea blițului în acest mod este utilă în special atunci când începem să facem pași pentru a oferi HTML5 ca o îmbunătățire progresivă, în cazul în care, făcând ca utilizatorul să nu aibă pluginul flash, Swiff poate fi folosit pentru a controla audio sau video pe browserele mai vechi. Între timp, verificați exemplul simplu de mai jos:
var flashObject = Swiff nou ('sounds.swf', id: 'mySoundManager', lățime: 1, înălțime: 1, vars: myVariable: true, // pass variables in flash la încărcare, callbacks: evenimente personalizate din obiectul flash someEvent: function () // code); Swiff.remote (flashObject, 'playMySound') // apelează funcția "playMySound" din interiorul blițului 
Acum, cu peste cincisprezece membri care contribuie la depozitul de plugin-uri oficiale și peste o sută de pluginuri neoficiale deja în Forge, nu este deloc surprinzător faptul că "Comunitatea" este ceea ce echipa MooTools ne-a dorit ca dezvoltatori pentru a le elimina din 2009. Într-adevăr, cadru, iar acum cu Forge, avem un loc minunat să ne întâlnim și să începem să împărtășim idei. Veți găsi David Walsh, Aaron Newton, 3n și mulți alții care contribuie activ la codul uimitor și facilitează un mediu capabil atât de inspirație, cât și de utilitate. În cele din urmă, modul cel mai util pentru a ridica cadrul MooTools este prin angajarea cu dezvoltatorii din jurul dvs. și, în cele din urmă, înțelegerea a ceea ce lucrează și a ceea ce se întâmplă.
Știați că puteți câștiga până la 600 USD pentru a scrie un tutorial PLUS și / sau pentru noi? Căutăm tutoriale detaliate și bine scrise despre HTML, CSS, PHP și JavaScript. Dacă sunteți în măsură, contactați Jeffrey la [email protected].
Rețineți că o compensație reală va depinde de calitatea tutorialului final și a scenariului.
