这是我的网络应用程序上的一个部分，用户可以在其中"订阅"在 3 个不同时间发送的报告：每周、每月、每季度。(可以从三个选项中的每一个中选择 1 个)。
我正在努力为此规划最佳解决方案，同时又在代码模式方面苦苦挣扎。
应该发生什么：
-
加载页面时，我必须传递一个 PHP var，它将设置用户报告的当前状态(变量
report在我的代码乞求 [{每周}，{每月}，{季度}]) 0,1,2,3 将是指标。例如：如果用户过去设置了他想要每月 6 个月的报告 - 他将看到选中"每月"复选框 - 并在单选按钮中选中"6 个月"，变量将设置为[0,2,0] -
选中复选框时 - 启用 3(或 1)个单选按钮进行选择。
-
取消选中复选框时 - 单选按钮被禁用，所有复选都将被删除。
-
"保存计划"按钮会将数据发送到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>
请随时询问更多信息或任何可以帮助您帮助我的东西。
每当通过复选框或无线电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>