将模块化模式示例转换为 CommonJS 或 AMD答案

【问题标题】：Translate modular pattern example to CommonJS or AMD将模块化模式示例转换为 CommonJS 或 AMD
【发布时间】：2015-04-22 20:05:51
【问题描述】：

我来自经典的 oop 背景，并试图掌握新的 js 模块化系统。无论如何，我仍然需要经典的东西，如私有和公共方法和变量、继承、使用高级模块调用和类初始化的重载（如经典构造函数或其他东西）。所以在 SO 社区的帮助下，我做了这个模块模式的例子：

var MODULE = (function(self) {
   ...
})(SUPER_MODULE)

完整示例：http://jsfiddle.net/ehe122e0/10/

所以现在我正在尝试掌握 AMD 和 CommonJS 模块。有人可以将该示例（我的意思是完整的 jsfiddle 示例）翻译为 AMD 和/或 CommonJS 吗？真的很有帮助。

我上面提到的使用这些格式的功能的任何工作示例都是有帮助的。

【问题讨论】：

似乎更像是两个问题，你问的是经典类，不管它如何暴露，例如 global、commonjs、amd、system，它都是一样的。然后同时你在询问 OO 和模块系统，这使得它变得模棱两可。您能否将其改写为一个真正清晰、可回答的问题？不想标记它，因为你在它上面放了一个赏金，但它现在真的很模糊。
完成。你觉得现在好点了吗？如果还是不行。您能否提出一个编辑建议，以便我明白您的意思？ :) 谢谢你的帮助
好吧那更好，我稍后会跟进答复。
common js 只是您的模块，其中“全局”module 的 exports 属性设置为您所谓的 self.

标签： javascript oop amd commonjs

【解决方案1】：

如果您只在客户端（浏览器）上编写 javascript，您将无法使用通用 js。所以AMD是要走的路！您将需要 amdefine 和 requirejs 来实现该目标。

但是，如果你在服务器端也用node.js的javascript，你会遇到一些常见的js。在这种情况下，我建议您使用真正的 javascript OOP 框架，该框架能够同时加载常见的 js 和 amd 模块（以便在客户端和服务器端使用您的类）。例如，您可以尝试Danf（它会为您抽象出这种复杂性）。

请注意，您在 jsfiddle 中为您的课程提供的模式并不是一个非常好的模式。只有一个原因是您为每个实例复制了类的方法（不利于您的记忆）。尝试改用power of the prototype！

【讨论】：

其实我有一个比这个例子“更早的版本”。这个：jsfiddle.net/vqqrf2cb/24 但我发现这些方法也是重复的，这是一种更“冗长”的做事方式。稍后我会尝试增强它。你能给我一些关于如何改变它以使用原型的想法吗？
我刚刚为你的上一课操作做了它，这里是 jsfiddle jsfiddle.net/vqqrf2cb/28 。但是，您是对的，您当然应该使用 amd 模块将类的实现分开在不同的文件中。这将产生更好、更清晰的代码。
嗯，我想我明白你在说什么。使用这种调用/原型方案，模块/对象不会在较低的类中重复该功能。但我认为最好在模块化模式示例中尝试这样做，你不觉得吗？有人在这里告诉我，这个 Object.create 是一种“旧方式”做事，而模块化模式和 AMD 是一种更好的方式。所以我认为最好的方法是 AMD 与 call/prototype ？是吗？
其实我已经用 AMD 做了一些测试。在这里：jsfiddle.net/4L276f89/9。在我的机器中，模块是文件分隔的。我不得不这样做以适应 JSFiddle。如果我将其转换为使用原型，您认为我们可以将其视为“最佳方式”吗？
你当然可以两者都做。这就是我在回答中告诉您的框架中的完成方式。您可以查看文件lib/utils.js at the function extend。然后，在一个随机文件上使用这个扩展函数，比如lib/ajax-app/ready-processor/links.js。 AMD 和原型继承做不同的事情。一个不能代替另一个。 AMD 主要是以逻辑和异步的方式加载依赖项，而不是任何 OOP 继承。

【解决方案2】：

我只能说读，读，读，然后再读。这是一个好的开始：

Addy Osmani 的“编写模块化 Javascript”： http://addyosmani.com/writing-modular-js/

Kris Zyp 的“AMD The Definite Source”： http://www.sitepen.com/blog/2012/06/25/amd-the-definitive-source/

RequireJS 上的“为什么选择 AMD”： http://requirejs.org/docs/whyamd.html

还有更多，但你会在通往模块化的道路上遇到它，祝你好运:)

【讨论】：