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 OOP面向对象介绍
Dec 02 Javascript
jQuery入门介绍之基础知识
Jan 13 Javascript
JS+CSS实现带有碰撞缓冲效果的竖向导航条代码
Sep 15 Javascript
JS实现选中当前菜单后高亮显示的导航条效果
Oct 15 Javascript
jQuery EasyUi实战教程之布局篇
Jan 26 Javascript
Angular中$compile源码分析
Jan 28 Javascript
仅9张思维导图帮你轻松学习Javascript 就这么简单
Jun 01 Javascript
详解AngularJs ui-router 路由的简单介绍
Apr 26 Javascript
JS常见构造模式实例对比分析
Aug 27 Javascript
JS实现点击按钮随机生成可拖动的不同颜色块示例
Jan 30 Javascript
vue路由权限校验功能的实现代码
Jun 07 Javascript
nuxt静态部署打包相对路径操作
Nov 06 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
什么是短波收听SWL
2021/03/01 无线电
php调用KyotoTycoon简单实例
2015/04/02 PHP
PHP基于cookie与session统计网站访问量并输出显示的方法
2016/01/15 PHP
自制PHP框架之路由与控制器
2017/05/07 PHP
日期函数扩展类Ver0.1.1
2006/09/07 Javascript
超越Jquery_01_isPlainObject分析与重构
2010/10/20 Javascript
jquery 学习之一 对象访问
2010/11/23 Javascript
Script的加载方法小结
2011/01/12 Javascript
js网页版计算器的简单实现
2013/07/02 Javascript
JS控制日期显示的小例子
2013/11/23 Javascript
浅谈EasyUI中Treegrid节点的删除
2015/03/01 Javascript
jquery插件hiAlert实现网页对话框美化
2015/05/03 Javascript
js实现带有介绍的Select列表菜单实例
2015/08/18 Javascript
实现非常简单的js双向数据绑定
2015/11/06 Javascript
浅谈几种常用的JS类定义方法
2016/06/08 Javascript
js遍历map javaScript遍历map的简单实现
2016/08/26 Javascript
详解vue中使用express+fetch获取本地json文件
2017/10/10 Javascript
vue select组件的使用与禁用实现代码
2018/04/10 Javascript
详解vue.js移动端配置flexible.js及注意事项
2019/04/10 Javascript
帮你彻底搞懂JS中的prototype、__proto__与constructor(图解)
2019/08/23 Javascript
js实现小星星游戏
2020/03/23 Javascript
python监控网卡流量并使用graphite绘图的示例
2014/04/27 Python
Python3.6.0+opencv3.3.0人脸检测示例
2018/05/25 Python
Python/Django后端使用PIL Image生成头像缩略图
2019/04/30 Python
Python网络爬虫信息提取mooc代码实例
2020/03/06 Python
解决pycharm导入本地py文件时,模块下方出现红色波浪线的问题
2020/06/01 Python
Python项目实战之使用Django框架实现支付宝付款功能
2021/02/23 Python
英国曼彻斯特宠物用品品牌:Bunty Pet Products
2019/07/27 全球购物
国培教师自我鉴定
2014/02/12 职场文书
完美主义个人的自我评价
2014/02/17 职场文书
餐厅执行经理岗位职责范本
2014/02/26 职场文书
2015年学生会纪检部工作总结
2015/03/31 职场文书
vue3中provide && inject的使用
2021/07/01 Vue.js
Python 的 sum() Pythonic 的求和方法详细
2021/10/16 Python
微前端qiankun改造日渐庞大的项目教程
2022/06/21 Javascript
GO中sync包自由控制并发示例详解
2022/08/05 Golang