我正在掌握一种将内容（文本）从 json 文件加载到网页上的方法。放置在页面上之前的内容是使用 handlebars 模板编译的。具有所有这些逻辑的 javascript 文件被编写为使用 browserify 编译的 commonjs 模块。我正在使用安装了 NodeJS npm 的本地 http 服务器运行该页面。
测试用例有效，当尝试将此方法应用于完成的网页时，出现了问题。由于我刚刚学习这种方法，我将不胜感激。
所以有：
- webContent.json - 它存储将加载到index.html中的内容（文本）
- contentProcess.js - 包含一个向webContent.json发送 Ajax 请求、解析、编译
Handlebars Template并将内容放在页面上的函数（使用 innerHTML） - addContent.js - 从contentProcess.js调用函数，替换必要的变量。contentProcess.js和
addContent.js
commonjs作为模块编写和捆绑。然后将它们编译到main.js中browserify。 - index.html - 包含
Handlebars Template,div, 将放置内容和指向main.js的链接
测试版有效。当我试图用一个已经存在的网页实现这种方法时，有些东西不起作用。控制台抱怨来自main.js的一段逻辑，它最初是 contentProcess.js中函数的一部分，在测试用例中没有问题（下面的两个屏幕截图）：
这里有什么问题（在测试版本中这个功能有效）？
在剪辑中，我分散了上述所有文件的代码片段（由注释分隔）：
/* --- webContent.json --- */
{
header: "Powerful business",
describtion: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec turpis neque, sodales a faucibus at, viverra luctus urna. Suspendisse dignissim neque dui, in tincidunt arcu.'
}
/* --- contentProcess.js --- */
module.exports = function(jsonDir, templId, finId){
function sendGet(callback) {
/* create an AJAX request using XMLHttpRequest*/
var xhr = new XMLHttpRequest();
/*reference json url taken from: http://www.jsontest.com/*/
/* Specify the type of request by using XMLHttpRequest "open",
here 'GET'(argument one) refers to request type
"http://date.jsontest.com/" (argument two) refers to JSON file location*/
xhr.open('GET', jsonDir);
/*Using onload event handler you can check status of your request*/
xhr.onload = function () {
if (xhr.status === 200) {
callback(JSON.parse(xhr.responseText));
} else {
alert(xhr.statusText);
}
};
/*Using onerror event handler you can check error state, if your request failed to get the data*/
xhr.onerror = function () {
alert("Network Error");
};
/*send the request to server*/
xhr.send();
}
//For template-1
var dateTemplate = document.getElementById(templId).innerHTML;
var template = Handlebars.compile(dateTemplate);
sendGet(function (response) {
document.getElementById(finId).innerHTML += template(response);
})
}
/* --- addContent.js --- */
var addContent = require('./contentProcess');
addContent("../data/webContent.json", "main-template", 'maintext');/* --- main.js (после компиляции addContent.js с помощью browserify) --- */
(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
var addContent = require('./contentProcess');
/*MAINBLOCK*/
addContent("../data/webContent.json", "main-template", 'maintext');
},{"./contentProcess":2}],2:[function(require,module,exports){
module.exports = function(jsonDir, templId, finId){
function sendGet(callback) {
/* create an AJAX request using XMLHttpRequest*/
var xhr = new XMLHttpRequest();
/*reference json url taken from: http://www.jsontest.com/*/
/* Specify the type of request by using XMLHttpRequest "open",
here 'GET'(argument one) refers to request type
"http://date.jsontest.com/" (argument two) refers to JSON file location*/
xhr.open('GET', jsonDir);
/*Using onload event handler you can check status of your request*/
xhr.onload = function () {
if (xhr.status === 200) {
callback(JSON.parse(xhr.responseText));
} else {
alert(xhr.statusText);
}
};
/*Using onerror event handler you can check error state, if your request failed to get the data*/
xhr.onerror = function () {
alert("Network Error");
};
/*send the request to server*/
xhr.send();
}
//For template-1
var dateTemplate = document.getElementById(templId).innerHTML;
var template = Handlebars.compile(dateTemplate);
sendGet(function (response) {
document.getElementById(finId).innerHTML += template(response);
})
}
},{}]},{},[1]);<!-- фрагмент кода из index.html (на странице используется bootstrap, если это имеет значение) -->
<div id="maintext"> </div>
<script id="main-template" type="text/x-handlebars-template">
{{{header}}} {{{describtion}}} {{{sentence3}}}
</script>
（也许不是很幸运，但我会尝试猜测）
这不是 JSON，在 JSON 中不带引号的键是不允许的，所有引号只能是双引号，它应该是这样的
/* Комментарии */在 JSON 中也被禁止，是的。