javascript - MVC 部分 View 解耦示例代码

Question

在我当前的 MVC 项目中，我有一个 View 具有如此多的功能，但已变得难以管理。为了解决这个问题，我开始向部分 View 添加功能并将它们包含在 View 中，但即使这是一个问题，因为底层的 javascript (jquery) 是如此相互关联和交织，以至于它仍然是一团糟。一个分部 View 中的 JS 会调用另一个分部 View 中的刷新方法，从而造成了一场紧耦合的灾难。

我决定需要一种将部分 View 彼此解耦以及与容器 View 解耦的方法。

这是我的一些对象

1. 解耦部分 View 中的 JS，以便一个 View 不需要了解有关另一个 View 或容器 View 的任何信息。

2. 为每个 View 的 JS 代码命名空间，这样我就不会遇到 View 之间的命名冲突。

3. 创建模式以在页面刷新(或链接到此页面)时维持状态

4. 将 JS 放入单独的文件中，这些文件仍然支持 razor 的 URL 解析和其他功能，每个 View 或部分 View 一个 JS 文件。

5. 使用命名约定，使查看容器 View 事件连接和初始化代码的人员能够了解正在发生的情况以及引用所指的位置。

6. 能够将参数数据从触发事件传递到监听器。

在做了一些研究但没有找到太多相关信息后，我创建了一个小演示，展示了我第一次尝试解决这个问题。我希望其他人能够看到我正在做的事情并提供更好的方法来实现这一目标。在演示中，有两个部分 View 可以相互通信，而不知道如何到达对方。后续 View 用于连接事件处理程序并在引发事件时调用函数。

这是演示代码

Controller 除了返回 View 和部分 View 之外什么也不做。

PartialViewDe CoupleController.cs

namespace EngA.SandboxApplication.Controllers
{
    public class PartialViewDecoupleController : Controller
    {
        // GET: PartialViewDecouple
        public ActionResult Index()
        {
            return View();
        }

        public PartialViewResult IndexJs()
        {
            return PartialView();
        }

        public PartialViewResult MenuPartialView()
        {
            return PartialView();
        }

        public PartialViewResult MenuPartialViewJs()
        {
            return PartialView();
        }

        public PartialViewResult DisplayPartialView()
        {
            return PartialView();
        }

        public PartialViewResult DisplayPartialViewJs()
        {
            return PartialView();
        }


    }
}

索引 View 只是加载所有 View

索引.cshtml

@Html.Hidden("id")

@Html.Action("IndexJs", "PartialViewDecouple")

@Html.Action("MenuPartialView","PartialViewDecouple")
@Html.Action("MenuPartialViewJs", "PartialViewDecouple")
<br/>
<br/>
@Html.Action("DisplayPartialView", "PartialViewDecouple")
@Html.Action("DisplayPartialViewJs", "PartialViewDecouple")

IndesJs 文件连接事件处理程序并将部分 View 结合在一起。
IndexJs.cshtml

<script language="javascript">

    $(document).ready(function () {

        //Set up Event Handlers
        $(document).bind("MenuPartialView_onClick", function (e, p1) {
            $("#id").val(p1);
            displayPartialView.setup(p1);

        });

        $(document).bind("DisplayPartialView_onClick", function (e, message) {
            menuPartialView.message(message);
        });

        //Initialize Partial Views on refresh
        var id = $("#id").val();
        if (id!=null) displayPartialView.setup(id);

    });

</script>

只是一个接收数据的容器和一个引发事件的按钮。

DisplayPartialView.cshtml

DisplayParitalView<br/>
<div id="display">default</div>

<input type="button" name="ButtonSayHi" id="ButtonSayHi" value="Say Hi" onclick="displayPartialView.onButtonSayHiClick(this)" />

下面，“setup”显示传递给它的参数。“onButtonSayHiClick”引发和事件

DisplayPartialViewJs.cshtml

<script language="javascript">

    var displayPartialView = {

        setup: function (id) {
            $("#display").html(id);
        },

        onButtonSayHiClick: function (e) {
            var name = e.id;
            $(document).trigger("DisplayPartialView_onClick", [name]);
        }\
    };

</script>

下面，两个按钮用于引发事件。 MenuPartialView.cshtml

 MenuParitalView
<br/>
<input type="button" name="ButtonOne" value="One" onclick="menuPartialView.onButtonOneClick(this)" />
<input type="button" name="ButtonTwo" value="Two" onclick="menuPartialView.onButtonTwoClick(this)" />

下面，触发器引发事件，消息显示发送给它的消息。 MenuPartialViewJs.cshtml

 <script language="javascript">

    var menuPartialView = {

        onButtonOneClick: function () {
            $(document).trigger("MenuPartialView_onClick", [1]);
        },

        onButtonTwoClick: function () {
            $(document).trigger("MenuPartialView_onClick", [2]);
        },

        message: function (message) {
            alert("Message: " + message);
        }

    };

</script>

如果您发现完成同一事情的更好方法，请告诉我

谢谢

伯爵

Answer 1

首先，将脚本直接添加到 HTML 中并不是一个好主意 - 将它们放在单独的 js 文件中，然后进行捆绑/压缩。这将节省页面加载时间并使其更易于维护。

一个好的方法是通过“ View ”来分隔 HTML - 基本上，将每个 View 包装在带有 ID 的 div 中，例如

<div id="my-app-view-1">VIEW HTML</div>

通过执行此操作，您可以像这样确定 Java 脚本的范围:

my-app-view-1.js:

(function(global) {

    'use strict';

    var document = global.document,
        $ = global.$;

    $(function() {

        var $view = $(document).find('#my-app-view-1');

        // do processing here

    });

}(this));

这将确保您拥有模块化的 js，并且其他脚本不会干扰此 View 。