流星反应客户端代码：要求编写代码的最佳/正确实践答案

【问题标题】：meteor reactive client code: asking for best / right practise of writing code流星反应客户端代码：要求编写代码的最佳/正确实践
【发布时间】：2014-06-06 09:27:04
【问题描述】：

附上一个客户端代码示例：处理一个 jQuery 简单滑块，该滑块可以通过手动拖动或通过消息流从服务器获取新值来更改其值。

在 Template.SLIDER.rendered 事件中，我在 Div 元素上创建 jQuery UI 滑块。

我将引用 var 保存到 var Div_Slider 中的 Div 元素

我这样做了，因为我还必须通过来自服务器的事件（这里通过流通知）更新滑块值

我通过 Deps.autorun() 订阅了响应式 Session var "slider_value"。

当 Session.set 被调用时，如果这个元素已经被渲染，事件也应该更新 Slider.value。

改为使用 $('#servo-slide')。不止一次，不得不一次又一次地检查 DOM 我准备了这个本地 Div_Slider var 作为参考，并在与 jQuery UI Slider 交互期间使用它。

问：这是最好的性能技术吗？ - 创建本地 .js 文件范围变量以引用常用元素？

问：您对我的示例代码有什么建议吗？



    { ... }

    /*
       --------------- Slider
    */

    // save reference to slider
    var Div_Slider = undefined;

    // be reactive on Session value slider_value
    Deps.autorun(function () {
      // we just operate when available
      if (Session.equals('slider_value', undefined)) 
        return;
      // be reactive on slider_value
      var slider_value = Session.get('slider_value');
      // set jQuery slider position
      if (!_.isUndefined(Div_Slider)) {
        Servo_Slider.slider({value: slider_value});
      }
    });

    // listen to the stream
    notifications.on('change_slider_value', function(new_value) {
      // we are updating the sliders value, this will also update the Session value in onChange event
      Session.set("slider_value", new_value);
    });

    Template.SLIDER.rendered = function () {
      // save reference to elements
      Div_Slider = $(this.find('#servo-slide'));

      // update div as slider
      Servo_Slider.slider({
        min: 0,
        max: 100,
        step: 1,
        range: "min",
        value: Session.get("slider_value"),
        change:
          function(event, ui) {
            // only do something if the event was generated here
            if (event.originalEvent) {
              // do your actions
            }
          }
      });
    }

    { ... }

【问题讨论】：

看起来不错。也许考虑来自服务器的限速通知。当模板不再使用时，还要查看从Deps.autorun 停止计算。

标签： javascript meteor

【解决方案1】：

使用 Nathans 对我的另一个问题的评论和回答，我优化了代码并报告了为 jQuery 滑块编写流星代码的最佳案例。



    // listen to the stream
    notifications.on('change_slider_value', function(new_value) {
      // we are updating the sliders value, this will also update the Session value in onChange event
      Session.set("slider_value", new_value);
    });

    Template.SLIDER.rendered = function () {
      // save reference to elements
      var slider = $(this.find('#servo-slide'));

      // update div as slider
      slider.slider({
        min: 0,
        max: 100,
        step: 1,
        range: "min",
        value: Session.get("slider_value"),
        change:
          function(event, ui) {
            // only do something if the event was generated here
            if (event.originalEvent) {
              // do your actions
            }
          }
      });

      // be reactive on Session value slider_value
      this.computation = Deps.autorun(function () {
        // set jQuery slider position
        slider.slider({value: Session.get('slider_value')});
      });
    }

    Template.SLIDER.destroyed = function () {
      // check if we added a computation and stop
      if (this.computation) 
        this.computation.stop();
    }

【讨论】：