Backbone和RequireJS冲突 - 实例或构造函数?

use*_*734 2 javascript requirejs backbone.js

有人可以解释之间的根本区别:

define(['backbone'], function(Backbone) {
   MyModel = Backbone.Model.extend({
   });
});

define(['backbone', 'models/mymodel'], function(Backbone){
    var app = Backbone.View.extend({
        initialize: function() {
           var model = new MyModel();
        }
    });
});
Run Code Online (Sandbox Code Playgroud)

和:

define(['backbone'], function(Backbone) {
   var MyModel = Backbone.Model.extend({
   });
   return MyModel;
});

define(['backbone', 'models/mymodel'], function(Backbone, MyModel){
    var app = Backbone.View.extend({
        initialize: function() {
           var model = new MyModel();
        }
    });
});
Run Code Online (Sandbox Code Playgroud)

在前者中,第一个模块只是定义了MyModel.在后者中,它被创建为变量并返回,第二个模块需要在导入时将其放入参数中.

我看到的RequireJS示例似乎在两者之间有所不同,但我真的不明白其中的区别 - 一个返回一个实例而另一个是构造函数吗?

在我的应用程序中,我甚至没有注意到我实际上在不同的地方使用两种方式,我认为它导致了问题.我使用了很多

self = this
self.model.doSomething
Run Code Online (Sandbox Code Playgroud)

在我的视图和模型中,随着我的应用程序变大,我开始收到错误,因为与自我的定义存在冲突.

mac*_*ost 7

简短版本:第一版==错误.

中等版本:第一个绕过要求完全使用全局变量,而第二个实际使用Require.

长版:

Backbone模块的工作方式是运行"define",传递一个函数(通常还有一个依赖项数组),从该函数返回的任何内容都定义为该模块.所以,如果我这样做:

// Inside foo.js
define([], function() {
   return 1;
});
Run Code Online (Sandbox Code Playgroud)

我已经定义了"foo"模块1,所以如果在其他地方我做:

define(['foo'], function(foo) {
    alert(foo); // alerts 1
});
Run Code Online (Sandbox Code Playgroud)

您的第一个版本不会返回任何内容,因此实际上并不是创建一个Require模块.

它是如何工作的呢?好吧,在那个版本中你做:

MyModel = Backbone.Model.extend({
Run Code Online (Sandbox Code Playgroud)

不:

var MyModel = Backbone.Model.extend({
Run Code Online (Sandbox Code Playgroud)

所以这与做的完全一样:

window.MyModel = Backbone.Model.extend({
Run Code Online (Sandbox Code Playgroud)

然后,当代码的第二部分运行时,它会访问window.MyModel并运行......但它完全绕过了过程中的Require.js.

我认为最重要的事情是:始终声明(即var)你的JAVASCRIPT VARIABLES.我不同意克罗克福德所说的一切,但他在这个问题上已经死了.如果你不养成这个习惯,你会得到很多错误(有需要和没有).

除此之外,下一个最重要的事情可能是:总是从你通过的功能中回归define.在某些特殊情况下,您不希望返回任何内容,但除非您故意尝试解决其中一种情况,否则应始终返回一些内容来定义模块.

最后,如果您使用Require,则代码中的每个变量都应该:

  • 来自define函数(即,它应该是您传递给define的函数的参数变量),或者
  • 它应该var在该文件中声明(即-ed)

如果您使用JSLint或'use strict';(如Valentin Nemcev建议的那样),或者您使用像Eclipse这样的编辑器,那么您的工具可以帮助您确保这一点(实际上可以很容易地确保).