模块化 JS：3 个部分（复选框和收音机）的全局功能＆我应该在我的代码中应用 "rendering" 吗？

Question

这是我的网络应用程序中的一个部分，用户可以在其中 "subscribe" 以 3 个不同的时间发送报告：每周、每月、每季度。（三者各选一项）。

我在努力规划最佳解决方案的同时也在努力解决代码模式问题。

应该发生什么：

加载页面时，我必须传递一个 PHP 变量来设置用户报告的当前状态（我代码开头的变量 report [ {weekly},{Monthly},{Quarterly}]) 0,1,2,3 将是指标。例如：如果用户过去设置他想要每月 6 个月的报告 - 他将看到 "monthly" 的复选框被选中 - 并且在单选按钮中输入“6 个月” select 和该变量将设置为 [0,2,0]
当 select 选中复选框时 - 3（或一个）单选按钮启用 select。
当取消选中复选框时 - 单选按钮被禁用并且所有选中的都被删除。
"Save Schedule" 按钮会将数据发送到 PHP。

我的问题是：

如何以模块化方式构建我的代码，防止出现面条式代码？
解决第 1 题后 - 我应该应用 "render" 函数吗？ (inspired by this video tutorial)

只是提到：

This is a JSFIDDLE with my code with less spaghetti. - 包括当前正在运行的内容。
我正在练习模块化 JS 代码，因此我非常乐意获得参考我的代码的一般提示（推荐链接、视频和教程等）。
我正在使用 jQuery 1.3.2，它不包括当前库的所有功能。（比如 parents 和 on.('click', func..)

html:

<span class="btn" id="setScheduleBtn">Set Schedule</span>
<div id="reportSchedule" name="reportSchedule" style="display: none;">

    <fieldset class="report-type" style="width:21%; display: inline-block;">
        <legend>
            <input type="checkbox" name="weekly" id="weekly"> 
            <label for="weekly">Weekly:</label>
        </legend>

        <input type="radio" id="week" name="week" value="1" disabled>
        <label for="week">3 Months</label>

    </fieldset> 

    <fieldset class="report-type" style="width:21%; display: inline-block;">
        <legend>
            <input type="checkbox" name="monthly" id="monthly"> 
            <label for="monthly">Monthly:</label>
        </legend>

        <input type="radio" id="monthly1" name="monr" value="1" disabled>
        <label for="monthly1">1 Month</label>

        <input type="radio" id="monthly3" name="monr" value="2" disabled>
        <label for="monthly3">3 Months</label>

        <input type="radio" id="monthly6" name="monr" value="3" disabled>
        <label for="monthly6">6 Months</label>

    </fieldset>     

    <fieldset class="report-type" style="width:21%; display: inline-block;">
        <legend>

            <input type="checkbox" name="quarterly" id="quarterly"> 
            <label for="quarterly">Quarterly:</label>
        </legend>

        <input type="radio" id="quarterly3" name="quar" value="1" disabled>
        <label for="quarterly3">3 Months</label>

        <input type="radio" id="quarterly6" name="quar" value="2" disabled>
        <label for="quarterly6">6 Months</label>

        <input type="radio" id="quarterly12" name="quar" value="3" disabled>
        <label for="quarterly12">12 Months</label>

    </fieldset>

        <span class="btn" id="saveSchedule" style="display: inline-block; margin: 0 0 10px 0;">
            Save Schedule
        </span>
</div>

JS：

<script type="text/javascript">
/******************/
/** Set Schedule **/ 
/******************/
(function() {

    var schedule = {

        report: [], 
        template: $('#report_schedule').html(),

        // Init functions
        init: function() {
            this.cacheDom();
            this.bindEvents();
        }, 
        // Cache elements from DOM
        cacheDom: function() {
            this.$setScheduleBtn = $('#setScheduleBtn'); 
            this.$reportSchedule = $('#reportSchedule');
            this.$allFieldsets   = this.$reportSchedule.find('fieldset');
            this.$radioBtns      = this.$allFieldsets.find('input[type="radio"]');
            this.$saveBtn        = $('#saveSchedule');
        }, 
        // Set events
        bindEvents: function() {

            var that = this;

            // Show/Hide "Set report" section
            this.$setScheduleBtn.click(this.showReportScheduler.bind(this));

            // Checkbox-radio buttons clicks
            this.$allFieldsets.each(function() {
                let fieldset = this;
                $(this).find('input[type=checkbox]').change(function () {
                    that.toggleRadioButtons(fieldset);          
                });
            });

            // Update current report
            this.$radioBtns.change(this.updateReport.bind(this));

            // Save button apply changes 
            this.$saveBtn.click(this.saveSchedule.bind(this));


        }, 

        // Display on click
        showReportScheduler: function() {
            this.$reportSchedule.slideToggle("fast");
        }, 

        // Toggle Radio Buttons
        toggleRadioButtons: function(fs) {
            var radios = $(fs).find("input[type=radio]");
            radios.attr("disabled", !radios.attr("disabled"));
            radios.removeAttr('checked');
        },

        updateReport: function(rd) {
            console.log(rd.get(0).parentNode);
        },

        // Save data
        saveSchedule: function() {
            var selectedItems = [];
            this.$allFieldsets.each(function(){
                var newylyChecked = $(this).find('input[type="radio"]:checked').val();
                if ( newylyChecked == undefined ) newylyChecked = 0; 
                selectedItems.push(parseInt(newylyChecked));
            });
            this.report = selectedItems;
            // console.log(this.report);
            if (this.sendReport(this.report)) {
                this.$reportSchedule.slideUp("fast");
            } 
        },

        // Send report to server
        sendReport: function() { 
            $.ajax({
                type: "POST",
                url: '/potato/schedule_report.php',
                data: { 
                    weekly: this.report[0], 
                    monthly: this.report[1], 
                    quarterly: this.report[2], 
                    system_user_id: <?php echo $_SESSION["system_user_id"]; ?> 
                },
                success: function(data) {
                    console.log(data);
                    return true;
                }
            });
        }

    };
    schedule.init();

})();
</script>

请随时询问更多信息或任何有助于您帮助我的信息。

Answer 1

每当通过复选框或单选 btns 进行任何更改时使用渲染：

