Se ha denunciado esta presentación.
Se está descargando tu SlideShare. ×

Anything But Typical: Learning to Love JavaScript Prototypes

•
02 de abr de 2010
• 16 recomendaciones • 6.709 visualizaciones
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Próximo SlideShare
Razorfish - FEED 2008
Razorfish - FEED 2008
Cargando en…3
×

Eche un vistazo a continuación

ClientSummit2010_EricJillard(Mercedes)
Razorfish
ClientSummit2010_MikeBoylson(JCPenney)
Razorfish
2010 Razorfish Outlook Report
Razorfish
Razorfish & CafeMom - Digital Mom
Razorfish
Sleeping Giants: Digital Awakens TV and Media
Razorfish
ClientSummit2010_JohanJervoe(Intel)
Razorfish
Razorfish outlook report 2011 (vol10)
Luis Miranda
Fluent: The Razorfish Social Influence Marketing Report
Razorfish
1 de 62 Anuncio

Anything But Typical: Learning to Love JavaScript Prototypes

02 de abr de 2010
• 16 recomendaciones • 6.709 visualizaciones

Descargar para leer sin conexión

Empresariales

Frightened and confused by the term "prototype"? Tired of praying that there's some plugin for a framework that will do exactly what you need to do? Unlock a whole new world of interactivity with object-oriented JavaScript programming.

Frightened and confused by the term "prototype"? Tired of praying that there's some plugin for a framework that will do exactly what you need to do? Unlock a whole new world of interactivity with object-oriented JavaScript programming.

Empresariales
Anuncio

Recomendado

Razorfish - FEED 2008
Razorfish
2k vistas
84 diapositivas
2010 Razorfish Outlook Report Key Findings
Razorfish
4.4k vistas
13 diapositivas
Nimble, a Razorfish report on publishing in the digital age
Razorfish
7.1k vistas
60 diapositivas
The Finch And The Fox: A Story About The Nature of Change in Latin American M...
Razorfish
2.3k vistas
52 diapositivas
ClientSummit2010_MauriceLevyPublicisGroupe
Razorfish
1.3k vistas
6 diapositivas
Stampede (Joe Crump)
Razorfish
8.3k vistas
99 diapositivas
ClientSummit2010_PranavMistry(MIT)
Razorfish
1.5k vistas
118 diapositivas
ClientSummit2010_SocialBodyWorkshop
Razorfish
2.1k vistas
34 diapositivas
Anuncio

Más Contenido Relacionado

A los espectadores también les gustó (9)

ClientSummit2010_EricJillard(Mercedes)
Razorfish
2.2k vistas
ClientSummit2010_MikeBoylson(JCPenney)
Razorfish
1.9k vistas
2010 Razorfish Outlook Report
Razorfish
4.1k vistas
Razorfish & CafeMom - Digital Mom
Razorfish
8k vistas
Sleeping Giants: Digital Awakens TV and Media
Razorfish
4.9k vistas
ClientSummit2010_JohanJervoe(Intel)
Razorfish
5.1k vistas
Razorfish outlook report 2011 (vol10)
Luis Miranda
10.7k vistas
Fluent: The Razorfish Social Influence Marketing Report
Razorfish
17.2k vistas
Creative Sponge - Agency Credentials
alextosh
31.8k vistas
ClientSummit2010_EricJillard(Mercedes)
Razorfish
2.2k vistas
22 diapositivas
ClientSummit2010_MikeBoylson(JCPenney)
Razorfish
1.9k vistas
21 diapositivas
2010 Razorfish Outlook Report
Razorfish
4.1k vistas
104 diapositivas
Razorfish & CafeMom - Digital Mom
Razorfish
8k vistas
36 diapositivas
Sleeping Giants: Digital Awakens TV and Media
Razorfish
4.9k vistas
40 diapositivas
ClientSummit2010_JohanJervoe(Intel)
Razorfish
5.1k vistas
26 diapositivas

Similares a Anything But Typical: Learning to Love JavaScript Prototypes (20)

