将* .js文件的内容放入对象

Question

I have a javascript file with a lot of global objects. That is, I have a lot of the following sorts of code going on:

var foo = 5;
var bar = "string";

var getStuff = function () {
    //...getStuff
}

Question: What is the easiest way for me to place the entirety of this file into an object?

It seems to me my options are as follows:

1. Wrap the entire file in a var Object = { ... }; . The problem is that is that I have to change the syntax of how variables and functions are declared.

2. Manually prefix Object.xxx before each declaration. This is also a lot of manual work, and makes things slightly verbose.

Is there a better way? Or if not, is there a reason to prefer (1) or (2)?

Answer 1

I guess you want this way

var someObject = function (window, document, undefined) {
  /*you code...etc here*/
  return {
    method1 : your_method...,
    method2 : your_method...,
    method2 : your_method...,
    object : your_object...
  }
} (window, document);

The reason to pass window and document here is to make it be a local variable instead a foreign variable to minimize the cost for lookup variable. Most js engine now can handle that by themself, so this may not be really required nowadays. Just in case this code may be ran on a really old browser.

And the undefined passed that way is also due to compatibility reason, undefined is a override variable on some old browsers. New browsers won't allow such action.

Answer 2

You're not looking for a Class or Object. Looking at your description, I think you want something like a module.

You can hide your variables from global scope and "export" relevant bits like this:

var MyModule = (function(){

  // regular code here
  var hidden = 10,
      visible = 20;

  function doSomething() {
    return hidden + visible;
  }

  // the "export" part
  return {
    twenty: visible,
    doSomething: doSomething
  };

})(); 

// then:

MyModule.doSomething(); // => 30
MyModule.twenty + 1 // => 21
MyModule.hidden     // undefined - no such thing here 
// hidden, visible and doSomething without MyModule. are invisible here

That's one example of emulating modules in JS. That (function(){...})() part is called IIFE .

Answer 3

There are different JavaScript design patterns you can follow to accomplish this.

I suggest going over this online book: http://addyosmani.com/resources/essentialjsdesignpatterns/book/