Question

我最近了解了IIFE，并且我试图将它们纳入扫雷游戏中。我知道Module模式以及它如何返回对象。我在我的addMines函数中使用它来返回一个数组。我想用我的distanceToMine功能做类似的事情。我的目标是返回一个显示每个矿井距离的对象 - 我可以通过其他功能访问的对象。我遇到的问题（我认为）与使用Jquery的.each函数有关。我无法访问我在.each函数中使用的任何代码。

我想到的一个可能的解决方案可能是将.each替换为for循环，但后来我很难访问我需要访问的数据属性（var thisCell）。在第130行，我是console.log（）我想要返回的对象。

在第130行返回名为obj的对象的最佳方法是什么，以便我可以在函数外部访问它？是否仍然可以使用.each函数并访问其中的代码？如果是这样，怎么样？

＆＃13;

$(document).ready(function(){
makeGrid();
//addMines();
detectBombs();
distanceToMine();
})

var makeGrid  = (function () {
    return function () {
      var row = 9;
      for (var i=0;i<row;i++){
        $(".divTableBody").append("<div class='divTableRow'></div>") }
      for (i=0;i<row;i++){
        $(".divTableRow").append("<div class='divTableCell'></div>") }
        $(".divTableCell").each( function(i) {
              $(this).attr('data', (i+1))
            //  $(this).append(i+1)
            });
    };
})();

var addMines = (function () {

var mineArray = [];
for (var i = 1; i < 82;i++) {
mineArray.push(i)
}

    return {
      shuffle: function (array) {

    var currentIndex = array.length, temporaryValue, randomIndex;

    while (0 !== currentIndex) {

      randomIndex = Math.floor(Math.random() * currentIndex);
      currentIndex -= 1;

      temporaryValue = array[currentIndex];
      array[currentIndex] = array[randomIndex];
      array[randomIndex] = temporaryValue;
    }

    return array;
  },

  get: function (){
  addMines.shuffle(mineArray);
  mineArray = mineArray.splice(1,10)
    return mineArray
  }

    };
})();

var mineArray = addMines.get()

var detectBombs  = (function () {
    return function () {
    //  var mineArray = addMines.get()
      console.log(mineArray.sort())

      $(".divTableCell").on("click", function(){
        //console.log($(this).attr("data"))
        for (var i=0;i<mineArray.length;i++) {
          if ( $(this).attr("data") == mineArray[i] ) {
            for (var j = 0;j<82;j++) {
              $('*[data="' + mineArray[j] + '"]').html('<i class="fa fa-bomb" aria-hidden="true"></i>')
              .css("background-color", "white" )
              $('*[data="' + j + '"]').css("background-color", "white" )
             }
          }
         }
      })
    };
})();



var distanceToMine  = (function () {
    return function () {


//The following code to find matching array values was taken from this answer:
//https://stackoverflow.com/questions/12433604/how-can-i-find-matching-values-in-two-arrays

      Array.prototype.diff = function(arr2) {
          var ret = [];
          this.sort();
          arr2.sort();
          for(var i = 0; i < this.length; i += 1) {
              if(arr2.indexOf( this[i] ) > -1){
                  ret.push( this[i] );
              }
          }
          return ret;
      };

      var arr = [];

      $(".divTableCell").each( function(i) {

        var thisCell =  parseInt($(this).attr("data"));
        var up = (thisCell - 9);
        var right = (thisCell + 1);
        var down = (thisCell + 9);
        var left = (thisCell - 1);
        var diagonalRightUp = (thisCell - 8);
        var diagonalRightDown = (thisCell + 10);
        var diagonalLeftUp = (thisCell - 10);
        var diagonalLeftDown = (thisCell + 8);
        var direction = [up,right,down,left,diagonalRightUp,diagonalRightDown,diagonalLeftUp,diagonalLeftDown];


        var adjacentNumbers = direction.filter(function(num){
            return num > 0 && num <= 81
        })
           var mineDistances = mineArray.diff(adjacentNumbers)

          arr.push(mineDistances.length)

          });
          //https://stackoverflow.com/questions/4215737/convert-array-to-object

          var obj = arr.reduce(function(acc, cur, i) {
            acc[i] = cur;
            return acc;
          }, {});

          console.log(obj)



      };
})();

＆＃13;

.divTable{
	display: table;
	width: 50%;
  padding: 50px;
}
.divTableRow {
	display: table-row;
}
.divTableHeading {
	background-color: #EEE;
	display: table-header-group;
}
.divTableCell, .divTableHead {
	border: 1px solid #999999;
	display: table-cell;
	padding: 20px 20px;
  vertical-align: top;
  box-shadow: 1px 1px 1px;
  background-color: grey;
  border-radius: 5px;
}


.divTableBody {
	display: table-row-group;
}

.open {
	background-color: white;
}

＆＃13;

<!DOCTYPE html>

<html lang="en">

<head>

  <title>MineSweeper</title>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

  <link rel="stylesheet" href="style.css">

  <script type="text/javascript" src="script.js"></script>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script src="https://use.fontawesome.com/eeb147990f.js"></script>


</head>

<body>

  <div class="container">

    <center>
      <h1>Minesweeper</h1>

      <div id="container">

        <div class="divTable">
            <div class="divTableBody">

            </div>
          </div>


      </div>
    </center>

  </div>

</body>

</html>

＆＃13;

如何访问IIFE中的对象？

0 个答案: