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:Div层拖动效果实例代码
Aug 06 Javascript
浅析jQuery(function(){})与(function(){})(jQuery)之间的区别
Jan 09 Javascript
一个简单的jQuery插件ajaxfileupload.js实现ajax上传文件例子
Jun 26 Javascript
JS实现的N多简单无缝滚动代码(包含图文效果)
Nov 06 Javascript
JavaScript注入漏洞的原理及防范(详解)
Dec 04 Javascript
jQuery中Chosen三级联动功能实例代码
Mar 07 Javascript
微信小程序swiper组件用法实例分析【附源码下载】
Dec 07 Javascript
jquery.onoff实现简单的开关按钮功能(推荐)
May 24 jQuery
JavaScript之解构赋值的理解
Jan 30 Javascript
vue实现Excel文件的上传与下载功能的两种方式
Jun 28 Javascript
node.js实现http服务器与浏览器之间的内容缓存操作示例
Feb 11 Javascript
js实现ajax的用户简单登入功能
Jun 18 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
如何解决CI框架的Disallowed Key Characters错误提示
2013/07/05 PHP
thinkphp实现附件上传功能
2017/05/26 PHP
Javascript模块模式分析
2008/05/16 Javascript
20个非常棒的Jquery实用工具 国外文章
2010/01/01 Javascript
javascript window.opener的用法分析
2010/04/07 Javascript
JavaScript 对象链式操作测试代码
2010/04/25 Javascript
只需一行代码,轻松实现一个在线编辑器
2013/11/12 Javascript
jQuery的each终止或跳过示例代码
2013/12/12 Javascript
javascript正则表达式中的replace方法详解
2015/04/20 Javascript
jquery判断复选框选中状态以及区分attr和prop
2015/12/18 Javascript
Bootstrap Metronic完全响应式管理模板学习笔记
2016/07/08 Javascript
Javascript动画效果(4)
2016/10/11 Javascript
jQuery 插件实现随机自由弹跳气泡样式
2017/01/12 Javascript
详解vue2.0组件通信各种情况总结与实例分析
2017/03/22 Javascript
设置cookie指定时间失效(实例代码)
2017/05/28 Javascript
JS获取子、父、兄节点方法小结
2017/08/14 Javascript
vue的路由映射问题及解决方案
2019/10/14 Javascript
如何通过javaScript去除字符串两端的空白字符
2020/02/06 Javascript
[01:19:34]2014 DOTA2国际邀请赛中国区预选赛 New Element VS Dream time
2014/05/22 DOTA
python正则表达式判断字符串是否是全部小写示例
2013/12/25 Python
Python获取网页上图片下载地址的方法
2015/03/11 Python
python制作mysql数据迁移脚本
2019/01/01 Python
Django url,从一个页面调到另个页面的方法
2019/08/21 Python
wxPython+Matplotlib绘制折线图表
2019/11/19 Python
对tensorflow中tf.nn.conv1d和layers.conv1d的区别详解
2020/02/11 Python
python实现一次性封装多条sql语句(begin end)
2020/06/06 Python
Pythonic版二分查找实现过程原理解析
2020/08/11 Python
python各种excel写入方式的速度对比
2020/11/10 Python
浅谈Html5中视频 音频标签 进度条的问题
2016/07/26 HTML / CSS
公司人力资源的自我评价
2014/01/02 职场文书
初中学校军训方案
2014/05/09 职场文书
2014年学生工作总结
2014/11/20 职场文书
2014年惩防体系建设工作总结
2014/12/01 职场文书
汉字听写大会观后感
2015/06/12 职场文书
用python批量解压带密码的压缩包
2021/05/31 Python
Java 获取Word中所有的插入和删除修订的方法
2022/04/06 Java/Android