JavaScript 如何优雅地将 CoffeeScript 写的 class 暴露给全局？
感觉这是个会经常出现的场景： 用 CoffeeScript 写了一个 Class 来控制 UI，一如：
class Step
constructor: ({selector: @selector, container: @container}) ->
@self = $(@selector)
@content = $(@container)
@size = $("#{@selector}>.step").length
@active = $("#{@selector} .active.step")
return
nextStep: (html) ->
@active.removeClass("active").addClass("completed").next().addClass("active")
@__mountContent html
return
__clearContent: ->
@content.html()
__mountContent: (data) ->
@__clearContent()
@content.html data
在 Rails 中用 remote 更新 UI 的时候写到了形如
var step = new Step({
selector: 'registStep',
container: '#registContent'
});
step.nextStep("<%= j render partial: 'stuff/dashboard/set_college_form', locals: {colleges: College.all}%>");
调用 class 中的 function 来更新，结果就是 class 被 CoffeeScript 默认的匿名包给屏蔽，并没有暴露给全局。
在不更改 CoffeeScript 默认渲染方式的情况下，如何可以优雅地把这种 component 暴露给全局呢？
目前有一种方式比如写完 class 之后写： window.Step = Step，但是一点都不优雅……新建的时候居然要 新建的时候写 var step = new window.Step(...)var step = new Step(...);倒是可以……
所以最终相对优雅的方法是 @rei 和 @greatghoul 提出的用this来包 class 名称的做法：
如：
class @Step
........
Rei
#5
2015年05月26日
coffee 官方文档推荐的就是挂到 window，如果要兼容 CommonJS 可以挂到 exports ? this，this 如果不用其它载入工具就是 window，然后 this 可以简写成 @，而且 class @Step 的写法也是可以的 ……看你喜欢哪种了，挂到 window 的方法没有问题。
leopku
#14
2015年05月29日
这个确实有点囧 前两天 coffee 写 Meteor，Meteor 文档是要将 Model 暴露给全局，结果各种不能自理（也许我仍然没找到正确的姿势） 最后 Model 用 js 了事
不能暴露出去不就是因为有个闭包吗 coffee 闭包最后也是传了 this 的
@.Step = class Step
constructor: ({selector: @selector, container: @container}) ->
@self = $(@selector)
@content = $(@container)
@size = $("#{@selector}>.step").length
@active = $("#{@selector} .active.step")
return
nextStep: (html) ->
@active.removeClass("active").addClass("completed").next().addClass("active")
@__mountContent html
return
__clearContent: ->
@content.html()
__mountContent: (data) ->
@__clearContent()
@content.html data
console.log(Window.Step); //undefined
console.log(Step);
//function Step(arg) {
// this.selector = arg.selector, this.container = arg.container;
// this.self = $(this.selector);
// this.content = $(this.container);
// this.size = $(this.selector + ">.step").length;
// this.active = $(this.selector + " .active.step");
// return;
// }