Jump to content
Larry Ullman's Book Forums

Setting Data From A Source To Html Elements With Js Functions?


Recommended Posts

Hey, guys.

 

I have a beginners question here. How do you add data to HTML elements from a source (a db, files, etc) using JavaScript functions found inside a file in a flexible way?

 

I've gathered that you should always wrap your JS in an anonymous self-invoking function, so that functions and variables don't polute the global name space. These functions are then not possible to use moving on. (As is wanted behavior generally) I'll demonstrate...

// All JS code from the file myAwesomeJs.js...
// This file is loaded using HTML <script...>
(function() {
	var Search = {
	    setSource : function(data) {}; // Does lot's of operations
	};
        
        Search.setSource(something); // Rechable/in scode...
})();
// End of the file myAwesomeJs.js

// Here is the page JS
<script src="myAwesomeJs.js"></script>
<script>
    $(document).ready(function() {
        Search.setSource(something); // Undifined. Function not rechable/not in scope...
        // Could of course place function declaration here... (But I don't want to)
    });
</script

I could of course move the needed function inside the page's JS, inside document ready. I ask because I would like to know how to structure this properly. I'm guessing I need to expose some kind of variable that let's me access the function, but I'm asking because I want to do it correctly the first time.

 

The function will get JSON data that it needs to parse. It should then perform calculations on the data and add elements to several input fields and span tags. myAwesomeJs.js contains several methods that will ease the pain in doing this, so I don't want to duplicate code. That's why I'm asking.

 

Hope this is possible to understand. :)

Link to comment
Share on other sites

Do you want to load the data only once, or do you want to continually load new data based on a certain event or events?

 

If the former, you can load the data when the site first loads within your anonymous self-invoking function, and you'll be fine.

If you want to load new data every time an event (or timer) occurs, then you will need to set up that event (or timer) within the anonymous self-invoking function, and you'll be fine.

 

Even though the variables declared within the anonymous self-invoking function will all be deleted from memory, any connections to callback functions within setTimeout/setInterval functions or DOM elements will remain intact. In other words, you'll no longer be able to access the data from the variables, but the necessary data will be retained in memory, and thus accessible to the necessary JS internals.

 

Now, with all that said, I think there's something else more important to understand here: Anonymous self-invoking functions are really only useful in the final JS used to put everything together.

What I mean by this is that if you want to put some JS within a file that you want to use as a module/library, then that JS should not be within an anonymous self-invoking function. Instead, you should use one of the many module patterns available. This is exactly what libraries like jQuery, Modernizr and SWFObject do; they expose a single variable to the global namespace.

 

Hope that helps.

Link to comment
Share on other sites

Thank you, Jon.

 

Do you have a short example on creating such a module pattern easily? I don't really need anything fancy, but I want to wrap several objects inside a single namespace like NYBG. A link or a reference to the book I sent you is enough. I'll share my final solution later on.

Link to comment
Share on other sites

I think you pretty much defined exactly what you should do. Simply defining a single object within an include file, and then putting everything you need within that object should be fine. For example:

 

NYBG.js

var NYBG = {
  
  property1: value1,
  
  property2: value2,
  
  method1: function () {
  
  },
  
  method2: function () {
  
  },
  
  // Etc.
  
};

And then in your HTML file, you might do something like the following:

<script src="NYBG.js"></script>

<script>
  
  (function () {
    
    'use strict';
    
    var init;
    
    init = function () {
      
      // Init DOM, etc., and then use NYBG as you please.
      
    };
    
    init();
    
  }());
  
</script>

That help?

Link to comment
Share on other sites

 Share

×
×
  • Create New...