我應該如何編寫我的定義以使用curl.js？

Question

我正在閱讀Addy Osmani關於撰寫AMD模塊的出色博客文章 。 我從他的帖子中摘錄了一個簡單的js塊：

define('modTest', [],
  // module definition function
  function () {
      // return a value that defines the module export
      // (i.e the functionality we want to expose for consumption)

      // create your module here
      var myModule = {
        doStuff:function(){
          console.log('Yay! Stuff');
        }
      }

      return myModule;
  }
);

我取出了對foo和bar的依賴。 只需要一個簡單的對象登錄到控制台。

所以我將其保存在/js/modTest.js ，然后嘗試加載它：

curl(['/js/modTest.js'])
 .then(function(mt) {
     console.log("Load complete"); 
     console.log("mt:"); 
     console.log(mt); 
     mt.doStuff()
  }, function(ex) {alert(ex.message);})

結果：錯誤： Multiple anonymous defines in URL 。 好，那沒用。 嘗試添加名稱空間： define('myCompany/modTest', [], ，，相同結果。嘗試在依賴項數組中添加空字符串，結果相同。

還嘗試了curl(['modTest.js'], function(dep){console.log(dep)}); 結果相同。

Addy博客文章中的代碼不正確嗎？ 難道我做錯了什么？ 也許是卷曲的錯誤？

更新5/24 ：我放棄了curl.js，而使用了require.js。 零奇數錯誤，轉換工作很少。 我確實需要處理amdefine才能使我的代碼在客戶端和服務器端運行（兩個地方都有一個對象，因此必須配置grunt來解決這一問題）。 我的定義通常如下所示：

define(->
    class AlphaBravo 
    ... 

而且加載也沒有任何麻煩。

Answer 1

您要求curl（）獲取名為“ /js/modTest.js”的模塊。 它找到文件並加載它，並找到了一個名為“ modTest”的模塊，因此它抱怨。 :)（但是，該錯誤消息非常錯誤！）

解決方法如下（選擇一個）：

1）從您的define（）中刪除ID。 不建議使用ID。 通常僅在AMD構建工具中以及在測試工具中聲明模塊時使用。

2）通過在define（）中給它的ID來引用該模塊。 （同樣，在大多數情況下，不建議使用ID。）

curl(['modTest'], doSomething);

3）將包（或路徑）映射到包含應用程序模塊的文件夾。 我不清楚您的示例中會有什么，因為modTest似乎是一個獨立的模塊。 但是，如果您決定將應用程序的文件組織在“ app”軟件包下，則您的config可能如下所示：

packages: [ { name: 'app', location: 'app' } ]

然后，當您有依賴於modTest模塊的代碼時，可以通過ID“ app / modTest”來獲取它。

curl(['app/modTest'], doSomething);

我希望這有助於清理問題！

Fwiw，Addy的示例實際上可以使用正確的配置，但是我在那篇文章中沒有看到任何配置（或者我沒看過）。 這樣的事情可能會起作用：

packages: [ { name: 'app', location: '.' } ]

- 約翰

Answer 2

我有一個類似的問題，原來是我在其他庫中使用的包含順序。 我以傳統方式（在頭中的腳本標簽）將handlebars.js，crossroads.js，jquery和其他一些庫加載到我的項目中，發現當我首先放置curl.js時，會出現此錯誤，但是最后添加它時，不會出現此錯誤。

我的頭部標簽現在看起來像這樣：

<script type="text/javascript" src="/js/lib/jquery.js"></script>
<script type="text/javascript" src="/js/lib/signals.js"></script>
<script type="text/javascript" src="/js/lib/crossroads.js"></script>
<script type="text/javascript" src="/js/lib/handlebars.js"></script>
<script type="text/javascript" src="/js/lib/curl.js"></script>
<script type="text/javascript" src="/js/main.js"></script>

Answer 3

您的define調用有問題。 它被命名

有關如何編寫定義的完整信息，請參見AMD規范 ，但這是我希望在js/modTest.js文件中看到的js/modTest.js ：

define(/* this is where the difference is */ function () {
      // return a value that defines the module export
      // (i.e the functionality we want to expose for consumption)

      // create your module here
      var myModule = {
        doStuff:function(){
          console.log('Yay! Stuff');
        }
      }

      return myModule;
  }
);

現在，無聊的解釋：

CurlJS很棒。 實際上，在處理完RequireJS和CurlJS兩者之后，我會說CurlJS在一個類別中比RequireJS更加出色-腳本執行順序的可靠性。 因此，您處於正確的軌道上。

關於CurlJS的主要不同之處在於，它使用“每個加載的模塊至少找到一個匿名定義，否則就是錯誤”的邏輯。 RequireJS使用超時，它可以有效地忽略給定文件中未定義任何內容的情況，但是會因捕獲的加載/解析錯誤而崩潰。

區別就是讓您來這里的原因。 CurlJS期望每個加載的模塊至少有一個匿名 （如未命名）定義。 仍按預期處理命名定義很好的句柄。 第二步，將“ js / modTest.js”的內容移動到內聯代碼中，您將不得不為定義“命名”。 但是，那是另一個故事。