javascript作用域问题实例分析
更新时间：2015年07月13日 08:57:04 投稿：hebedich
本文给大家分享的是个人在使用json数据生成树状目录的时候，由于作用域问题处理不当引起的一个小BUG的修复过程，小伙伴们需要的话可以参考下。
最近做项目过程中需要根据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 '';
}
}
修改之后，可实现想的效果：
以上所述就是本文的全部内容了，希望大家能够喜欢。
相关文章
作为前端程序员,TS已经成为一项必不可少的技能,本文旨在介绍 TS中的一些实用技巧,提高大家对这门语言更深的认知,这篇文章主要给大家介绍了关于typescript实用小技巧的相关资料,需要的朋友可以参考下2021-08-08
JavaScript 中的 replace() 方法用于将字符串或其中的子字符串替换为指定字符，或替换一个与正则表达式匹配的子串，这篇文章主要介绍了JS 将字符串中指定字符全局替换,需要的朋友可以参考下2023-07-07
深入浅析JavaScript中的arguments对象(强力推荐)
这篇文章主要介绍了JavaScript中的arguments对象(强力推荐)的相关资料,非常不错具有参考借鉴价值，需要的朋友可以参考下2016-06-06
这篇文章主要为大家详细介绍了微信公众号支付H5调用支付,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-11-11
通过url传递参数是我们在开发中经常用到的一种传参方法,下面这篇文章主要给大家介绍了关于前端JS获取URL参数的4种方法,文中通过示例代码介绍的非常详细,需要的朋友可以参考下2022-04-04
这篇文章主要给大家介绍了关于JavaScript深拷贝的一些踩坑记录，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-03-03
这篇文章主要介绍了js异步编程技巧，使用计数器的方式，每完成一个请求计数器加1 当计数器等于2时执行回调逻辑,两个http并行发送,从而极大的提高了效率,需要的朋友可以参考下2017-08-08
这篇文章主要介绍了基于BootStrap的前端分页带省略号和上下页效果,需要的朋友可以参考下2017-05-05
这篇文章主要为大家详细整理了bootstrap模态框消失不消失各种问题的解决方法,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-12-12
这篇文章主要介绍了JSON字符串和对象相互转换的方法,结合实例形式分析了json格式数据的转换方法,涉及javascript正则与字符串操作的相关技巧,需要的朋友可以参考下2016-06-06
最新评论