Modular Javascript #2 - Converting jQuery to an Object Literal Module
Why Stack Overflow recommends it
Stack Overflow users link it when learning or asking about the object literal module pattern, especially how to structure jQuery code with init, cacheDOM and render methods.
Recommended by 1 people across 1 different months, 2016 to 2018.
What it is
A 21-minute tutorial from LearnCode.academy, part 2 of a Modular JavaScript series, that takes messy plain jQuery code and refactors it into a self-contained object literal module. It shows how the pattern keeps larger front-end codebases cleaner and easier to maintain.
What people said
Recommends Robin Andrews · 2016-08 · Stack Overflow · on “Convert code to JS Object Literal Pattern”
I want to use an app object because the code given is just a tiny but essential part of what will be a much larger application. I'm trying to follow some of the ideas about modular coding presented for example here: [this video]
Cites Jacky · 2016-12 · Stack Overflow · on “Accessing DOM elements is not always working - jQuery”
I am trying to execute code that accesses elements in the page. My HTML code looks like below: <!DOCTYPE html> <head> <script src=" [LINK] "></script> <script src=" [LINK] "></script> <script type="text/javascript" src="app.js"></script> </head> <body> <div id="container"> <input type="text" id="user" /> <input type="button" id="add" value="add"/> <ul id="peopleList"> </ul> <script type="text/x-handlebars-template" id="template"> {{#each people}} <li>{{.}}</li> {{/each}} </script> </div> </body> My JavaScript code looks like below: (function(){ var people = { people: ["first", "second"], init: function(){ this.cacheDOM(); this.render(); }, cacheDOM: function(){ this.$dm = $("#container"); th
Cites Joe Consterdine · 2017-03 · Stack Overflow · on “Undefined Javascript Error On Click”
Hi thanks for your reply, The reason I used 'this.inputAdd' rather than using 'cacheDom.inputAdd' was because in this video it seems he does that? [this video] Am I mis interpreting what he's doing?
Cites user8012905 · 2017-06 · Stack Overflow · on “How to process http request inside an object literal?”
I'm currently learning about design patterns and am refactoring some code to follow the object literal pattern. However, I'm not sure how to process an http request while using this pattern. Usually I would process the data within the request itself. But is there a way to do the following? let myObj = { makeRequest: function () { let request = new XMLHttpRequest() request.open('GET', 'url') request.onload = function () { if (this.status >= 200 && this.status < 400) { // somehow this.response gets stored into myObj.returnedData myObj.processRequest(this.response) // this works } } request.send() }, processRequest: function (data) { console.log(data) } init: function () { this.makeRequest() }
Cites Imnotapotato · 2018-01 · Stack Overflow · on “Modular JS: global functionality on 3 sections (checkboxes and radios) & Sholud I apply "rendering" in my code?”
This is a section on my web app where a user can "subscribe" to a report sent in 3 different times: weekly, monthly, quarterly. (can choose 1 option from each of the three). I am struggling with both planning the best solution for this while struggling with the code pattern. What should happen: When loading the page, I have to pass a PHP var that will set the current status of the users report (variable report in the begging of my code [{weekly},{Monthly},{Quarterly}]) 0,1,2,3 will be the indicators . Ex: if a user have set in the past that he wants a 6 month report monthly - he's going to see the checkbox of the "monthly" checked - and "6 months" selected in the radio button and the variabl