將2個Javascript文件合併爲一個

Question

我有兩個執行相同功能的JS文件，唯一的區別是被調用的.click觸發器和AJAX URL。 我想將腳本合併成一個。我相信這是可能的，但作爲一個JS新手有點發現它有點棘手。

<script> 

$(document).ready(function(){ 

// LOAD GAME JSON DATA VIA AJAX 
$('.gameCta').click(function(){ 

    id = $(this).children('span.title').attr('data-id'); 


     // LOAD GAME PROVIDERS 
     $("#game_provs").load("http://localhost:8888/projects/superfreerespo/" + id + "/ .gameBox-Ops"); 

    $.ajax({ 
     url: "http://localhost:8888/projects/superfreerespo/" + id + "?json=get_category_posts&slug=games", 
     method: "GET", 
     data: {json: 1}, 
     dataType: "JSON"}).done(function(data) { 



     // LOAD GAME INFORMATION 
     $("#game-name").html(data.post.title); 
     $("#game-reels").html(data.post.custom_fields.reels); 
     $("#game-paylines").html(data.post.custom_fields.paylines); 
     $("#game-minBet").html(data.post.custom_fields.min_bet); 
     $("#game-maxBet").html(data.post.custom_fields.max_bet); 
     $("#game-jackpot").html(data.post.custom_fields.jackpot); 
     $("#game-info").html(data.post.custom_fields.game_info); 

     $('#next').attr('data-id', data.next_url); 
     $('#previous').attr('data-id', data.previous_url); 



     // LOAD GAME THUMBNALS 
     var gameThumbSrc = new String(data.post.custom_fields.game_name); 
     gameThumbSrc = gameThumbSrc.replace(/ /g,''); 


     $('#gameBoxGallery').html(''); 
      for(i = 0; i<= 2; i++){ 
       image = '<img src="<?php bloginfo('template_directory'); ?>/images/games/screenshots/' + gameThumbSrc + '-' + i + '.jpg" class="gameThumb">' 
      $('#gameBoxGallery').append(image); 
     }; 

     // ZOOM FIRST THUMBNAIL 
     $('#gameBox-Screenshot').html(''); 
      image = '<img src="<?php bloginfo('template_directory'); ?>/images/games/screenshots/' + gameThumbSrc + '-0' + '.jpg" id="gameScreenshot">' 
      $('#gameBox-Screenshot').append(image); 
     }) 
    }) 
}); 

</script> 


<script> 
$(document).on('click', '.direction', function(){ 

    move = $(this).attr('data-id'); 

    $.ajax({ 
     url: move, 
     method: "GET", 
     data: {json: 1}, 
     dataType: "JSON"}).done(function(data) { 

     // LOAD GAME INFORMATION 
     $("#game-header").html(data.post.title); 
     $("#game-name").html(data.post.title); 
     $("#game-reels").html(data.post.custom_fields.reels); 
     $("#game-paylines").html(data.post.custom_fields.paylines); 
     $("#game-minBet").html(data.post.custom_fields.min_bet); 
     $("#game-maxBet").html(data.post.custom_fields.max_bet); 
     $("#game-jackpot").html(data.post.custom_fields.jackpot); 
     $("#game-info").html(data.post.custom_fields.game_info); 

    $('#next').attr('data-id', data.next_url); 
    $('#previous').attr('data-id', data.previous_url); 

     // LOAD GAME THUMBNALS 
     var gameThumbSrc = data.post.custom_fields.game_name; 
     $('#gameBoxGallery').html(''); 
      for(i = 0; i<= 2; i++){ 
       image = '<img src="<?php bloginfo('template_directory'); ?>/images/games/' + gameThumbSrc + '/screenshots/' + gameThumbSrc + '-thumb-' + i + '.png" class="gameThumb">' 
      $('#gameBoxGallery').append(image); 
     }; 


     var gameThumbSrc = data.post.custom_fields.game_name; 
     $('#gameBox-Screenshot').html(''); 
      image = '<img src="<?php bloginfo('template_directory'); ?>/images/games/' + gameThumbSrc + '/screenshots/' + gameThumbSrc + '-large-0' + '.png" id="gameScreenshot">' 
      $('#gameBox-Screenshot').append(image); 


     }) 
    }); 

     // ZOOM THUMBNAIL ONCLICK 
     $(document).on('click', '.gameThumb', function(){ 
      $('#gameScreenshot').attr('src',$(this).attr('src').replace('thumb','large')); 
     }); 
</script> 

Answer 1

1. 通過你的兩個文件，發現它們的不同，直到你有兩個相同的代碼塊中提取類似命名的變量線。

2. 一旦塊完全相同，就提取一個函數，將剛提取的變量作爲參數提取出來。

3. 將這些塊替換爲調用傳遞參數變量作爲參數的新函數。

例如：

$(document).ready(function(){ 
    function load (url) { 
     // ajax and stuff... 
    } 

    $('.gameCta').click(function(){ 
     var url = // functionality to get the url... 

     // other functionality... 

     load(url); 
    } 

    $(document).on('click', '.direction', function() { 
     var url = $(this).attr('data-id'); 

     // other functionality... 

     load(url); 
    } 
} 

Answer 2

你可以拿出Ajax調用，並作出這樣

function call_ajax(url, request_data) { 
    $.ajax({ 
     url: url, 
     method: "GET", 
     data: request_data, 
     dataType: "JSON"}).done(function(data) { 



     // LOAD GAME INFORMATION 
     $("#game-name").html(data.post.title); 
     $("#game-reels").html(data.post.custom_fields.reels); 
     $("#game-paylines").html(data.post.custom_fields.paylines); 
     $("#game-minBet").html(data.post.custom_fields.min_bet); 
     $("#game-maxBet").html(data.post.custom_fields.max_bet); 
     $("#game-jackpot").html(data.post.custom_fields.jackpot); 
     $("#game-info").html(data.post.custom_fields.game_info); 

     $('#next').attr('data-id', data.next_url); 
     $('#previous').attr('data-id', data.previous_url); 



     // LOAD GAME THUMBNALS 
     var gameThumbSrc = new String(data.post.custom_fields.game_name); 
     gameThumbSrc = gameThumbSrc.replace(/ /g,''); 


     $('#gameBoxGallery').html(''); 
      for(i = 0; i<= 2; i++){ 
       image = '<img src="<?php bloginfo('template_directory'); ?>/images/games/screenshots/' + gameThumbSrc + '-' + i + '.jpg" class="gameThumb">' 
      $('#gameBoxGallery').append(image); 
     }; 

     // ZOOM FIRST THUMBNAIL 
     $('#gameBox-Screenshot').html(''); 
      image = '<img src="<?php bloginfo('template_directory'); ?>/images/games/screenshots/' + gameThumbSrc + '-0' + '.jpg" id="gameScreenshot">' 
      $('#gameBox-Screenshot').append(image); 
     }) 
    }); 
} 

功能現在你罵這兩項活動這個AJAX功能。隨着出有多少重複的代碼

這樣你就可以調用

$('.gameCta').click(function(){ 
    var id = $(this).children('span.title').attr('data-id'); 
    var url = "http://localhost:8888/projects/superfreerespo/" + id + "/ .gameBox-Ops"; 
    var data = {json: 1}; 
    call_ajax(url, data); 
});