代码之家 › 专栏 › 技术社区 › dallin

如何在webtorm/phpstorm中列出、组织或导航jquery事件?

code-organization jetbrains-ide webstorm phpstorm jquery

dallin · 技术社区 · 6 年前

我一直在努力在webtorm/phpstorm中导航我的代码。当我编辑一个大页面时,在javascript部分,我自然有3个部分:

$( document ).ready() 代码
页面事件(使用jquery)
功能

我遇到的最大问题是,一旦我在一个页面上得到20个jquery事件,就很难导航并找到我要查找的事件。

我真的很想要类似于structure面板的东西,它现在看起来真的很没用,因为它似乎不能拾取jquery事件,而是拾取随机代码元素。或者我喜欢这样的东西 Alt+向下 和 Alt+向上 导航到下一个或上一个函数,但这只适用于函数而不适用于jquery事件。

有没有一种方法可以在代码段之间列出或导航来标识代码中的jquery事件?也许是个插件?或者是一种更好的方法来构造代码来处理这个问题?

2 回复 | 直到 6 年前

lena 6 年前

这是不可能的,而且我不知道有什么插件可以做到这一点:(

您可以在这里尝试使用自定义区域:用 // region <Event name> ... // endregion 评论然后使用 导航自定义折叠… ( Ctrl+Alt+. 在默认的keymap中)按名称导航到所需区域

dallin 6 年前

所以我找到了解决办法。我所做的是将我的所有事件(包括我想在文档就绪时运行的代码)封装在单个函数中,所有这些都在单个对象中。然后,在实际的文档就绪调用中,我循环遍历对象中的每个函数并调用它来初始化我的事件。为了保持一致性,我还将页面上的所有函数都放入它们自己的对象中,但这肯定是可选的。

这使我的代码更易于阅读(因为我有命名良好的事件函数,现在脚本标记中没有松散的代码——都在函数中),phpstorm中的structure选项卡现在包括jquery事件,并且组织得也很整齐。它确实提高了我浏览代码的能力。

它看起来像什么

我将在这里使用一些示例代码来展示我所做的。请记住,与我一直在处理的一些更复杂的页面(可以是数千行代码)相比,这段代码非常简单,因此添加到我的代码中的组织级别比我在这个简单示例中显示的要激烈得多。

我的代码以前是这样的:

<script>

    console.log("I'd often have random code here outside any function that cluttered the Structure panel");

    $(function () {
        f.updateResults("Type something in the input to change this text!");

        $("#myBtn").click(function () {
            f.alertThis("You clicked a button!")
        });

        $("#myInput").change(function () {
            f.updateResults($(this).val());
        });
    };

    function alertThis (val) {
        alert(val);
    }

    function updateResults() {
        $("#results").text(text);
    }
</script>

当这是20个事件和几乎同样多的函数时,很难找到我要找的东西,而且结构面板是一堆完全无用的随机元素。

现在我的代码如下:

<script>
    jsinit

    e._ready = function () {
        console.log("Any loose page code I now put in here. This is automatically run first when the document is ready");
        f.updateResults("Type something in the input to change this text!");
    };

    e.myBtn_click = function () {
        $("#myBtn").click(function () {
            f.alertThis("You clicked a button!")
        });
    };

    e.myInput_change = function () {
        $("#myInput").change(function () {
            f.updateResults($(this).val());
        });
    };

    f.alertThis = function (val) {
        alert(val);
    };

    f.updateResults = function (text = false) {
        $("#results").text(text);
    };
</script>

上面写着jsinit的行是一个可折叠的注释,正如lena在回答中提到的。它有一些代码,我现在通过 live template 是的。当代码没有折叠时,它看起来是这样的:

//region jsinit
window.g = (typeof g !== "undefined") ? g : [];
var e = {};
var f = (typeof f !== "undefined") ? f : {};
g.push(e);
$(function () {
    setTimeout(function(){
        for (var page_index in g) {
            if (typeof g[page_index]._ready !== "undefined")
            {
                g[page_index]._ready();
                delete g[page_index]._ready;
            }
            for (var func_index in g[page_index])
            {
                g[page_index][func_index]();
            }
            delete g[page_index];
        }
    },0);
});
//endregion

这段代码可以简化很多,但是我想处理在另一个页面中包含一个页面的特殊情况(例如打开jqueryui对话框并通过ajax将其内容加载到另一个页面)。在这些情况下,E和F变量已经存在,并且将有两个准备好的函数,所以如果不处理,就会出现一些奇怪的bug。这就是循环和检查现有变量的原因。settimeout行只是用来处理我正在使用的旧版本jquery中的一个bug,而在jquery的v3或更新版本中不需要它。

它的作用

您会注意到,只需在这一行中浏览以查找所需的函数或事件就容易多了。所有的代码都包含在函数中,不再有任何松动。

就像我提到的,这些函数不需要放在它们自己的对象中,但是我这样做是为了保持一致性。它还有一个额外的好处,就是通过键入f和句点,可以很容易地将自动完成功能缩小到只使用本地函数。

我不仅觉得代码现在更容易阅读,而且下面是结构面板现在的样子:

列出了所有我的事件和所有我的函数,很容易跳转到。这个小组过去看起来像一堆毫无价值的信息。

例如,下面是我的一页,上面有一个旧的结构面板:

这是 完全相同的页面 在我以这种方式组织之后:

我把所有的活动都列得很好,我可以在需要的地方快速浏览。

使此操作简单化的实时模板

如果你有兴趣做类似的事情,我创建了3个实时模板,使这个组织超级简单。您可以按ctrl+alt+s并转到editor>活动模板来添加活动模板。

我在html/xml范围下添加了这个,这样就可以快速键入js并按tab键创建一个脚本标记,其中已经包含了jsinit代码:

<script>
    //region jsinit
    window.g = (typeof g !== "undefined") ? g : [];
    var e = {};
    var f = (typeof f !== "undefined") ? f : {};
    g.push(e);
    $(function () {
        setTimeout(function () {
            for (var page_index in g) {
                if (typeof g[page_index]._ready !== "undefined") {
                    g[page_index]._ready();
                    delete g[page_index]._ready;
                }
                for (var func_index in g[page_index]) {
                    g[page_index][func_index]();
                }
                delete g[page_index];
            }
        }, 0);
    });
    //endregion$collapse$

    e._ready = function () {
        $END$
    };
</script>

光标首先位于可折叠自定义区域的末尾。然后按ctrl+alt+-折叠它,按tab键将光标直接跳转到准备好的函数中(这就是模板中的$collapse$和$end$变量所做的)。

我还向JavaScript范围添加了以下内容,以便可以在不包含脚本标记的情况下将JSnIT代码添加到现有脚本中。由于它们在不同的作用域中,可以使用相同的缩写(js)激活它们,所以我甚至不必考虑是否要将它们包装在脚本标记中:

//region jsinit
window.g = (typeof g !== "undefined") ? g : [];
var e = {};
var f = (typeof f !== "undefined") ? f : {};
g.push(e);
$(function () {
    setTimeout(function () {
        for (var page_index in g) {
            if (typeof g[page_index]._ready !== "undefined") {
                g[page_index]._ready();
                delete g[page_index]._ready;
            }
            for (var func_index in g[page_index]) {
                g[page_index][func_index]();
            }
            delete g[page_index];
        }
    }, 0);
});
//endregion$collapse$

e._ready = function () {
    $END$
};

最后,由于我现在正在创建一组函数,所以我只制作了一个简单的脚本,以便可以键入函数名f,然后输入tab来快速创建一个函数:

= function ($params$) {
    $END$
};

没必要,但我发现这样可以节省很多时间。

编辑:

还有一件事我做了,使导航与这个系统真的很容易。我将文件结构搜索窗口重新设置为ctrl+winkey。通过转到“设置”下的“关键点地图”并浏览到“主菜单”>“导航”>“文件结构”,可以找到此关键点地图。

现在,我可以按ctrl+winkey并开始键入一个函数名来快速跳转到它。由于我的jquery事件现在封装在函数中,所以我也可以以同样的方式快速查找和跳转到任何事件。