模块化JS:3个部分(复选框和收音机)的全局功能&顺便说一句，我将“渲染"应用于在我的代码中? [英] Modular JS: global functionality on 3 sections (checkboxes and radios) & Sholud I apply "rendering" in my code?
本文介绍了模块化JS:3个部分(复选框和收音机)的全局功能&顺便说一句，我将“渲染"应用于在我的代码中?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
这是我的Web应用程序上的一个部分，用户可以在此部分订阅"在3个不同时间发送的报告:每周，每月，每季度. (可以从三个选项中选择一个).
This is a section on my web app where a user can "subscribe" to a report sent in 3 different times: weekly, monthly, quarterly. (can choose 1 option from each of the three).
我在为此计划最佳解决方案的同时都在为代码模式而苦苦挣扎.
I am struggling with both planning the best solution for this while struggling with the code pattern.
会发生什么:
-
在加载页面时，我必须传递一个PHP变量，该变量将设置用户报告的当前状态(以代码[{weekly}，{Monthly}，{Quarterly }])0,1,2,3将成为指标.例如:如果用户过去设置了每月要6个月的报告-他将看到选中每月"的复选框-并在单选按钮中选中"6个月"，变量将设置为
[0,2,0]
选中一个复选框时，可以选择3个(或一个)单选按钮.
When selecting a checkbox - the 3 (or one) radio buttons are enabled to select.
取消选中复选框时，单选按钮将被禁用，所有检查都将被删除.
When unchecking a checkbox - the radio buttons are disabled and all checks are deleted.
保存时间表"按钮会将数据发送到PHP.
"Save Schedule" button will send the data to PHP.
我的问题是:
-
如何以模块化方式构造代码，以防止出现意粉代码?
How do I structure my code in a modular way, preventing spaghetti code?
解决了1号问题后-我应该应用渲染"功能吗? (受此视频教程的启发)
After solving problem no.1 - should I apply a "render" function? (inspired by this video tutorial)
只需提及:
-
这是带有我的代码的JSFIDDLE，其意大利面条更少.-包括当前内容工作中.
This is a JSFIDDLE with my code with less spaghetti. - includes what currently is working.
我正在练习模块化JS代码，因此，我很乐意获得有关我的代码的一般提示(推荐的链接，视频和教程等).
I am practicing modular JS code, so I'll be more than happy to get general tips referring to my code (recommended links, videos and tutorials ect).
我正在使用jQuery 1.3.2，它不包含当前库的所有功能. (如parents和on.('click', func..)
I am using jQuery 1.3.2 which do not include all functionalities of the current library. (like parents and 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>
请随时询问更多信息或任何可帮助您帮助我的信息.
Please feel free to ask for more information or anything that will help you to help me.
推荐答案
只要复选框或广播btns有任何更改，就使用渲染:
Used render whenever there is any change via checkboxes or radio 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个部分(复选框和收音机)的全局功能&顺便说一句，我将“渲染"应用于在我的代码中?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
