1

我有一些非常简单的代码。不幸的是，在该代码的底部是一个带有一些硬编码 jQuery 选择器的回调，我想找到一种方法将它们带出来。

出于本练习的目的，让我们假设：

  • .text-shows-up-here 是文本显示的地方
  • .user-types-here 是用户实际输入文本的地方

很简单：用户在某处输入，文本在其他地方复制。这是代码。

class TextChanger
  constructor: (@selector) ->
    events = ['change', 'keydown', 'keyup', 'keypress']
    @bind(event) for event in events

  update_text: ->
    $('.text-shows-up-here').text $('.user-types-here').val()

  bind: (event) ->
    @selector.on(event, @update_text)

window.Try ?= {}
window.Try.textChanger ?= TextChanger

另一方面，在 Javascript 领域......

    var textChanger = new Try.textChanger($('.user-types-here'));

我想知道是否/如何将这两个硬编码选择器从“绑定”函数中的回调中取出：

  bind: (event) ->
    @selector.on(event, @update_text)
4

2 回答 2

1

您已经在注入.user-types-here; 也注入另一个，然后使用这些对象代替 jQuery 选择器。

constructor: (options) ->
  @source = options.source
  @target = options.target
  ...

update_text: ->
  @target.text @source.val()

在您的纯 javascript 方面，只需将它们发送到：

var textChanger = new Try.textChanger({ 
                                        source: $('.user-types-here'), 
                                        destination: $('.text-shows-up-here')
                                     });
于 2013-06-16T02:37:46.617 回答
0 
class TextChanger
  constructor: (options) ->
    @source = options.source
    @target = options.target
    events = ['change', 'keydown', 'keyup', 'keypress']
    @bind(event) for event in events

  update_text: =>
    @target.text @source.val()

  bind: (event) ->
    @selector.on(event, @update_text)

window.Try ?= {}
window.Try.textChanger ?= TextChanger

而在JS方面......

var textChanger = new Try.textChanger({ 
                                        source: $('.user-types-here'), 
                                        destination: $('.text-shows-up-here')
                                     });

关键是使用“=>”创建 update_text。Coffeescript文档很清楚：

在 JavaScript 中，'this' 关键字是动态作用域的，表示当前函数附加到的对象。如果您将函数作为回调传递或将其附加到不同的对象，则“this”的原始值将丢失。如果您不熟悉这种行为，这篇 Digital Web 文章很好地概述了这些怪癖。

粗箭头 => 既可用于定义函数，也可将其绑定到 'this' 的当前值，就在现场。这在使用基于回调的库（如 Prototype 或 jQuery）时很有帮助，用于创建迭代器函数以传递给每个函数，或者使用事件处理函数与绑定一起使用。用粗箭头创建的函数能够访问定义它们的“this”的属性。

于 2013-06-16T20:28:51.970 回答