如何观看/收听变量并触发“ onChange”事件（模块化JS）

Question

我想听this.progress变量。 每当更改-它应该更新我的图表加载百分比和进度栏加载百分比。

我尝试在我的bindEvents()部分中使用.change ，但是出现一个错误，说对变量应用.change函数无效（仅对元素有效）。

所以我试图做喜欢的事， 这个 （参见下最后一个变量cacheDom ）：

(function() {

    const qwData = {

        // Initialize functions
        init: function() {
            this.cacheDom();
            this.bindEvents();
        },
        // Cache vars 
        cacheDom: function() {
            this.dataDisplayed  = false;
            this.countUsers     = <?php echo $_SESSION['all_users_count_real']; ?>;
            this.$form          = $('#frm_reportit');
            this.start_date     = this.$form[0][9].value;
            this.end_date       = this.$form[0][10].value;
            this.dateCount      = this.countDays(this.start_date, this.end_date);
            this.show           = document.querySelector('#btn-show');
            this.downloadBtn    = document.querySelector('#download_summary_button');
            this.$dataContainer = $('#qw-data-container');
            this.$qwTable       = $('#qwtable');
            this.$qwTbody       = this.$qwTable.find('tbody');
            this.qwChart        = echarts.init(document.getElementById('main-chart'));
            this.progressBar    = document.querySelector('.progress-bar');
            this.progress       = function(){

                var progressPrecent = 0;

                return {

                    getProgress: function () {
                      return progressPrecent;
                    },
                    updateValue: function(progressPrecent) {
                        this.updateProgressTableChart(progressPrecent);
                    }
                }

            };
        },
        // Bind click events (or any events..)
        bindEvents: function() {

            var that = this;

            // On click "Show" BTN
            this.show.onclick = this.sendData.bind(this, this.start_date, this.end_date);

            // On Change inputs
            this.$form.change(function(){
                that.updateDatesInputs(this);
            });

            // On Change inputs
            /*this.progress.change(function(){

                // Show Chart Loading 
                that.qwChart.showLoading({ 
                    text: that.returnNumWithPrecent(that.progress)
                });
                that.setProgressBarValue(that.progress);

            });*/
        },
        // Get data, prevent submit defaults and submit. 
        sendData: function(sdate, edate, e) {
            e.preventDefault();
            let that = this;

            $.ajax({
                type: 'POST',
                url: "/potato/ajax.php?module=potato_module",
                dataType: 'json',
                data: {
                        start_ts: sdate,
                        stop_ts: edate, 
                        submitted: true
                },
                beforeSend: function() {

                    console.log(that.progress);

                    setTimeout(function (){

                      // Something you want delayed.

                    }, 1000);
                                    that.progress       = 50;

                    setTimeout(function (){

                      // Something you want delayed.

                    }, 2000);
                                    that.progress       = 60;


                    // that.setProgressBarValue(that.progress);

                    // Show Chart Loading 
                    that.qwChart.showLoading({ 
                        color: '#00b0f0'/*, 
                        text: that.returnNumWithPrecent(that.progress)*/
                    });

                    // If data div isn't displayed
                    if (!that.dataDisplayed) {
                        // Show divs loading
                        that.showMainDiv();
                    } else {
                        that.$qwTbody.slideUp('fast');
                        that.$qwTbody.html('');
                    }
                },
                complete: function(){
                },
                success: function(result){
                }
            });

            that.dataDisplayed = true;
        }, 
        ...........
        ......................
        ...................................
        ...............................................
})();

在console.log(this.progress)所在的console.log(this.progress)继续收到此错误：

未定义

Answer 1

您可以将自己的setter与defineProperty一起使用。

  (function() { const qwData = { // Initialize functions init: function() { this.cacheDom(); this.bindEvents(); }, // Cache vars cacheDom: function() { this.dataDisplayed = false; this.countUsers = <?php echo $_SESSION['all_users_count_real']; ?>; this.$form = $('#frm_reportit'); this.start_date = this.$form[0][9].value; this.end_date = this.$form[0][10].value; this.dateCount = this.countDays(this.start_date, this.end_date); this.show = document.querySelector('#btn-show'); this.downloadBtn = document.querySelector('#download_summary_button'); this.$dataContainer = $('#qw-data-container'); this.$qwTable = $('#qwtable'); this.$qwTbody = this.$qwTable.find('tbody'); this.qwChart = echarts.init(document.getElementById('main-chart')); this.progressBar = document.querySelector('.progress-bar'); Object.defineProperty(this, "progress", { get: () => { return this.progressPrecent || 0; }, set: (value) => { if(value != this.progressPrecent){ this.updateProgressTableChart(value); this.progressPrecent = value; } } }); }, // Bind click events (or any events..) bindEvents: function() { var that = this; // On click "Show" BTN this.show.onclick = this.sendData.bind(this, this.start_date, this.end_date); // On Change inputs this.$form.change(function(){ that.updateDatesInputs(this); }); // On Change inputs /*this.progress.change(function(){ // Show Chart Loading that.qwChart.showLoading({ text: that.returnNumWithPrecent(that.progress) }); that.setProgressBarValue(that.progress); });*/ }, // Get data, prevent submit defaults and submit. sendData: function(sdate, edate, e) { e.preventDefault(); let that = this; $.ajax({ type: 'POST', url: "/potato/ajax.php?module=potato_module", dataType: 'json', data: { start_ts: sdate, stop_ts: edate, submitted: true }, beforeSend: function() { console.log(that.progress); setTimeout(function (){ // Something you want delayed. }, 1000); that.progress = 50; setTimeout(function (){ // Something you want delayed. }, 2000); that.progress = 60; // that.setProgressBarValue(that.progress); // Show Chart Loading that.qwChart.showLoading({ color: '#00b0f0'/*, text: that.returnNumWithPrecent(that.progress)*/ }); // If data div isn't displayed if (!that.dataDisplayed) { // Show divs loading that.showMainDiv(); } else { that.$qwTbody.slideUp('fast'); that.$qwTbody.html(''); } }, complete: function(){ }, success: function(result){ } }); that.dataDisplayed = true; }, ........... ...................... ................................... ............................................... })();