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 相关文章推荐
参考:关于Javascript中实现暂停的几篇文章
Mar 04 Javascript
用js实现的抽象CSS圆角效果!!
May 03 Javascript
基于jquery的滑动样例代码
Nov 20 Javascript
js动态添加onload、onresize、onscroll事件(另类方法)
Dec 26 Javascript
Bootstrap入门书籍之(三)栅格系统
Feb 17 Javascript
Angularjs material 实现搜索框功能
Mar 08 Javascript
AngularJS入门教程之AngularJS 模板
Aug 18 Javascript
浅谈js控制li标签排序问题 js调用php函数的方法
Oct 16 Javascript
微信小程序自定义多选事件的实现代码
May 17 Javascript
Paypal支付不完全指北
Jun 04 Javascript
基于JS+HTML实现弹窗提示是否确认提交功能
Jun 17 Javascript
antd-日历组件,前后禁止选择,只能选中间一部分的实例
Oct 29 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
PHP 存取 MySQL 数据库的一个例子
2006/10/09 PHP
解决phpmyadmin中文乱码问题。。。
2007/01/18 PHP
邮箱正则表达式实现代码(针对php)
2013/06/21 PHP
JavaScript去掉数组中的重复元素
2011/01/13 Javascript
关于js类的定义
2011/06/28 Javascript
jQuery通过点击行来删除HTML表格行的实现示例
2014/09/10 Javascript
Vue filter介绍及其使用详解
2017/10/21 Javascript
React Native中NavigatorIOS组件的简单使用详解
2018/01/27 Javascript
微信小程序dom操作的替代思路实例分析
2018/12/06 Javascript
详解vue中axios的使用与封装
2019/03/20 Javascript
微信小程序按钮点击跳转页面详解
2019/05/06 Javascript
微信小程序实现图片翻转效果的实例代码
2019/09/20 Javascript
layui文件上传控件带更改后数据传值的方法
2019/09/23 Javascript
Vue3 中的数据侦测的实现
2019/10/09 Javascript
JS实现鼠标按下拖拽效果
2020/07/23 Javascript
[05:11]TI9战队采访——VIRTUSPRO
2019/08/22 DOTA
使用Python编写一个最基础的代码解释器的要点解析
2016/07/12 Python
python 简单的多线程链接实现代码
2016/08/28 Python
Python中工作日类库Busines Holiday的介绍与使用
2017/07/06 Python
Python处理时间日期坐标轴过程详解
2019/06/25 Python
Numpy中对向量、矩阵的使用详解
2019/10/29 Python
Python3.7基于hashlib和Crypto实现加签验签功能(实例代码)
2019/12/04 Python
Tensorflow矩阵运算实例(矩阵相乘,点乘,行/列累加)
2020/02/05 Python
pytorch VGG11识别cifar10数据集(训练+预测单张输入图片操作)
2020/06/24 Python
python环境搭建和pycharm的安装配置及汉化详细教程(零基础小白版)
2020/08/19 Python
Python 使用Opencv实现目标检测与识别的示例代码
2020/09/08 Python
英国网上香水店:Fragrance Direct
2016/07/20 全球购物
viagogo波兰票务平台:演唱会、体育比赛、戏剧门票
2018/04/23 全球购物
阿联酋最好的手机、电子产品和家用电器网上商店:Eros Digital Home
2020/08/09 全球购物
一套软件开发工程师笔试题
2015/05/18 面试题
工厂车间标语
2014/06/19 职场文书
材料员岗位职责
2015/02/10 职场文书
2015年社区关工委工作总结
2015/04/03 职场文书
2015年财务个人工作总结范文
2015/05/22 职场文书
聊聊golang中多个defer的执行顺序
2021/05/08 Golang
python opencv通过按键采集图片源码
2021/05/20 Python