将razor视图内联javascript移动到外部typescript文件

我有一个带有内联javascript的razor视图，随着时间的推移，它已经变得很混乱，现在我正在将所有js（除了一些最小的初始化代码）移动到外部typescript文件中。让js代码可重用会很好，但它非常特定于这个特定视图。js代码严重依赖于许多html元素。我拥有的是这样的东西：

module MyModule{

export class SomeClass{

    private $counter: any;
    private $answers: any;
    private $pager: any;
    private $anotherSelector1:any;
    private $anotherSelector2:any;
    private $anotherSelector3:any;
    private $anotherSelector4:any;
    private someId: number;

    constructor(public options: any) {

        this.init(options);

    }

    private init(options) {
        //setup objects, callbacks, other init code
    }
}
} 

 $(document).ready(function () {

        var instance = new MyModule.SomeClass({
            $counter: $('#something'),
            $answers: $('#something'),
            $pager: $('#something'),
            //code omitted for brevity
            someId: "@Model.SomeId",

        });


    });

我从cshtml文件中调用它，如下所示：

module MyModule{

export class SomeClass{

    private $counter: any;
    private $answers: any;
    private $pager: any;
    private $anotherSelector1:any;
    private $anotherSelector2:any;
    private $anotherSelector3:any;
    private $anotherSelector4:any;
    private someId: number;

    constructor(public options: any) {

        this.init(options);

    }

    private init(options) {
        //setup objects, callbacks, other init code
    }
}
} 

 $(document).ready(function () {

        var instance = new MyModule.SomeClass({
            $counter: $('#something'),
            $answers: $('#something'),
            $pager: $('#something'),
            //code omitted for brevity
            someId: "@Model.SomeId",

        });


    });

---

在我看来，即使这种方法将产生一个更干净的razor视图，typescript文件仍然与htmldom有许多依赖关系。我做得对吗？我是否应该考虑重构视图中的HTML呢？另外，我应该将cshtml文件中的init代码也移动到ts文件中，还是应该保持原样？在进行这样的重构时，我在寻找最佳实践。

我不认为你做得不对：）尽管我理解你的担忧

我认为您想要解决的问题有点像一个更干净的javascript，而不依赖于DOM选择器，看起来您实际上想要类似于或的东西，这基本上是某种模板方法。检查那里的演示如何做