Require.js嵌套需要

时间:2012-05-23 11:53:54

标签: javascript jquery requirejs

我正在尝试使用requireJS,但我想构建一个依赖关系层次结构:main需要obr.platcomobr.platcom需要obr(例如)。

我有这种文件层次结构:

- index.html
-> js
   - main.js
   -> lib
      - jquery.js
      - require.js
   -> obr [my own 'libraries']
      - obr.js
      - obr.platcom.js

的index.html

<!DOCTYPE html>
<html lang="es">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <meta name="viewport" content="initial-scale=1.0, width=device-width" />
        <title>Platcom</title>
        <script type="text/javascript" src="js/lib/jquery.js"></script>
        <script data-main="js/main" src="js/lib/require.js"></script>
    </head>
    <body>
    </body>
</html>

main.js

$(document).ready(function() {
    require(["obr/obr.platcom"], function() {
        obr.hola();
        var myPlatcom = obr.platcom();
        myPlatcom.test();
    });
});

obr.js

var obr = {};
obr.hola = function() {
    alert('Hola OBR');
};

obr.platcom.js

require(["obr.js"],function() {
    obr.platcom = function(params) {
        var that = {};

        var test = function test() {
            alert('Hola Platcom!');
        }

        that.test = test;
        return that;
    }
});

如果我在obr所有作品中同时需要obr.platcommain个文件,但如果我使用此嵌套样式,则会收到下一个错误:

Uncaught ReferenceError: obr is not defined       main.js:3

你知道我做错了什么吗? 提前谢谢。

1 个答案:

答案 0 :(得分:7)

好吧,你做错了几件事。

  1. 您需要将注入的依赖项指定为参数。例如,require(["obr/obr.platcom"], function() {除非您指定如何可以调用所需模块,否则require(["obr/obr.platcom"], function( obr ) { 不会做太多。你应该需要这个:

    obr.js

    这样,您就知道所需对象在哪个变量中。

  2. require变量位于全局范围内。您需要将它们包含在definedefine(function() { var obr = {}; obr.hola = function() {}; return obr; }); 函数调用中。以下方法可行:

    define

    您可能已经注意到上一个文件有些问题。

  3. 如果您希望在某处导入模块,则必须定义它。因此,您必须使用require函数,而不是define函数。并且obr.platcom.js函数必须返回一个对象。这是一个固定的// If you don't use "define" for the obr.js file too, this won't work define(['obr'], function( obr ) { obr.platcom = function() {}; // Don't forget to return the obr object, or the require of // the main file won't return anything return obr; }); 文件:

    {{1}}
  4. 这样,事情就是以正确的方式完成的。或者至少,require.js希望你做的事情。

    我希望这能告诉您如何有效地使用require.js轻松分离模块中的代码:)

相关问题