javascript作用域問題實例分析

2019-11-20 12:03:47

字體：大中小

來源：轉載

供稿：網友

最近做項目過程中需要根據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;        }      }

結果出來的樹如下圖：

經排查，發現是由于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 '';        }      }

修改之后，可實現想的效果：