预期的“：”，而是看到“_variableName”答案

【问题标题】：Expected ':' and instead saw '_variableName'预期的“：”，而是看到“_variableName”
【发布时间】：2016-10-14 09:01:52
【问题描述】：

我很困惑在哪里声明这些变量，所以我可以将它们用作obj.slider._minVal 和obj.slider._maxVal。我收到 JSHint 错误：

var _minVal = 75; ^ 预期为 ':' 而看到的是 '_minVal'。变量 _minVal = 75; ^ 应为标识符，但看到的是“=”。

var obj = obj || {};

obj.slider = {
var _minVal=75, //Confused where to define these variables so it's available 
    _maxVal=300;//in _createSlider();

init:function(){
    console.log('Initialization of Slider');
    var $this = $(this);

    this._createSlider();
    return false;
},

// setSliderMin:function(sliderId, minVal){

// },

_createSlider:function(){
    $('.slider-range').slider({
      range: true,
      min: obj.slider._minVal,
      max: obj.slider._maxVal,
      values: [obj.slider._minVal, obj.slider._maxVal],
      slide: function( event, ui ) {
        $( '#amount' ).val( '$' + ui.values[ 0 ] + ' - $' + ui.values[ 1 ] );
        var handle = $(this).find('.ui-slider-handle');
        $('.ui-slider-handle:first').html('<div class="tooltip bottom slider-tip"><div class="tooltip-arrow"></div><div class="tooltip-inner">' + ui.values[0] + '</div></div>');
        $('.ui-slider-handle:last').html('<div class="tooltip bottom slider-tip"><div class="tooltip-arrow"></div><div class="tooltip-inner">' + ui.values[1] + '</div></div>');
      }
    });

    var value = $( '#slider-range' ).slider( 'option', 'values' );

    $('.ui-slider-handle:first').html('<div class="tooltip bottom slider-tip"><div class="tooltip-arrow"></div><div class="tooltip-inner">' + value[0] + '</div></div>');
    $('.ui-slider-handle:last').html('<div class="tooltip bottom slider-tip"><div class="tooltip-arrow"></div><div class="tooltip-inner">' + value[1] + '</div></div>');
}
};

obj.slider.init();

});

【问题讨论】：

您会收到该错误，因为对象中不应包含 var。在您使用对象的其他地方，您的语法是正确的。

标签： javascript jquery oop jshint jquery-ui-slider

【解决方案1】：

成员变量的语法与成员函数的语法相同：

key1: val,
key2: val

更改您的对象以使用键/值语法：

obj.slider = {
    _minVal: 75,
    _maxVal: 300,
    _createSlider: function() {...},
    init: function() {...}
};

或者，如果您想要隐藏变量和更自然的代码，您可能想要使用函数：

obj.slider = function() {
    var _minVal = 75,
        _maxVal = 300,
        _createSlider = function() {...};
    (this.init = function() {...})();
};

var slider = new obj.slider();
// later on you can reset by calling
slider.init();

JSFiddle

【讨论】：

我更新了我的答案，以展示如何将其变为构造函数。
@Fawn 300 后面不要加分号，要加逗号。
@Fawn 太棒了！如果您的问题得到解答，请点击解决您的问题或最有帮助的答案旁边的复选标记。

【解决方案2】：

用: 创建一个属性，然后用this 使用它：-

var obj = obj || {};

obj.slider = {

  _minVal: 75,
  _maxVal: 300,

  init: function() {
    console.log('Initialization of Slider');
    var $this = $(this);

    this._createSlider();
    return false;
  },

  _createSlider: function() {

    $('.slider-range').slider({
      range: true,
      min: this._minVal,
      max: this._maxVal,
      values: [this._minVal, this._maxVal],
      slide: function(event, ui) {
        $('#amount').val('$' + ui.values[0] + ' - $' + ui.values[1]);
        var handle = $(this).find('.ui-slider-handle');
        $('.ui-slider-handle:first').html('<div class="tooltip bottom slider-tip"><div class="tooltip-arrow"></div><div class="tooltip-inner">' + ui.values[0] + '</div></div>');
        $('.ui-slider-handle:last').html('<div class="tooltip bottom slider-tip"><div class="tooltip-arrow"></div><div class="tooltip-inner">' + ui.values[1] + '</div></div>');
      }
    });

    var value = $('#slider-range').slider('option', 'values');

    $('.ui-slider-handle:first').html('<div class="tooltip bottom slider-tip"><div class="tooltip-arrow"></div><div class="tooltip-inner">' + value[0] + '</div></div>');
    $('.ui-slider-handle:last').html('<div class="tooltip bottom slider-tip"><div class="tooltip-arrow"></div><div class="tooltip-inner">' + value[1] + '</div></div>');
  }
};

obj.slider.init();

【讨论】：

【解决方案3】：

@BenG 的回答很棒，但您也可以创建一个类而不是使用 JSON 对象字面量，以使您的变量/函数私有化。

var obj = obj || {};

obj.slider = function(){

  var _minVal = 75;
  var _maxVal = 300;

  console.log('Initialization of Slider');
  var $this = $(this);

  _createSlider();
  return false;

  function _createSlider() {
    $('.slider-range').slider({
      range: true,
      min: _minVal,
      max: _maxVal,
      values: [_minVal, _maxVal],
      slide: function(event, ui) {
        $('#amount').val('$' + ui.values[0] + ' - $' + ui.values[1]);
        var handle = $(this).find('.ui-slider-handle');
        $('.ui-slider-handle:first').html('<div class="tooltip bottom slider-tip"><div class="tooltip-arrow"></div><div class="tooltip-inner">' + ui.values[0] + '</div></div>');
        $('.ui-slider-handle:last').html('<div class="tooltip bottom slider-tip"><div class="tooltip-arrow"></div><div class="tooltip-inner">' + ui.values[1] + '</div></div>');
      }
    });

    var value = $('#slider-range').slider('option', 'values');

    $('.ui-slider-handle:first').html('<div class="tooltip bottom slider-tip"><div class="tooltip-arrow"></div><div class="tooltip-inner">' + value[0] + '</div></div>');
    $('.ui-slider-handle:last').html('<div class="tooltip bottom slider-tip"><div class="tooltip-arrow"></div><div class="tooltip-inner">' + value[1] + '</div></div>');
  }
};

new obj.slider();

【讨论】：