将JavaScript移动到外部JS文件并在MVC中使用

我想将我的JavaScript代码移动到一个外部js文件中，并在我的视图中使用它，因为我想在我的页面上稍微“清理/整理”一下我的代码，因为我使用了很多JavaScript

在我发布代码之前，什么是最佳实践？在视图中保留所有JavaScript，还是创建一个外部js文件并将代码放在其中

在我看来，下面是我的代码的一部分（我省略了其余部分，因为它遵循相同的结构，我不想在这里不必要地添加太多代码）：

我还需要在js文件中添加其他内容吗？我错过了什么

如果我做错了什么或没有遵循最佳实践，请纠正我

编辑1

@satpal将我引向正确的方向，我将代码包装在js文件中，如下所示：

$（window）.load（function（）{

）然后它就工作了

为什么这样做是可行的，而不是

$（function（）{

或

$（document）.ready（function（）{

---

谢谢。

在document ready handler中包装事件处理程序谢谢您的回复，只是为了澄清一下，我是否在外部js文件中添加了以下内容：$（document）.ready（function（）{//code}）；？因为我现在尝试了这一点，并在视图中引用了此js文件，但它不起作用：（@Satpal-我编辑了我的问题，我能够用$（window）.load（function（）{）将我的代码包装到外部js文件中，所以我给了你的答案a+1，因为它引导我朝着正确的方向前进。为什么这会起作用而不是你建议的呢？

$（document）.ready（function（）{

应该有用，了解不同的访问，只是我没有回答，那么你在哪里给了我+1？谢谢。链接提供了信息。我现在再次尝试，但它不起作用…有什么原因吗？我在上面添加了你的评论-这不被视为+1吗？将事件处理程序包装在文档准备好的handler中谢谢你的回答，我只是想澄清一下，是吗在我的外部js文件中添加以下内容：$（document）.ready（function（）{//code}）；？我现在尝试了这个方法，并在视图中引用了这个js文件，但它不起作用：（@Satpal-我编辑了我的问题，我能够用$（window）.load（function（）{，所以我给了你的答案a+1，因为它引导我朝着正确的方向前进。为什么这会起作用而不是你所建议的呢？

$（document）.ready（function（）{

应该有用，了解不同的访问，只是我没有回答，那么你在哪里给了我+1？谢谢。链接信息丰富。我现在再次尝试，但它不起作用…有什么原因吗？我在上面添加了你的评论-这不被视为+1吗？

@section scripts
    {
    <script type="text/javascript">        

        $('#aboutme_menu').on('click', function (event) {
            var editable_elements = document.querySelectorAll("[contenteditable=true]");
            for (var i = 0; i < editable_elements.length; i++) {
                editable_elements[i].setAttribute("contentEditable", false);
                editable_elements[i].style.background = "#F0F0F0";
                editable_elements[i].style.borderColor = "#F0F0F0";
            }

            var employmentcancelbutton = document.getElementsByClassName('employment-cancel-button'), i;

            for (var i = 0; i < employmentcancelbutton.length; i++) {
                employmentcancelbutton[i].style.visibility = 'hidden';
            }

            $('.employment-edit-button').html('Edit');
            $(".employment-edit-button").prop('disabled', false);
        });

        $('#employment_menu').on('click', function (event) {
            var editable_elements = document.querySelectorAll("[contenteditable=true]");
            for (var i = 0; i < editable_elements.length; i++) {
                editable_elements[i].setAttribute("contentEditable", false);
                editable_elements[i].style.background = "#F0F0F0";
                editable_elements[i].style.borderColor = "#F0F0F0";
            }

            document.getElementsByClassName('aboutme-cancel-button')[0].style.visibility = 'hidden';
            $('.aboutme-edit-button').html('Edit');
            $(".aboutme-edit-button").prop('disabled', false);
        });
</script>
}

<script src="~/Scripts/UserProfile.js"></script>