jquery - How to get the value of variable in different javascript file? - Stack Overflow

admin管理员组

文章数量:1305521

test.html

 <script src="jsv/test1.js"></script>
 <script src="jsv3/test2.js"></script>

test1.js:

(function ($) {
  var settings = {
    taphold_threshold: 750,
    hold_timer: null,
    tap_timer: null
  };)
};

test2.js:

var Navigation = {
  init: function () {
    self = this;
    $('#button').live(tapMode, function () {
      alert(settings[taphold_threshold]);
    });
  }
}

I would like to get the value of settings : taphold_threshold, but it seems i can not get the value by simply alert it. test2.js is the caller and test1.js is callee. It should be some scope problem. How to get the value (750) ? Thanks

test.html

 <script src="jsv/test1.js"></script>
 <script src="jsv3/test2.js"></script>

test1.js:

(function ($) {
  var settings = {
    taphold_threshold: 750,
    hold_timer: null,
    tap_timer: null
  };)
};

test2.js:

var Navigation = {
  init: function () {
    self = this;
    $('#button').live(tapMode, function () {
      alert(settings[taphold_threshold]);
    });
  }
}

I would like to get the value of settings : taphold_threshold, but it seems i can not get the value by simply alert it. test2.js is the caller and test1.js is callee. It should be some scope problem. How to get the value (750) ? Thanks

• javascript
• jquery
• scope

Share Improve this question Follow edited Jan 7, 2013 at 8:43 Sang Suantak 5,26522 gold badges2929 silver badges4646 bronze badges asked Jan 7, 2013 at 8:41 user782104user782104 13.6k6060 gold badges178178 silver badges315315 bronze badges 0

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 4

The problem is indeed scope - settings will be in an anonymous scope which is not available outside of the closure.

You could change test1 to have a sort of "namespace" - say something like global (although I would personally use a more descriptive name than global).

var global = {};
global.settings = {
    taphold_threshold: 750,
    hold_timer: null,
    tap_timer: null
  };

The from test2 you can use:

alert(global.settings.taphold_threshold);

Your code hints at a namespace pattern but falls slightly short.

You might like to consider something like this

var TAP = (function($) {//functional namespace
  var settings = {
    hold_threshold: 750,
    hold_timer: null,
    timer: null
  };
  var setSettings = function(s) {
    settings = $.extend(settings, s);
  };
  var getSettings = function() {
    return settings;
  };
  return {
    set: setSettings,
    get: getSettings
  };
})(jQuery);

Thus, TAP has private member settings and public members set() and get(). You will see that further private and public members are easily added.

Now you have a mechanism to both set and get TAP settings from anywhere that TAP is within scope:

TAP.set({hold_threshold: 500});

var Navigation = {
  init: function () {
    self = this;
    $('#button').live(tapMode, function () {
      alert(settings[TAP.get().hold_threshold]);
    });
  }
}

With TAP as a member in the global namespace, it's public methods are available in all scopes.

More typically, you will use the MODULE pattern, which puts just one PROJECT member into the global namespace, containing any number of MODULES, each containing any number of functional NAMESPACES, for example :

var MYPROJECT = {};//global
MYPROJECT.MODULE1 = {};
MYPROJECT.MODULE1.TAP= (function($) {
  var settings = {
    hold_threshold: 750,
    hold_timer: null,
    timer: null
  };
  var setSettings = function(s) {
    settings = $.extend(settings, s);
  };
  var getSettings = function() {
    return settings;
  };
  return {
    set: setSettings,
    get: getSettings
  };
})(jQuery);

By convention, MYPROJECT, its MODULES and its functional NAMESPACES are capitalized.

settings is nested within a closure and it cannot be accessed from the outside. One solution is to remove the closure so that it bees a global object. Another solution is to assign it to the window object, same as making the variable global but this works from inside closures. Here is an example:

(function ($) {
    window.my_namespace = window.my_namespace || {};
    window.my_namespace.settings = {
        taphold_threshold: 750,
        hold_timer: null,
        tap_timer: null
    };
});

var Navigation = {
    init: function () {
        self = this;
        $('#button').live(tapMode, function () {
            alert(my_namespace.settings[taphold_threshold]);
        });
    }
};

Since var settings is defined in test1.js inside a closure, hence the problem exists.

You might want to define the settings variable as

window.settings = ...

OR

window['settings'] = ...

So now settings would be defined as a global variable.

本文标签： jqueryHow to get the value of variable in different javascript fileStack Overflow