RequireJS:如何将变量从一个文件传递到另一个文件? [英] RequireJS: How do I pass variables from one file to another?
问题描述
我正在使用带有骨干+骨干形式的require。我目前正在使用RequireJS将代码分成多个文件。我将模型存储在单独的文件中,并希望单独保留表单验证器。
I'm using require with backbone + backbone-forms. I'm currently using RequireJS to seperate code into multiple files. I have models stored in separate files and want to keep form validators separately.
但是,我无法访问在一个文件中定义的变量,在另一个依赖于此文件的文件中。我得到的是未捕获的ReferenceError:isEmptyName未定义
。 isEmptyName
在验证器中定义并在模型中使用。任何有关RequireJS配置的反馈也很受欢迎。
However, I am unable to access variables defined in one files, in another file that depends on this one. What I get is Uncaught ReferenceError: isEmptyName is not defined
. isEmptyName
is defined in validators and used in model. Any feedback about RequireJS config is also appreciated.
我的配置:
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的开头
Beginning of 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;
};
需要验证器中验证器的model.js的开头.js
Beginning of model.js that needs the validators in validators.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...
}, ...
推荐答案
我认为您正在使用 require
,而您真正需要的是 define
。从何时使用require()以及何时使用define( )?,
I think you're using require
when what you really need is define
. From When should I use require() and when to use define()?,
使用define在require.js中注册一个模块,你可以将
依赖于其他模块定义或require语句。使用
要求你只加载/使用require.js加载的
模块或javascript文件。
With define you register a module in require.js that you than can depend on in other module definitions or require statements. With require you "just" load/use a module or javascript file that can be loaded by require.js.
所以在这里,你有一些在一个文件中定义的变量,但需要在另一个文件中访问。看起来像'模块',不是吗?现在,您有两种方法可以将此文件用作模块:
So here, you have some variables that are defined in one file, but are required to be accessed in another file. Seems like a 'Module', doesn't it? So now, you have two ways of using this file as a module:
- 符合AMD-ness
- 符合混乱的javascript全局变量
使用AMD方法
validators.js
现在是一个模块。任何希望使用验证器功能的人都可以依靠这个模块为它们提供它。也就是说,
Using the AMD Approach
validators.js
is now a module. Anybody wishing to use 'validator functions' can depend on this module to provide it for them. That is,
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
}
};
你会注意到需要
已被 define
替换。现在,当某人(模型)依赖于validator.js时,他们可以按如下方式访问其依赖项
You'll notice that the require
has been replaced with define
. Now, when somebody (model) depends on validator.js, they can access their dependencies as follows
require(['backbone','backboneForms','mask','validators'],
function(backbone, backboneForms, mask, validators) {
var isEmptyNameReference = validators.someFunction;
...
使用 shim
检查要求使用shim配置的原因和时间,引用此链接表示,
如果我们只是将backbone.js文件添加到我们的项目中并将
Backbone列为我们其中一个模块的依赖项,那么它将无法工作。
RequireJS将加载backbone.js,但backbone.js中没有任何内容将
本身注册为具有RequireJS的模块。 RequireJS会抛出它的手
并说出类似的话,好吧,我加载了文件,但我没有在那里找到
任何模块。
if we were to just add the backbone.js file to our project and list Backbone as a dependency from one of our modules, it wouldn’t work. RequireJS will load backbone.js, but nothing in backbone.js registers itself as a module with RequireJS. RequireJS will throw up its hands and say something like, "Well, I loaded the file, but I didn’t find any module in there."
因此,您可以让您的validator.js填充全局 Validator
命名空间,并且仍然按照我们在其中使用它的方式使用它上面的例子。
So, you could have your validator.js populate a global Validator
namespace, and still use it the way we used it in the example above.
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将是,
Your config.js would then be,
shim: {
'validator': {
deps: ['backbone','backboneForms'],
exports: 'Globals.Validator'
},
...
请注意,您可以将命名空间别名为你希望,但别名只是对现有全局对象/命名空间的引用。如果您将 Foo.Bar.Foobar
作为命名空间,但希望将其称为 FB $ c $,这将非常有用C>。因此,Shimming是非AMD库适应AMD使用的一种方式。 在这种情况下,选项1就足够了。
Note that you can alias the namespace as you wish, but the alias is just a reference to the existing global object/namespace. This is helpful if you have, say, Foo.Bar.Foobar
as your namespace, but want to refer to it as FB
. Shimming, hence, is a way for non-AMD libraries to adapt to AMD usage. In this case, option 1 should be sufficient.
这篇关于RequireJS:如何将变量从一个文件传递到另一个文件?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!