如何讓這個JS代碼幹？ while循環

這是我的JS代碼。任務是創建數獨網格（9）。我已經完成了，但是我的代碼顯然不是DRY。我嘗試了很多方法，但最終沒有取得成功。也許有人可以幫助我將這170行代碼轉換爲更專業的東西。提前致謝！如何讓這個JS代碼幹？ while循環

var canvas; 
canvas = openGraphics(); 

var x; 
var y; 
var gap; 
var count; 
x = 20; 
y = 20; 
gap = 25; 
count = 0; 

while(count < 9) { 
    canvas.setStroke(1); 
    canvas.drawRect(x, y, gap, gap);  
    count++; 
    x = 20 + gap * count; 
    canvas.paint(); 
} 

count=0; 
x = 20; 
y = 45; 

while(count < 9) { 
    canvas.setStroke(1); 
    canvas.drawRect(x, y, gap, gap);  
    count++; 
    x = 20 + gap * count; 
    canvas.paint(); 
} 

count=0; 
x = 20; 
y = 70; 

while(count < 9) { 
    canvas.setStroke(1); 
    canvas.drawRect(x, y, gap, gap);  
    count++; 
    x = 20 + gap * count; 
    canvas.paint(); 
} 

count=0; 
x = 20; 
y = 95; 

while(count < 9) { 
    canvas.setStroke(1); 
    canvas.drawRect(x, y, gap, gap);  
    count++; 
    x = 20 + gap * count; 
    canvas.paint(); 
} 

count=0; 
x = 20; 
y = 70; 

while(count < 9) { 
    canvas.setStroke(1); 
    canvas.drawRect(x, y, gap, gap);  
    count++; 
    x = 20 + gap * count; 
    canvas.paint(); 
} 

count=0; 
x = 20; 
y = 95; 

while(count < 9) { 
    canvas.setStroke(1); 
    canvas.drawRect(x, y, gap, gap);  
    count++; 
    x = 20 + gap * count; 
    canvas.paint(); 
} 

count=0; 
x = 20; 
y = 120; 

while(count < 9) { 
    canvas.setStroke(1); 
    canvas.drawRect(x, y, gap, gap);  
    count++; 
    x = 20 + gap * count; 
    canvas.paint(); 
} 

count=0; 
x = 20; 
y = 145; 

while(count < 9) { 
    canvas.setStroke(1); 
    canvas.drawRect(x, y, gap, gap);  
    count++; 
    x = 20 + gap * count; 
    canvas.paint(); 
} 

count=0; 
x = 20; 
y = 170; 

while(count < 9) { 
    canvas.setStroke(1); 
    canvas.drawRect(x, y, gap, gap);  
    count++; 
    x = 20 + gap * count; 
    canvas.paint(); 
} 

count=0; 
x = 20; 
y = 195; 

while(count < 9) { 
    canvas.setStroke(1); 
    canvas.drawRect(x, y, gap, gap);  
    count++; 
    x = 20 + gap * count; 
    canvas.paint(); 
} 

count=0; 
x = 20; 
y = 220; 

while(count < 9) { 
    canvas.setStroke(1); 
    canvas.drawRect(x, y, gap, gap);  
    count++; 
    x = 20 + gap * count; 
    canvas.paint(); 
} 

count=0; 
x = 20; 
y = 20; 
gap = 75; 

while(count < 3) { 
    canvas.setStroke(3); 
    canvas.drawRect(x, y, gap, gap);  
    count++; 
    x = 20 + gap * count; 
    canvas.paint(); 
} 

count=0; 
x = 20; 
y = 95; 
gap = 75; 

while(count < 3) { 
    canvas.setStroke(3); 
    canvas.drawRect(x, y, gap, gap);  
    count++; 
    x = 20 + gap * count; 
    canvas.paint(); 
} 

count=0; 
x = 20; 
y = 170; 
gap = 75; 

while(count < 3) { 
    canvas.setStroke(3); 
    canvas.drawRect(x, y, gap, gap);  
    count++; 
    x = 20 + gap * count; 
    canvas.paint(); 
}

來源

2016-04-01 Nikita Ribakovs

