码

Question

我已经用Google搜索了解我的代码的方法，我尝试了很多解决方案，但他们从来没有帮助过我。

我在html中有3个div，对每个div有3个略微不同的JS函数。函数正在填充js代码。

我希望将代码组合起来而不是拥有3个函数，如果只有一个函数可以执行我想要的相同操作。

最好的方法是什么？

// Random Stars
(function($) {
var generateStars = function(){

  var $galaxy = $(".galaxy1");
  var iterator = 0;

  while (iterator <= 100){
      var xposition = Math.random();
      var yposition = Math.random();
      var star_type = Math.floor((Math.random() * 100) + 1);
      var position = {
          "x" : $galaxy.width() * xposition,
          "y" : $galaxy.height() * yposition,
      };

      $('<div class="star star-type-' + star_type + '"></div>').appendTo($galaxy).css({
          "top" : position.y,
          "left" : position.x
      });

      iterator++;
  }

};

generateStars();

var generateStars2 = function(){

  var $galaxy = $(".galaxy2");
  var iterator = 0;

  while (iterator <= 25){
      var xposition = Math.random();
      var yposition = Math.random();
      var star_type = Math.floor((Math.random() * 25) + 1);
      var position = {
          "x" : $galaxy.width() * xposition,
          "y" : $galaxy.height() * yposition,
      };

      $('<div class="star star-type-' + star_type + '"></div>').appendTo($galaxy).css({
          "top" : position.y,
          "left" : position.x
      });

      iterator++;
  }

};

generateStars2();

var generateStars3 = function(){

  var $galaxy = $(".galaxy3");
  var iterator = 0;

  while (iterator <= 50){
      var xposition = Math.random();
      var yposition = Math.random();
      var star_type = Math.floor((Math.random() * 50) + 1);
      var position = {
          "x" : $galaxy.width() * xposition,
          "y" : $galaxy.height() * yposition,
      };

      $('<div class="star star-type-' + star_type + '"></div>').appendTo($galaxy).css({
          "top" : position.y,
          "left" : position.x
      });

      iterator++;
  }

};

generateStars3();
})(jQuery);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
    <div class="galaxy1"></div> 
    <div class="galaxy2"></div> 
    <div class="galaxy3"></div> 
</body>

Answer 1

配置是稍微变化的参数中的关键模式，但类似（或在您的情况下，精确）逻辑：

码

var generateStars = function($galaxy, threshold){

  var iterator = 0;

  while (iterator <= threshold){
      var xposition = Math.random();
      var yposition = Math.random();
      // using the 'threshold' parameter passed into the function
      var star_type = Math.floor((Math.random() * threshold) + 1);
      // no need to re-initialized '$galaxy' as it's now passed into the function
      var position = {
          "x" : $galaxy.width() * xposition,
          "y" : $galaxy.height() * yposition,
      };

      $('<div class="star star-type-' + star_type + '"></div>').appendTo($galaxy).css({
          "top" : position.y,
          "left" : position.x
      });

      iterator++;
  }

};

的使用

// getting all the html elements
var $galaxy1 = $(".galaxy1");
var $galaxy2 = $(".galaxy2");
var $galaxy3 = $(".galaxy3");

// passing the properties of the found elements and the threshold 
// to be utilized inside the function
generateStars($galaxy1, 100);
generateStars($galaxy2, 25);
generateStars($galaxy3, 50);

Answer 2

您可以尝试这样的事情：

的变化：

将generateStars1,2,3设为常用函数generateStar以接受星数（limit）和要追加的元素（el）
删除了position个对象。由于此对象仅使用一次，因此在那里移动了逻辑并删除了对象。
同时删除仅在计算中使用的变量xposition和yposition并保留Math.random()。
已移除iterator++并将while(iterator <= limits)更新为while(iterator++ <= limits)
从循环中删除了.appendTo(el)，因为它是一种在循环中操纵DOM的不良做法。相反，创建了一个数组并使用$(el).append(divArray)

generateStars功能

