Javascript RequireJS:如何定义包含单个“类”的模块?
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/4869530/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
RequireJS: How to define modules that contain a single "class"?
提问by avernet
I have a number of JavaScript "classes" each implemented in its own JavaScript file. For development those files are loaded individually, and for production they are concatenated, but in both cases I have to manually define a loading order, making sure that B comes after A if B uses A. I am planning to use RequireJSas an implementation of CommonJS Modules/AsynchronousDefinitionto solve this problem for me automatically.
我有许多 JavaScript“类”,每个类都在自己的 JavaScript 文件中实现。对于开发,这些文件是单独加载的,对于生产它们是串联的,但在这两种情况下,我都必须手动定义加载顺序,确保如果 B 使用 A,则 B 在 A 之后。我计划使用RequireJS作为CommonJS Modules/AsynchronousDefinition自动为我解决这个问题。
Is there a better way to do this than to define modules that each export one class? If not, how to you name what the module exports? A module "employee" exporting a class "Employee", as in the example below, doesn't feel DRYenough to me.
有没有比定义每个导出一个类的模块更好的方法呢?如果没有,您如何命名模块导出的内容?如下例所示,导出类“Employee”的模块“employee”对我来说感觉不够干燥。
define("employee", ["exports"], function(exports) {
exports.Employee = function(first, last) {
this.first = first;
this.last = last;
};
});
define("main", ["employee"], function (employee) {
var john = new employee.Employee("John", "Smith");
});
回答by jrburke
The AMD proposalallows you to just return a value for the exported object. But note that is a feature of the AMD proposal, it is just an API proposal, and will make it harder to translate the module back to a regular CommonJS module. I think that is OK, but useful info to know.
在AMD的建议可以让你只返回一个值导出的对象。但请注意,这是 AMD 提案的一个特性,它只是一个 API 提案,并且会使将模块转换回常规 CommonJS 模块变得更加困难。我认为没关系,但要了解有用的信息。
So you can do the following:
因此,您可以执行以下操作:
I prefer modules that export a constructor function to start with an upper-case name, so the non-optimized version of this module would also be in Employee.js
我更喜欢导出构造函数的模块以大写名称开头,因此该模块的非优化版本也将在 Employee.js 中
define("Employee", function () {
//You can name this function here,
//which can help in debuggers but
//has no impact on the module name.
return function Employee(first, last) {
this.first = first;
this.last = last;
};
});
Now in another module, you can use the Employee module like so:
现在在另一个模块中,您可以像这样使用 Employee 模块:
define("main", ["Employee"], function (Employee) {
var john = new Employee("John", "Smith");
});
回答by Mark Whitaker
As an addition to jrburke's answer, note that you don't have to return the constructor function directly. For most useful classes you'll also want to add methods via the prototype, which you can do like this:
作为 jrburke 答案的补充,请注意您不必直接返回构造函数。对于大多数有用的类,您还需要通过原型添加方法,您可以这样做:
define('Employee', function() {
// Start with the constructor
function Employee(firstName, lastName) {
this.firstName = firstName;
this.lastName = lastName;
}
// Now add methods
Employee.prototype.fullName = function() {
return this.firstName + ' ' + this.lastName;
};
// etc.
// And now return the constructor function
return Employee;
});
In fact this is exactly the pattern shown in this example at requirejs.org.
事实上,这正是requirejs.org 上这个示例中显示的模式。