如何从外部调用 $(document).ready 中的对象答案

【问题标题】：How to call an object within $(document).ready from outside it如何从外部调用 $(document).ready 中的对象
【发布时间】：2015-08-13 20:36:02
【问题描述】：

函数如下：

(function ($) {
	$(document).ready(function () {
		var MyObject = {
			MyFunction: function(){
				alert('I am here');
			}
		}
	});
}(jQuery));

MyObject.MyFunction();

我怎么能像上面那样称呼它？

【问题讨论】：

您的 MyObject 变量只有在文档准备好后才会被初始化。为什么要在那之前调用它？
您希望对象在哪里可用？仅在它声明的范围（文件）内？还是在外部范围（文件）中？

标签： javascript jquery

【解决方案1】：

document.ready() 回调按照它们注册的顺序被调用 (ref)。实现目标的一种方法是创建一个全局对象，然后在一个 $(document).ready() 中对其进行初始化，并在随后的 $(document).ready() 中调用它。

var MyObject = {};
(function($) {
  $(document).ready(function() {
    MyObject = {
      MyFunction: function() {
        alert('I am here');
      }
    }
  });
}(jQuery));


(function($) {
  $(document).ready(function() {
       MyObject.MyFunction();    
    });
}(jQuery));

&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"&gt;&lt;/script&gt;

【讨论】：

【解决方案2】：

您的变量在您声明它的事件之外失去作用域。

你的代码

  (function ($) {
   $(document).ready(function () {
    var MyObject = {
        MyFunction: function(){
            alert('I am here');
        }
    }
   });
  }(jQuery));

您的声明以及您的函数调用无法访问的其他函数定义的任何其他范围之外

var MyObject

需要在 $(document).ready(...) 之外

【讨论】：

【解决方案3】：

所以，您在选项 1 之后。

// Option 1: Object in a gloabl scrope
var myObject = {
    myFunction: function(){
        alert('I am here');
    }
};

(function ($) {

    // Option 2: Object in a function scope
    var myObject2 = {
        myFunction2: function(){
            alert('I am here 2');
        }
    };

    $(document).ready(function () {
        // Option 3: Object in a local (to the "(function ($) {") function scope
        var myObject3 = {
            myFunction3: function(){
                alert('I am here 3');
            }
        };

        //alerts 'I am here 2';
        myObject2.myFunction2();

        //alerts 'I am here 3';
        myObject3.myFunction3();
    });

    //alerts 'I am here 2';
    myObject2.myFunction2();

    //Uncaught TypeError: myObject3.myFunction3 is not a function - can't access a locally scoped function on a global scope
    myObject3.myFunction3();

}(jQuery));

//alerts 'I am here';
myObject.myFunction();

//Uncaught TypeError: myObject2.myFunction2 is not a function - can't access a locally scoped function on a global scope
myObject2.myFunction2();

//Uncaught TypeError: myObject3.myFunction3 is not a function - can't access a locally scoped function on a global scope
myObject3.myFunction3();

【讨论】：