Question

我想将我的JavaScript代码移动到外部js文件并在我的View中使用它，因为我想在我的页面上“清理/消除”我的代码，因为我使用了大量的Javascript。

在发布我的代码之前，最佳做法是什么？保持视图中的所有JavaScript，或者通过创建外部js文件并将代码放在那里？

下面是我视图中代码的一部分（我已将其余部分留下，因为它遵循相同的结构，我不想在此处不必要地添加太多代码）：

@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>
}

我尝试将此代码按原样（将@Section和<script>标记除外）添加到外部js文件（UserProfile.js）中，并在视图的顶部和底部调用以下内容并且它没有执行代码。

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

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

如果我做错了或没有遵循最佳做法，请纠正我。

编辑1

@satpal引导我走向正确的方向，我将我的代码包装在我的js文件中，如下所示：$(window).load(function () {然后它就可以了。

为什么这样做，但不是$(function () {或$(document).ready(function () {？

谢谢。

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

0 个答案: