最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Require.js nested requires - Stack Overflow

programmeradmin1浏览0评论

I'm trying to use requireJS but I want to build a hierarchy of dependencies: main requires obr.plat and obr.plat requires obr (for example).

I have this hierarchy of files:

- index.html
-> js
   - main.js
   -> lib
      - jquery.js
      - require.js
   -> obr [my own 'libraries']
      - obr.js
      - obr.plat.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>Plat</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.plat"], function() {
        obr.hola();
        var myPlat = obr.plat();
        myPlat.test();
    });
});

obr.js

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

obr.plat.js

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

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

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

If I require both obr and obr.plat files in the main all works, but if I use this nested style I receive the next error:

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

Do you know what I'm doing wrong? Thank you in advance.

I'm trying to use requireJS but I want to build a hierarchy of dependencies: main requires obr.plat and obr.plat requires obr (for example).

I have this hierarchy of files:

- index.html
-> js
   - main.js
   -> lib
      - jquery.js
      - require.js
   -> obr [my own 'libraries']
      - obr.js
      - obr.plat.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>Plat</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.plat"], function() {
        obr.hola();
        var myPlat = obr.plat();
        myPlat.test();
    });
});

obr.js

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

obr.plat.js

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

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

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

If I require both obr and obr.plat files in the main all works, but if I use this nested style I receive the next error:

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

Do you know what I'm doing wrong? Thank you in advance.

Share Improve this question asked May 23, 2012 at 11:53 dgnindgnin 1,6072 gold badges22 silver badges35 bronze badges
Add a ment  | 

1 Answer 1

Reset to default 8

Alright, you've done several things wrong.

  1. You need to specify as an argument the dependency you're injecting. For example, require(["obr/obr.plat"], function() { won't do much unless you specify how the required module can be called. You should need this:

    require(["obr/obr.plat"], function( obr ) {
    

    This way, you know in which variable your required object is.

  2. The obr.js variables are in the global scope. You need to wrap them in a require or define function call. The following would work:

    define(function() {
        var obr = {};
        obr.hola = function() {};
        return obr;
    });
    

    You may have noticed some things that are wrong with your last file.

  3. If you want your module to be imported somewhere, you have to define it. So you have to use the define function, not the require one. And the define function must return an object. Here is a fixed obr.plat.js file:

    // If you don't use "define" for the obr.js file too, this won't work
    define(['obr'], function( obr ) {
        obr.plat = function() {};
    
        // Don't forget to return the obr object, or the require of
        // the main file won't return anything
        return obr;
    });
    

This way, things are done the correct way. Or at least, the way require.js wants you to do stuff.

I hope this reveals you how require.js can be effectively used to easily separate your code in modules :)

发布评论

评论列表(0)

  1. 暂无评论