以下代码在此行document.body.appendChild(script);
上崩溃,新脚本被添加到body元素中。页面崩溃,浏览器的调试工具显示此消息DevTools was disconnected from the page. Once page is reloaded, DevTools will automatically reconnect
。我不确定导致调试器工具崩溃的错误是什么,因为添加和删除脚本以获取随机引用的同一过程与#btn-quote
点击事件一起使用。通过将appController.init();
替换为window.onload = init;
,我还尝试在加载页面时调用init函数,但仍然出现相同的错误。我真的很感激,任何人都可以指出我在下面的代码中做出的任何逻辑错误,因为我无法解决它们。
var dataController = (function() {
var data = {
quote: '',
author: ''
}
function setRandomQuote() {
var script = document.createElement('script');
script.src = 'http://api.forismatic.com/api/1.0/?method=getQuote&lang=en&format=jsonp&jsonp=parseQuote';
document.body.appendChild(script);
window.parseQuote= function(json) {
data.quote = json.quoteText;
data.author = json.quoteAuthor;
}
script.parentNode.removeChild(script);
}
return {
getQuote: function() {
setRandomQuote();
return data;
}
};
})();
var UIController = (function(){
return {
changeQuote: function(data) {
document.querySelector('q').innerHTML = data.quote;
document.querySelector('cite').innerHTML = data.author;
}
}
})();
var appController = (function(dataCtrl, UICtrl) {
var setupEventListener = function() {
document.querySelector('#btn-quote').addEventListener('click', getRandomQuote);
};
function getRandomQuote() {
var data= {};
// 1. get quote
var data = dataCtrl.getQuote();
// 2. change UI with new quote
UICtrl.changeQuote(data);
}
return {
init: function() {
setupEventListener();
getRandomQuote();
}
}
})(dataController, UIController);
appController.init();