, forståelse design mønstre i javascript,,,,, 48,,,,,,,,,,, 383,,,,,,, det cyber - mandag envato tuts + kurser vil blive reduceret til $3.- og' t miss.,, i dag skal vi tage vores computer videnskab hatte, som vi lærer om nogle fælles design mønstre.former for design giver udviklere måder at løse tekniske problemer i genanvendelige og elegant måde.interesseret i at blive en bedre javascript entreprenør?så læs den.,,,, berigtiget forelæsning, hver anden uge, vi tage nogle af vores læsere er favorit stillinger fra hele historien om stedet.denne forelæsning blev først offentliggjort i juli 2012,.,, indledning, faste former for design er grundlæggende byggesten til bevarelse af softwareapplikationer.hvis du nogensinde har deltaget i en teknisk interview, har du set blevet bedt om dem.i denne forelæsning, vil vi se på et par - - som du kan begynde at bruge i dag.,, hvad er det for et bestemt mønster?et design, mønster er genanvendelige softwareløsning, kort sagt en bestemt mønster er genanvendelige software løsning til en bestemt type problemer, der forekommer hyppigt ved udviklingen af software.i de mange år, for at udvikle software, eksperter har fundet ud af, hvordan man skal løse problemer af samme art.disse løsninger er blevet sammenfattet i design mønstre.så:,, mønstre er vist løsninger til udvikling af software problemer, mønstre er skalerbare, som de normalt er struktureret og regler, som de skal følge, mønstre kan genbruges til samme problemer, vil vi komme ind på nogle eksempler på udformning af mønstre yderligere til forelæsning.,, typer af former for design, udvikling af software, design mønstre generelt er samlet i nogle kategorier.vi dækker de tre vigtigste i denne forelæsning.de er forklaret i kort nedenfor:,, creational, mønstre fokusere på måder at skabe genstande eller klasser.det lyder simpelt (og det er i nogle tilfælde), men store ansøgninger skal kontrollere genstand udviklingsprocessen.,,, strukturelle, former for design og fokusere på måder at styre relationerne mellem genstande, så deres ansøgning er architected på en fleksibel måde.et centralt aspekt af strukturelle mønstre er at sikre, at en ændring i en del af deres anvendelse ikke berører alle andre dele.,,, adfærdsmæssige, mønstre fokus på kommunikation mellem objekter.,, kan du stadig har spørgsmål efter at have læst disse korte beskrivelser.det er naturligt, og tingene vil rydde op, når vi ser på visse former for design i detaljer nedenfor.så læs den.,, en note om klasser i javascript, når man læser om former for design, vil du ser ofte henvisninger til klasser og genstande.det kan være forvirrende, som javascript ikke har opbygningen af "klasse" en mere korrekt udtryk er "datatype"., datatyper i javascript, javascript er en samt sprog, hvor genstande arve fra andre objekter i et begreb, der kaldes prototypical arv.en datatype, kan skabes ved at definere, hvad der kaldes en konstruktør funktion, som dette:, funktion person (ud) (this.name = config.name; this.age = config.age;} person.prototype.getage = function() {tilbage this.age;} var tilo = nye person ({navn: "tilo" alder: 23.}); konsol. log (tilo. getage()), bemærker brugen af prototype, ved fastlæggelsen af metoder på person -, data - typen.da flere personer, genstande, skal referere til samme prototype, dette giver mulighed for, getage(), en metode til at blive delt af alle tilfælde af den person, datatype, i stedet for at omdefinere det i hvert eneste tilfælde.desuden er enhver datatype, der arver fra personer, vil have adgang til, getage() metode.i forbindelse med privatlivets fred, et fælles emne i javascript er, at der ikke er nogen egentlige private variabler.men vi kan bruge lukninger til noget simulere privatlivets fred.overveje følgende indlæg:, var retinamacbook = (function() (//private variabler var ram, addram; ram = 4; //private metode addram = funktion (additionalram) (ram + = additionalram;} afkast (//offentlige variabler og metoder, usb -: udefineret, insertusb: funktion (enhed) (this.usb = udstyr), removeusb: funktion () (var - anordning = this.usb; this.usb = udefinerede; tilbage anordning}}}) () i ovenstående eksempel, skabte vi en, retinamacbook, genstand, med offentlige og private variabler og metoder.dette er, hvordan vi vil bruge den:, retinamacbook. insertusb ("myusb"); konsol. log (retinamacbook. usb); //logbøger "myusb" konsol. log (retinamacbook. ram) //logger ud usynlig, der er meget mere, vi kan gøre med funktioner og lukninger i javascript, men vi vil ikke komme ind på alle i denne forelæsning.med en lille lektion i javascript datatyper og privatlivets fred bag os, kan vi fortsætte med at lære om design mønstre.,, creational former for design, der er mange forskellige former for creational design mønstre, men vi kommer til at omfatte to af dem i denne lektion: bygmester og prototype.jeg finder, at disse anvendes ofte tilstrækkelig til at berettige den opmærksomhed., bygmester mønster, opbyggeren mønster anvendes ofte i web - udvikling, og du har sikkert brugt den før, uden at vide det.bare læg den, dette mønster kan defineres som følgende:,,, der gør det muligt for os at opbygge objekter skaber mønster, som kun med angivelse af type, og indholdet af objektet.vi har ikke udtrykkeligt at skabe objekt., f.eks. du har sikkert gjort det utallige gange i jquery:, var mydiv = $(< div id = "mydiv" > det er en. < /div > '); //mydiv udgør nu en jquery objekt refererer til en dom node.var sometext = $(< p /> '); //sometext er en jquery objekt refererer til en htmlparagraphelement var input = $(< input />'), tage et kig på de tre ovenstående eksempler.i den første, vi er gået i en < div /> element med et indhold.i det andet, vi vedtog i en tom, < p >, tag.i den sidste, vi vedtog i en < input /> element.resultatet af alle tre var den samme, nemlig at vi var vendt tilbage en jquery objekt refererer til en dom node.,, $, variable vedtager bygmester mønster i jquery.i hver enkelt eksempel, vi var vendt tilbage til en jquery dom genstand og havde adgang til alle de metoder, der er fastsat i jquery bibliotek, men på intet tidspunkt opfordrer vi udtrykkeligt dokument. createelement,.det er bibliotek håndteret alt det under hjelmen.forestil dig, hvor meget arbejde, ville det være, hvis vi havde udtrykkeligt at skabe dom element og indsæt indhold til det!ved at mobilisere de bygmester mønster, vi er i stand til at koncentrere sig om arten og indholdet af det objekt, snarere end direkte oprettelse af det.prototype mønster, før vi gik igennem, hvordan vi definerer datatyper i javascript gennem funktioner og tilføje metoder til formålet, prototype.prototypen mønster giver objekter til at arve fra andre genstande, via deres prototyper.,, prototypen mønster er et mønster, hvor genstande, der er baseret på en model af en eksisterende formål gennem kloning.,,, det er et let og naturlig måde at gennemføre arv i javascript.for eksempel, var person = {numfeet: 2, numheads: 1, numhands: 2}; //object.create tager sine første argument og anvender den til prototypen på din nye ting.var tilo = objekt. skabe (person) konsol. log (tilo. numheads); //output 1 tilo.numheads = 2 - konsollen. log (tilo. numheads) //- output, 2, egenskaber (og - metoder i, personer, genstande bliver anvendt til prototype af, tilo, objekt.vi må omdefinere egenskaber på, tilo, gøre indsigelse, hvis vi ønsker, at de skal være forskellige. i ovenstående eksempel brugte vi protesterer. create(),.men internet explorer 8 ikke støtter den nye metode.i disse tilfælde kan vi simulere den opførsel:, var vehicleprototype = {lokalitet: funktion (carmodel) (this.model = carmodel;}, getmodel: funktion () (konsol. log ("modellen for dette køretøj er" +. model)}}; funktion køretøj (model) {funktion f() {}; f.prototype = vehicleprototype, var f = nye f(); f.init (model), tilbage, f) var bil = køretøj ("ford escort"); bil. getmodel(); den eneste ulempe, at denne metode er, at man ikke kan fastsætte read - only egenskaber, som kan være angivet ved, objekt. create(),.ikke desto mindre prototypen mønster viser, hvordan ting kan arve fra andre objekter.,, strukturelle former for design, konstruktion mønstre er virkelig nyttig, da finde ud af, hvordan systemet skal fungere.de tillader, at vores ansøgninger til omfang let og er pålidelige.vi kommer til at se på følgende mønster i denne gruppe: sammensatte og facade., sammensat mønster, sammensat mønster er et andet mønster, du har sikkert brugt før uden erkendelse.,, sammensat mønster, siger, at en gruppe af genstande, som kan behandles på samme måde som en enkelt objekt i gruppen.,, hvad betyder det?betragt dette som eksempel i jquery (de fleste er biblioteker vil have en svarende til denne): $(". mylist '). addclass ('selected) $('&#myitem '). addclass ('selected); //dont gøre det store borde, det er bare et eksempel.$("# datatable tbody tr"). ("klik" funktion (tilfælde) {indberetning ($(dette). text())}); $('# mybutton). ("klik" funktion (ref.) (varsling ("klik");}). de fleste javascript biblioteker give en sammenhængende api - uanset om vi har at gøre med en enkelt dom element eller et system af dom elementer.i det første eksempel, vi er i stand til at tilføje den udvalgte, klasse på alle punkter taget op af den. mylist, vælgeren, men vi kan bruge den samme metode, når det drejer sig om en enkelt dom element,&#myitem,.på samme måde kan vi lægge begivenhed, som anvender, on(), metode på flere knuder, eller på et enkelt knudepunkt gennem samme api - grænseflade.ved at mobilisere de sammensatte mønster, jquery (og mange andre biblioteker) giver os en forenklet api. de sammensatte - undertiden kan skabe problemer.i et løst skrevet sprog som f.eks. javascript, kan det ofte være nyttigt at vide, om vi har at gøre med et enkelt element eller flere elementer.da sammensat mønster anvender samme api til både kan vi ofte en fejl for andre og ender med uventede insekter.nogle libaries, f.eks. yui3, tilbyde to særskilte midler til at få elementer (, y. one(), vs. all(),).facaden mønster, her er et fælles mønster, som vi tager for givet.faktum er, at dette er en af mine favoritter, fordi det er enkelt, og jeg har set, at det bruges overalt for at hjælpe med browser uoverensstemmelser.her er, hvad den facade mønster er:,, facaden mønster giver brugeren en enkelt grænseflade, mens det underliggende kompleksitet.,, facaden - næsten altid forbedrer brugbarheden af et software.ved hjælp af jquery som et eksempel, et af de mest populære metoder til biblioteket er, ready(), metode: $(dokument). - (function() (//din kode er her...}), ready(), metode faktisk gennemfører en facade.hvis du tager et kig på kilden, her er, hvad du finder. klar: (function() {...//mozilla, opera, og webkit hvis (dokument. addeventlistener) (dokument. addeventlistener ("domcontentloaded", idempotent_fn, falske).} //ie begivenhed model for andre, hvis (dokument. attachevent) (//sikre, at skyde, før onload, måske for sent, men sikkert også for iframes dokument. attachevent ("onreadystatechange", idempotent_fn); //en reserve til window.onload, det vil altid arbejde vindue. attachevent ("onload", idempotent_fn).}}), under hjelmen, ready(), metode ikke er helt så enkelt.jquery normaliserer browseren uoverensstemmelser, for at sikre, at ready(), bliver fyret i rette tid.men, som udvikler, du har fået forelagt en enkelt grænseflade.de fleste eksempler på facaden mønster efter dette princip.når gennemførelsen af en, vi plejer at påberåbe sig betinget erklæringer under hjelmen, men at fremlægge det som et enkelt grænseflade til brugeren.andre metoder til gennemførelse af dette mønster omfatter animate(), og css(),.kan du tænke på, hvorfor de ville bruge en facade mønster?adfærds mønstre, design, samt software - systemer vil have kommunikation mellem objekter.ikke at organisere denne meddelelse kan føre til insekter, der er vanskelige at finde og rette.adfærds mønstre, foreskriver forskellige metoder i forbindelse med udformningen af kommunikationen mellem objekter.i dette afsnit vil vi se på observatøren og mægler mønstre., observatør - observatøren mønster er det første af de to adfærdsmønstre, som vi kommer til at gå igennem.her er, hvad der står:,, observatøren mønster, et emne, der kan have en liste over de observatører, der er interesseret i det livscyklus.når som helst det emne er noget interessant, det sender en meddelelse til sine observatører.hvis en observatør, er ikke længere interesseret i at høre om emnet kan fjerne den fra listen.,, lyder ret simpelt, ikke?vi har brug for tre metoder til at beskrive dette mønster:, offentliggøre (data): med spørgsmålet, når det er en meddelelse at gøre.nogle data kan ske ved hjælp af denne metode.,, tegne (observatør): med hensyn til at tilføje en observatør til listen over observatører.,, afmelding (observatør): med hensyn til at fjerne en observatør fra listen over observatører.og det viser sig, at de fleste moderne javascript biblioteker støtte disse tre metoder som en del af deres skik begivenheder infrastruktur.der er normalt en, on(), eller, attach(), metode, en, trigger(), eller, fire(), metode og en, off(), eller, detach() metode.overveje følgende indlæg: //vi skaber en sammenhæng mellem jquery begivenheder metoder, //og dem, der er foreskrevet i observatør mønster, men du behøver ikke.var o = $({'); $. tegne = o.on. bind (o); $. afmelding = o.off. bind (o); $. offentliggøre = o.trigger. bind (o); //brug nummer. (' tweetsreceived, funktion (tweets) (//udføre nogle aktioner så skyd en begivenhed $. offentliggøre ('tweetsshow, tweets)}); //kan vi tilslutte os denne begivenhed, og så brænder vores egne omstændigheder.$. støtte ('tweetsshow, function() (//- beskeder på en eller anden måde...//offentliggøre en sag, efter at der er påvist.$. offentliggøre ('tweetsdisplayed)}); $. abonnement ('tweetsdisplayed, function() {...}), observatøren mønster er en af enklere mønster for at gennemføre, men det er meget magtfuld.javascript er velegnet til at vedtage dette mønster, som det er naturligt tilfælde baseret på.næste gang du udvikle web - ansøgninger, tænke på at udvikle moduler, der er løst forbundet med hinanden og vedtage observatøren mønster som et middel til kommunikation.observatøren mønster kan blive problematisk, hvis der er for mange emner og observatører, der er involveret.dette kan ske i store systemer, og den næste, som vi ser på forsøg på at løse dette problem, mægler mønster, det sidste, som vi vil se på, er mægler mønster.det ligner observatøren mønster, men med nogle bemærkelsesværdige forskelle.,, mægler - fremmer anvendelsen af et fælles emne, der håndterer kommunikation med flere objekter.alle genstande, kommunikere med hinanden gennem mægleren.,, en god den analogi, ville være en air traffic tårn, der tager sig af kommunikation mellem lufthavnen og flyvninger.i verden af software - udvikling, mægler - bruges ofte som et system, bliver alt for kompliceret.ved at placere mæglere, kommunikation kan håndteres ved hjælp af et enkelt formål, i stedet for at få flere objekter kommunikerer med hinanden.i den forstand er en mægler mønster kan bruges til at erstatte et system, der gennemfører observatør mønster. der er en forenklet gennemførelse af mægler - med addy osmani i dette resumé.lad os snakke om, hvordan du kan bruge det.forestil dig, at du har en web - app, der gør det muligt for brugere til klik på en plade, og spille musik fra det.du kunne oprette en mægler, som denne: $('# album "). ('click, funktion (e) (f. preventdefault(), var albumid = $(det). id(); mægler. offentliggøre (" playalbum ", albumid)}), var playalbum = funktion (id) {... mægler. offentliggøre (" albumstartedplaying ", (songlist: [...], currentsong:" uden dig "})), var logalbumplayed = funktion (id) (//log pladen i backend), var updateuserinterface = funktion (cd) (//ajourføring af eu - erhvervsgrenen til at afspejle, hvad der bliver spillet}; //mægler abonnementer mægler. støtte (" playalbum ", playalbum); mægler. støtte (" playalbum ", logalbumplayed); mægler. støtte (" albumstartedplaying ", updateuserinterface), drage fordel af dette mønster med observatøren mønster -er det en enkelt objekt er ansvarlig for kommunikation, mens der i observatøren mønster, flere objekter kan lytte og bidrager til hinanden.i den videnskabelige observatør mønster, der ikke er en enkelt objekt, som omfatter en begrænsning.i stedet, observatøren og genstand skal samarbejde for at opretholde begrænsninger.kommunikationsmønstre bestemmes ved den måde, observatører og emner er indbyrdes forbundne: et enkelt emne, har normalt mange observatører, og nogle gange er observatør i et emne er genstand for en observatør.,, konklusion, der allerede har anvendt med succes i fortiden.,, det gode ved former for design er, at nogen allerede har ansøgt det lykkedes i fortiden.der er masser af open source - kode at gennemføre forskellige mønstre i javascript.som udviklere, skal vi være klar over, hvad der er derude, og når mønstre for at anvende dem.jeg håber, at denne forelæsning hjalp du tager et skridt mere i retning af at besvare disse spørgsmål.yderligere læsning, meget af indholdet af denne artikel findes i den fremragende uddannelse javascript design mønstre bog, med addy osmani.det er et online bog, der blev frigivet til fri i en kreativ underhuset kørekort.bogen omfattende omfatter teori og gennemførelsen af mange forskellige mønstre, både i vanille javascript og forskellige er biblioteker.jeg vil opfordre dem til at se på det som en reference, når du starter din næste projekt.,