编写无需 requirejs 即可工作的 Requirejs 模块答案

【问题标题】：Write Requirejs modules that work without requirejs编写无需 requirejs 即可工作的 Requirejs 模块
【发布时间】：2014-07-29 04:28:54
【问题描述】：

我想以某种方式创建我的模块，它们可以在有或没有 requirejs 的情况下使用（没有 require js，它们应该可以正常工作，所以我必须确保它们正确加载，比如将脚本标签放在右边顺序）。

所以 jQuery 是这样的：

// export module
if ( typeof define === "function" && define.amd ) {     
    define(["dep"], function(dep){
        dep.fn.test = test;
        return dep;
    });
}
else{ 
    dep.fn.test = test;
}

实际的模块是这样定义的

var dep = function(...){...}

此定义和导出部分位于 IIFE 中，以将所有内容保持在全局范围之外。

通常它运行良好，但有一个例外，即依赖项不可用。这个问题可以通过在define部分定义函数来解决，但这意味着定义它两次，在define部分和下面的else部分。

我怎样才能让它工作但只定义一次模块？

我对核心 dep 有“类似插件”的扩展，这些扩展都应该在单独的文件中，因此主 dep 必须作为依赖项传递

顺便说一句，这很好用。但这意味着我要编写两次测试代码。

(function(){
    // export module
    if ( typeof define === "function" && define.amd ) {     
        define(["dep"], function(dep){
            dep.fn.test = function(){...ssomething using dep...};
            return dep;
        });
    }
    else{ 
        dep.fn.test = unction(){...ssomething using dep...};
    }

})

好的，我试试另一个例子

animate/animate.js（这是我的主文件）

define(function(){
  ...
  return animate;
});

animate/modules/easing.js（这是一个模块文件）（功能（）{ 变轻松 = 函数（）{ // 使用 animate.js 中的动画主函数 // 动画在这里不可用 ... };

if ( typeof define === "function" && define.amd ) {
    define(["animate/animate"], function(animate){
      // animate is available here
      ...
     animate.fn.ease = ease;
     return animate;
    });
}
else
{
    // if no requirejs, animate is global
    animate.fn.ease = ease;
}
});

【问题讨论】：

标签： javascript module requirejs

【解决方案1】：

我认为你只是写错了define，所以它没有被注册。这是我用的。

if (typeof define === "function" && define.amd) {
    define("telegraph", [], function () { return telegraph; });
}

放在上下文中

(function(window) {
    var telegraph = function() { };

    telegraph.prototype.test = function() {
       // do something
    };

    if (typeof define === "function" && define.amd) {
        define("telegraph", [], function () { return telegraph; });
    }

    window.telegraph = telegraph;

})(window);

编辑

问题实际上是如何定义test 并在内部使用dep，这样您就不必将其作为依赖项提供，并且可以定义一个命名的dep 模块。一种解决方案是在构造函数中注册二级函数并将this 捕获为self（或另一个变量）以在函数中使用。这里的关键是您使用define 来定义命名模块，并且通过在构造函数中使用捕获的上下文，您不需要提供父对象作为依赖项。示例（在http://jsfiddle.net/YS8v6/ 使用小提琴）：

(function(){
    var dep = function() {
        var self = this;
        self.fn.test = function() {
            self.foo();
        };
    };

    dep.prototype.foo = function() {
       alert('foo');
    };

    dep.prototype.fn = function() {

    };

    if ( typeof define === "function" && define.amd ) {     
        define('dep', [], function() { return dep; });
    }

})();

【讨论】：

嘿，我不这么认为，因为“test”已注册，而且通常dep已注册，而test是dep的一种方法。但是我无法在 test IF 的函数中访问 dep（并且只有当我定义了 requirejs 定义语句的 test outsie 时）。如果我在它的范围内定义它就可以了。如果我错了，请更详细地解释它，以便我知道在哪里可以解决问题。
对不起，但这无济于事，我需要将它们放在单独的文件中，这就是我在任何情况下都使用 requirejs 的原因。我只需要知道如何编写一次“缓动”函数，但让它尝试仅在定义调用中访问主动画对象。

【解决方案2】：

实际问题似乎是 define 在 IIFE 中不可用，但 window.define 可用。因此，将 define 作为参数传递给 IIFE 即可解决问题。

(function(define){
    // export module
    if ( typeof define === "function" && define.amd ) {     
        define(["dep"], function(dep){
            dep.fn.test = function(){...ssomething using dep...};
            return dep;
        });
    }
    else{ 
        dep.fn.test = unction(){...ssomething using dep...};
    }

}(window.define))

在它检查 define 之前，没有找到它并立即尝试将其附加到 dep.fn.test 没有 requirejs 定义部分。

【讨论】：