javascript作用域问题实例分析

最近做项目过程中需要根据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定义的位置不对引起的，将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 '';

}

}

修改之后，可实现想的效果：

以上所述就是本文的全部内容了，希望大家能够喜欢。