zTree報錯 : Uncaught TypeError: Cannot read property 'init' of undefined

出現這個問題基本上都是$.fn.zTree對象undefined，沒有加載

看網上的說法很多都是父頁面與子頁面，jQuery與zTree相關js的位置問題，但是我這邊是單頁面，所以不是這種原因，繼續尋找。。。

 

 

因為這里是使用了require.js延遲加載，之前寫法如下(只保留了關鍵代碼)：

require.config({
    urlArgs: "date=" + _Config_.date.getDate(),
    paths: _PATH_,
    shim: {
        "easyui-core": {
            deps: ["jquery"],
            exports: "easyui-core"
        },
        "easyui": {
            deps: ["easyui-core"],
            exports: "easyui"
        },
        "ztree-core":{
            exports:"_"
        },
        "ztree-exedit":{
            exports:"_"
        },
        "ajaxFileupload":{
            deps: ["jquery"],
            exports:"ajaxFileupload"
        }
    }
});

require(['easyui',"ajaxFileupload","ZeroClipboard","ztree-core","ztree-exedit"], function(ZeroClipboard {
  
  var setting = {};

  function loadTree(data) {
     var treeObj = $("#menuTree");
     $.fn.zTree.init(treeObj, setting, data);
  }
}

      有懷疑是因為延遲加載，導致zTree相關js未加載導致錯誤，因此使用setTimeout，等待數秒后執行loadTree()，然而並沒有效果；

 

　　一直尋找答案，在http://blog.csdn.net/u013026207/article/details/52105966這篇博文里提到jquery與zTree版本沖突，但是我這里是不存在版本沖突的，但是想到zTree是依賴jQuery的，但是require.config里面並沒有，遂加上這段代碼

require.config({
    urlArgs: "date=" + _Config_.date.getDate(),
    paths: _PATH_,
    shim: {
        ...
        "ztree-core":{
            deps: ["jquery"],    //此處必須依賴jquery，不加的話$.fn.zTree對象經常無法加載
            exports:"_"
        },
        "ztree-exedit":{
            deps: ["jquery"],
            exports:"_"
        },
        ...
    }
});

　　ok！不再報錯

 

　　總結：出現這個問題還是因為使用了require.js延遲加載zTree相關js，但沒有指定依賴，所以這個問題不一定很具有代表性，因為是接手的代碼，也不知道開發者為什么這么寫；這邊先記錄下來，以后用到require.js的時候記得不要再犯同樣的錯誤