We’ve done a pretty good job so far of getting organized. Getting our HTML broken out in a template was a big step. We’re longer muddying the waters so to speak. Our different bits of functionally in JavaScript are broken up into discreet sections, making things easier to understand and maintain. I know we’ve been working with a pretty small demo, but I hope you can imagine how as an app gets more complicated and more lines of code, this organization is incredibly valuable.<\/p>\n
JavaScript doesn’t have any “opinion” as it were about organization. That’s likely why some people love it and some people feel lost in it. How you choose to organize it is totally up to you. That’s also likely why some people really latch onto frameworks which, opinionated or not, provide an organizational structure. For instance, Backbone<\/a>. But that’s another series!<\/p>\n For our demo, we’ll simply organize around an object that we simply create. <\/p>\n Every thing we’re doing here is related to getting some movies on the page, so we’ll contain it within one “thing” called Movies. Remember we’re just doing whatever makes sense to us organizationally. This has the benefit of only putting one variable into the “global scope” as well. If we did everything at the global scope, it would be a mess of accidentally overriding variables (and functions and whatever) declared elsewhere.<\/p>\n An object like that doesn’t actually “do” anything though. We’ll need to “kick it off”. <\/p>\n Having a function named init is a bit of a standard which allows anyone reading this code to know that the code within there is what runs when this group of code is executed. That should read a bit like a table of contents of what happens with this group of code. We then make other functions (more properties of the Movies object) that do things that we need to do, in discrete chunks. Remember we can call stuff whatever we want, whatever makes sense to us.<\/p>\n Pretty clear eh? You might notice Everything else that will fill in here is just moving bits of code that we already have written into the right place.<\/p>\n And done.<\/p>\n Let’s look at the four concerns we outlined earlier and see what we did about them.<\/p>\n I’d call that win. Here’s where we ended up:<\/p>\n See the Pen BwbhI<\/a> by Chris Coyier (@chriscoyier<\/a>) on CodePen<\/a><\/p>\n","protected":false},"excerpt":{"rendered":" We’ve done a pretty good job so far of getting organized. Getting our HTML broken out in a template was a big step. We’re longer muddying the waters so to speak. Our different bits of functionally in JavaScript are broken up into discreet sections, making things easier to understand and maintain. I know we’ve been […]<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":147848,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"lodge-video.php","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":""},"tags":[],"acf":[],"jetpack-related-posts":[{"id":146654,"url":"https:\/\/css-tricks.com\/video-screencasts\/127-basics-of-javascript-templating\/","url_meta":{"origin":155397,"position":0},"title":"#127: Basics of JavaScript Templating","date":"August 13, 2013","format":false,"excerpt":"A template is a chunk of HTML that you need to inject onto the page. Often templates are created \"server side\" - in that they come to the JavaScript fully formed and just need to be put into the DOM. But sometimes that isn't feasible or would require and extra\u2026","rel":"","context":"With 12 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":187264,"url":"https:\/\/css-tricks.com\/lodge\/svg\/27-animating-svg-javascript\/","url_meta":{"origin":155397,"position":1},"title":"27: Animating SVG with JavaScript","date":"November 1, 2014","format":false,"excerpt":"JavaScript is the last of the ways we'll cover on animating SVG. We looked at CSS, which is great and pretty comfortable, but it can't do a number of SVG properties that you might want to animate. Then we looked at SMIL, which is a declarative syntax right in the\u2026","rel":"","context":"In \"animation\"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":155209,"url":"https:\/\/css-tricks.com\/lodge\/learn-jquery\/23-templating-handlebars\/","url_meta":{"origin":155397,"position":2},"title":"#23: Templating with Handlebars","date":"November 5, 2013","format":false,"excerpt":"We left off in the last video with a bit of a tangled mess. All in one block of JavaScript we were mixing data retrieval, display and business logic, and templating. In this video we're going to start breaking those things up to get us on our way to more\u2026","rel":"","context":"With 4 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":149647,"url":"https:\/\/css-tricks.com\/lodge\/learn-jquery\/07-2\/","url_meta":{"origin":155397,"position":3},"title":"#07: Do!","date":"September 10, 2013","format":false,"excerpt":"As we've talked about, jQuery can be thought of as a \"select and do\" library. We've talked about selecting quite a bit, so now let's talk about some doings. Remember that pattern basically looks like this: \/\/ Select something! $(\".something\") \/\/ Do something! .hide(); Rather than working with more theoretical\u2026","rel":"","context":"With 7 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":190764,"url":"https:\/\/css-tricks.com\/video-screencasts\/135-three-ways-animate-svg\/","url_meta":{"origin":155397,"position":4},"title":"#135: Three Ways to Animate SVG","date":"December 14, 2014","format":false,"excerpt":"Animating SVG is a bit unique in that there are three distinctly different ways you can approach animating it. 1. Animating with CSS @keyframes SVG elements can be targeted and styled with CSS. Meaning, you can apply animation through @keyframes. Like this: .left-leg { fill: orange; animation: dance 2s infinite\u2026","rel":"","context":"In \"animation\"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":155382,"url":"https:\/\/css-tricks.com\/lodge\/learn-jquery\/24-templating-underscore\/","url_meta":{"origin":155397,"position":5},"title":"#24: Templating with Underscore","date":"November 7, 2013","format":false,"excerpt":"We covered templating with Handlebars in the last video. But Handlebars isn't the only templating solution on the block. In this video we'll use the templating available in Underscore. Why? Well one reason is that you might already be using Underscore on your project. It's an extremely popular library because,\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/155397"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=155397"}],"version-history":[{"count":3,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/155397\/revisions"}],"predecessor-version":[{"id":155500,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/155397\/revisions\/155500"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/147848"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=155397"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=155397"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}var Movies = {\r\n\r\n}<\/code><\/pre>\nvar Movies = {\r\n\r\n init: function() {\r\n\r\n }\r\n\r\n}\r\n\r\nMovies.init();<\/code><\/pre>\nvar Movies = {\r\n \r\n init: function() {\r\n this.setUpTemplate();\r\n this.getData();\r\n this.bindUIActions();\r\n },\r\n \r\n setUpTemplate: function() {\r\n \/\/ Templating here\r\n },\r\n \r\n getData: function() {\r\n \/\/ Data getting here \r\n },\r\n \r\n appendMoviesToPage: function(data) {\r\n \/\/ Display logic here\r\n },\r\n \r\n bindUIActions: function() {\r\n \/\/ Event delegating binding here.\r\n }\r\n \r\n}\r\n\r\nMovies.init();<\/code><\/pre>\nappendMovesToPage<\/code> isn’t called in the init<\/code>. That’s because we can’t call that until we have data to send it. That data will come from an Ajax call, meaning we need a callback. So getData<\/code> will end up calling that one.<\/p>\nvar Movies = {\r\n \r\n init: function() {\r\n this.setUpTemplate();\r\n this.getData();\r\n this.bindUIActions();\r\n },\r\n \r\n setUpTemplate: function() {\r\n Movies.compiled = _.template(\r\n \"<div class='module module-movie' style='background-image: url(<%= movieImage %>)'>\" + \r\n \"<div class='movie-info'>\" +\r\n \"<h3 class='movie-title'>\" +\r\n \"<%= movieTitle %>\" + \r\n \"<\/h3>\" +\r\n \"<p class='movie-director'>\" + \r\n \"<%= movieDirector %>\" + \r\n \"<\/p>\" + \r\n \"<\/div>\" + \r\n \"<\/div>\"\r\n );\r\n },\r\n \r\n getData: function() {\r\n $.getJSON(\"http:\/\/codepen.io\/chriscoyier\/pen\/0b21d5b4f7fbf4e7858b2ffc8890e007.js\", function(data) {\r\n Movies.appendMoviesToPage(data);\r\n }); \r\n },\r\n \r\n appendMoviesToPage: function(data) {\r\n var i, html = \"\";\r\n for (i = 0; i < data.movies.length; i++) {\r\n html += Movies.compiled(data.movies[i]);\r\n } \r\n $(\"#movies\").append(html);\r\n },\r\n \r\n bindUIActions: function() {\r\n $(document).on(\"click\", \".module-movie\", function() {\r\n alert(\"movie added\");\r\n });\r\n }\r\n \r\n}\r\n\r\nMovies.init();<\/code><\/pre>\n\n
$.getJSON<\/code>, as it’s likely we would need to do in a real situation. Other than just practice that, this will allow us to write tests around it.<\/li>\ndocument<\/code>. Our functionality will work no matter when\/how the template is appended to the page.<\/li>\n