RequireJs 模块中的 UnderscoreJs Mixins
UnderscoreJs Mixins in RequireJs module
为我的应用程序需要的 2 个下划线混合编写了这个 requireJs 模型。
我将它添加到 require.config 并加载了文件,但是当我尝试使用这两个函数中的任何一个时,我声明它们是未定义的。我知道我做错了什么,但我不知道是什么。
define(['underscore.mixins'], function (module)
{
require(['underscore'], function (_) {
_.mixin({
'toQueryString': function (parameters) {
var queryString = _.reduce(
parameters,
function (components, value, key) {
components.push(key + '=' + encodeURIComponent(value));
return components;
},
[]
).join('&');
if (queryString.length > 0) {
queryString = '?' + queryString;
}
return queryString;
更新 1:
我修改了它,但它仍然不适合我。
我这样做了:
main.js:
require([
'../common/requireConfig'
], function () {
'use strict';
requirejs.s.contexts._.config.paths.chai = 'thirdParty/chai';
requirejs.s.contexts._.config.paths.mocha = 'thirdParty/mocha';
requirejs.s.contexts._.config.paths.sinon = 'thirdParty/sinon';
requirejs.s.contexts._.config.shim.mocha = {
exports: 'window.mocha'
};
requirejs.s.contexts._.config.shim.sinon = {
exports: 'window.sinon'
};
// Then, load all of the plugins needed by test:
require(['test/plugins']);
});
requireconfig.js
define(function () {
'use strict';
require.config({
baseUrl: 'js/',
enforceDefine: true,
paths: { ... }
});
require(["underscore", "thirdParty/underscore.mixins"], function (_) {
_.toQueryString({});
});
但是当我调用函数时:
在模型文件中
requestUrl += _.toQueryString(_.extend({
key: YouTubeAPIKey
}, ajaxDataOptions));\
仍未定义
更新 2
通过这样做让它工作:
underscore.mixins.js:
define(['underscore'], function (_) {
_.mixin({
'toQueryString': function (parameters) {
var queryString = _.reduce(
parameters,
function (components, value, key) {
components.push(key + '=' + encodeURIComponent(value));
return components;
},
[]
).join('&');
if (queryString.length > 0) {
queryString = '?' + queryString;
}
return queryString;
},
'fromQueryString': function (queryString) {
return _.reduce(
queryString.replace('?', '').split('&'),
function (parameters, parameter) {
if (parameter.length > 0) {
_.extend(parameters, _.object([_.map(parameter.split('='), decodeURIComponent)]));
}
return parameters;
},
{}
);
}
});
return _;
});
在我实际使用这些函数的文件顶部:
define([
'background/collection/songs',
'background/key/youTubeAPI',
'background/model/song',
'common/enum/songType',
'common/enum/youTubeServiceType',
'common/utility',
'thirdParty/underscore.mixins'
], function (Songs, YouTubeAPIKey, Song, SongType, YouTubeServiceType, Utility,_) {
你的 define
里面的 require
似乎完全没有必要,而且确实会使其他模块使用这个模块的方式复杂化,因为一旦模块被加载,就不能保证 mixins 实际注册。这是因为 require
是异步的,并且 define
将在传递给 require
的代码运行之前 return。
我可以像这样向 Underscore 添加 mixin。一旦模块获得 foo
,就可以保证 mixin 已注册到 Underscore.
foo.js
:
define(["underscore"], function (_) {
_.mixin({
foo: function () {
console.log("foo invoked");
}
});
});
index.html
:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/xhtml; charset=utf-8"/>
<script type="text/javascript" src="js/require.js"></script>
</head>
<body>
<script>
require.config({
baseUrl: "js"
});
require(["underscore", "foo"], function (_) {
_.foo();
});
</script>
</body>
</html>
为我的应用程序需要的 2 个下划线混合编写了这个 requireJs 模型。 我将它添加到 require.config 并加载了文件,但是当我尝试使用这两个函数中的任何一个时,我声明它们是未定义的。我知道我做错了什么,但我不知道是什么。
define(['underscore.mixins'], function (module)
{
require(['underscore'], function (_) {
_.mixin({
'toQueryString': function (parameters) {
var queryString = _.reduce(
parameters,
function (components, value, key) {
components.push(key + '=' + encodeURIComponent(value));
return components;
},
[]
).join('&');
if (queryString.length > 0) {
queryString = '?' + queryString;
}
return queryString;
更新 1:
我修改了它,但它仍然不适合我。
我这样做了:
main.js:
require([
'../common/requireConfig'
], function () {
'use strict';
requirejs.s.contexts._.config.paths.chai = 'thirdParty/chai';
requirejs.s.contexts._.config.paths.mocha = 'thirdParty/mocha';
requirejs.s.contexts._.config.paths.sinon = 'thirdParty/sinon';
requirejs.s.contexts._.config.shim.mocha = {
exports: 'window.mocha'
};
requirejs.s.contexts._.config.shim.sinon = {
exports: 'window.sinon'
};
// Then, load all of the plugins needed by test:
require(['test/plugins']);
});
requireconfig.js
define(function () {
'use strict';
require.config({
baseUrl: 'js/',
enforceDefine: true,
paths: { ... }
});
require(["underscore", "thirdParty/underscore.mixins"], function (_) {
_.toQueryString({});
});
但是当我调用函数时:
在模型文件中
requestUrl += _.toQueryString(_.extend({
key: YouTubeAPIKey
}, ajaxDataOptions));\
仍未定义
更新 2
通过这样做让它工作:
underscore.mixins.js:
define(['underscore'], function (_) {
_.mixin({
'toQueryString': function (parameters) {
var queryString = _.reduce(
parameters,
function (components, value, key) {
components.push(key + '=' + encodeURIComponent(value));
return components;
},
[]
).join('&');
if (queryString.length > 0) {
queryString = '?' + queryString;
}
return queryString;
},
'fromQueryString': function (queryString) {
return _.reduce(
queryString.replace('?', '').split('&'),
function (parameters, parameter) {
if (parameter.length > 0) {
_.extend(parameters, _.object([_.map(parameter.split('='), decodeURIComponent)]));
}
return parameters;
},
{}
);
}
});
return _;
});
在我实际使用这些函数的文件顶部:
define([
'background/collection/songs',
'background/key/youTubeAPI',
'background/model/song',
'common/enum/songType',
'common/enum/youTubeServiceType',
'common/utility',
'thirdParty/underscore.mixins'
], function (Songs, YouTubeAPIKey, Song, SongType, YouTubeServiceType, Utility,_) {
你的 define
里面的 require
似乎完全没有必要,而且确实会使其他模块使用这个模块的方式复杂化,因为一旦模块被加载,就不能保证 mixins 实际注册。这是因为 require
是异步的,并且 define
将在传递给 require
的代码运行之前 return。
我可以像这样向 Underscore 添加 mixin。一旦模块获得 foo
,就可以保证 mixin 已注册到 Underscore.
foo.js
:
define(["underscore"], function (_) {
_.mixin({
foo: function () {
console.log("foo invoked");
}
});
});
index.html
:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/xhtml; charset=utf-8"/>
<script type="text/javascript" src="js/require.js"></script>
</head>
<body>
<script>
require.config({
baseUrl: "js"
});
require(["underscore", "foo"], function (_) {
_.foo();
});
</script>
</body>
</html>