Question

我目前正在开发我的网站的一部分，需要适量的JavaScript，我想尽可能高效地分离和编写它。（我有一个JS 2010的心态，我正努力升级到2016年）

不需要框架（例如Angular 2）。所以我决定使用Webpack和Typescript 1.8 w /（ES2015 +）。

在服务器端，我使用的是ASP.NET MVC 5，而且我在服务器上构建应用程序的方式存在很大的偏见：我几乎使用了Dependency Injection。

所以我对客户端应用了同样的心态，并最终得到了这个：在客户端，我不知道我是否过度使用这个类（它需要更多的分离）：

    export class Match {
    winnerRoundMsg: string;
    acceptMsgSelector: JQuery; //$("#js-accept-message")
    currentMatchSelector: JQuery;
    matchResultSelector: JQuery; // $("#js-match-result-message")
    scorePlayerInput: JQuery; //$('.js-score-player input[type="button"]')
    scoreOpponentPlayerInput: JQuery;
    avatarImgSelector : JQuery;
    opponentNameSelector: JQuery;
    rejectBtn: JQuery;
    acceptScoreSelector: JQuery; //$("#js-accept-score");
    globalChatAreaSelector : JQuery;
    matchUpdatesSelector: JQuery;
    sendReceiveSelector: JQuery;

    score : Array<number>;

    constructor(winnerRoundMsg: string, acceptMsgSelector: JQuery, currentMatchSelector: JQuery,
        matchResultSelector: JQuery, scorePlayerInput: JQuery, scoreOpponentPlayerInput: JQuery,
        avatarImgSelector: JQuery, opponentNameSelector: JQuery, acceptScoreSelector: JQuery,
        globalChatAreaSelector: JQuery, matchUpdatesSelector: JQuery, sendReceiveSelector: JQuery
    ) {

        //Bind everything here. 

        this.winnerRoundMsg = winnerRoundMsg;
        this.acceptMsgSelector =  acceptMsgSelector;
        this.currentMatchSelector =  currentMatchSelector;
        this.matchResultSelector =  matchResultSelector;
        this.scorePlayerInput =   scorePlayerInput;
        this.scoreOpponentPlayerInput =  scoreOpponentPlayerInput;
        this.avatarImgSelector = avatarImgSelector;
        this.opponentNameSelector = opponentNameSelector;
        this.rejectBtn = $("#js-reject-btn");
        this.acceptScoreSelector = acceptScoreSelector;
        this.globalChatAreaSelector = globalChatAreaSelector;
        this.matchUpdatesSelector = matchUpdatesSelector;
        this.sendReceiveSelector = sendReceiveSelector;
    }

    loser() {

       this.matchResultSelector.removeClass("hidden");
       this.matchResultSelector.html(this.winnerRoundMsg + this.opponentNameSelector.html());
    }

    nextMatch(encryptedCurrentMatch: string, playerName: string, mediaPath: string,
            isOpponentUnknown : boolean) {

        this.acceptMsgSelector.addClass("hidden");
        this.matchResultSelector.html("");
        this.scorePlayerInput.remove("btn-info");
        this.currentMatchSelector.val(encryptedCurrentMatch);
        this.avatarImgSelector.attr("alt", playerName);
        this.avatarImgSelector.attr("src", mediaPath);

        //If Opponent is known enable all the inputs
        //otherwise disable them.

        this.scorePlayerInput.prop("disabled", isOpponentUnknown);
        this.scoreOpponentPlayerInput.prop("disabled", isOpponentUnknown);

        this.resetAcceptBtn();
        //ResetAcceptBtn();
        //Enables the submission
        // SwitchSubmission(true);
        //matchServer.setupNowPlaying(encryptedTourneyId, encryptedMatchId);
    }


    receiveScore(scoreCsv : Int32Array) {

        for (var i = 0, len = scoreCsv.length; i < len; i++) {
            const selector = $(this.scoreOpponentPlayerInput).eq(i);
            if (scoreCsv[i] !== 0) {
                selector.addClass("btn-info");
            } else {
                selector.removeClass("btn-info");
            }


        }
    }


    receiveTournamentGlobalMessage(message, playerName) {
        this.globalChatAreaSelector.append(`<p><b>${playerName}:</b> ${message} </p>`);

    }

    rejectScore() {
        //encryptedMatchId = $("#EncryptedCurrentMatch").val();
        //custom.server.rejectScore(encryptedMatchId);
        this.acceptMsgSelector.html("@Localization.Language.Area_Tournament_NowPlaying_Rejected_Score");
        this.acceptMsgSelector.removeClass("hidden");
        this.rejectBtn.remove();

    }

    resetAcceptBtn() {
        this.acceptScoreSelector.prop("disabled", false);
        this.acceptScoreSelector.val("@Localization.Language.Area_Tournament_NowPlaying_Accept_Score");
        this.acceptScoreSelector.addClass("btn-info");
        this.acceptScoreSelector.removeClass("btn-warning");
    }


    receiveMatchUpdate(message) {
        const ihtml = this.matchUpdatesSelector.html();
        this.matchUpdatesSelector.html(`<p>${message}</p>${ihtml}`);
    }


    sendScore() : Array<number> {

        this.sendReceiveSelector.html("@Localization.Language.Area_Tournament_NowPlaying_SignalSending");

        this.score = new Array(); //Neutralize
        var score = this.score;
        this.scorePlayerInput.each((index) => {
            if ($(this).hasClass("btn-info")) {
                score.push(1);
            } else {
                score.push(0);
            }
        });
        return this.score;
    }


    //Checks if the current user has received the submission
    signalReceived() {
        this.sendReceiveSelector.html("@Localization.Language.Area_Tournament_NowPlaying_SignalSent");
        setTimeout(() =>  {
                this.sendReceiveSelector.html("");
            },
            5000);
    }

    switchSubmission(on : boolean) {
        if (typeof (on) !== "boolean")
            return;
        this.scorePlayerInput.prop("disabled", !on);
        this.acceptScoreSelector.prop("disabled", !on);
    }


    winner() {
        this.matchResultSelector.removeClass("hidden");
        this.matchResultSelector.html("Congratulations! You are the winner of this round!");
    }

}

我将所有选择器注入课堂。通过这个我实现了一个松散耦合的设计（除了JQuery），但我不知道这是否有点过分。

Answer 1

在客户方面，我不知道我是否过度使用这门课程（

我认为绝对是一种矫枉过正。感觉像polyglot prorgramming gone wrong。

相反，我会专注于远离UI分离逻辑，然后将UI留在模仿数据状态中。

构建松散耦合的JavaScript模块，我是否过度使用DI设计？

1 个答案: