Javascript - 爲requireJS構建插件

Question

我寫了一個Javascript插件，並且我想讓它與requireJS兼容。但是，我有一些困難，使其正常工作。我認爲我的AMD沒有正確寫入或類似的東西。

當我嘗試執行插件構造函數時，它在requireJS加載腳本（來自requirejs的回調變量未定義）後沒有定義。

例如筆者使用的requirejs這樣的：

requirejs([ 
'./assets/js/myplugin.js' 
], function(myplugin) { 

    console.log(myplugin); // undefined 
    new MyPlugin(); // undefined 

}); 

而在myplugin.js我有這樣的腳本：

(function (root, factory) { 

if (typeof define === 'function' && define.amd) { 

    define(
     'myplugin', 
     ['brandname-util1/util1', 
     'brandname-util2/util2', 
     'brandname-util3/util3'], 
     factory 
    ); 

} else if (typeof exports === 'object' && module.exports) { 

    module.exports = factory(
     root, 
     require('brandname-util1'), 
     require('brandname-util2'), 
     require('brandname-util3') 
    ); 

} else { 

    root.MyPlugin = factory(
     root, 
     root.BrandNameUtil1, 
     root.BrandNameUtil2, 
     root.BrandNameUtil3 
    ); 

} 

}(this, function factory(root, util1, util2, util3) { 

    'use strict'; 

    var MyPlugin = function() { 
    } 

    return MyPlugin; 

})); 

腳本正確裝入（異步），但什麼都沒有定義。我不確定完全理解它是如何工作的。

編輯：這裏的utils的腳本，例如：

// util1 
(function(root, factory) { 

    if (typeof define === 'function' && define.amd) { 

     define(
      'brandname-util1/util1', 
      ['jquery'], 
      factory 
     ); 

    } else if (typeof module === 'object' && module.exports) { 

     module.exports = factory(require('jquery')); 

    } else { 

     root.BrandNameUtil1 = factory(root); 

    } 

}(this, function() { 

    "use strict"; 

    var util1 = {}; 

    // declare some functions 

    return util1; 

})); 

// util2 
(function(root, factory) { 

    if (typeof define === 'function' && define.amd) { 

     define(
      'brandname-util2/util2', 
      ['jquery'], 
      factory 
     ); 

    } else if (typeof module === 'object' && module.exports) { 

     module.exports = factory(require('jquery')); 

    } else { 

     root.BrandNameUtil2 = factory(root); 

    } 

}(typeof window !== "undefined" ? window : this, function() { 

    "use strict"; 

    var util2 = function() {}, 
     proto = util2.prototype; 

    // declare some proto 

    return util2; 

})); 

// util3 
(function (root, factory) { 

    if (typeof define === 'function' && define.amd) { 

     define(
      'brandname-util3/util3', 
      ['brandname-util1/util1', 
      'brandname-util2/util2'], 
      factory 
     ); 

    } else if (typeof module === 'object' && module.exports) { 

     module.exports = factory(
      root, 
      require('brandname-util1'), 
      require('brandname-util2') 
     ); 

    } else { 

     root.BrandNameUtil3 = factory(
      root, 
      root.BrandNameUtil1, 
      root.BrandNameUtil2 
     ); 

    } 

}(this, function (root, util1, util2) { 

    "use strict"; 

    var util3 = function() {}, 
     proto = util3.prototype; 

    // declare some proto 

    return util3; 

})); 

Answer 1

我看到的唯一的問題是，你的工廠需要root作爲第一個參數，然後模塊。它在CommonJS（第2分支）和無模塊系統（第3分支）中工作正常，但在AMD情況下（第1分支）失敗，因爲define只會用3個參數調用工廠：root將被設置爲第一個模塊依賴項列表util3將不會被設置等

如果您實際上沒有在工廠中使用root，您可以將它從參數列表中刪除，並將第2和第3分支中的調用調整爲不通過它，一切都應該工作。

否則，如果你需要在你的工廠，你可以通過改變你的第一個分支修復它做的事：

define(['brandname-util1/util1', 
    'brandname-util2/util2', 
    'brandname-util3/util3'], 
    factory.bind(undefined, root) 
); 

這臺this值在工廠進行undefined（這應該是罰款），並強制將工廠中的第一個參數設置爲值root已在您的define調用的範圍內。之後會附加模塊。

請參閱bind上的文檔瞭解其工作原理的更多詳細信息。

您也不應在您的define調用中設置模塊名稱。我在上面顯示的電話將刪除模塊名稱。該調用應該只有依賴列表和工廠。

而且您不應該將.js放在模塊名稱中。所以requirejs(['./assets/js/myplugin'],沒有.js。