2015年要求/ AMD和異步資源

Question

我正在構建一個使用異步資源的庫。我希望這個庫能夠在AMD/require下載入。

我見過2011年的this discussion關於承諾支持，但它沒有去。 我見過插件，如async和require-promise - 但我不知道我對安裝插件的庫感覺如何。

我很想知道在加載資源和/或依賴腳本方面是否有任何改變。如果承諾不受支持，是否有另一種方式表明腳本以異步方式準備好了嗎？

Answer 1

我潛入require.js的源代碼中，並沒有找到一種方法來進行異步定義。插件有能力，但簡單的定義不能。我認爲背後的原因是異步循環依賴有點棘手。

但是也不是沒有可能寫一個迷你異步要求樣庫：

(function(context) { 
    const modules = new Map(); 

    function require(name) { 
    return Promise.resolve(null).then(function() { 
     const module = modules.get(name); 
     if (!module) throw new Error("Undefined module"); 
     if (module.promise) { 
     return module.exports; 
     } else { 
     return module.promise = Promise.all(
      module.deps.map(internalRequire) 
     ).then(function(args) { 
      return module.factory.apply(context, args); 
      }).then(function(defExport) { 
      if (defExport !== undefined) { 
       module.exports.default = defExport; 
      } 
      return module.exports; 
      }); 
     } 
     function internalRequire(name) { 
     return (name === 'exports') ? module.exports : require(name); 
     } 
    }); 
    } 

    function define(name, deps, factory) { 
    if (modules.has(name)) throw new Error("Redefined module"); 
    modules.set(name, { 
     name: name, 
     deps: deps, 
     factory: factory, 
     exports: {}, 
     promise: null 
    }); 
    } 

    context.require = require; 
    context.define = define; 
})(self); 

用法：

define('A', ['B'], function(dep) { 
    return new Promise(function(resolve) { 
     setTimeout(function() { 
      resolve("A(" + dep.default + ")"); 
     }, 100); 
    }); 
}); 

define('B', ['C'], function(dep) { 
    return new Promise(function(resolve) { 
     setTimeout(function() { 
      resolve("B(" + dep.default + ")"); 
     }, 100); 
    }); 
}); 
define('C', ['A'], function(dep) { 
    return new Promise(function(resolve) { 
     setTimeout(function() { 
      resolve("C(" + dep.default + ")"); 
     }, 100); 
    }); 
}); 

require("A").then(function(s) { 
    console.log(s); 
});