RequireJS:如何将变量从一个文件传递到另一个文件?

时间:2014-05-14 08:13:09

标签: javascript requirejs

我正在使用带有骨干+骨干形式的require。我目前正在使用RequireJS将代码分成多个文件。我将模型存储在单独的文件中,并希望单独保留表单验证器。

但是,我无法访问在一个文件中定义的变量,在另一个依赖于此文件的文件中。我得到的是Uncaught ReferenceError: isEmptyName is not definedisEmptyName在验证器中定义并在模型中使用。任何有关RequireJS配置的反馈也很受欢迎。

我的配置:

requirejs.config({

//By default load any module IDs from js/lib

baseUrl: 'js',

paths: {
     jquery: 'lib/jquery',
        app: 'lib/app', 
     wizard: 'lib/jquery.bootstrap.wizard.min',
  bootstrap: 'lib/bootstrap.min',
 underscore: 'lib/underscore-min',
   backbone: 'lib/backbone-min',
backboneForms: 'lib/backbone-forms.min',
langSwitcher: 'lib/lang',
     cookie: 'lib/cookie',
 datepicker: 'lib/bootstrap-datepicker',
       mask: 'lib/jquery.maskedinput.min',
 validators: 'modules/validators',  

  // models

personalData: 'models/personal-data',
addressData: 'models/address-data',
   workData: 'models/work-data',
productsData: 'models/products-data',
statmentData: 'models/statment-data',    

     model: 'models/form',
collection: 'collections/form',
      view: 'views/form',

     setup: 'setup',
      send: 'send',

},
    shim: {
    'underscore': {
        deps: ['jquery'],
        exports: '_'
    },  
    'backbone': {
        deps: ['underscore', 'jquery'],
        exports: 'backbone'
    },

    // all model needs to go within one collection

    'bootstrap' : ['jquery'],
    'wizard': ['jquery'],
    'backboneForms': ['backbone'],
    'validators': ['backbone','mask'],
    'personalData' : ['backbone','backboneForms','validators'],
    'addressData': ['backbone','backboneForms'],
    'workData': ['backbone','backboneForms'],
    'statmentData': ['backbone','backboneForms'],

    //'collection': ['backbone','backboneForms','personalData'],
    //'view': ['backbone','backboneForms','personalData']
 } 
});

validators.js的开头

require(['backbone','backboneForms'], function(){


var lettersOnly = /^[A-Za-zęóąśłżźćńĘÓĄŚŁŻŹĆŃ]+$/;
var lettersOnlyDash = /^[A-Za-zęóąśłżźćńĘÓĄŚŁŻŹĆŃ\-]+$/;
var err = {};
var errCh = {};
var errFormat = {};

var isEmptyName = function(value){
err = { message: 'Wpisz imię.'};
if (value.length === 0) return err;
};

需要validators.js中验证器的model.js的开头

require(['backbone','backboneForms','mask','validators'], function(backbone,backboneForms,mask,validators){

var PersonalData = Backbone.Model.extend({

schema: {
    first_name:{ 
        title: 'Imię',            
        validators: [isEmptyName, isLetter, minCharCount] //Accessing validators.js members here...
    }, ...

1 个答案:

答案 0 :(得分:7)

我认为当您真正需要的是require时,您正在使用define。来自When should I use require() and when to use define()?

  

使用define,您可以在require.js中注册一个模块   依赖于其他模块定义或需要声明。同   要求你"只是"加载/使用可以的模块或javascript文件   由require.js加载。


所以在这里,您有一些在一个文件中定义的变量,但需要在另一个文件中访问。看起来像一个'模块',不是吗?现在,您有两种方法可以将此文件用作模块:

  1. 符合AMD-ness
  2. 符合混乱的javascript全局变量
  3. 使用AMD方法

    validators.js现在是一个模块。任何人都希望使用验证器功能'可以依靠这个模块为他们提供。也就是说,

    define(['backbone','backboneForms'], function(){
    
      var lettersOnly = /^[A-Za-zęóąśłżźćńĘÓĄŚŁŻŹĆŃ]+$/;
    
      var isEmptyName = function(value){
      err = { message: 'Wpisz imię.'};
      if (value.length === 0) return err;
    
      return {
        someVariable: lettersOnly,
        someFunction: isEmptyName
      }
    };
    

    您会注意到require已被define取代。现在,当某人(模型)依赖于validator.js时,他们可以按如下方式访问其依赖项

    require(['backbone','backboneForms','mask','validators'], 
      function(backbone, backboneForms, mask, validators) {
    
        var isEmptyNameReference = validators.someFunction;
        ...
    

    使用shim

    选中Requirejs why and when to use shim config,其中引用了this link,其中包含

      

    如果我们只是将backbone.js文件添加到我们的项目和列表中   Backbone作为我们其中一个模块的依赖,它不起作用。   RequireJS将加载backbone.js,但在backbone.js寄存器中没有任何内容   本身作为RequireJS的模块。 RequireJS会举手   并说出一句话,“好吧,我加载了文件,但我没找到   那里的任何模块。“

    因此,您可以让您的validator.js填充全局Validator命名空间,并且仍然按照我们在上面的示例中使用它的方式使用它。

    function(){
      var lettersOnly = /^[A-Za-zęóąśłżźćńĘÓĄŚŁŻŹĆŃ]+$/;
      var isEmptyName = function(value){
        err = { message: 'Wpisz imię.'};
        if (value.length === 0) return err;
    
      Globals.Validator = {
        someVariable: lettersOnly,
        someFunction: isEmptyName
      }
    }();
    

    您的config.js将是,

    shim: {
        'validator': {
            deps: ['backbone','backboneForms'],
            exports: 'Globals.Validator'
        },
      ...
    

    请注意,您可以根据需要为命名空间添加别名,但别名只是对现有全局对象/命名空间的引用。如果您将Foo.Bar.Foobar作为命名空间,但希望将其称为FB,则此功能非常有用。因此,Shimming是非AMD库适应AMD使用的一种方式。 在这种情况下,选项1就足够了。