Question

我有一个300行的javascript文件，它为ASP.NET MVC应用程序中的多个视图使用的部分视图设置jQuery事件处理程序和其他所需的函数。事件处理程序处理99％的所有内容，无论哪个视图使用partial。这个问题是关于1％的差异。

由于JavaScript没有接口，因此可以安全地定义一个或多个事件处理程序调用的函数，这些事件处理程序处理根据使用的视图加载的单独文件中的不同内容。？如果没有，处理这种情况的最佳方法是什么？在其他语言中，我在这种情况下使用接口和/或抽象类。

示例：

共享文件

$(document).ready(function() {
    //shared variables here for methods
    $(document).on('click', '.selectable-table tbody tr', function() {
        //do shared actions
        mySpecificFunction();
        //finish shared actions (if necessary)
    });
});

Definition1.js

function mySpecificFunction() {
   //do stuff
}

Definition2.js

function mySpecificFunction() {
   //do other stuff
}

视图将加载相应的脚本：

<script src="definitionX.js"></script>
<script src="sharedScript.js"></script>

＆＃34;签名＆＃34; mySpecificFunction() pc.onaddStream的术语被慷慨使用，对于每个定义都是相同的，但我的直觉中的一些东西告诉我这是不好的做法。为此目的，是否有更好/更正确的方法或设计模式？

Answer 1

我认为你可以在这里使用OOP方法，你不需要抽象类或接口，而是可以使用对象（比其他语言更灵活）。

例如，您可以使用共享代码的基本View原型，然后加载特定的view1.js，view2.js，其中基本原型将使用特定代码进行扩展：

$(document).ready(function() {
    // view is a view instance coming from the specific view.js
    view.init();
});

// sharedScript.js, view prototype
var View = {
    init: function() {
        $(document).on('click', '.selectable-table tbody tr', function() {
            // do shared actions
            // ...
            // do specific actions
            this.mySpecificFunction();
        });
    },
    mySpecificFunction: function() {
        //do specific things, can be left empty in the "prototype" object
        return;
    }
};

// view1.js
var view = Object.create(View);
view.mySpecificFunction = function() {
    alert('view 1');
}

// view2.js
var view = Object.create(View);
view.mySpecificFunction = function() {
    alert('view 2');
}

视图将加载共享和特定脚本：

<script src="sharedScript.js"></script>
<script src="view1.js"></script>

这只是一个可以改进的粗略想法，例如，您可能希望将所有js代码连接并压缩到单个文件中进行生产。在这种情况下，来自view，view1.js等的全局view2.js变量将成为问题。

改进可以是某种“路由器”，它将检测应该实例化的视图：

$(document).ready(function() {
    router.when('/', function() {
       view = HomePageView();
    }).when('/about', function() {
       view = AboutPageView();
    });
    view.init();
});

Answer 2

上面概述的方法可行，但就可维护性而言，它并不是最好的方法。通过脚本标记添加一个或另一个文件以导入特定功能并不一定向另一位开发人员说明您实际上已经更改了共享代码中事件处理程序的行为。

一个简单的替代方案可能是在每个视图中将局部视图包装在包含元素的内容中，该元素具有标识css类，以区分该点所需的行为。

然后为这些不同的css类分别分配事件处理程序：

$(document).ready(function() {
    //shared variables here for methods     

    $(document).on('click', 'div.type1 .selectable-table tbody tr', function() {
        //do shared actions
        mySharedActions();
        mySpecificFunction1();
        //finish shared actions (if necessary)
    });

    $(document).on('click', 'div.type2 .selectable-table tbody tr', function() {
        //do shared actions
        mySharedActions()
        mySpecificFunction2();
        //finish shared actions (if necessary)
    });
});

这将允许您将所有特定功能集中在一个位置，并使css类明确指出的更改行为供未来的开发者看。

具有不同函数调用定义的共享JavaScript文件

2 个答案: