Why You Shouldn't Write OO
2 likes914 views
The document discusses why object-oriented jQuery code should be avoided. It recommends using an event-driven approach instead, where components trigger events to communicate rather than calling methods directly. This fits more cleanly with asynchronous requirements and how users typically interact with elements like autocompleters. The document provides an example of building tab functionality in an event-driven way by binding to click and keypress events that trigger a tabactivate event.
Why You Shouldn't Write OO
- 1. { Evented...
- 2. Why You Shouldn’t Write OO jQuery
- 3. Why You Shouldn’t Write OO jQuery Troll
- 4. Organization
- 5. Organization X
- 6. Code Reuse
- 7. We’re Used to It
- 8. Strategy
- 9. Widget
- 10. Widget
- 11. Widget
- 14. Widget AjaxWidget HistoryAjaxWidget
- 15. Widget AjaxWidget super HistoryAjaxWidget
- 16. Widget super AjaxWidget super HistoryAjaxWidget
- 19. Widget Widget AjaxWidget HistoryWidget
- 20. Composability
- 21. X Composability
- 22. OO Code in JS is Crippled Evented Code
- 23. Instead of calling a method
- 25. User Code Widget
- 27. User Code 1:1 Sync Widget
- 28. Trigger an Event
- 30. User Code Listener Listener Listener
- 31. Advantages
- 32. Familiar Model
- 33. { $("div").click(function() { }) // do stuff
- 34. Evented Code Fits More Cleanly with Requirements
- 35. “When the user picks an item from the autocompleter”
- 36. Real Example
- 37. Caveat: Simple Technique
- 38. I’ve Used This Technique on Large Projects
- 39. Tabs
- 41. div.ui-tabs
- 42. click keypress div.ui-tabs
- 43. click keypress div.ui-tabs tabactivate
- 44. click keypress div.ui-tabs tabactivate
- 45. click keypress div.ui-tabs tabactivate
- 46. a) open pane b) mark tab selected tabactivate default analogy: typing in text box triggers a change event
- 47. a) open pane b) mark tab selected tabactivate return false default
- 48. Tech in the Example
- 49. Arista Theme
- 50. Sass and Compass
- 51. (try to avoid using JS to set up layouts)
- 52. Staticmatic
- 54. Demo