Javascript 单例类没有从 DOM 属性中获取值？答案

【问题标题】：Javascript singleton class isn't getting values from DOM attributes?Javascript 单例类没有从 DOM 属性中获取值？
【发布时间】：2018-11-12 21:41:16
【问题描述】：

使用 Django 渲染的 jinja 设置数据属性。当我尝试访问 data-url 属性时，该值被分配给类的 URL 对象。

这段代码有两个问题。首先，当我尝试访问 data-default 属性时，它返回 null 或未定义的值。其次，当我尝试将来自 ajax 调用的响应分配给 this.data 时，它没有被分配。

下面是我的代码

    <select id="value" data-url="api/values" data-default="1">
</select>

$(document).ready(function(){


var value = new function(){
    this.url = $("#value").attr("data-url");
    this.default = $("#value").attr("data-default");
    this.data = null;
    this.settings =   {
      "async": true,
      "crossDomain": true,
      "url": this.url,
      "method": "GET",
    };
    this.getData = function(){
            $.ajax(this.settings).done(function(response){
                   this.data = response;
                 $.each(response, function (i, value) {

                          var $option =  $('<option>').text(value.shift_name)
                            .attr('value', value.id)
                            .attr('start', value.shift_start_time)
                            .attr('end', value.shift_end_time)
                            .attr('shift_day', value.shift_day)

                            if (this.default==value.id){        //Error here this.default is always undefined 
                              $option.attr('selected', 'selected');
                            }

                          $('#value').append($option);

                        });//Loop ends
            });//ajax ends
            }//sub function ends
      } //class ends

value.getData();

});

【问题讨论】：

没有“单例类”这样的东西。 Don't ever use new function() { … }!
@Bergi 你是说javascript中没有单例类？好吧，当我研究类时，我最终创建了其中一个。我是否应该认为这只是一个全局变量，可以视为单例方法，但反过来，它不是用于单例类的真正定义？
没有理由创建一个全局变量，你的var value = … 也不是一个。你应该使用一个简单的对象字面量而不是 new function 语法。

标签： javascript jquery ajax dom

【解决方案1】：

您有两个不同的范围，因此您需要执行以下操作：

$(document).ready(function(){


var value = new function(){
    this.url = $("#value").attr("data-url");
    this.default = $("#value").attr("data-default");
    this.data = null;
    this.settings =   {
      "async": true,
      "crossDomain": true,
      "url": this.url,
      "method": "GET",
    };
    var outerScope = this;
    this.getData = function(){
            $.ajax(this.settings).done(function(response){
                   outerScope.data = response;
                 $.each(response, function (i, value) {

                          var $option =  $('<option>').text(value.shift_name)
                            .attr('value', value.id)
                            .attr('start', value.shift_start_time)
                            .attr('end', value.shift_end_time)
                            .attr('shift_day', value.shift_day)

                            if (outerScope.default==value.id){        
                              $option.attr('selected', 'selected');
                            }

                          $('#value').append($option);

                        });//Loop ends
            });//ajax ends
            }//sub function ends
      } //class ends

value.getData();

});

【讨论】：