本文通过一个基于JSON数据生成树状目录的JavaScript实例，分析了因变量str定义位置不当导致的作用域错误。通过将该变量改为局部变量，成功解决了生成的目录树结构异常问题，提供了具体的代码修改对比与效果展示。
JSON树生成中的变量作用域问题
在最近的项目开发中，需要依据JSON数据构建一个树状的目录结构。初始实现的代码如下所示：
var folderList=[
{
"FolderName": "ASD",
"ChildList": null
},
{
"FolderName": "内网公告",
"ChildList": null
},
{
"FolderName": "测试文档",
"ChildList": null
},
{
"FolderName": "软件开发",
"ChildList": null
},
{
"FolderName": "Test",
"ChildList": [
{
"FolderName": "Test2",
"ChildList": [
{
"FolderName": "Test3",
"ChildList": null
}
]
}
]
},
{
"FolderName": "个人",
"ChildList": null
},
{
"FolderName": "公司通知",
"ChildList": null
},
{
"FolderName": "采购平台",
"ChildList": null
}
];
var str='';
function generateFolders(arr) {
if (arr.length > 0) {
str += '<div class="sui-list sui-list-icon ubt bc-gra1">';
for (var i = 0, len = arr.length; i < len; i++) {
str += '<ul class="ub ub-ac">'
+ '<li class="sui-list-licon sui-icon-ok-circle fts2">' + '</li>'
+ '<ul class="ub ub-f1 sui-list-item">'
+ '<li class="ub-f1 sui-list-text sui-list-nowrap">' + arr[i].FolderName + '</li>'
+ '<li class="sui-list-ricon ub-img sui-icon-chevron-right fts2"></li>'
+ '</ul>'
+ '</ul>';
if (isDefine(arr[i].ChildList)) {
str += generateFolders(arr[i].ChildList);
}
}
str += '</div>';
return str;
}else{
return '';
}
}
var folderTxt ='<div class="sui-list sui-list-icon ubt bc-gra1">'
+'<ul class="ub ub-ac">'
+'<li class="sui-list-licon sui-icon-drawer fts2">' + '</li>'
+'<ul class="ub ub-f1 sui-list-item">'
+'<li class="ub-f1 sui-list-text sui-list-nowrap">我的目录</li>'
+'<li class="sui-list-ricon ub-img sui-icon-chevron-right fts2"></li>'
+'</ul>'
+'</ul>';
folderTxt+=generateFolders(folderList);
folderTxt += '</div>';
$('#list').html(folderTxt);
/**
* 判断是否是空
* @param value
*/
function isDefine(value){
if(value == null || value == "" || value == "undefined" || value == undefined || value == "null" || value == "(null)" || value == 'NULL' || typeof(value) == 'undefined'){
return false;
}
else{
value = value+"";
value = value.replace(/\s/g,"");
if(value == ""){
return false;
}
return true;
}
}
运行上述代码后，生成的树状结构如图所示：
经过仔细排查，发现问题的根源在于变量str的定义位置不正确。通过将其修改为局部变量，即可解决该问题。
function generateFolders(arr) {
var str='';
if (arr.length > 0) {
str += '<div class="sui-list sui-list-icon ubt bc-gra1">';
for (var i = 0, len = arr.length; i < len; i++) {
str += '<ul class="ub ub-ac">'
+ '<li class="sui-list-licon sui-icon-ok-circle fts2"></li>'
+ '<ul class="ub ub-f1 sui-list-item">'
+ '<li class="ub-f1 sui-list-text sui-list-nowrap">' + arr[i].FolderName + '</li>'
+ '<li class="sui-list-ricon ub-img sui-icon-chevron-right fts2"></li>'
+ '</ul>'
+ '</ul>';
if (isDefine(arr[i].ChildList)) {
str += generateFolders(arr[i].ChildList);
}
}
str += '</div>';
return str;
}else{
return '';
}
}
完成修改后，程序能够按照预期生成正确的树状目录，效果如下：
以上即为关于该JavaScript作用域问题的完整分析与解决方案。