代码之家 › 专栏 › 技术社区 › b. e. hollenbeck

Javascript中函数流的最佳实践?

jquery coding-style javascript

b. e. hollenbeck · 技术社区 · 16 年前

用户单击项目概述(pHome)中的缩略图。
使用jQuery,ajax将图像、标题和项目描述数据加载到XML文件中(project1)。
从XML文件构造HTML并将其注入DOM(div id=“project1”)。
设置动画并(4.5)淡出pHome。
淡入项目1。
在将用户带到项目的缩略图中添加“吹”效果。

事实上,我有所有这些步骤的函数,看起来真是一团糟。我想要的是构造这些函数的一些最佳实践方法,以便它们都同步发生(2&3除外)。作为帮助,以下是解决我问题的伪代码:

$('#thumbnail').live('click', function(){
    loadXML(thumbnail_id);
    makeHMTL(data);
    $('pHome').animate({blah}).fadeOut();
    $('project1').fadeIn();
    $('thumbnail_id').puff();
});

我知道这显然是一种不好的方法,但我不知道如何嵌套/构造函数以使它们都同步。我真的很想得到一个答案,它能让我在将来构建我的功能,避免老鼠窝。教育我!:)

5 回复 | 直到 16 年前

Mallox 13 年前

嵌套动画函数是一种方法,但当你做了很多动画函数时,它们可能会很糟糕,你很容易失去概览。

一个选项是将它们全部打包到一个对象中,并将引用传递给回调:

$('#thumbnail').live('click', animation.step1);

var animation = {
    step1: function() {
         $("#Element").show("puff", {}, "slow", animation.step2);
    },
    step2: function() {
         $("#Element").hide("linear", {}, "fast", animation.step3);
    },
    step3: function() {
         $("#Element").show("bounce", {}, 500);
    }
}

或者,您也可以使用内置动画队列,如下所示:

$("#go1").click(function(){
   $("#block1").animate( { width:"90%" }, { queue:true, duration:100 } )
               .animate( { fontSize:"24px" }, 1500 )
               .animate( { borderRightWidth:"15px" }, 1500);
})

link

Christian C. Salvadó 16 年前

loadXML 函数,用于能够执行 makeHTML 函数以及从服务器加载XML数据时的效果。

对于动画,可以在上一个回调上执行以下动画,例如:

$('#thumbnail').live('click', function(){
    loadXML(thumbnail_id, function (data) { // data is loaded
      makeHMTL(data);
      $('pHome').animate({blah}, function () {
        $(this).fadeOut();
      });

      $('project1').fadeIn('slow', function () {
        $('thumbnail_id').puff();
      });

    });
});

  function loadXML (thmbId, callback) {
    $.post("/your/page", { thumbnail: thmbId }, function (data) {
      callback.call(this, data);
    });
  }

ChaosPandion 16 年前

$("#thumbnail").live("click",function() {
    $.ajax({
        type: "GET",
        url: "myUrl.ashx",
        data: { param1: 1, param2: 2 },
        success: function(data, textStatus) {
            buildAndAppend(data); // Make sure it starts hidden.
            $("#Element").show("puff", {}, "slow", function() {
                anythingElse();
            });
        }
    });
});

Community Mohan Dere 9 年前

可以使用回调对动画进行排序,如下所示:

$('#Div1').slideDown('fast', function(){
    $('#Div2').slideUp('fast');
});

也看到 Finish one animation then start the other one

BenMorel Manish Pradhan 12 年前

动画、fadeIn和puff事件/动作都应该有自己的回调选项,在完成时调用这些选项。所以你也需要把它们嵌套起来,而不是像你那样把它们拴起来。

$("#pHome").animate({}, function(){
    $("#project1").fadeIn(500, function(){
        $("#thumbnail_id").puff();
    });
});