3

当我使用 requirejs 和backbonejs 进行开发时，我对导入机制的工作原理感到困惑，因为我认为导入的类只适用于该功能范围。但是，当我尝试调试时，我发现对于一些我没有导入 jquery 或主干或下划线的 requirejs 类，它仍然能够正常工作，但这不适用于我创建的其他类。

下面的例子说明了我的意思：

1) index.html -> 初始加载文件

2) init.js -> 导入所有需要的类并输出该类是否可用

3) base.js -> 基类，导入所有需要的库

4) shop.js -> 从基类扩展，没有导入 jquery，主干文件，但它正在工作

索引.html

<html>
<head>
    <title>Testing</title>
    <script data-main='init' src='http://requirejs.org/docs/release/2.0.4/minified/require.js'></script>
</head>
<body>
    halo world
</body>
</html>

初始化.js

require.config({
    paths: {
        jquery: 'http://code.jquery.com/jquery-1.7.2.min',
        underscore: 'http://underscorejs.org/underscore-min', 
        backbone: 'http://backbonejs.org/backbone-min'
    },
    shim: {
        backbone: {
            deps: ["underscore", "jquery"],
            exports: "Backbone"
        },

        underscore: {
            exports: "_"
        }
    }
});

require([
    'views/shop',
],function(ShopView){   
    var shopView = new ShopView();
    shopView.render();  

    console.log('Backbone - ');
    console.log(Backbone);
    console.log('Underscore - ');
    console.log(_);
    console.log('jQuery - ');
    console.log($);
    console.log('BaseView - ');
    console.log(BaseView);
});

shop.js

define([
    'views/base'
], function(BaseView) { 
    var ShopView = BaseView.extend({
        initialize:function(){
            console.log('ShopView');        
        }
    });
    return ShopView;
});

base.js

define([
    'jquery',
    'underscore',
    'backbone'  
], function($,_,Backbone) { 
    var BaseView = Backbone.View.extend({
        initialize:function(){
            console.log('BaseView');        
        }
    });
    return BaseView;
});

init.js 的结果输出：

控制台.log（主干）；-> 即使我没有导入骨干课程，也会返回给我

控制台.log($); -> 即使我没有导入它，也会返回我的 jquery 类

控制台.log(_); -> 即使我没有导入它，也会返回我下划线类

console.log(BaseView); -> 为我的自定义类返回未定义

如果我从 init.js 中删除视图/商店。

require([

],function(){   
    console.log('Backbone - ');
    console.log(Backbone);
    console.log('Underscore - ');
    console.log(_);
    console.log('jQuery - ');
    console.log($);
    console.log('BaseView - ');
    console.log(BaseView);
});

控制台.log（主干）；-> 未定义

控制台.log($); -> 打破

控制台.log(_); -> 打破

console.log(BaseView); -> 打破

我无法解释以前的场景是如何工作的，我认为主干、jquery、下划线是全局变量，但似乎我删除了视图类，然后变量未定义，而如果它是导入类，我可以提出我之前导入的从 base.js 到未来导入的类。对不起，如果它混淆了。

有人可以解释一下 requirejs 中的导入是如何工作的以及导入的范围。我是否必须重新要求我以前需要的课程。

4

1 回答 1

0

require.config 它不会自行导入任何内容。它用于声明非 AMD 文件的别名（路径）和依赖项。

考虑到当您使用 'define' 时，您实际上需要它的依赖项。

define ([ array of dependencies ], function)

.

init: require shop  (ok, let's bring shop here:
shop: require base  (ok, let's bring base here:
base: require    (so you need backbone, underscore and jquery.. ok,  
                  I'll bring them for you)

然后，当需要并加载每个依赖项时，init执行开始。

当您shop从init.js,您身上移除时，您不需要任何东西。再次require.config 不导入任何东西。

PS。这是个人喜好，但我更喜欢有一个需要 jquery、下划线和主干的文件 app.js。然后每个模块都需要'app'。如果您想向其中添加功能，共享该命名空间也很有用。( app.myFunction)

请参阅此骨干样板：https ://github.com/tbranyen/backbone-boilerplate

于 2012-07-10T20:12:13.453 回答