javascript - FRP、 Angular 和全局事件处理程序

Question

我刚开始使用 Bacon.js这真的很棒。尽管有时我确实很难找到正确的做事方式。例如，我想要一个带有可拖动部分的 Angular Directive(指令)。我不要脸的扒进别人的jsBin并尝试将该代码调整为 Angular

我正在尝试制作一个包含可调整大小的列的表格。所以如果我做这样的事情在列标题指令中

link: (scope, element, attrs)->
    el = element.find('.column-separator')
    doc = $(document)
    mMove = doc.asEventStream('mousemove')
    startDrag = el.asEventStream('mousedown')
    endDrag = doc.asEventStream('mouseup').takeWhile mMove

    # in this case unlike the example in jsBin I don't care about vertical axis, 
    # only horizontal "X"
    getDelta = (t)-> a = t[1]; b = t[0]; return a-b   

    add = (p1,p2)-> p1 + p2

    draggingDeltas = startDrag.flatMap ->
        return mMove
                .map '.clientX'
                .slidingWindow 2,2
                .map getDelta
                .takeUntil endDrag

    pos = draggingDeltas.scan 0, add
    pos.onValue (pos)-> el.css left: pos+"px"

这有点管用，但现在该指令将在整个页面上注册“mousemove”和“mouseup”事件。我可能可以添加一些 takeWhile 语句，事实上我只是尝试了一下，但它并没有真正起作用。

我的意思是在 Angular 应用中使用全局事件处理程序(如 $(document).asEventStream('click'))的模式是什么？

• 您可以在指令中创建处理程序，然后使用 takeWhile, takeUntil 但这样只会工作一次，因为流最终会停止。每次需要响应 document.click 时是否都必须重新初始化流？在一堆地方有“文档”级别的事件也不是一件坏事吗？如果您在指令 $(document).asEventStream('mouseup') 中编写并使用该指令 200 次，那不会创建实际的 200 个监听器吗？

• 或者您必须全局引入这些流变量以供整个应用程序使用，然后在指令中执行 map、filter 和 reduce ？但是，如果有人调用 takeUntil 并且流完全停止流动并且不能在应用程序的其他部分使用怎么办？

• 或者可以在应用程序的顶层监听并为流中的每个值发出 $rootScope 事件，然后在指令或 View 中使用 ng-bacon's $rootScope.$asEventStream(事件)？这不会使应用程序的响应速度有所降低吗？假设您是否需要响应“keydown”和“keyup”事件？

谁能给我举个例子，说明如何在 Angular Directive(指令)中使用 FRP(特别是拖放示例)

Answer 1

我不确定这在多大程度上符合 Angular 哲学，但我肯定会只添加一次这些处理程序。

在全局单例类中:

var mouseHandler = {
  up: $(document).asEventStream('mouseup'),
  move: $(document).asEventStream('mousemove')  
} 

在单个组件中，您可以向这些组件添加处理程序，但请确保您始终使用 takeUntil，这样 bacon 只会在有实际需要时处理这些事件。

function dragHandler(element) {
  var start = $(element).asEventStream('mousedown')
  var delta = start.flatMap(function() {
    return mouseHandler.move
      .map('.clientX')
      .slidingWindow(2,2)
      .map(getDelta)
      .takeUntil(mouseHandler.up)
  })

  var pos = delta.scan(0, add)
  pos.onValue(function(p) {
    $(element).css({left: p + "px"})
  })

  function getDelta(t) { return t[1]-t[0] }
  function add(a,b) { return a+b }
}

http://jsbin.com/yekojitake/3/edit