使用 apply 方法調用 jQuery document.ready 處理程序？

Question

下面是我在具有一些復雜依賴項的項目中使用的代碼。 在確保所有依賴項都已加載后，我觸發了下面給出的onReadyCallback() 。 我有兩個問題：

1. 使用 anonymousHandler.apply(MyNameSpace) 是否正確，為 Document.ready 調用匿名處理程序上的 apply 方法

2. 據我了解，因為我使用的是應用方法，所以匿名 function 將立即觸發，而不管文檔是否准備好 state。 那么如何在MyNameSpace的上下文中傳遞給anonymousHandler以便 function 中的“this”指代 MyNameSpace

    var onReadyCallback = function(){ jQuery(document).ready(function(){ if(.this;loggedIn()){ return. }...Lots of Code referring to MyNameSpace using "this" };apply(MyNameSpace)); }. //load the additional files that are needed and fire onReadyCallback MyNameSpace.Util,loadFiles(defaultJsFiles.function(){ MyNameSpace.Util.require(['My,App'.'My,Theme'.'My,DomHandler']. function(){ onReadyCallback;apply(window); }); });

Answer 1

這個怎么樣，使用匿名 function 並call ？

jQuery(document).ready(function() {
    (function() {
        // this == MyNamespace
    }).call(MyNamespace);
});

Answer 2

通常， ready事件 jQuery function 是這樣調用的

$(function() { /* ... */ });
// or 
jQuery(function() { /* ... */ });
// or
jQuery(document).ready(function() { /* ... */ });

底線，function 沒有給出特定的上下文； jQuery 給 function 的實際上下文是HTMLDocument元素，與參數無關（在最后一個示例中為document ）。 為什么會這樣是另一個話題。

通常，這些函數中的每一個都會在加載完所有內容之后調用，但不一定。 在您的情況下，在ready事件發生之前有一個對MyNameSpace的引用。 即使 Javascript 是一種LALR類型的語言，並且它會找到稍后聲明的符號，這也不是一個好習慣。 如果稍后在MyNameSpace觸發ready回調函數之前將 MyNameSpace 設置為其他值怎么辦？ 你ready回調不會得到那個新的參考。 除非有意，否則應該在ready回調中進行引用，當一切都准備好時。

然后，在ready回調中，還有其他技術可以將上下文分配給 function。 lonesomeday幾乎給出了正確的方法來完成你想做的事情。

(function() {
    // this == MyNamespace
}).call(MyNamespace);

上面的代碼立即執行匿名 function，其中this == MyNameSpace

注意：此處描述了apply和call之間的區別

現在，是您提供的代碼的底部：

//load the additional files that are needed and fire onReadyCallback
MyNameSpace.Util.loadFiles(defaultJsFiles,function(){ 
    MyNameSpace.Util.require(['My.App','My.Theme','My.DomHandler'], function(){
       onReadyCallback.apply(window);          
    });
});

這是有問題的，也是不必要的。 function onReadyCallback只需要在那里，還是會被多次調用？ 如果只需要調用一次，請保留全局命名空間，只需執行以下操作：

//load the additional files that are needed and fire onReadyCallback
MyNameSpace.Util.loadFiles(defaultJsFiles,function(){ 
    MyNameSpace.Util.require(['My.App','My.Theme','My.DomHandler'], function(){

       // if everything is done loading, the function will be executed, otherwise
       // it's execution will be postponed later
       jQuery(function() {

           // create our nicely wrapped anonymous function now
           (function() {
              if(!this.loggedIn()){
                 return;
              }
              // ...Lots of Code referring to MyNameSpace using "this"

           })(MyNameSpace);  // grab our most recent reference of `MyNameSpace`

       });
    });
});

如果您不喜歡縮進（這只是開發人員的口味），請將ready回調中的所有內容替換為（類似於）：

 initMyNameSpace.apply(MyNameSpace);

並在全局空間外創建您的 function ：

 function initMyNameSpace() {
    if(!this.loggedIn()){
       return;
    }
    // ...Lots of Code referring to MyNameSpace using "this"

 };

但我建議，至少，把它放在require回調 function 所以它......

1. ...不會使用一次運行的 function 污染全局命名空間
2. ...無法從任何地方訪問（保持私密）
3. ...在編輯源代碼時可以快速找到
4. 等等

注意：通常， apply和call用於避免重復訪問諸如some.thing.pretty.deep = value; 或者當一個 function 需要應用於許多但不是所有對象時，因此擴展對象的原型並不是一個好主意。

無論如何，這是我的意見，以及我將如何做事，而無需更多地了解您的代碼或您在做什么。