function generator(el, limit) {
  var iterator = 0;
  var divs = [];
  while (iterator++ <= limit) {
    var star_type = Math.floor((Math.random() * limit) + 1);
    var $div = $('<div class="star star-type-' + star_type + '"></div>').css({
      "top": ($(el).height() * Math.random()),
      "left": ($(el).width() * Math.random())
    })
    divs.push($div)
  }
  $(el).append(divs)
};

工作演示

function generator(el, limit) {
  var iterator = 0;
  var divs = [];
  while (iterator++ <= limit) {
    var star_type = Math.floor((Math.random() * limit) + 1);
    var $div = $('<div class="star star-type-' + star_type + '"></div>').css({
      "top": ($(el).height() * Math.random()),
      "left": ($(el).width() * Math.random())
    })
    divs.push($div)
  }
  $(el).append(divs)
};

(function($) {
  var generateStars = function() {
    var limits = [100, 25, 50];
    $('div[class^="galaxy"]').each(function(i, el) {
      generator(el, limits[i])
    })
  }
  generateStars();
})(jQuery);

.star {
  border: 1px solid gray;
  width: 10px;
  height: 10px;
  display: inline-block;
  margin: 0 2px;
}

[class^='galaxy'] {
  padding: 5px;
  border: 1px solid gray;
  margin: 5px 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

<body>
  <div class="galaxy1"></div>
  <div class="galaxy2"></div>
  <div class="galaxy3"></div>
</body>

Answer 3

尝试类似的东西：

＆＃13;

var star_type_multipler = {
   0: 100,
   1: 25,
   2: 50
}

var $i = 0;
$('.galaxy').each(function() {

  var $galaxy = $(this);
  var iterator = 0;
  var multipler = star_type_multipler[$i++]

  while (iterator <= multipler){
      var xposition = Math.random();
      var yposition = Math.random();
      var star_type = Math.floor((Math.random() * multipler) + 1);
      var position = {
          "x" : $galaxy.width() * xposition,
          "y" : $galaxy.height() * yposition,
      };

      $('<div class="star star-type-' + star_type + '">x</div>').appendTo($galaxy).css({
          "top" : position.y,
          "left" : position.x
      });

      iterator++;
  }
});

＆＃13;

.star { position: fixed; }
body { width: 500px; height: 500px; }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
    <div class="galaxy1 galaxy">&nbsp;</div> 
    <div class="galaxy2 galaxy">&nbsp;</div> 
    <div class="galaxy3 galaxy">&nbsp;</div> 
</body>

＆＃13;

不要忘记将galaxy课程添加到上述每个div

Answer 4

var options = [100, 25, 50];

$("div[class^='galaxy']").each(function(index){
    generateStars($(this), options[index]);
});

function generateStars($galaxy, limit){
  for(var iterator = 0; iterator < limit, iterator++){
     var star_type = Math.floor((Math.random() * limit) + 1);
     $('<div class="star star-type-' + star_type + '"></div>').appendTo($galaxy).css({
        "top" : $galaxy.height() * Math.random(),
        "left" : $galaxy.width() * Math.random()
     });
  }
};

Answer 5

只需传递可变的参数，即可以根据具体情况进行更改。在这里，您可以传递元素id和系数。

此外，在这种情况下，似乎最好使用ID，因为它们是唯一的$('#some-id')。相反，可以将同一个类分配给多个元素，因此jquery将为它们提供所有$('.some-class');

var generateStars = function(elementId, coef){

  var $galaxy = $(elementId);
  var iterator = 0;

  while (iterator <= coef){
      var xposition = Math.random();
      var yposition = Math.random();
      var star_type = Math.floor((Math.random() * coef) + 1);
      var position = {
          "x" : $galaxy.width() * xposition,
          "y" : $galaxy.height() * yposition,
      };

      $('<div class="star star-type-' + star_type + '"></div>').appendTo($galaxy).css({
          "top" : position.y,
          "left" : position.x
      });

      iterator++;
  }

};

generateStars('#galaxy1', 100);
generateStars('#galaxy2', 50);
generateStars('#galaxy3', 25);

如何将多个JS函数组合成一个函数？

5 个答案:

码

的使用

的变化：

generateStars功能

工作演示