RequireJS - 我是否必须为子类重新导入以前需要的文件答案

【问题标题】：RequireJS - Do I have to reimport previously required files for child classRequireJS - 我是否必须为子类重新导入以前需要的文件
【发布时间】：2012-07-09 14:37:52
【问题描述】：

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

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

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

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

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

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

index.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>

init.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 的结果输出：

console.log(Backbone); -> 即使我没有导入骨干课程，也会返回给我

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

console.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);
});

console.log(Backbone); -> 未定义

console.log($); -> 打破

console.log(_); -> 打破

console.log(BaseView); -> 打破

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

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

【问题讨论】：

标签： backbone.js requirejs

【解决方案1】：

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 执行开始。

当您从 init.js, 中删除 shop 时，您不需要任何东西。 require.config 也不导入任何东西。

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

查看这个主干模板：https://github.com/tbranyen/backbone-boilerplate

【讨论】：

谢谢，但是为什么 jquery、主干和下划线即使不导入也可以访问。
不客气。即使你不使用'require'这个词，你实际上是在'define'中声明依赖数组时导入它们。我认为这就是让你感到困惑的地方。那个“定义”也可以导入东西。如果不清楚，请告诉我。