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的时候记得不要再犯同样的错误

转载于:https://www.cnblogs.com/snowcity1231/p/6729408.html