<script type="text/javascript">
/******************/
/** Set Schedule **/ 
/******************/
(function() {

    var schedule = {

        // get reports via php
        report: [<?php echo implode(', ', $current_report); ?>], 

        /******************/
        /* Init functions */
        /******************/

        init: function() {
            this.cacheDom();
            this.bindEvents();
            this.render();
        }, 
        // Cache elements from DOM
        cacheDom: function() {
            this.cachedReport    = this.report.slice();
            this.$setScheduleBtn = $('#setScheduleBtn'); 
            this.$reportSchedule = $('#reportSchedule');
            this.$allFieldsets   = this.$reportSchedule.find('fieldset');
            this.$checkboxBtns   = this.$allFieldsets.find('input[type="checkbox"]');
            this.$radioBtns      = this.$allFieldsets.find('input[type="radio"]');
            this.$saveBtn        = this.$reportSchedule.find('#saveSchedule');
        }, 
        // Set events
        bindEvents: function() {

            var that = this;

            // Show/Hide "Set report" section
            this.$setScheduleBtn.click(this.showReportScheduler.bind(this));

            // Checkbox-radio buttons clicks
            this.$allFieldsets.each(function() {
                let fieldset = this;
                $(this).find('input[type=checkbox]').change(function () {
                    that.toggleRadioButtons(fieldset);          
                });
            });

            // Update 'report' checkbox on change 
            this.$checkboxBtns.change(function(){
                that.checkboxSaveOnChange(this);
            });

            // Update 'report' radio on change 
            this.$radioBtns.change(function(){
                // console.log(reportit);
                that.radioSaveOnChange(this);
            });

            // Save button apply changes 
            this.$saveBtn.click(this.saveSchedule.bind(this));

        }, 
        // Renderng data
        render: function() {

            var newData = this.report;
            var that    = this;

            this.$allFieldsets.each(function(i) {

                let fieldset     = this;
                var $theCheckbox = $(fieldset).find('input[type="checkbox"]');
                var radios = $(fieldset).find("input[type=radio]");

                switch ( newData[i] ) {
                    case 0:

                        $theCheckbox.attr("checked", false);
                        radios.attr("disabled", radios.attr("disabled"));
                        radios.removeAttr('checked');

                        break;
                    case 1:

                        $theCheckbox.attr("checked", true);
                        radios.attr("disabled", !radios.attr("disabled"));
                        radios.eq(0).attr("checked", true);

                        break;
                    case 2:

                        $theCheckbox.attr("checked", true);
                        radios.attr("disabled", !radios.attr("disabled"));
                        radios.eq(1).attr("checked", true);

                        break;
                    case 3:

                        $theCheckbox.attr("checked", true);
                        radios.attr("disabled", !radios.attr("disabled"));
                        radios.eq(2).attr("checked", true);

                        break;
                }

            });

        }, 

        /***********/
        /* General */
        /***********/

        // Update "report" variable onclick checkbox
        checkboxSaveOnChange: function(newCheckbox){

            (newCheckbox.checked ? console.log("doing nothing") : this.report[newCheckbox.value] = 0 );
            console.log(this.report);

        },

        // Update "report" variable onclick radio
        radioSaveOnChange: function(newRadio){

            switch ( newRadio.name ) {

                case 'week':
                    this.report[0] = parseInt(newRadio.value)+1;
                    break;

                case "mont":
                    this.report[1] = parseInt(newRadio.value)+1;                    
                    break;

                case "quar":
                    this.report[2] = parseInt(newRadio.value)+1;                    
                    break;
            }
            console.log(this.report);
        },

        // Display report form on click
        showReportScheduler: function() {
            this.$reportSchedule.slideToggle("fast");
        }, 

        // Toggle Radio Buttons
        toggleRadioButtons: function(fs) {
            var radios = $(fs).find("input[type=radio]");
            radios.attr("disabled", !radios.attr("disabled"));
            radios.removeAttr('checked');
        },

        // Save button 
        saveSchedule: function() {
            var selectedItems = [];
            this.$allFieldsets.each(function(){
                var newylyChecked = $(this).find('input[type="radio"]:checked').val();
                if ( newylyChecked == undefined ) newylyChecked = 0; 
                selectedItems.push(parseInt(newylyChecked));
            });

            if (this.sendReport(this.report)) {
                this.$reportSchedule.slideUp("fast");
            } 

        },

        // Checks if 2 arrays are the same
        isArrayTheSame: function(array1, array2) {

            var is_same = array1.length == array2.length && array1.every(function(element, index) {
                return element === array2[index]; 
            }); 

            return is_same;
        },

        // Send reportt to server
        sendReport: function() { 

            // If data has changed since the page was loaded: 
            if ( this.isArrayTheSame(this.report, this.cachedReport) ){

                $.ajax({
                    type: 'POST',
                    url: '/potato/schedule_report.php',
                    data: { 
                        weekly: this.report[0], 
                        monthly: this.report[1], 
                        quarterly: this.report[2],
                        system_user_id: <?php echo $_SESSION['system_user_id']; ?> 
                    },
                    success: function(data) {
                        return true;
                    }
                });

            }
        }

    };
    schedule.init();

})();
</script>

模块化 JS：3 个部分（复选框和收音机）的全局功能＆我应该在我的代码中应用 "rendering" 吗？

Modular JS: global functionality on 3 sections (checkboxes and radios) & Sholud I apply "rendering" in my code?

javascript

jquery

modular

modular-design