这是我的网络应用程序上的一个部分，用户可以“订阅”在 3 个不同时间发送的报告：每周、每月、每季度。（可以从三个选项中选择一个）。
我在为这方面计划最佳解决方案而苦苦挣扎，同时也在为代码模式苦苦挣扎。
应该发生什么：
加载页面时，我必须传递一个 PHP var，它将设置用户报告的当前状态（
report在我的代码 [{weekly}，{Monthly}，{Quarterly}] 的乞求中的变量）0,1,2， 3将指标。例如：如果用户在过去设置了他想要每月 6 个月的报告 - 他将看到选中的“每月”复选框 - 并且在单选按钮中选择了“6 个月”并且变量将设置为[0,2,0]选择复选框时 - 启用 3 个（或一个）单选按钮进行选择。
取消选中复选框时 - 单选按钮被禁用并删除所有检查。
“保存计划”按钮将数据发送到 PHP。
我的问题是：
如何以模块化方式构建我的代码，防止意大利面条式代码？
解决问题 1 后 - 我应该应用“渲染”功能吗？（受此视频教程启发）
只是提一下：
这是一个 JSFIDDLE，我的代码更少意大利面。 - 包括当前正在工作的内容。
我正在练习模块化 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>
请随时询问更多信息或任何可以帮助您帮助我的信息。