0
В настоящее время я начинаю разрабатывать часть моего сайта, для которой потребуется умеренное количество JavaScript, и я хотел бы разделить и написать его как можно более эффективным. (У меня был менталитет JS 2010, и я пытаюсь обновить себя до 2016 года)Строительство. Модули JavaScript, связанные друг с другом, я переусердствую дизайн с помощью DI?
Нет необходимости в каркасе (например, Angular 2 yet). Поэтому я решил пойти с Webpack и TypScript 1.8 w/(ES2015 +).
На стороне сервера я использую ASP.NET MVC 5, и я сильно склонен к тому, как я создаю приложения на сервере: я использую Dependency Injection для почти всего.
Так я вроде применяется тот же самый менталитет к стороне клиента, и в конечном итоге с этим: В стороне клиента, я не знаю, если я overkilling этот класс (он нуждается в большем количестве разделения):
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), но я не знаю, является ли это излишним.
У класса есть какие-либо другие методы? Если нет, то вы должны использовать литерал простого объекта и n что-то вроде этого конструктора. – Bergi
@Bergi: Да, у него есть другие методы, позвольте мне обновить исходное сообщение. –
Это также работает: http://inversify.io/ –