看起来像什么

Question

我一直在努力在WebStorm / PhpStorm中导航代码。当我编辑大页面时，在JavaScript部分中，我自然地似乎有3个部分：

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

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

我真的想要像“结构”面板之类的东西，老实说，现在看来这没什么用，因为它似乎无法拾取jQuery事件，而是拾取了随机代码元素。或者我喜欢 Alt + Down 和 Alt + Up 之类的东西来导航到下一个或上一个函数，但这仅适用于函数，而不适用于jQuery事件。

是否可以在可以识别代码中jQuery事件的代码段之间列出或导航？也许是插件？或者，也许是一种更好的方式来构造代码来处理此问题？

Answer 1

这是不可能的，而且我对此还不知道有任何插件：（

您可以在此处尝试使用自定义区域：用// region <Event name> ... // endregion注释包围每个事件，然后使用导航|自定义折叠... （默认键盘图中的Ctrl+Alt+.）可按名称导航到所需区域

Answer 2

所以我确实找到了解决方案。我所做的就是将所有事件（包括我想在文档就绪时运行的代码）包装在单个对象中的单个函数中。然后，在实际的文档就绪调用中，我循环遍历对象中的每个函数，并对其进行调用以初始化我的事件。为了一致性，我还将页面上的所有功能都放到了自己的对象中，但这当然是可选的。

这使我的代码更易于阅读（因为我有命名良好的事件函数，并且我的Script标记中现在没有松散的代码-它们都在函数内），PHPStorm中的“结构”选项卡现在包含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>

如lena的答案所述，表示jsinit的行是可折叠的注释。它现在有一些代码，需要时可以通过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变量将已经存在，并且将有两个_ready函数，因此，如果不处理它，可能会出现一些奇怪的错误。这就是循环并检查现有变量的目的。 setTimeout行仅用于处理我正在使用的旧版JQuery中的错误，而在JQuery v3或更高版本中不是必需的。

它做什么

您会注意到，仅浏览一行以查找所需的功能或事件会变得更加容易。所有代码也都包含在函数中，并且再也没有松散的东西了。

就像我提到的那样，这些功能不需要放在自己的对象中，但是我这样做是为了保持一致性。它还具有附加的优点，即通过键入f然后输入句点，可以轻松地将自动完成范围缩小到仅本地函数。

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

列出了我的所有事件和所有功能，可以轻松跳转到。该面板以前看起来像是一堆毫无价值的信息。

例如，这是我的页面中具有旧结构面板的页面之一：

这是完全相同的页面的结构面板，我是通过以下方式组织的：

我所有活动的清单都很好，可以随时随地快速浏览。

可以轻松实现的实时模板

如果您有兴趣做类似的事情，我创建了3个实时模板，以使该组织变得异常简单。您可以通过按Ctrl + Alt + S并转到“编辑器”>“实时模板”来添加实时模板。

我在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键使光标跳到_ready函数中（这就是模板中$ collapse $和$ END $变量的作用）。

我还将以下内容添加到JavaScript范围中，因此可以将jsinit代码添加到现有脚本中，而无需包括脚本标签。由于它们的作用域不同，因此它们都可以使用相同的缩写（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事件现在包装在函数中，因此我也可以以相同的方式快速查找并跳转到任何事件。

如何在WebStorm / PhpStorm中的jQuery事件之间列出，组织或浏览？

2 个答案:

看起来像什么

它做什么

可以轻松实现的实时模板