如何改进我的 JavaScript 代码？答案

【问题标题】：How to improve my JavaScript code?如何改进我的 JavaScript 代码？
【发布时间】：2016-10-23 00:18:33
【问题描述】：

我编写了以下代码来生成带有随机数的表格，并想问是否有任何方法可以优化/增强/模块化 JavaScript 代码，尤其是 addColumn 和 addRow 函数。

这是 HTML 代码：

<body  onload="initlization()">
<form>
<input type="button" class="button" value="Add Row" onclick="addRow()" />
<input type="button" class="button" value="Delete Row" onclick="deleteRow()" />
<input type="button" class="button" value="Add column" onclick="addColumn()" />
<input type="button" class="button" value="delete column" onclick="deleteColumn()" />    
</form>
<table>
<tr>
    <td></td> 
    <td> </td> 
</tr>
<tr> 
    <td> </td>
    <td> </td>
 </tr>
</table>
</body>

这是 JavaScript 代码：

var blocks;
var myTable;
var nums = [];

function initlization() {
  myTable = document.getElementsByTagName("table")[0];
  shuffle(); //need to shuffle initially 
}

function shuffle() {
  //need to get all tds each time the table is shuffled
  blocks = document.getElementsByTagName("td");
  tableSize = blocks.length;
  shuffledArray(0, tableSize);
  for (var i = 0; i < tableSize; i++) {
    blocks[i].innerHTML = '<span draggable="true">' + nums[i] + '</span>';
  }
}

function addColumn() {
  // Getting current table size by multiplying number of rows by number of   columns
  tableSize = (myTable.rows.length) * (myTable.rows[0].cells.length);
  // Getting new table size by adding the number of rows
  newTableSize = tableSize + (myTable.rows.length);
  shuffledArray(tableSize, newTableSize);
  index = Math.floor(Math.random() * (myTable.rows[0].cells.length) + 1);
  for (var i = 0; i < myTable.rows.length; i++) {
    myCell = myTable.rows[i].insertCell(index);
    myCell.innerHTML = '<span draggable="true">' + nums[i] + '</span>';
  }
}

function addRow() {
  tableSize = (myTable.rows.length) * (myTable.rows[0].cells.length);
  newTableSize = (myTable.rows.length + 1) * (myTable.rows[0].cells.length);
  shuffledArray(tableSize, newTableSize);
  index = Math.floor(Math.random() * (myTable.rows.length) + 1);
  var row = myTable.insertRow(index);
  for (var i = 0; i < myTable.rows[0].cells.length; i++) {
    var myCell = row.insertCell(i);
    myCell.innerHTML = '<span draggable="true">' + nums[i] + '</span>';

  }
}

function deleteColumn() {
  var allRows = myTable.rows;
  if (allRows[0].cells.length > 2) {
    for (var i = 0; i < allRows.length; i++) {
      allRows[i].deleteCell(-1);
    }
    shuffle();
  }
}

function deleteRow() {
  if (myTable.rows.length > 2) {
    myTable.deleteRow(0);
    shuffle();
  }
}
function shuffledArray( from,  to) {
    for(i=from; i<to;i++){
        nums[i-from]=i;
        }
    for (var i = to-from; i; i--) {
        j= Math.floor(Math.random() *i);

        [nums[i - 1], nums[j]] = [nums[j], nums[i - 1]];
        }
}

【问题讨论】：

可能更适合codereview.stackexchange.com
尝试在第一行添加initlization();，它对我有用
每当我在标题中看到“紧急”时，我都会投反对票。经过几年在这里每天看到它，我仍然不明白为什么人们认为这是一种合适的方式来称呼志愿者。

标签： javascript optimization

【解决方案1】：

下面的测试代码

<!DOCTYPE html>
<html>
<head><title>Random Table</title></head>
<body>
<form>
<input type="button" class="button" value="Add Row" onclick="addRow()" />
<input type="button" class="button" value="Delete Row" onclick="deleteRow()" />
<input type="button" class="button" value="Add column" onclick="addColumn()" />
<input type="button" class="button" value="delete column" onclick="deleteColumn()" />    
</form>
<table>
<tr>
    <td></td> 
    <td> </td> 
</tr>
<tr> 
    <td> </td>
    <td> </td>
 </tr>
</table>
<script>
var blocks;
var myTable = document.getElementsByTagName("table")[0];
var nums=[];
initlization();
function initlization(){
    myTable = document.getElementsByTagName("table")[0];
    shuffle();//need to shuffle initially 
}

function shuffle(){
    //need to get all tds each time the table is shuffled
    blocks=document.getElementsByTagName("td");
    tableSize=blocks.length;
    shuffledArray(0,tableSize);
    for(var i=0;i<tableSize;i++){
            blocks[i].innerHTML='<span draggable="true">'+ nums[i] +'</span>';
    } 
  }

function addColumn()
{
    // Getting current table size by multiplying number of rows by number of   columns
    tableSize=(myTable.rows.length)*(myTable.rows[0].cells.length);
    // Getting new table size by adding the number of rows
    newTableSize=tableSize+(myTable.rows.length);
    shuffledArray(tableSize,newTableSize);
    index= Math.floor(Math.random()*(myTable.rows[0].cells.length)+1);
    for (var i=0; i<myTable.rows.length; i++) {
        myCell=myTable.rows[i].insertCell(index);
        myCell.innerHTML= '<span draggable="true">'+ nums[i] +'</span>';
    }
shuffle();
}

function addRow() {
    tableSize=(myTable.rows.length)*(myTable.rows[0].cells.length);
    newTableSize=(myTable.rows.length+1)*(myTable.rows[0].cells.length);
    shuffledArray(tableSize,newTableSize);
    index= Math.floor(Math.random()*(myTable.rows.length)+1);
    var row = myTable.insertRow(index);
    for (var i=0; i<myTable.rows[0].cells.length; i++) {
        var myCell=row.insertCell(i);
        myCell.innerHTML= '<span draggable="true">'+ nums[i] +'</span>';


    }
shuffle();
}

function deleteColumn()
{
    var allRows = myTable.rows;
    if (allRows[0].cells.length > 2) {
    for (var i=0; i<allRows.length; i++) {
            allRows[i].deleteCell(-1);
        }
    shuffle();
    }  
}
function deleteRow(){ 
    if(myTable.rows.length>2){
    myTable.deleteRow(0);
    shuffle();   
}
}

function shuffledArray( from,  to) {
for(i=from; i<to;i++){
    nums[i-from]=i;
}
for (var i = nums.length; i; i--) {
    j= Math.floor(Math.random() *i);

    [nums[i - 1], nums[j]] = [nums[j], nums[i - 1]];
}
}
</script>
</body>
</html>

【讨论】：