update_highlightを再リファクタリング

書籍リーダブルコードに掲載されている内容

リファクタリング前

 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");
   }
 };

リファクタリング後

 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);
   }
 };

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

クラスベース

 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();
 };

非クラスベース

 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();
 };

トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 検索 最終更新   ヘルプ   最終更新のRSS

Last-modified: 2023-05-16 (火) 04:03:07