你可能會[codereview.stackexchange.com]（http ：//codereview.stackexchange.com） – Martin

DRY =不重複自己，不重複類似代碼的編碼原則。嗯，有趣！ –

您是否看到任何重複代碼模式？有沒有任何情況下你複製粘貼的代碼可能只是一些小小的調整？爲它寫一個函數。簡而言之，這是乾的。此外，這不會讓它更幹，但它會使它更習慣。用''for'循環替換'while循環。]（https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for） –

function whileCount9(){ 
    while(count < 9) { 
     canvas.setStroke(1); 
     canvas.drawRect(x, y, gap, gap);  
     count++; 
     x = 20 + gap * count; 
     canvas.paint(); 
    } 
} 

//use whileCount9(); anywhere you would normally place the whole while loop.

我也注意到你有3，所以......

function whileCountLessThan(num){ 
    while(count < num) { 
     canvas.setStroke(1); 
     canvas.drawRect(x, y, gap, gap);  
     count++; 
     x = 20 + gap * count; 
     canvas.paint(); 
    } 
}

我們像whileCountLessThan(3);

來源

2016-04-01 20:45:12 Observer

@smerny我沒有看到讓它更乾燥的方法。是的，變量名稱正在重複使用，但是每次的值都是不同的和唯一的，除非有一個模式來說明我們錯過了它們的變化。 – Observer

只是一個觀察，count總是從0開始，所以只需傳入'num'就可以做更多的事情，並且只爲'（i = 0; i smerny

更短，更表現：

var canvas; 
canvas = openGraphics(); 

var boards = [ 
    { x: 20, y: 20, gap: 25, num: 9 }, 
    { x: 20, y: 45, gap: 25, num: 9 }, 
    { x: 20, y: 70, gap: 25, num: 9 }, 
    { x: 20, y: 95, gap: 25, num: 9 }, 
    { x: 20, y: 70, gap: 25, num: 9 }, 
    { x: 20, y: 95, gap: 25, num: 9 }, 
    { x: 20, y: 120, gap: 25, num: 9 }, 
    { x: 20, y: 145, gap: 25, num: 9 }, 
    { x: 20, y: 170, gap: 25, num: 9 }, 
    { x: 20, y: 195, gap: 25, num: 9 }, 

    { x: 20, y: 20, gap: 75, num: 3 }, 
    { x: 20, y: 95, gap: 75, num: 3 }, 
    { x: 20, y: 170, gap: 75, num: 3 } 
] 

function boardCreator(obj){ 
    var count = 0; 
    while(count < obj.num) { 
    canvas.setStroke(1); 
    canvas.drawRect(obj.x, obj.y, obj.gap, obj.gap);  
    count++; 
    obj.x = 20 + obj.gap * count; 
    canvas.paint(); 
    } 
} 

for (i = 0; i < boards.length; i++) { 
    boardCreator(boards[i]) 
}

來源

2016-04-01 20:58:02 tyler

你知道，你真的應該只是爲他們改寫某人的作業。它從長遠來看並不能幫助他們，特別是如果你不解釋*爲什麼*你的代碼有效。顯然，他們對JS基礎知識沒有超強的把握，所以他們不太可能明白這是如何工作的，爲什麼它很好。 –

@MikeC人們在軟件中提到「模式」，因爲它有很多人正在看到更好的方式來做事。如果他們瞭解自己的代碼，這應該不是什麼大的飛躍。我看到你在上面嘗試了蘇格拉底式的方法，但那不是一個人如何學習模式。 – tyler

這是兩個一點點。我完全承認看到代碼對學習有很大的幫助。我通過閱讀代碼學到了很多東西。但是，直到你學會了基礎知識之後，你才能夠看到大局。鑑於他們甚至不知道如何將代碼分解爲函數，或者'for'循環是正確的工具而不是'while'，我真的懷疑他們能夠收集背後的高層設計思想你的代碼沒有一些幫助。此外，一個人可以/應該學習模式作爲直覺的自然延伸。不僅僅是被複制的東西。 –

如何讓這個JS代碼幹？ while循環

回答

相關問題