构建咖啡脚本代码？

Posted 2023-03-03

技术标签:

【中文标题】构建咖啡脚本代码？【英文标题】：Structuring coffeescript code? 【发布时间】：2011-09-03 06:35:28 【问题描述】：

在 Rails 3.1 下，我试图找出如何将一些咖啡脚本类从我的控制器默认咖啡脚本文件 (home.js.coffee) 移到另一个文件中，以便稍微构建整体。

有人知道如何将咖啡脚本文件“包含”到另一个文件中吗？

【问题讨论】：

【参考方案1】：

我不确定这是否直接可行（但有人随时纠正我）。

我的理解是 CoffeeScript 解释器在 Sprockets 合并您的所有资产之前运行。由于 .coffee 文件中的 cmets 不会出现在输出中，并且由于 Sprockets 使用 //= 代码注释指令来构建所有内容，我认为目前没有办法在 CoffeeScript 中创建 Sprockets 指令。

您仍然可以将您的工作拆分为多个 .coffee 文件并使用父“指令”javascript 文件来组合各个部分（它可能仅包含 Sprockets 指令，就像 Rails 3.1 中的库存 application.js 一样）。使用 Sprockets //= require_tree 指令，您可以拆分您的 CoffeeScript 并仍然保持您的应用程序井然有序，但您仍然会在管理 Sprockets 时保留普通的 Javascript 文件。

This 问题可能会更好地解释资产管道。此处的 Edge 文档中还有一些 Sprockets 助手：http://edgeapi.rubyonrails.org/classes/ActionView/Helpers/SprocketsHelper.html#method-i-sprockets_javascript_include_tag，但这会将工作推到您的视图中，这可能会变得丑陋。

希望有帮助！

【讨论】：

不确定 Sprockets 是如何工作的，但 /* */ cmets 保留在 coffeescript 输出中。 /* //= ... */ 会起作用吗？【参考方案2】：

你想做的是导出功能。例如，如果您从

class Foo
  ...

class Bar extends Foo
  ...

并且您决定将 Foo 移动到它自己的文件中，该文件应该看起来像

class Foo
  ...

window.Foo = Foo

（其中window.Foo = Foo 使Foo 成为全局），Bar 的文件应该以 Sprockets 指令开头

#= require Foo

（假设您已将Foo 的文件命名为Foo.js.coffee）。每个文件都独立编译成 JS，但 Sprockets 会确保 Foo 包含在 Bar 之前。

注意，作为一种捷径，你可以去掉window.Foo = Foo这一行，改为写

class window.Foo
  ...

或者干脆

class @Foo
  ...

定义一个名为Foo 的类，该类附加到window 对象。

【讨论】：

它也对我帮助很大。我还有一个理由读你的书；）您也可以使用较短的符号class @Foo。【参考方案3】：

虽然使用window 对象作为在代码的不同部分之间共享功能的地方可以很好地工作，但当您处理大型/复杂的代码库时，它可能会变得有些难看。此外，您必须手动处理加载所有依赖项，这也会让人有些沮丧。许多人最终只是在每个请求中加载所有内容，而不管该特定页面实际需要什么。

有很多库试图解决这些问题，并使文件之间的导出和导入功能更易于管理。今天更常见的一个是RequireJS，它是CommonJS AMD specs 的一个实现。你可以在here 找到其他库和它们之间的比较，还有一个关于如何使用这些库编写模块化 JavaScript 的精彩教程Addy Osmani blog - 它还讨论了 ES.next 中即将推出的新模块系统，即也很有趣。

我个人非常喜欢NodeJS's modules system（带有exports 对象和require 函数），所以我也使用node-browserify 将其打包以便在客户端工作。虽然这不允许像 AMD 规范那样以异步方式动态加载依赖项，但它确实允许在客户端和服务器端很好地共享相同的 JavaScript 代码，这对我来说是一个巨大的好处（主要是因为我也在服务器端使用 NodeJS，所以我不确定这对你来说有多重要）并且它可以为你很好地打包所有依赖项（所以它们可以同步require()d）解析您的 JavaScript 代码并查找普通的 require() 调用以确定给定脚本需要什么才能运行。

【讨论】：

【参考方案4】：

你也可以这样做：