Organizing jQuery Projects Without OO

Click here to load reader

  • date post

    18-May-2015
  • Category

    Technology

  • view

    2.653
  • download

    1

Embed Size (px)

Transcript of Organizing jQuery Projects Without OO

  • 1. { Evented...

2. Why You Shouldnt Write OO jQuery 3. Why You Shouldnt Write OO jQuery Troll 4. Organization 5. OrganizationX 6. Code Reuse 7. Were Used to It 8. Strategy 9. Widget 10. Widget 11. Widget 12. Widget function function function 13. Widget AjaxWidget 14. WidgetAjaxWidget HistoryAjaxWidget 15. WidgetAjaxWidget super HistoryAjaxWidget 16. Widget superAjaxWidget super HistoryAjaxWidget 17. Widget AjaxWidget 18. Widget Widget AjaxWidget HistoryWidget 19. Composability 20. X Composability 21. OO Code in JSis Crippled Evented Code 22. Instead ofcalling amethod 23. { widget.activate(); 24. User CodeWidget 25. User Code1:1 Widget 26. User Code1:1 Sync Widget 27. Trigger anEvent 28. } element.trigger("activate") 29. User Code ListenerListener Listener 30. Advantages 31. Familiar Model 32. { $("div").click(function() {})// do stuff 33. Evented Code Fits MoreCleanly with Requirements 34. When the userpicks an itemfrom the autocompleter 35. Real Example 36. Caveat: Simple Technique 37. Ive Used This Technique on Large Projects 38. Tabs 39. div.ui-tabs 40. click keypress div.ui-tabs 41. click keypress div.ui-tabstabactivate 42. click keypress div.ui-tabstabactivate 43. click keypress div.ui-tabstabactivate 44. a) open pane b) mark tab selected tabactivatedefaultanalogy: typing in text box triggers a change event 45. a) open pane b) mark tab selected tabactivate return false default 46. Tech in theExample 47. Arista Theme 48. Sass and Compass 49. (try to avoid using JS to set up layouts) 50. Staticmatic 51. jQuery BBQ (Ben Alman) 52. Demo