從你的JavaScript模塊模式不知道JS

Question

我一直在閱讀和測試下面的代碼現在幾個小時，我似乎無法掌握某些東西。 我一直在逐步通過鍍鉻控制檯基本上放在每一行我可以添加和已經檢查，我只是不知道的東西

1）我只是不確定deps數組的目的。對我來說第一件奇怪的事情是，爲什麼腳本不會嘗試將數據放在第一個電話上（從MyModules.define("bar",[],function()）？ 爲什麼腳本第二次調用define(MyModules.define("foo",["bar"], function(bar)），然後當第一次定義應該首先完成它時，將[「bar」]添加到數組？

2）此代碼modules[name] = impl.apply(impl,deps)。每個回調，不要使用'這'..所以在這裏適用需要？另外，這可能是我在使用'apply'時回調的理解不足，但是如何閱讀？我想「申請」，一般延續 functionName.apply(obj,[])

在這種情況下，這是幾乎像是在說 functionName.apply(functionName, []) ?? 或者，這是不同的，因爲函數本身是匿名的？

var MyModules = (function Manager() { 
     var modules = {}; 

     function define(name,deps,impl) { 
      for (var i=0; i<deps.length; i++) { 
       deps[i] = modules[deps[i]]; 
      } 
      modules[name] = impl.apply(impl,deps); 
     } 

     function get(name) { 
      return modules[name]; 
     } 

     return { 
      define : define, 
      get: get 
     }; 
    })(); 

    MyModules.define("bar",[],function() { 
     function hello(who) { 
      return "Let me introduce: " + who; 
     } 

     return { 
      hello : hello 
     }; 
    }) 

    MyModules.define("foo",["bar"], function(bar) { 
     var hungry = "hippo"; 

     function awesome() { 
      console.log(bar.hello(hungry).toUpperCase()); 
     } 

     return { 
      awesome: awesome 
     }; 
    }); 

    var bar = MyModules.get("bar"); 
    var foo = MyModules.get("foo"); 

    console.log(bar.hello("hippo")); 

    foo.awesome(); 

Answer 1

，我只是不知道的deps陣列的目的。

您似乎對整個MyModules對象的目的感到困惑，不是嗎？

的define方法可用於聲明一個模塊，具有名稱，依賴關係的陣列，和一個工廠函數：

• 的name是模塊對象將被存儲在其下的字符串modules字典
• deps數組包含當前聲明的模塊所依賴的模塊的名稱。
• 將調用impl函數來創建將在name下提供的模塊對象。它確實傳遞了deps數組中已解析名稱的模塊對象。

爲什麼不腳本嘗試把數據在第一次調用它（從MyModules.define("bar",[],function()）？爲什麼腳本第二次調用來定義（MyModules.define("foo",["bar"], function(bar)）？

這意味着聲明具有名稱bar一個模塊而沒有任何依賴關係，並以取決於bar名稱foo聲明的模塊。通常，這兩個聲明將被放置在不同的腳本中。

此代碼modules[name] = impl.apply(impl,deps) - 每個回調函數，不要使用'this'..所以在這裏應用是必要的嗎？

是的，apply在這裏需要傳遞任意多個參數給函數。但是，通過this值的impl函數確實沒有任何意義，這裏null會更合適。

一個更好的和更容易理解的定義是

function define(moduleName, dependencyNames, factory) { 
    var dependencies = []; 
    for (var i=0; i<dependencyNames.length; i++) { 
     dependencies[i] = get(dependencyNames[i]); // resolve name 
    } 
    modules[moduleName] = factory.apply(null, dependencies); 
}