javascript - Requirejs:AMD 模块未定义

Question

我想使用datepickk.js在我的模块中:即使这个插件支持 AMD，我也无法在 RequireJS 中加载它: http://jsfiddle.net/numediaweb/5xbqqr0j/13/

// Config Object
requirejs.config({
    // Local Directory
    baseUrl: "/js",
    // Script Locations
    paths: {
        // Common Libraries
        "jquery": "//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min",
        "datepickk": "//crsten.github.io/datepickk/dist/datepickk.min"
    }
});

// Check Dependencies
requirejs(['jquery', 'datepickk'], function ($, Datepickk) {
    var loadedMods = require.s.contexts._.defined;
    console.log(loadedMods);
    $('#message').text('Loaded modules => '+JSON.stringify(loadedMods));
    return {};
});

如果您检查控制台，您将看到 jquery 已定义，而模块未定义。

知道为什么会发生这种情况吗？

我尝试了加载此模块的另一种变体:

require.config({
    paths: {
        'Datepickk': '//crsten.github.io/datepickk/dist/datepickk.min'
    },

但是我收到了这个错误:

datepickk.js:1146 Uncaught TypeError: Cannot freeze
    at Function.freeze (<anonymous>)
    at Datepickk (datepickk.js:1146)
    at Object.execCb (require.js:1693)
    at Module.check (require.js:881)
    at Module.enable (require.js:1173)
    at Module.init (require.js:786)
    at callGetModule (require.js:1200)
    at Object.completeLoad (require.js:1587)
    at HTMLScriptElement.onScriptLoad (require.js:1714)

Answer 1

谁为 datepickk.js 编写了 AMD 代码需要阅读如何编写 AMD 模块。有两个问题:

1. 模块名称硬编码为 Datepickk因为define调用电话define('Datepickk', Datepickk) . 第一个参数对名称进行硬编码。这确实是一件坏事，因为 RequireJS 文档明确指出开发人员不应该硬编码名称，而是让优化器根据需要添加名称，但这里有人没有注意。

   这解释了为什么你的第二个配置，即 Datepickk 的配置在paths有效，但你的第一个不行。您必须将其称为 Datepickk在你的paths配置。如果您希望自己的代码将其引用为 datepickk ，您可以使用map配置除了 paths :

   map: {
     "*": {
       datepickk: "Datepickk"
     }
   }
   

2. 是的，即使您修复了上述问题，您仍然会遇到遇到的错误。查看 Datepickk 的文档我看到你将它与 do new Datepickk(...) 一起使用。如果这样做，那么要卡住的对象应该是分配给 this 的新对象。当构造函数执行时，由 JavaScript 虚拟机执行。如果你看一下生成 Datepickk 的代码可用于其他代码，这就是您所看到的:

   if ( typeof define === 'function' && define.amd ) define('Datepickk', Datepickk);
   else if ( typeof exports === 'object' ) module.exports = Datepickk;
   else window.Datepickk = Datepickk;
   

   第二和第三分支导出Datepickk世界的 build 者。没关系。不过，第一个分支对您来说很重要，调用 define与 Datepickk充当模块工厂。当RequireJS执行define时调用，它立即调用 Datepickk构建模块。在这种情况下this未设置为任何特定值，因此它设置为当前 Window实例(JavaScript 虚拟机执行此操作)和 Object.freeze失败了。 define调用应该是:

   define(function () {
       return Datepickk;
   });
   

   (我还删除了硬编码的模块名称。)这将构建一个具有函数 Datepickk 值的模块。 .