javascript作用域问题实例分析


Posted in Javascript onJuly 13, 2015

最近做项目过程中需要根据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;
        }
      }

结果出来的树如下图:

javascript作用域问题实例分析

经排查,发现是由于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 '';
        }
      }

修改之后,可实现想的效果:

javascript作用域问题实例分析

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

Javascript 相关文章推荐
JS控件autocomplete 0.11演示及下载 1月5日已更新
Jan 09 Javascript
JavaScript Scoping and Hoisting 翻译
Jul 03 Javascript
基于jquery的可多选的下拉列表框
Jul 20 Javascript
js 触发select onchange事件代码
Mar 20 Javascript
javascript动态修改Li节点值的方法
Jan 20 Javascript
深入理解JavaScript中的对象
Jun 04 Javascript
JavaScript中的getMilliseconds()方法使用详解
Jun 10 Javascript
jQuery同步提交示例代码
Dec 12 Javascript
jQuery插件实现文件上传功能(支持拖拽)
Aug 27 Javascript
angular4中引入echarts的方法示例
Jan 29 Javascript
Vue项目中使用jquery的简单方法
May 16 jQuery
谈谈JavaScript令人迷惑的==与+
Aug 31 Javascript
javascript中使用正则表达式清理table样式的代码
Apr 01 #Javascript
jquery实现图片上传之前预览的方法
Jul 11 #Javascript
JavaScript使用RegExp进行正则匹配的方法
Jul 11 #Javascript
javascript中JSON对象与JSON字符串相互转换实例
Jul 11 #Javascript
javascript实现下班倒计时效果的方法(可桌面通知)
Jul 10 #Javascript
JavaScript清空数组元素的两种方法简单比较
Jul 10 #Javascript
JavaScript实现的类字典插入或更新方法实例
Jul 10 #Javascript
You might like
ThinkPHP3.1新特性之内容解析输出详解
2014/06/19 PHP
使用Javascript和DOM Interfaces来处理HTML
2006/10/09 Javascript
silverlight线程与基于事件驱动javascript引擎(实现轨迹回放功能)
2011/08/09 Javascript
javascript 通用loading动画效果实例代码
2014/01/14 Javascript
js+css实现tab菜单切换效果的方法
2015/01/20 Javascript
jQuery获取及设置表单input各种类型值的方法小结
2016/05/24 Javascript
vue.js入门教程之基础语法小结
2016/09/01 Javascript
canvas 画布在主流浏览器中的尺寸限制详细介绍
2016/12/15 Javascript
jQuery弹出窗口打开链接的实现代码
2016/12/24 Javascript
在js中做数字字符串补0(js补零)
2017/03/25 Javascript
微信小程序自定义组件封装及父子间组件传值的方法
2018/08/28 Javascript
[05:15]2018年度CS GO社区贡献奖-完美盛典
2018/12/16 DOTA
在Python中操作字典之clear()方法的使用
2015/05/21 Python
python实现搜索指定目录下文件及文件内搜索指定关键词的方法
2015/06/28 Python
利用Python进行数据可视化常见的9种方法!超实用!
2018/07/11 Python
对Python中Iterator和Iterable的区别详解
2018/10/18 Python
Python获取时间范围内日期列表和周列表的函数
2019/08/05 Python
Django实现CAS+OAuth2的方法示例
2019/10/30 Python
opencv3/C++图像像素操作详解
2019/12/10 Python
Pycharm debug调试时带参数过程解析
2020/02/03 Python
python isinstance函数用法详解
2020/02/13 Python
Python3监控windows,linux系统的CPU、硬盘、内存使用率和各个端口的开启情况详细代码实例
2020/03/18 Python
利用PyQt5+Matplotlib 绘制静态/动态图的实现代码
2020/07/13 Python
Rockport乐步美国官网:风靡美国的白宫鞋
2016/11/24 全球购物
关于递归的一道.NET面试题
2013/05/12 面试题
新学期开学演讲稿
2014/05/24 职场文书
小学国旗下的演讲稿
2014/08/28 职场文书
社区四风存在问题及整改措施
2014/10/26 职场文书
道路交通事故人身损害赔偿协议书
2014/11/19 职场文书
2015年挂职锻炼工作总结
2014/12/12 职场文书
清明节文明祭祀倡议书
2015/04/28 职场文书
中学教师读书笔记
2015/07/01 职场文书
初中军训感想
2015/08/07 职场文书
房产销售员2015年终工作总结
2015/10/22 职场文书
MybatisPlus代码生成器的使用方法详解
2021/06/13 Java/Android
Python使用华为API为图像设置多个锚点标签
2022/04/12 Python