Javascript 什么'；一个有很多函数的脚本和一个有一个大函数可以完成所有工作的脚本之间的最佳选择是什么？

我已经有一个月的时间真正了解javascript了。我制作了一个raphael.js大脚本，其中包含一些绘制图表的函数。基本上，这些图基于相同的参数，但每个功能的元素配置不同。 我是个大傻瓜，所以我不想从坏习惯开始。这就是我问的原因。 目前，我的脚本如下所示：

var typeOfDrawing;
draw(){
  if(typeOfDrawing == 1){
  /* Ajax query to get the parameters I need */
  paper.clear();
  /* drawing stuff*/
  setTimeout(draw,5000);
  }
}

 draw2(){
  if(typeOfDrawing == 2){
  /* Ajax query to get the parameters I need */
  paper.clear();
  /* drawing stuff*/
  setTimeout(draw2,5000);
  }
}

 draw3(){
  if(typeOfDrawing == 3){
  /* Ajax query to get the parameters I need */
  paper.clear();
  /* drawing stuff*/
  setTimeout(draw3,5000);
  }
}

 draw4(){
  if(typeOfDrawing == 4){
  /* Ajax query to get the parameters I need */
  paper.clear();
  /* drawing stuff*/
  setTimeout(draw4,5000);
  }
}

/* Here I get a bootstrap's datepicker value when the user chooses a date */
$('#dp1').datepicker()
          .on('changeDate', function(ev){
              $("#paper1").show();
              date =""+ $("#dp1").datepicker("getDate"); 
              day = date.substring(0,3);
              /* This returns the first 3 letters of the selected day so i can  
                 chose which drawing i have to launch */
              switch(day){
                    case "Mon":
                        typeOfDrawing=2;
                        draw3();
                        break;
                    case "Tue":
                    case "Wed":
                    case "Thu":
                    case "Fri":
                        typeOfDrawing=0;
                        draw();
                        break;
                    case "Sat":
                        typeOfDrawing=3;
                        draw4();
                        break;
                    case "Sun":
                        typeOfDrawing=4;
                        draw5();

              }
          });

drawTotal(day){
  switch(day){
    case "Mon" :
         /* drawing instructions corresponding to draw3() */
    case "Tue" :
    case "Wed" :
    case "Thu" :
    case "Fri" :
         /* drawing instructions corresponding to draw() */
    case "Sat" :
         /* drawing instructions corresponding to draw4() */
    case "Sun" :
         /* drawing instructions corresponding to draw5() */

  setTimeout(drawTotal,5000);
  }
}

基本上，这是我的剧本的一部分，我相信这与你理解我将要问的问题有关：

我写的代码和一些可以根据day in参数绘制所有图形的大型函数之间的最佳之处是什么。像这样：

var typeOfDrawing;
draw(){
  if(typeOfDrawing == 1){
  /* Ajax query to get the parameters I need */
  paper.clear();
  /* drawing stuff*/
  setTimeout(draw,5000);
  }
}

 draw2(){
  if(typeOfDrawing == 2){
  /* Ajax query to get the parameters I need */
  paper.clear();
  /* drawing stuff*/
  setTimeout(draw2,5000);
  }
}

 draw3(){
  if(typeOfDrawing == 3){
  /* Ajax query to get the parameters I need */
  paper.clear();
  /* drawing stuff*/
  setTimeout(draw3,5000);
  }
}

 draw4(){
  if(typeOfDrawing == 4){
  /* Ajax query to get the parameters I need */
  paper.clear();
  /* drawing stuff*/
  setTimeout(draw4,5000);
  }
}

/* Here I get a bootstrap's datepicker value when the user chooses a date */
$('#dp1').datepicker()
          .on('changeDate', function(ev){
              $("#paper1").show();
              date =""+ $("#dp1").datepicker("getDate"); 
              day = date.substring(0,3);
              /* This returns the first 3 letters of the selected day so i can  
                 chose which drawing i have to launch */
              switch(day){
                    case "Mon":
                        typeOfDrawing=2;
                        draw3();
                        break;
                    case "Tue":
                    case "Wed":
                    case "Thu":
                    case "Fri":
                        typeOfDrawing=0;
                        draw();
                        break;
                    case "Sat":
                        typeOfDrawing=3;
                        draw4();
                        break;
                    case "Sun":
                        typeOfDrawing=4;
                        draw5();

              }
          });

drawTotal(day){
  switch(day){
    case "Mon" :
         /* drawing instructions corresponding to draw3() */
    case "Tue" :
    case "Wed" :
    case "Thu" :
    case "Fri" :
         /* drawing instructions corresponding to draw() */
    case "Sat" :
         /* drawing instructions corresponding to draw4() */
    case "Sun" :
         /* drawing instructions corresponding to draw5() */

  setTimeout(drawTotal,5000);
  }
}

---

我尽量简化它，如果不清楚，请不要犹豫询问细节^ ^

您的JS相当程序化。将函数体放在开关的两个案例之间，使其更加程序化

由于JS的本质是面向对象的，我建议将AJAX与特定的绘图函数一起转换为对象

用更通用的方法构造一个类，减少冗余，不使用任何全局变量，如

typeOfDrawing

这样做的好处不在于性能，而在于性能

• 代码的可读性更好
• 将来更好地维护代码
• 减少应用程序各部分之间的依赖性
• 更好地封装特定逻辑

---

只要我的2美分。当然，这应该是最好的。

没有对错之分，“最好”或“更糟”都是基于意见的，更不用说你没有指定约束。如果您以后尝试更改它，或者在性能方面做得最好，这可能是最好的，但它仍然是基于意见的。获得代码的反馈绝对是个好主意。然而，有一个单独的网站可以解决这个问题。这个问题有点离题，但是让每个功能都做一件事，而且只做一件事，这通常是一个很好的设计实践。尽可能多地将逻辑从代码转移到数据中也很好；这看起来可能是一个候选方法。@TomZych我喜欢将逻辑放入数据的通用方法，+1