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

Question

我有一个 300 行的 javascript 文件，它为 ASP.NET MVC 应用程序中的多个 View 使用的局部 View 设置 jQuery 事件处理程序和其他所需的函数。无论哪个 View 使用部分，事件处理程序都以相同的方式处理 99% 的所有内容。这个问题是关于那 1% 的差异。

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

例子:

共享文件

$(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
}

View 将加载适当的脚本:

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

mySpecificFunction() 的“签名”(由于 javascript 而被广泛使用的术语)对于每个定义都是相同的，但我的直觉告诉我这是不好的做法。是否有更好/正确的方法或为此目的设计模式？

Answer 1

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

例如，您可以拥有一个包含共享代码的基本 View 原型(prototype)，然后加载特定的 view1.js、view2.js，其中基本原型(prototype)将使用特定代码进行扩展:

$(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');
}

并且 View 将加载共享的和特定的脚本:

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

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

改进可以是某种“路由器”，它将检测应该实例化哪个 View :

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