RequireJS：如何定义包含单个“类”的模块？

Question

我有许多JavaScript“类”，每个都在自己的JavaScript文件中实现。在开发过程中，这些文件是单独加载的，而在生产中它们被连接起来，但在两种情况下，我都必须手动定义加载顺序，确保如果B使用A，则B在A之后加载。我计划使用RequireJS作为CommonJS模块/异步定义的实现，以自动解决这个问题。

是否有比定义每个导出一个类的模块更好的方法？如果没有，那你如何命名模块的导出内容？像下面例子中的一个模块“employee”导出一个类“Employee”，对我来说不够DRY。

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");
});

- avernet

Answer 1

AMD提案允许您仅返回导出对象的值。但请注意，这是AMD提案的一个特性，它只是一个API提案，并且将使把模块转换回常规的CommonJS模块更加困难。我认为这没问题，但了解这个信息很有用。

因此，您可以执行以下操作：

我喜欢将导出构造函数的模块以大写字母开头的名称作为起点，因此未经优化的此模块版本也将位于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;
    };
});

现在在另一个模块中，您可以像这样使用Employee模块：

define("main", ["Employee"], function (Employee) {
    var john = new Employee("John", "Smith");
});

- jrburke

---

哇，直接来自@jrburke的回答，RequireJS之父！+1！ - Bart

Answer 2

作为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;
});

实际上，这正是在requirejs.org的示例中展示的模式。

- Mark Whitaker

---

嗨马克，你的帖子正是我在寻找的。除了一件事。有没有可能为Employee对象定义一些不属于构造函数的字段？ 例如，有一个position属性和positionToUpper方法，但以某种方式在构造函数之外定义该属性。employee = new Employee（'john'，'smith'）; employee.position ='manager'; alert（employee.positionToUpper（））; - Yaplex

Alex，这个例子对我很有帮助，文档写得很好，可能可以提供你正在寻找的例子：https://gist.github.com/jonnyreeves/2474026。 - Nathan Prather

@NathanPrather 这是一个很好的参考 -- 评论帮助我从Java背景中进行了转换。 - Josh Hibschman

Answer 3

更新方法2023

define(function(){  
    return class Fullname{
        constructor(firstname, lastname){
            this.firstname = firstname
            this.lastname = lastname
        }
        
        generate() {
            return this.firstname+" "+this.lastname
        }
    }   
});

使用方法：

define(['your/modules/path'], function(Fullname){
    let name = (new Fullname('Giang', 'Imgs')).generate();
    console.log(name)
}   

- Giangimgs