RequireJS:如何定义包含单个“类”的模块?


68

我有许多JavaScript“类”,每个类都在其自己的JavaScript文件中实现。为了进行开发,这些文件是分别加载的,对于生产来说,它们是连接在一起的,但是在两种情况下,我都必须手动定义加载顺序,如果B使用A,请确保B紧随A之后。我计划使用RequireJS作为实现CommonJS Modules / AsynchronousDefinition为我自动解决此问题。

有没有比定义每个导出一个类的模块更好的方法呢?如果不是,您如何命名模块导出的内容?如下例所示,模块“ 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");
});

Answers:


114

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先生的答案。自己需要RequireJS!+1!
巴特2015年

105

作为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的本示例中显示的模式。


2
嗨,马克,您的帖子正是我想要的。除了一件事。是否可以为Employee对象定义一些不属于构造函数的字段?例如,具有position属性和方法positionToUpper,但是以某种方式在构造函数中定义该属性employee = new Employee('john','smith'); employee.position ='经理'; alert(employee.positionToUpper());
Yaplex

7
亚历克斯,这个例子对我有帮助,它已经被很好地记录了下来,并且可以提供您所寻找的例子: gist.github.com/jonnyreeves/2474026
Nathan Prather

1
@NathanPrather是一个很好的参考-这些评论帮助我摆脱了Java背景
y3sh 2015年
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.