JavaScript/OOP/書籍リーダブルコード/update_highlightを再リファクタリングの変更点

追加された行はこの色です。
削除された行はこの色です。
JavaScript/OOP/書籍リーダブルコード/update_highlightを再リファクタリングへ行く。
JavaScript/OOP/書籍リーダブルコード/update_highlightを再リファクタリングの差分を削除
#author("2023-05-16T04:02:25+09:00","default:ryuichi","ryuichi")
#author("2023-05-16T04:03:07+09:00","default:ryuichi","ryuichi")
* update_highlightを再リファクタリング [#n1c0e861]

** 書籍リーダブルコードに掲載されている内容 [#kb8fefe8]

*** リファクタリング前 [#t6c52d7c]

 var update_highlight = function (message_num) {
   if ($("#vote_value" + message_num).html() === "Up") {
     $("#thumbs_up" + message_num).addClass("highlighted");
     $("#thumbs_down" + message_num).removeClass("highlighted");
   } else if ($("#vote_value" + message_num).html() === "Down") {
     $("#thumbs_up" + message_num).removeClass("highlighted");
     $("#thumbs_down" + message_num).addClass("highlighted");
   } else {
     $("#thumbs_up" + message_num).removeClass("highighted");
     $("#thumbs_down" + message_num).removeClass("highlighted");
   }
 };

*** リファクタリング後 [#s7c0904a]

 var update_highlight = function (message_num) {
   var thumbs_up = $("#thumbs_up" + message_num);
   var thumbs_down = $("#thumbs_down" + message_num);
   var vote_value = $("#vote_value" + message_num).html();
   var hi = "highlighted";
   if (vote_value === "Up") {
     thumbs_up.addClass(hi);
     thumbs_down.removeClass(hi);
   } else if (vote_value === "Down") {
     thumbs_up.removeClass(hi);
     thumbs_down.addClass(hi);
   } else {
     thumbs_up.removeClass(hi);
     thumbs_down.removeClass(hi);
   }
 };

** 再リファクタリング [#z4863c7b]
** 書籍に書かれているリファクタリング後のコードを再リファクタリング [#z4863c7b]

*** クラスベース [#p1b3baf0]

 class Vote {
   constructor(message_num) {
     this.message_num = message_num;
     this.thumbsUp = $("#thumbs_up" + message_num);
     this.thumbsDown = $("#thumbs_down" + message_num);
   }
 
   removeHighlight() {
     this.thumbsUp.removeClass("highlighted");
     this.thumbsDown.removeClass("highlighted");
   }
 }
 
 class UpVote extends Vote {
   handleHighlight() {
     this.removeHighlight();
     this.thumbsUp.addClass("highlighted");
   }
 }
 
 class DownVote extends Vote {
   handleHighlight() {
     this.removeHighlight();
     this.thumbsDown.addClass("highlighted");
   }
 }
 
 class OtherVote extends Vote {
   handleHighlight() {
     this.removeHighlight();
   }
 }
 
 class VoteManager {
   static create(message_num) {
     const voteValue = $("#vote_value" + message_num).html();
     switch (voteValue) {
       case "Up":
         return new UpVote(message_num);
       case "Down":
         return new DownVote(message_num);
       default:
         return new OtherVote(message_num);
     }
   }
 }
 
 var update_highlight = function (message_num) {
   const vote = VoteManager.create(message_num);
   vote.handleHighlight();
 };

*** 非クラスベース [#s7db0ffc]

 var Vote = function(message_num) {
     var thumbsUp = $("#thumbs_up" + message_num);
     var thumbsDown = $("#thumbs_down" + message_num);
 
     return {
         removeHighlight: function() {
             thumbsUp.removeClass("highlighted");
             thumbsDown.removeClass("highlighted");
         }
     };
 };
 
 var UpVote = function(message_num) {
     var vote = Vote(message_num);
 
     vote.handleHighlight = function() {
         vote.removeHighlight();
         vote.thumbsUp.addClass("highlighted");
     };
 
     return vote;
 };
 
 var DownVote = function(message_num) {
     var vote = Vote(message_num);
 
     vote.handleHighlight = function() {
         vote.removeHighlight();
         vote.thumbsDown.addClass("highlighted");
     };
 
     return vote;
 };
 
 var OtherVote = function(message_num) {
     var vote = Vote(message_num);
 
     vote.handleHighlight = function() {
         vote.removeHighlight();
     };
 
     return vote;
 };
 
 var VoteManager = {
     create: function(message_num) {
         var voteValue = $("#vote_value" + message_num).html();
         switch (voteValue) {
             case "Up":
                 return UpVote(message_num);
             case "Down":
                 return DownVote(message_num);
             default:
                 return OtherVote(message_num);
         }
     }
 };
 
 var update_highlight = function (message_num) {
     var vote = VoteManager.create(message_num);
     vote.handleHighlight();
 };