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 相关文章推荐
jQuery EasyUI API 中文文档 - Draggable 可拖拽
Sep 29 Javascript
加载远程图片时,经常因为缓存而得不到更新的解决方法(分享)
Jun 26 Javascript
javascript解析json数据的3种方式
May 08 Javascript
浅谈bootstrap源码分析之scrollspy(滚动侦听)
Jun 06 Javascript
20分钟打造属于你的Bootstrap站点
Jul 27 Javascript
Bootstrap列表组学习使用
Feb 09 Javascript
详解axios在node.js中的post使用
Apr 27 Javascript
Node.js使用Express.Router的方法
Nov 14 Javascript
浅谈Vue.js 中的 v-on 事件指令的使用
Nov 25 Javascript
jQuery创建折叠式菜单
Jun 15 jQuery
在Vue 中获取下拉框的文本及选项值操作
Aug 13 Javascript
微信小程序实现加入购物车滑动轨迹
Nov 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
php 数组的指针操作实现代码
2011/02/08 PHP
ThinkPHP实现ajax仿官网搜索功能实例
2014/12/02 PHP
PHP实现模拟http请求的方法分析
2017/12/20 PHP
XML的代替者----JSON
2007/07/21 Javascript
一个XML格式数据转换为图表的例子
2010/02/09 Javascript
javascript中String类的subString()方法和slice()方法
2011/05/24 Javascript
jQuery在IE下使用未闭合的xml代码创建元素时的Bug介绍
2012/01/10 Javascript
JavaScript 用Node.js写Shell脚本[译]
2012/09/20 Javascript
jQuery实现的简单折叠菜单(折叠面板)效果代码
2015/09/16 Javascript
基于javascript实现tab选项卡切换特效调试笔记
2016/03/30 Javascript
深入分析node.js的异步API和其局限性
2016/09/05 Javascript
微信小程序 选项卡的简单实例
2017/05/24 Javascript
Vue.js 中的 $watch使用方法
2017/05/25 Javascript
angular bootstrap timepicker TypeError提示怎么办
2017/06/13 Javascript
Vue组件通信的四种方式汇总
2018/02/08 Javascript
javascript中toFixed()四舍五入使用方法详解
2018/09/28 Javascript
Javascript之高级数组API的使用实例
2019/03/08 Javascript
javascript for循环性能测试示例
2019/08/07 Javascript
js实现跟随鼠标移动的小球
2019/08/26 Javascript
JS实现提示效果弹出及延迟隐藏的功能
2019/08/26 Javascript
javascript实现动态时钟的启动和停止
2020/07/29 Javascript
基于vue-cli3创建libs库的实现方法
2019/12/04 Javascript
详解vue或uni-app的跨域问题解决方案
2020/02/21 Javascript
JavaScript Array.flat()函数用法解析
2020/09/02 Javascript
[02:53]DOTA2英雄基础教程 山岭巨人小小
2013/12/09 DOTA
Python自动化测试工具Splinter简介和使用实例
2014/05/13 Python
总结python实现父类调用两种方法的不同
2017/01/15 Python
详解pyppeteer(python版puppeteer)基本使用
2019/06/12 Python
python支持多线程的爬虫实例
2019/12/21 Python
Python with标签使用方法解析
2020/01/17 Python
Flask-SocketIO服务端安装及使用代码示例
2020/11/26 Python
Furla官网:意大利著名的皮革品牌
2019/08/06 全球购物
希腊品牌鞋类销售网站:epapoutsia.gr
2020/03/18 全球购物
私用公车造成事故检讨书
2014/11/16 职场文书
暑期工社会实践报告
2015/07/13 职场文书
【海涛dota解说】DCG联赛第一周 LGD VS DH
2022/04/01 DOTA