jQuery和“组织代码”

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (47)

最近,我一直在努力理解组织jQuery代码的最佳方法。

我的问题是,越富有的应用程序,客户端越快失去控制。想想这种情况:

//Let's start some jQuery
$(function() {        
    var container = $("#inputContainer");

    //Okay let's list text fields that can be updated
    for(var i=0; i < 5; i++) {

        //okay let's add an event for when a field changes
        $("<input/>").change(function() {

            //okay something changed, let's update the server
            $.ajax({
                success:function(data) {

                    //Okay - no problem from the server... let's update
                    //the bindings on our input fields
                    $.each(container.children(), function(j,w) {

                        //YIKES!! We're deep in here now!!
                        $(w).unbind().change(function() {

                            //Then insanity starts...

                        }); // end some function

                    }); //end some loop

                } // what was this again?

            }); //ending something... not sure anymore

        }).appendTo(container); //input added to the page... logic WAY split apart

    }; //the first loop - whew! almost out!

});  //The start of the code!!

现在,这种情况并不是太不可能。我并不是说这是正确的方法,但在屏幕开始融化之前,你会发现自己已经深入到jQuery命令中,并开始怀疑还能添加多少逻辑,这并不少见。

我的问题是,人们是如何管理这些或组织以限制代码的复杂性的?

提问于
用户回答回答于

到目前为止,我是这样做的:

// initial description of this code block
$(function() {        
    var container = $("#inputContainer");

    for(var i=0; i < 5; i++) {
        $("<input/>").changed(inputChanged).appendTo(container);
    }; 

    function inputChanged() {
        $.ajax({
            success: inputChanged_onSuccess
        });
     } 

     function inputChanged_onSuccess(data) {
        $.each(container.children(), function(j,w) {
          $(w).unbind().changed(function() {
             //replace the insanity with another refactored function
          });
        });
      }
});

在JavaScript中,函数是一流的对象,因此可以用作变量.

用户回答回答于

我只想补充一下前面提到的内容:

$.each(container.children(), function(j,w) {
    $(w).unbind().change(function() { ... });
});

可以优化为:

container.children().unbind().change(function() { ... });

这都是关于链接的,这是一种简化代码的好方法。

扫码关注云+社区

领取腾讯云代金券