如何正确调用jQuery匿名函数内定义的jstree FindUrl方法

调用失败是两个核心问题导致的：

• 作用域隔离：FindUrl是定义在jQuery DOM就绪回调（即$(function(){})）内部的局部函数，JS函数作用域默认隔离，外部无法直接访问函数内部声明的变量、方法。
• 赋值逻辑错误：$(function(回调函数))的返回值是jQuery实例本身，不会返回回调函数内部的内容，就算在回调末尾return包含FindUrl的对象，_MyTree接收到的还是jQuery对象，自然找不到挂载的FindUrl方法。

选其中一种即可：

方法1：手动暴露方法到全局对象 #

提前在外部声明_MyTree为普通对象，在DOM就绪回调内部把FindUrl挂载到这个对象上即可，修改后的代码如下：

// 外部提前声明对象
var _MyTree = {};
$(function () {
    var tree = $('#myTree');

    $("#onlyActive").change(function () {
        $('#myTree').jstree(true).refresh();
    });
    $('#myTree').jstree({
        "core": {
            "data": {
                "url": "/Admin/AdminSiteMap/GetJSTreeForAdmin",
                "data": function (node) {
                    return {
                        "id": node.id == "#" ? -1 : node.id,
                        'onlyActive': $("#onlyActive").is(':checked')
                    };
                }
            }
        },
        "themes": {
            "theme": "default",
            "dots": false,
            "icons": true,
            "url": "/Scripts/jstree/themes/default/style.min.css"
        },
        "contextmenu": {
            "items": createDefaultMenu,
            "width": "350px",
            "select_node": true
        },
        "plugins": ["state", "dnd", "contextmenu"]
    });


    // 挂载方法到外部声明的对象上
    _MyTree.FindUrl = function (str) {
        console.log("searching for ", str);
        // 方法内如果需要操作jstree实例，直接通过$('#myTree').jstree(true)获取即可
    }
});

注意：必须等DOM加载完成（jstree初始化完毕）后再调用_MyTree.FindUrl('test')，否则会因为方法还没挂载报错。如果不确定调用时机，可以用安全写法：

$(function() {
    _MyTree.FindUrl('test');
})

方法2：直接把方法挂载到jstree实例（更推荐） #

不需要额外维护全局对象，直接在jstree初始化完成后把方法挂到jstree实例上，更符合组件的使用逻辑：

$(function () {
    var tree = $('#myTree');

    $("#onlyActive").change(function () {
        $('#myTree').jstree(true).refresh();
    });
    $('#myTree').jstree({
        // 原有jstree配置不变
        "core": {
            "data": {
                "url": "/Admin/AdminSiteMap/GetJSTreeForAdmin",
                "data": function (node) {
                    return {
                        "id": node.id == "#" ? -1 : node.id,
                        'onlyActive': $("#onlyActive").is(':checked')
                    };
                }
            }
        },
        "themes": {
            "theme": "default",
            "dots": false,
            "icons": true,
            "url": "/Scripts/jstree/themes/default/style.min.css"
        },
        "contextmenu": {
            "items": createDefaultMenu,
            "width": "350px",
            "select_node": true
        },
        "plugins": ["state", "dnd", "contextmenu"]
    });

    // jstree就绪后挂载方法
    $('#myTree').on('ready.jstree', function() {
        var instance = $(this).jstree(true);
        instance.FindUrl = function(str) {
            console.log("searching for ", str);
        }
    })
});

外部调用时直接通过jstree实例访问即可：

$('#myTree').jstree(true).FindUrl('test');

内容的提问来源于stack exchange，提问作者user9593650