我正在用OOP构建一个小的日历,这是可行的,但是每当我在另一个js文件中调用新的Calendar()时,它都会抱怨它没有定义Calendar,我不明白为什么会这样。
某些代码:Index.html
<html>
<head>
<script src="monthData.js"></script>
<script src="month.js"></script>
</head>
<body>
<table>
<tbody id="table">
<tr id="year"></tr>
<tr>
<td id="prev-month"> Prev</td>
<td id="month"></td>
<td id="next-month"> Next</td>
</tr>
<tr id="days-of-week"></tr>
</tbody>
</table>
<script src="currentCal.js"></script>
</body>
</html>
month.js
window.wca = {}
};
(function() {
wca.today = new Date();
wca.currentYear = wca.today.getFullYear();
wca.currentMonth = wca.today.getMonth();
function Calendar(year, month){
this.year = wca.currentYear;
this.month = wca.currentMonth;
}
wca.Calendar.prototype.createCalendar = function(){
wca.currentDayOfWeek = wca.today.getDay();
wca.firstDay = new Date(wca.currentYear, wca.currentMonth, 1); //first day of current month
wca.firstDayOfWeek = daysLabel[wca.firstDay.getDay() - 1]; // first dayOfTheWeek of current month
wca.firstDayOfWeekNumber = wca.firstDay.getDay();
wca.showMonth = monthNamesArray[wca.currentMonth]; //current month string
wca.showWeekDay = daysLabel[wca.currentDayOfWeek - 1]; //current day of the week
wca.totDayInMonth = daysPerMonth[wca.currentMonth]; //how many days are in the current month
//Leap years
if (wca.currentMonth == 1) {
if((wca.currentYear % 4 == 0 && wca.currentYear % 100 != 0) || wca.currentYear % 400 == 0){
wca.totDayInMonth = 29;
}
}
var Htmltable = document.getElementById('table');
var year = document.getElementById('year');
var month = document.getElementById('month');
var daysOfWeek = document.getElementById('days-of-week');
year.innerHTML = '<td>'+ wca.currentYear +'</td>';
month.innerHTML = '<td>'+ wca.showMonth +'</td>';
for(i = 0; i < daysLabel.length; i++)
daysOfWeek.innerHTML = daysOfWeek.innerHTML + '<td>'+ daysLabel[i] +'</td>';
var html = '';
var day = 1;
for(i = 1; i <= 6; i++){ //6 rows
html += '<tr id="days-row">';
for(j = 1; j <= 7; j++){ //7 coloumns
html += '<td>';
if(day <= wca.totDayInMonth && (i > 1 || j >= wca.firstDayOfWeekNumber )){
html += day;
day++;
} else {
html += ' ';
}
html += '</td>';
}
if(day >= wca.totDayInMonth){
break;
}
html += '</tr>';
}
Htmltable.innerHTML += html + '</tr>';
}
})();
currentCal.js
window.wca = {};
(function() {
var currentCal = new Calendar(wca.currentYear, wca.currentMonth);
currentCal.createCalendar();
})();
因此,如果我在month.js中放入currentCal中的内容,则一切正常,否则会得到未定义的错误。这是为什么?因为在我的HTML中,我先链接month.js,然后再链接currentCal.js,所以我认为它应该已经知道Calendar()了。是。
它看起来像一个范围问题。您可以尝试输入“ var wca = {};”吗?在month.js中,并在currentCal.js中使用它(不使用window.wca = {};)?
编辑:他在另一个文件的闭包内调用了“新日历”,因此它不在另一个文件的全局范围内。他必须删除闭包“(function(){...})”才能在全局范围内声明此变量,并且可以从其他文件访问。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句