The Ajax Experience: State Of The Browsers
Peter-Paul Koch
816 vistas
JavaScript: You Like It, It Likes You
Scott Kosman
534 vistas
JavaScript nicht nur für Programmierer: Einblicke in die weltweit am meisten ...
Peter Hecker
440 vistas
Lotico oct 2010
dallemang
381 vistas
All of javascript
Togakangaroo
1.7k vistas
주로사용되는 Xss필터와 이를 공격하는 방법
guestad13b55
5.9k vistas
Introduction to python
Rajesh Rajamani
149 vistas
IPTC News in JSON Spring 2013
Stuart Myles
1.2k vistas
Google ARが提供する WebAR 101
Hirokazu Egashira
818 vistas
Real-time Semantic Web with Twitter Annotations
Joshua Shinavier
5.7k vistas
Securing Web Applications
goodfriday
560 vistas
Adobemax2009na
Masakazu Ohtsuka
928 vistas
Finding harmony in web development
Christian Heilmann
1.9k vistas
All of Javascript
Togakangaroo
866 vistas
Why Rust? by Edd Barrett (codeHarbour December 2019)
Alex Cachia
17 vistas
Python basics
Jyoti shukla
395 vistas
Web browsers & the realtime web
Phil Leggetter
1.5k vistas
JavaScript Internationalization I18n for Efficient Software Localization
Lingoport (www.lingoport.com)
947 vistas
Webpack & EcmaScript 6 (Webelement #32)
srigi
2.9k vistas
Look beyond PHP
Fabien Potencier
9.5k vistas
The Ajax Experience: State Of The Browsers
Peter-Paul Koch
816 vistas
129 diapositivas
JavaScript: You Like It, It Likes You
Scott Kosman
534 vistas
52 diapositivas
JavaScript nicht nur für Programmierer: Einblicke in die weltweit am meisten ...
Peter Hecker
440 vistas
97 diapositivas
Lotico oct 2010
dallemang
381 vistas
35 diapositivas
All of javascript
Togakangaroo
1.7k vistas
41 diapositivas
주로사용되는 Xss필터와 이를 공격하는 방법
guestad13b55
5.9k vistas
103 diapositivas
Anuncio

Más de Razorfish (17)

ClientSummit2010_HendersonPetrillo(SkilletStreetFood)
Razorfish
1.4k vistas
ClientSummit2010_MathiasSinn(McDonalds-NeueDigitale)
Razorfish
1.5k vistas
ClientSummit2010_RussellTaylor(AxeCaseStudies)
Razorfish
1.6k vistas
ClientSummit2010_MediaMixWorkshop
Razorfish
1k vistas
ClientSummit2010_SearchWorkshop
Razorfish
1.1k vistas
ClientSummit2010_CloudWorkshop
Razorfish
21.8k vistas
ClientSummit2010_AgileWorkshop
Razorfish
1k vistas
ClientSummit2010_MobileWorkshop
Razorfish
1.9k vistas
2010 Razorfish Outlook Report
Razorfish
1.5k vistas
2010 Razorfish Outlook Report
Razorfish
3.1k vistas
2010 Razorfish Outlook Report
Razorfish
1.4k vistas
A Decade in Search
Razorfish
1.7k vistas
Social Influence Marketing Trends
Razorfish
3.2k vistas
FEED: The Razorfish Digital Brand Experience Report 2009 Key Findings
Razorfish
25k vistas
FEED: The Razorfish Digital Brand Experience Report 2009
Razorfish
10.7k vistas
Highlights From Fluent
Razorfish
3.9k vistas
Design Matters: A Mobile UX Manifesto
Razorfish
3.9k vistas
ClientSummit2010_HendersonPetrillo(SkilletStreetFood)
Razorfish
1.4k vistas
7 diapositivas
ClientSummit2010_MathiasSinn(McDonalds-NeueDigitale)
Razorfish
1.5k vistas
18 diapositivas
ClientSummit2010_RussellTaylor(AxeCaseStudies)
Razorfish
1.6k vistas
27 diapositivas
ClientSummit2010_MediaMixWorkshop
Razorfish
1k vistas
41 diapositivas
ClientSummit2010_SearchWorkshop
Razorfish
1.1k vistas
15 diapositivas
ClientSummit2010_CloudWorkshop
Razorfish
21.8k vistas
46 diapositivas

Más reciente (20)

OPTIMISING & AUTOMATING THE MELBOURNE WATER TRANSMISSION NETWORK
iQHub
0 vistas
RKGDEAL AD ON.pptx
rkgdeal5
0 vistas
Retirement Homes for Rent in Pollachi, Coimbatore |Harsha Retirement Homes
harshahomes2
0 vistas
Leading Function.ppt
Teshome48
0 vistas
DISCUSSION ON THE DEVELOPMENT OF THE INTELLIGENT WATER NETWORKS PROGRAM IN V...
iQHub
0 vistas
Our Products - J-Platform ERP.pdf
jplatformdms
0 vistas
C7MMAnalyzingBusinessMarkets.pdf
abigailann5
0 vistas
PHS.FIT Business Plan in Punjabi 6239548395
RajpalSinghGill1
0 vistas
Auditorium Design - Work on the Excellence and Usefulness of Room.pdf
Auditorium Consultants
0 vistas
Welcome To Commercial Painting Contractor.pptx
ariaemily
0 vistas
LOOKING AT THE RISK MAPPING & REPORTING OF NETWORK LEAKS USING REMOTE SENSING
iQHub
0 vistas
Qualities Of An Effective Workplace Investigator
Lisa Bell
0 vistas
PPT for Primavera P6.pptx
niteshkumar49230
0 vistas
AMMONIA RECOVERY FROM WASTEWATER – TECHNOLOGY AND USES
iQHub
0 vistas
NEW POWER REVIEWED AND APPLIED_Isaiah Egiri.pptx
IsaiahEgiri
0 vistas
Industrial Masonry Water Proofing.pptx
ariaemily
0 vistas
Certified Aquascape Contractors
HinderBerg1
0 vistas
M2.pptx
MANASA759282
0 vistas
PPT ON CUTTING DEPARTMENT.pptx
farjanamita3
0 vistas
unit-1.pptx
LinhNguynHongNgc
0 vistas
OPTIMISING & AUTOMATING THE MELBOURNE WATER TRANSMISSION NETWORK
iQHub
0 vistas
23 diapositivas
RKGDEAL AD ON.pptx
rkgdeal5
0 vistas
1 diapositiva
Retirement Homes for Rent in Pollachi, Coimbatore |Harsha Retirement Homes
harshahomes2
0 vistas
15 diapositivas
Leading Function.ppt
Teshome48
0 vistas
124 diapositivas
DISCUSSION ON THE DEVELOPMENT OF THE INTELLIGENT WATER NETWORKS PROGRAM IN V...
iQHub
0 vistas
13 diapositivas
Our Products - J-Platform ERP.pdf
jplatformdms
0 vistas
8 diapositivas
Anuncio

Anything But Typical: Learning to Love JavaScript Prototypes

  1. Anything But Typical<br />Learning to Love JavaScript Prototypes<br />Page 1© 2010 Razorfish. All rights reserved.<br />Dan Nichols<br />March 14, 2010<br />
  2. JavaScript<br />Page 2© 2010 Razorfish. All rights reserved.<br />
  3. Object-Oriented Programming<br />Page 3© 2010 Razorfish. All rights reserved.<br />
  4. class<br />Page 4© 2010 Razorfish. All rights reserved.<br />
  5. Inheritance<br />Page 5© 2010 Razorfish. All rights reserved.<br />
  6. prototype(not the library)<br />Page 6© 2010 Razorfish. All rights reserved.<br />
  7. The story so far…<br />Page 7© 2010 Razorfish. All rights reserved.<br />
  8. <a onclick=“javascript:alert(‘chaos!’)”><br />Page 8© 2010 Razorfish. All rights reserved.<br />
  9. Page 9© 2010 Razorfish. All rights reserved.<br />
  10. …except it wasn’t all good.<br />Page 10© 2010 Razorfish. All rights reserved.<br />
  11. Page 11© 2010 Razorfish. All rights reserved.<br />
  12. Page 12© 2010 Razorfish. All rights reserved.<br />
  13. Page 13© 2010 Razorfish. All rights reserved.<br />
  14. Page 14© 2010 Razorfish. All rights reserved.<br />
  15. Sound familiar?<br />Page 15© 2010 Razorfish. All rights reserved.<br />
  16. Page 16© 2010 Razorfish. All rights reserved.<br />prototype(not the library) to the rescue!<br />
  17. Page 17© 2010 Razorfish. All rights reserved.<br />Everything is an object<br />
  18. Page 18© 2010 Razorfish. All rights reserved.<br />Every object has a prototype<br />
  19. Page 19© 2010 Razorfish. All rights reserved.<br />prototypes do good things<br />
  20. Page 20© 2010 Razorfish. All rights reserved.<br />Encourage modularityand reusability<br />
  21. Page 21© 2010 Razorfish. All rights reserved.<br />Provide a consistent wayto do (different) things<br />
  22. Page 22© 2010 Razorfish. All rights reserved.<br />Keep code to a minimum<br />
  23. Page 23© 2010 Razorfish. All rights reserved.<br />Make complexity easy<br />
  24. What is a prototype, exactly?<br />Page 24© 2010 Razorfish. All rights reserved.<br />
  25. Page 25© 2010 Razorfish. All rights reserved.<br />A reference point for other objects<br />
  26. Property lookup chain<br />Page 26© 2010 Razorfish. All rights reserved.<br />
  27. Property lookup chain<br />Page 27© 2010 Razorfish. All rights reserved.<br />instance<br />Date<br />Object<br />
  28. Property lookup chain<br />Page 28© 2010 Razorfish. All rights reserved.<br />instance<br />Date<br />Object<br />
  29. Property lookup chain<br />Page 29© 2010 Razorfish. All rights reserved.<br />instance<br />Date<br />Object<br />
  30. Property lookup chain<br />Page 30© 2010 Razorfish. All rights reserved.<br />instance<br />Date<br />Object<br />
  31. Page 31© 2010 Razorfish. All rights reserved.<br />JavaScript is different frommost other OOP languages<br />
  32. Anatomy of a prototype<br />Page 32© 2010 Razorfish. All rights reserved.<br />rex<br />Poodle<br />Dog<br />Object<br />
  33. Anatomy of a prototype<br />Page 33© 2010 Razorfish. All rights reserved.<br />Constructor<br />
  34. Anatomy of a prototype<br />Page 34© 2010 Razorfish. All rights reserved.<br />Property<br />Method<br />
  35. Anatomy of a prototype<br />Page 35© 2010 Razorfish. All rights reserved.<br />Constructor<br />Inheritance<br />
  36. Anatomy of a prototype<br />Page 36© 2010 Razorfish. All rights reserved.<br />Instance<br />Instance Property<br />
  37. this and the lookup chain<br />Page 37© 2010 Razorfish. All rights reserved.<br />fluffy<br />socks<br />Cat<br />Object<br />
  38. this and the lookup chain<br />Page 38© 2010 Razorfish. All rights reserved.<br />socks<br />Cat<br />Object<br />
  39. this and the lookup chain<br />Page 39© 2010 Razorfish. All rights reserved.<br />fluffy<br />Cat<br />Object<br />
  40. Execution context: this and call()<br />Page 40© 2010 Razorfish. All rights reserved.<br />
  41. Execution context: this and call()<br />Page 41© 2010 Razorfish. All rights reserved.<br />
  42. Execution context with instances<br />Page 42© 2010 Razorfish. All rights reserved.<br />Same outcome<br />
  43. Page 43© 2010 Razorfish. All rights reserved.<br />Inheritance<br />
  44. Working with inherited behavior<br />Page 44© 2010 Razorfish. All rights reserved.<br />LimitedContainer<br />Container<br />Object<br />
  45. Working with inherited behavior<br />Page 45© 2010 Razorfish. All rights reserved.<br />LimitedContainer<br />Container<br />Object<br />
  46. Working with inherited behavior<br />Page 46© 2010 Razorfish. All rights reserved.<br />LimitedContainer<br />Container<br />Object<br />
  47. Page 47© 2010 Razorfish. All rights reserved.<br />JavaScript is the Frankensteinof the OOP world<br />
  48. Borrowing from multiple prototypes<br />Page 48© 2010 Razorfish. All rights reserved.<br />
  49. Page 49© 2010 Razorfish. All rights reserved.<br />One small problem<br />
  50. The constructor problem<br />Page 50© 2010 Razorfish. All rights reserved.<br />
  51. The constructor problem<br />Page 51© 2010 Razorfish. All rights reserved.<br />
  52. Fixing the constructor problem<br />Page 52© 2010 Razorfish. All rights reserved.<br />
  53. Fixing the constructor problem<br />Page 53© 2010 Razorfish. All rights reserved.<br />
  54. Page 54© 2010 Razorfish. All rights reserved.<br />prototype isn’t love at first sight<br />
  55. Page 55© 2010 Razorfish. All rights reserved.<br />Putting prototypes to work<br />
  56. Requirements<br /><ul><li> Four kinds of rules on the form:
  57. Required
  58. Email
  59. Number
  60. Zip Code
  61. Multiple rules can apply to one field
  62. Rules need to be inferred from data-rich, standard HTML
  63. Error messages should be specific
  64. Flexible enough to be:
  65. Usable for all other forms on the site
  66. Extended for use in other projects</li></ul>Page 56© 2010 Razorfish. All rights reserved.<br />
  67. The Plan<br /><ul><li>On load:</li></ul>Create validation rules for each field<br />Set up submit handler<br /><ul><li>When form is submitted:</li></ul>Cycle through all rules<br />If a field fails a rule<br />Mark it invalid<br />Create an error message for it<br />Don’t check any more rules for that field<br />Show all error messages<br />Page 57© 2010 Razorfish. All rights reserved.<br />
  68. Page 58© 2010 Razorfish. All rights reserved.<br />NumberValidator<br />EmailValidator<br />RequiredValidator<br />PatternValidator<br />ValidatingForm<br />Validator<br />Object<br />
  69. Page 59© 2010 Razorfish. All rights reserved.<br />Libraries are there to make life easier<br />
  70. Page 60© 2010 Razorfish. All rights reserved.<br />Think about your approach<br />
  71. Page 61© 2010 Razorfish. All rights reserved.<br />Dive in!<br />
  72. Thank You<br />Dan Nichols<br />dan.nichols@razorfish.com<br />Blog: http://heydanno.com/blog<br />Code demo: http://heydanno.com/sxsw<br />Page 62© 2010 Razorfish. All rights reserved.<br />

Notas del editor

  • Web was a scary placeBrowser compatibility and features all over the mapDevs hop from site to site grabbing snippets of code
  • JS libraries emerge several years agoSmooth over cross browser differencesMake complex behavior easyProvide frameworks for enhancement
  • New dependency on libraries and plugins is growingDevs spend a lot of time… (series)
  • Searching for a JS library extension that does what they need
  • Changing site to fit what the extension does
  • Brute-force coding requirements back in
  • Live in fear of repeating it allwhen make updateson the next project
  • One of JS most powerful featues goesUnusedIgnoredMisunderstoodAnd it can help
  • JS is OOP language
  • Objects are containers forProperties - DataMethods - BehaviorsWork with objects all the time
  • Template for properties + methodsWork with prototypes every dayEven if you don’t realize itDate, Array, etc
  • Code you writeCode loaded in memory
  • Easy to…BuildModifyExpand on complex interactions
  • Reference point that serves as basis for an objectTo understand prototypeNeed to understand property lookup chain
  • Simple exampleCreate a date var named “instance”Define a new property on the varCall several methods
  • PLC for instance var looks like thisInstance prototype = DateDate prototype = ObjectJS uses PLC to find values of referenced properties
  • Look up instance.fooJS finds it on the var itselfStops looking
  • Lookup instance.getTimeDoesn’t find it on the varFinds it on DateStops looking
  • Lookup instance.hasOwnPropertyDoesn’t find it on varDoesn’t find it on DateFinds it on Object
  • Prototypes are put together different than most
  • More complicated exampleRex is var instance of PoodlePoodle prototype = DogDog prototype = Object
  • Closer look at DogFunctionAll functions have prototype propertyPrototype defaults to ObjectConstructor is Function paired with NEW operatorUsed to create instances
  • Dog’s prototype property used to build the templateFunctions on a prototype are methodsNon-functions on a prototype are propertiesAnything defined on function’s prototype available to instances
  • Poodle is second typeFunction, just like DogInheritanceSet Poodle.prototype to new instance of DogCreates link between Poodle and Dog in PLCCreate properties on Poodle.prototypeAvailable to instances of Poodle
  • Rex is instance of PoodleProperty “name” defined on rex – instance propertyHas access to all of Poodle’s prototype propertiesAnd to other properties up PLC
  • Probably recognize THIS operatorLook at how THIS interacts with prototypeIn example:Socks and fluffy both instances of CatCat inherits from Object
  • When call socks.speakFinds speak property on Cat.prototypeInside of speak, encounter THISProperties on THIS walk PLC starting at instanceGreeting not a property of socks instanceGreeting is a property of Cat prototype
  • When call fluffy.speakSpeak function found on Cat.prototype, same as socksUnlike socks, fluffy has own greeting propertylookup stops at instance
  • Functions have call method that lets set execution contextTHIS operator refers back to execution context
  • When sayFoo called with exec context objTHIS = obj
  • Calling a method on an instance is same asUsing CALL to supply instance as exec context prototype method
  • Shown some basic examples so far, but don’t really take advantageDive deeper into inheritance
  • In example:Container type hasarray that it can store items inMethod to add itemsinherits from ObjectLimitedContainerInherits from ContainerChanges inherited behavior to limit how many items can be in array
  • Behavior in Container constructor creates items arrayTo get LC to also have that behaviorCALL Container constructor with THIS as exec context within LC constructor
  • Container’s addItem method just pushes into arrayWant to set a limit to how many items can be in arrayDefine new addItem method on LC prototypeThe new addItem is higher in the PLC, so it will be found before old oneAdd logic into new method to throw error if there are too many itemsCALL Container’s addItem method with THIS as exec context to get original behavior
  • Have kind of a patchwork natureCan take advantage of that to bring together lots of complicated behaviors
  • In example, CatDog borrows behavior from Cat and DogCat instances are furious when call swim methodDog instances are delightedCatDog is both delighted and furious when you call its swim method
  • May have noticed an issue in earlier examples
  • Have two types: Parent and ChildChild inherits from parent
  • When Child linked to ParentParent constructor is calledParent constructor has undesirable behaviorAlert goes off when set up inheritance
  • Get around issue with a simple helper function
  • Helper:Creates intermediate function that does nothingAssigns parent prototype to itInstantiates intermediate as prototypeBecause prototype is same b/t intermediate and parent, PLC stays intactAlso define constructor on child while we’re at itNo more undesirable behavior
  • Prototypes have never been accused of being very prettyBut they are very powerful
  • Up to now, haven’t had any real world examplesLet’s see what they can really doEXAMPLEPretty standard HTML formCommon problem is validating a formLet’s do it with prototypes!
  • Helper:Creates intermediate function that does nothingAssigns parent prototype to itInstantiates intermediate as prototypeBecause prototype is same b/t intermediate and parent, PLC stays intactAlso define constructor on child while we’re at itNo more undesirable behavior
  • Helper:Creates intermediate function that does nothingAssigns parent prototype to itInstantiates intermediate as prototypeBecause prototype is same b/t intermediate and parent, PLC stays intactAlso define constructor on child while we’re at itNo more undesirable behavior
  • And do a really good job of itStart to get into trouble when depend totally on the libraryStart to get into bad trouble when depending totally on plugins
  • Easy to…BuildModifyExpand on complex interactions
  • Help you design the interactionthe way it needs to workand in a reusable, extensible way that plays well with others
  • Any questions?

×