Javascript:声明要在全局使用的函数的最佳方法?
我的javascript文件变得非常大(3000多行),我对如何布局我的文件和delare函数感到困惑,以便他们可以调用文件中的任何位置。
总结一下我的JS文件目前看起来有点像这样:
//ALL GLOBAL VARIABLES FIRST DECLARED HERE var var1 , var2 ,var3 $(document).ready(function(){ //JQUERY STUFF }); //ALL FUNCTIONS THAT NEED TO BE GLOBAL DECLARED HERE function myFunction(){ //do some stuff here }
我遇到了这个问题,因为我调用的一些函数似乎在调用时没有被声明或者没有全局可用。 这一切都非常令人困惑!
有人可以建议使用某些JS函数,对象和变量来布局大js / jquery文件的最佳方法,可以在文件中的任何位置引用它们。
更新:
所以要简化它是正确的(参见我的评论)?
window.MainModule = (function($, win, doc, undefined) {//WHAT IS BEING PASSED IN HERE? var foo, bar, modules; //VARIABLES ACCESSIBLE ANYWHERE var modules["foobar"] = (function() {//WHAT IS A MODULE? WHEN WOULD I USE A SEPERATE MODULE? var someFunction = function() { ... };//DECLARING MY FUNCTIONS? ... return { init: someFunction,//IS THIS WHERE I USE/BIND MY FUNCTIONS TO EVENTS AND ELEMENTS? ... }; }()); // hoist a variable into global scope window.Global = someLocal; return { init: function() {//FUNCTION TO INIT ALL MODULES? for (var key in modules) { modules[key].init(); } } }; }(jQuery, this, document));
模块部分没有正确定义……这是一个稍微整理的例子。
window.MainModule = (function($, win, doc, undefined) { var modules = {}; // -- Create as many modules as you need ... modules["alerter"] = (function(){ var someFunction = function(){ alert('I alert first'); }; return { init: someFunction }; }()); modules["alerter2"] = (function(){ var someFunction = function(){ alert('I alert second'); }; return { init: someFunction }; }()); return { init: function(){ for (var key in modules){ modules[key].init(); } } }; }(jQuery, this, document)); $(window.MainModule.init);
// We always use closures don't we? window.MainModule = (function($, win, doc, undefined) { var foo, bar, modules; // List of local variables. var modules["foobar"] = (function() { var someFunction = function() { ... }; ... return { init: someFunction, ... }; }()); // hoist a variable into global scope window.Global = someLocal; return { init: function() { for (var key in modules) { modules[key].init(); } } }; }(jQuery, this, document)); // Let's kick off the MainModule on $.ready // I recommend you do this in your `html` with page specific data. $(window.MainModule.init);
[[免责声明]] :这是一个伪代码模块,为简洁起见,不包括一些标准代码。
在整个函数中可以使用主闭包内的var x
声明的任何内容。 当然除非你设置它,否则它不会被设置为你期望的设置。
控制加载和流程拆分代码到自执行闭包中自动执行的内容以及需要由控制器手动inited
的页面/用户特定参数。
您可以在Window范围中声明它们:
window.variableName = myVariable;
或者你可以省略var,这与在窗口范围内声明某些内容相同:
variableName = myVariable;