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 编写匿名函数的几种方法
Feb 21 Javascript
javascript实现的一个带下拉框功能的文本框
May 08 Javascript
在Node.js中实现文件复制的方法和实例
Jun 05 Javascript
JS实现兼容性好,自动置顶的淘宝悬浮工具栏效果
Sep 18 Javascript
利用jQuery实现漂亮的圆形进度条倒计时插件
Sep 30 Javascript
特殊日期提示功能的实现方法
Jun 16 Javascript
图解prototype、proto和constructor的三角关系
Jul 31 Javascript
Vue源码探究之状态初始化
Nov 14 Javascript
详解如何使用router-link对象方式传递参数?
May 02 Javascript
Cordova(ionic)项目实现双击返回键退出应用
Sep 17 Javascript
JS面向对象编程——ES6 中class的继承用法详解
Mar 03 Javascript
node运行js获得输出的三种方式示例详解
Jul 02 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判断是否为空的几个函数对比
2015/04/21 PHP
如何解决PHP无法实现多线程的问题
2015/09/25 PHP
Yii2.0表关联查询实例分析
2016/07/18 PHP
PHP快速排序quicksort实例详解
2016/09/28 PHP
PHP实现微信小程序人脸识别刷脸登录功能
2018/05/24 PHP
PHP常用字符串输出方法分析(echo,print,printf及sprintf)
2021/03/09 PHP
JS实现商品倒计时实现代码
2013/05/03 Javascript
根据选择不同的下拉值出现相对应的文本输入框
2013/08/01 Javascript
div浮层,滚动条移动,位置保持不变的4种方法汇总
2013/12/11 Javascript
jQuery固定元素插件scrolltofixed使用指南
2015/04/21 Javascript
深入解读JavaScript中的Iterator和for-of循环
2015/07/28 Javascript
基于jQuery实现select下拉选择可输入附源码下载
2016/02/03 Javascript
AngularJS自定义控件实例详解
2016/12/13 Javascript
JS声明式函数与赋值式函数实例分析
2016/12/13 Javascript
thinkjs 文件上传功能实例代码
2017/11/08 Javascript
Vue表情输入组件 微信face表情组件
2019/02/11 Javascript
vue动态添加路由addRoutes之不能将动态路由存入缓存的解决
2019/02/19 Javascript
详解vue-cli3多环境打包配置
2019/03/28 Javascript
vue实现多级菜单效果
2019/10/19 Javascript
vue+element使用动态加载路由方式实现三级菜单页面显示的操作
2020/08/04 Javascript
js 图片懒加载的实现
2020/10/21 Javascript
python基础教程之循环介绍
2014/08/29 Python
DJANGO-ALLAUTH社交用户系统的安装配置
2014/11/18 Python
Python实现给qq邮箱发送邮件的方法
2015/05/28 Python
解决Python传递中文参数的问题
2015/08/04 Python
Python实现抢购IPhone手机
2018/02/07 Python
python如何给字典的键对应的值为字典项的字典赋值
2019/07/05 Python
pandas中的数据去重处理的实现方法
2020/02/10 Python
python实现提取COCO,VOC数据集中特定的类
2020/03/10 Python
python中复数的共轭复数知识点总结
2020/12/06 Python
Python对excel的基本操作方法
2021/02/18 Python
物业公司采购员岗位职责
2013/12/31 职场文书
新学期红领巾广播稿
2014/01/14 职场文书
2014年班组建设工作总结
2014/12/01 职场文书
2014年纠风工作总结
2014/12/08 职场文书
tp5使用layui实现多个图片上传(带附件选择)的方法实例
2021/11/17 PHP