Share
Deze tutorial gaat over het begrijpen en beheersen van de MooTools-bibliotheek. Het doet dit door een introductie op hoog niveau te bieden op de geschiedenis en de basis van de Core-bibliotheek: waar te beginnen, waar te ontdekken, wat te beheersen en meer.
De basis van het MooTools-framework zit echt in het prototypische overervingsmodel van JavaScript. In klassieke talen, zoals C ++ of Java, vertegenwoordigt een klasse iets als een gegevenstype of wat Jeff Mott een 'blauwdruk' noemde. Deze blauwdrukken worden vervolgens gebruikt bij het maken van objecten. In deze talen wordt feitelijk niets gemaakt totdat de 'nieuwe' operator ze expliciet aanroept.
Met JavaScript wordt echter alles onmiddellijk gemaakt, zelfs voordat u de objecten met de "nieuwe" operator instantiseert. Als voorbeeldtaal betekent dit in feite geen blauwdrukken, geen lessen". In plaats daarvan gebruiken we sommige objecten als volledig operationele basis voor andere objecten. Zoals Douglas Crawford al zei, wordt JavaScript op deze manier 'beter in staat en biedt het meer expressieve kracht'. Laten we kijken:
Accentsconagua
functie Nerd (iq) this.iq = iq; this.glasses = true; this.pants = 'high'; function SuperPowers () this.strongerThanLocomotive = true; this.fasterThanBullet = true; this.canLeapBuildings = true; Nerd.prototype = nieuwe SuperPowers (); Nerd.prototype.willWinGirl = function (hotness) if (this.iq> (hotness * 20) || this.strongerThanLocomotive) console.log ('maybe'); else console.log ('nope'); nieuwe Nerd (140) .willWinGirl (10); // logs "misschien" Het bovenstaande voorbeeld is eigenlijk een vrij populair middel om het concept van prototyping te introduceren. Als u dit echter een beetje te abstract vindt, is een betere manier om dit te benaderen wellicht om te kijken naar prototypes van een native JavaScript-constructor zoals String, Array, enzovoort. Bijvoorbeeld:
Array.prototype.eachhhh = function (fn) for (var i = 0, l = this.length; i < l; i++) fn(this[i]); [0,1,2,3].eachhhh(function(item) console.log(item); // logs: 0,1,2,3 );
Prototypen van eenvoudige codepatronen zoals de for-lus hierboven kan veel tijd besparen bij het werken aan grotere projecten. Bij het gebruik van het MooTools-framework is het belangrijk om te beginnen denken aan elke constructor als uitbreidbaar; dit gaat u tijd besparen en uw code veel flexibeler maken. Bovendien is juist deze vererving de kern van MooTools, en het benutten van deze kaders macht betekent gebruik maken van prototyping. Natuurlijk, wat MooTools doet maakt dit proces een stuk eenvoudiger voor u om er toegang toe te krijgen en er gebruik van te maken, maar we zullen later ingaan op hoe het dit later in het artikel doet.
Wayyyy terug in 2006, Chris Heilman was nu al fanatiek worden over het object letterlijke syntaxis ... praten over gesneden brood en andere gekte. In elk geval, om precies die reden, zal ik niet te veel over dit onderwerp nadenken, in plaats daarvan ga ik ervan uit dat je deze syntaxis op een gegeven moment bent tegengekomen of tenminste kan begrijpen door het eenvoudige voorbeeld hieronder.
// dit is geen object letterlijke notatie var variable1 = null; var variable2 = false; function1 () // some code function2 () // some code // het bovenstaande wordt de letterlijke objectnotatie hieronder ... var SomeVariableName = variable1: null, variable2: false, init: function () , function1: function () // some code, function2: function () // some code
Net als de meeste programmeertalen bestaan er in JavaScript een groot aantal stilistische voorkeuren en 'beste werkwijzen'. Bij het werken met MooTools zul je merken dat er geen tekort is aan deze, waaronder: niet overdreven ketenen, je klassenamen, komma's die variabele verklaringen verdelen, etc ... kapitaliseren. Echter, onder deze is de letterlijke notatie van objecten misschien het meest fundamenteel om te begrijpen, niet alleen de manier waarop het MooTools-framework zelf is gestructureerd, maar eigenlijk hoe je van dit framework kunt profiteren bij het ontwikkelen van je eigen code. We zullen dit idee verder ontwikkelen in de rest van dit artikel en zoals u zult zien, zullen alle voorbeelden vanaf dit punt profiteren van deze syntaxis.
Als JavaScript geen "klassen" heeft, waarom is er dan al deze hype rond Motools en klassen? In mei vorig jaar publiceerde Aaron Newton een uitstekend vergelijkend stuk over jQuery en MooTools. Hij richtte zich onder andere juist op deze vraag van de lessen op een zeer beknopte manier: "Ondanks zijn naam is de MooTools Class-functie niet echt een klasse en creëert hij deze ook niet. herinneren jij van klassen in een meer traditionele programmeertaal, maar in werkelijkheid gaat het bij Class allemaal om objecten en prototypische overerving. "
Zoals Aaron gedetailleerd beschrijft, dringt het MooTools-framework op tot krachtige en uiteindelijk eenvoudige manieren om uw code te ordenen en te structureren, manieren die elegant zijn, maar ook vertrouwd, en niet alleen semantisch, maar in hun vermogen om zich te gedragen in klassieke ontwerppatronen. In feite zul je merken dat het gebruik van "klassen" in je codebasis je code opent voor vele krachtige programmeerpatronen: de bemiddelaar, de mixin, enz ...
Een eenvoudige MooTools-klasse ziet er ongeveer zo uit (let op de syntaxis):
var YourClass = new Class (variable1: false, initialize: function () this.toggleVariable ();, toggleVariable: function () this.variable1 =! variable1;); var yourClassInstance = nieuw YourClass (); yourClassInstance.toggleVariable (); // this.variable1 == false
Niet te ingewikkeld, toch? Zodra u begint met het structureren van uw code in klassen zoals deze, zult u merken dat uw coderepository niet alleen veel meer georganiseerd en beheersbaar zal zijn, maar in feite kleiner!
Dus hoe wordt het precies kleiner? Terugkerend naar het prototypische overervingsmodel van JavaScript en hoe het zich verhoudt tot de Class-constructor, biedt MooTools ons Extends en Implements. Als eigenschappen zijn beide van fundamenteel belang voor de productie van je MooTools-subklassen en maken deze hele prullenbak een beetje meer intuïtief. Op een hoog niveau geeft Extends uw subklasse toegang tot alle methoden van de basisklasse, waar methoden en eigenschappen van dezelfde naam worden overschreven (geen zorgen, ze zijn nog steeds toegankelijk via de methode parent ()). Gelijkaardig aan Extends, implementeert Werktuigen eigenschappen van een of meer andere klassen, maar zonder het overervingsmodel.
Overweeg kort de elegante uploadplug-in van Digitarald voor Mootools. In dit programma definieert Harald verschillende klassen, waaronder de klasse 'File'. Bestand bevat de kernfunctionaliteit die een bestandsobject nodig heeft om te communiceren met zijn uploadprogramma en om deze reden is het perfect om te worden uitgebreid; men zou een "Image File" -subklasse kunnen maken, een "Tekstbestand" -subklasse, enz. Door uw code op deze manier te modelleren, kunt u uw code bouwen in plaats van uit. Bekijk het onderstaande voorbeeld voor het gebruik van Extends:
var YourSubClass = new Class (Extends: YourClass, // hier breiden we "YourClass" uit van onze vorige voorbeeld variable2: false, initialize: function () this.parent (); // dit roept de initialize-functie op uit de bas Klasse "YourClass", // hier overschrijven we de toggle Variabele functie van "YourClass" met een nieuwe functie toggleVariable: function () this.variable1 =! variable1; // notice variable1 from "YourClass" is nog steeds toegankelijk in YourSubClass this.variable2 =! This.variable1;);
De meest voorkomende usecase die ik vind met Implements is inclusief de constructor Events of de constructor Options in mijn lessen. Zoals de naam al doet vermoeden, maakt het implementeren van gebeurtenissen het mogelijk om aangepaste gebeurtenissen aan uw object te koppelen en af te vuren, zoals bij Voltooid, OnFailure, OnSuccess en Alles. Dit niveau van abstractie wordt vooral nuttig wanneer u begint met het delen van uw code in verschillende projecten, waar gebeurtenissen zich gedragen als bemiddelaars tussen uw huidige project en uw plug-ins. Op deze manier kunt u eindelijk ontsnappen aan die vervelende één-op-één, gebonden relaties in uw plug-ins. Bijvoorbeeld:
var YourSubClass = nieuwe klasse (implementaties: evenementen, // hier vertellen we MooTools om evenementen in onze subklasse te implementeren (dit zal niet de bas "YourClass" beïnvloeden) Breidt uit: YourClass, variable2: false, initialize: function () this. parent ();, toggleVariable: function () this.variable1 =! variable1; this.variable2 =! this.variable1; // afterToggle () - het oproepen van "afterToggle" zou deze functie noodzakelijk gemaakt hebben, waaronder van YourSubClass this .fireEvent ('toggled'); // in plaats daarvan wordt een aangepaste gebeurtenis geactiveerd met de naam "toggled"); var yourSubClassInstance = nieuw YourSubClass (); var afterToggle = function () alert ('ik ben zojuist omgewisseld!'); ; // hier voegen we een luisteraar toe voor de aangepaste gebeurtenis, net zoals we elke andere gebeurtenis yourSubClassInstance.addEvent ('toggled', afterToggle); Naast Events, wil je vaak MooTools-opties implementeren. Met deze utiliteitsklasse kunt u de instelling automatiseren van een lijst met optionele eigenschappen die moet worden ingesteld voor een instantie van uw klasse. Nogmaals, dit kan erg handig zijn bij het schrijven van plug-ins voor verschillende projecten, waardoor het mogelijk is bepaalde eigenschappen van uw object indirect aan te passen. Bekijk het onderstaande voorbeeld:
var YourSubClass = new Class (// Een van de vele toffe dingen aan de eigenschap implements is dat het behalve een array wordt gebruikt. Implements: [Events, Options], // Hier nemen we Opties Extends: YourClass, // opties zijn ingesteld als de invoker geeft niet expliciet een waarde aan opties: variable2: false, initialize: function (options) this.setOptions (options); // stelt de opties this.parent (); in, toggleVariable: function () this.variable1 =! variable1; this.options.variable2 =! this.variable1; this.fireEvent ('toggled');); // dit start de klasse met variable2 = true. var yourSubClassInstance = nieuw YourSubClass (variable2: true); 
Naarmate uw programma's complexer worden, wordt een goed begrip van de reikwijdte van onschatbare waarde. Scope is de manier waarop variabelen in JavaScript zich verhouden tot een enkel uitvoeringspunt - er zijn globale variabelen, variabelen waarnaar overal in het document kan worden verwezen en die het laagste uitvoerende niveau, lokale variabelen, bezetten, variabelen die beperkt zijn tot hun onmiddellijke met functies of sluitingen en ten slotte, zelfverwijzingen, het "dit" sleutelwoord, de manier van JavaScript om te verwijzen naar de context van het huidige punt van uitvoering.
var global = true; //globale variabele; var aFunction = function () var local = true; // local variable $ ('button'). addEvent ('click', function () this.addClass ('clicked'); // self reference); Wanneer er naar een variabele in uw code wordt verwezen, springt JavaScript vanuit de huidige uitvoerende positie door alle toegankelijke niveaus van variabelen totdat het de eerste en meest nabije occurrence van een positieve match vindt. Dit gedrag is vaak minder dan wenselijk, vooral als het gaat om gebeurtenissen binnen objectliteralen omdat ze hun eigen zelfreferenties bevatten. Vaak vertrouwen ontwikkelaars op zogenaamde "lexicale sluitingen" om dit soort problemen te omzeilen, waarbij de zelfreferentie wordt opgeslagen in een variabele van een andere naam. MooTools biedt echter een alternatief middel om dit te bereiken via hun methode bind (), die niet alleen schoner is, maar ook veel eleganter. Bekijk het onderstaande voorbeeld:
... addEvents: function () $ ('button'). AddEvent ('click', function () // binding vervangt de huidige zelfreferentie voor die van het object dat is doorgegeven in this.toggleVariable (); .bind (dit )); // hier binden we dit aan de gebeurtenishandler click, toggleVariable: function () // code, ... 
In het bovenstaande voorbeeld hebben we een al bestaand element in de DOM getarget en daaraan een gebeurtenislistener toegevoegd. Het is echter niet ongebruikelijk dat u hele web-apps hun inhoud dynamisch zult laden met behulp van JavaScript. Met de evolutie van JSON is het steeds noodzakelijker geworden om markup on the fly te genereren. Voer de constructor MooTools Element in. Het nieuwe aan deze constructor is dat het zijn leesbaarheid behoudt, ondanks zijn grote capaciteit voor optionele eigenschappen (nogmaals, dankzij de letterlijke notatie van het object!). Element accepteert een events-object, een styles-object, plus eventuele individuele eigenschappen zoals class, id, src, href, title, etc. Dat gezegd hebbende, het is ook geladen met een massa methoden, waarvan de volledige lijst beschikbaar is in de MooTools-documenten hier. Hieronder ziet u een eenvoudig voorbeeld van hoe u aan de slag kunt gaan:
var el = nieuw Element ('div', id: 'button', 'html': 'hellloooo', stijlen: display: 'block', position: 'relative', float: 'left, events: click : function () // uw code); 
Nu je je dynamische element hebt, zou het niet geweldig zijn om het in te voegen in de DOM? MooTools biedt daarvoor een hele handige lijst met methoden, waaronder:
Van deze methoden heb ik ontdekt dat het vermogen van adoptie om een reeks elementen te accepteren absoluut onmisbaar is, vooral wanneer het gaat om het structureren van grotere hoeveelheden dynamische markup. Bekijk het onderstaande voorbeeld:
var el = nieuw Element ('div', id: 'button', stijlen: display: 'block', position: 'relative', float: 'left, events: click: function () // jouw code). adopteren (this.createSpan (), // geeft een element terug dat later kan worden overschreven door een subklasse nieuw element ('a', href: 'http://somewebsite.com'). (nieuw element ('strong', 'html': 'world'))) .inject ($ (document.body), 'top'); Het bovenstaande voorbeeld zorgt voor een echt objectgeoriënteerde benadering van DOM-manipulatie. Wanneer je een super MooTools ninja, jedi, junky, nerd wordt, kun je de bovenstaande methode gebruiken om functies te abstraheren die elementen of arrays van elementen retourneren, waardoor je subklassen specifieke methoden kunnen richten om je weergave aan te passen. Geweldig.
JavaScript Object Notation of JSON is het lichtgewicht data-uitwisselingsformaat waar iedereen van houdt (vooral na het werken met XML). Het mooie van JSON is natuurlijk dat de structuur native wordt herkend door JavaScript, en met veel grote sites die hun gegevens via API's beschikbaar maken voor het publiek, is er echt geen reden waarom je niet de tijd zou moeten investeren om er vertrouwd mee te raken. Geen cross-browser-nachtmerrie meer, of u nu gegevens naar een back-end-service pusht of een andere batch tweets via twitter aanvraagt, de constructor van MooTools Request maakt JSON en JSONP ongelooflijk eenvoudig. Het werkt met verschillende gebeurtenislisteners en heeft onlangs een time-out gehad, wat volledig nodig is als je eenmaal begint aan JSONP. (Wat je zou moeten doen! Het is zo leuk.) Hier is een eenvoudig voorbeeld:
var JSONRequest = new Request.JSON (url: "http://yoursite.com/tellMeSomething.php", onFailure: function () alert ('oh nooo!');, onSuccess: function (response) alert ('hoera !:' + antwoordresultaat);); 
Op een hoog niveau kunt u met de Fx-constructor elke CSS-eigenschap van een HTML-element wijzigen, die zelf een enkel element en een reeks optionele eigenschappen (duur, overgangstype, enz.) Accepteert om vloeiende animatie-effecten van kleuren, dia's te maken , scrollt, etc. Wat meer is, de Fx-constructor is volledig compatibel met Robert Penner's Easing-vergelijkingen, die een geweldige manier zijn om een vleugje uniekheid aan je overgangen toe te voegen, zoals stuiteren, elastiek, zonde, enz..
Als je 'hardcore' bent, kun je eigenlijk alle animatie-effecten bereiken met Fx.Tween (single css style animation) of Fx.Morph (meerdere gelijktijdige stijlanimaties). Natuurlijk, behalve deze is er Fx.Slide, Fx.Scroll, Fx.Accordian, etc. Hier is een eenvoudig voorbeeld met Fx.Tween:
var myFx = new Fx.Tween ($ ('button')); myFx.start ('achtergrondkleur', '# 000', '# f00'); // dit tweens de achtergrondkleur van het knopelement. Als je er op uit bent om dieper op dit onderwerp in te gaan, kijk dan in Overweeg Open fx tutorial voor een vrij uitgebreide introductie tot de constructor.
Oorspronkelijk te vinden in de mooie upload van Digitarald, staat het Swiff-object het JavaScript van uw pagina toe om te communiceren met Flash. Dit maakt het aanzienlijk eenvoudiger om te communiceren met de unieke functionaliteit van Flash, zoals video-, geluids-, bestandsstreaming- en klembord-toegang tot functies. Bovendien kun je met Swiff waarden doorgeven en de Flash-film manipuleren met conventies die je kent van JavaScript en Mootools. Het op deze manier integreren van flash is vooral handig omdat we beginnen met het aanbieden van HTML5 als een progressieve verbetering, waarbij, behoudens dat gebruikers over de flash-plugin beschikken, Swiff kan worden gebruikt om audio of video in oudere browsers te besturen. Bekijk ondertussen het eenvoudige voorbeeld hieronder:
var flashObject = new Swiff ('sounds.swf', id: 'mySoundManager', width: 1, height: 1, vars: myVariable: true, // variabelen in flash doorgeven bij laden, callBacks: // call aangepaste gebeurtenissen van uw flash-object someEvent: function () // code); Swiff.remote (flashObject, 'playMySound') // roept de functie "playMySound" binnen vanuit flash 
Nu met meer dan vijftien leden die bijdragen aan de officiële meer plugin-repository en meer dan honderd niet-officiële plug-ins die al op Forge staan, is het geen verrassing dat 'Community' is wat het MooTools-team ons als ontwikkelaars wilde bezorgen om mee te nemen uit 2009. Inderdaad mensen hebben dit echt omarmd kader, en nu met Forge, hebben we een geweldige plek om elkaar te ontmoeten en beginnen met het delen van ideeën. Je zult merken dat David Walsh, Aaron Newton, 3n en vele anderen actief bijdragen aan het leveren van geweldige code en het faciliteren van een omgeving die zowel inspiratie als bruikbaarheid biedt. Uiteindelijk is de meest nuttige manier om het MooTools-raamwerk op te pakken, door in contact te treden met de ontwikkelaars om je heen en uiteindelijk te begrijpen waar ze aan werken en hoe ze het aanpakken..
Wist je dat je tot $ 600 kunt verdienen voor het schrijven van een PLUS tutorial en / of screencast voor ons?? We zijn op zoek naar diepgaande en goed geschreven tutorials over HTML, CSS, PHP en JavaScript. Als je van het vermogen bent, neem dan contact op met Jeffrey via [email protected].
Houd er rekening mee dat de daadwerkelijke compensatie afhankelijk is van de kwaliteit van de laatste zelfstudie en screencast.
