Question

我有两个执行相同功能的JS文件，唯一的区别是 .click触发器和被调用的 AJAX URL 。 我正在尝试将这些脚本合并为一个。我确信这是可能的，但我觉得它有点棘手。

<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

浏览两个文件，找到它们不同的行，并提取相似的命名变量，直到您有两个相同的代码块。
一旦块相同，就可以使用刚刚提取的变量作为参数提取函数。
用调用新函数替换这些块，将参数变量作为参数传递。

例如：

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

将2个Javascript文件合并为一个

2 个答案: