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

2023年8月29日 165次阅读

我有一个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>

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等的全局视图变量将成为一个问题.

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

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