javascript - meteor react 客户端代码: asking for best/right practise of writing code

Question

在附件中您可以找到一个客户端代码示例:处理 jQuery 简单 slider ，该 slider 可以通过手动拖动或通过消息流从服务器获取新值来更改其值。

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

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

我这样做是因为我还必须通过来自服务器的事件(此处通过流通知)更新 slider 值

我通过 Deps.autorun() 订阅了响应式(Reactive) session 变量“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
            }
          }
      });
    }

    { ... }

Answer 1

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

<小时/>

    // 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();
    }