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

Shared JavaScript File with Different Definitions of a Function Call

本文关键字：共享 JavaScript 文件 定义 函数调用      更新时间：2023-09-26

我有一个300行的javascript文件，它为ASP中的多个视图使用的部分视图设置jQuery事件处理程序和其他所需的函数。NET MVC应用程序。无论哪个视图使用分部，事件处理程序都能以相同的方式处理99%的所有内容。这个问题是关于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)
    });
});

定义1.js

function mySpecificFunction() {
   //do stuff
}

定义2.js

function mySpecificFunction() {
   //do other stuff
}

视图将加载适当的脚本，例如：

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

mySpecificFunction()的"签名"（因为javascript而被大量使用）对于每个定义都是一样的，但我的直觉告诉我这是一种糟糕的做法。有没有更好/正确的方法或为此目的的设计模式？

我认为您可以在这里使用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代码连接并压缩到一个文件中以进行生产。在这种情况下，来自view1.js、view2.js等的全局view变量将成为一个问题。

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

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

上面概述的方法可以工作，但就可维护性而言，这不是最好的方法。通过脚本标记添加一个或另一个文件以导入特定函数并不一定让另一个开发人员清楚地知道您实际上已经更改了共享代码中事件处理程序的行为。

一个简单的替代方案可以是，在每个视图中，您将部分视图包装在一个包含元素中，该元素具有一个标识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类预测的变化行为变得明确以供未来的开发人员查看。

相关文章：