在javascript中使用正則表達式來管理源文件

Question

我正在編寫使用JavaScript編碼的第一步，並使用名爲Three.js的webgl庫進行播放。

看到一些教程並做了一些實驗後，我終於做到了這一點：https://dl.dropboxusercontent.com/u/15814455/Monogram.html。

正如你可以在我的代碼中看到的，該對象隨機反映了一組6個圖像，我在一個包含13個圖像的文件夾中。

var numberOfImages = 13, images = []; 
    for (var i = 1; i <= numberOfImages; i++) { 
     images.push('sources/instagram/image' + i + ".jpg"); 
    } 

    var urls = images.sort(function(){return .6 - Math.random()}).slice(0,6); 
    var reflectionCube = THREE.ImageUtils.loadTextureCube(urls); 
    reflectionCube.format = THREE.RGBFormat; 

的事情是，我每一個上傳照片的Instagram時，它將被保存在該文件夾名爲Instagram的。

現在我的問題是，如果我上傳例如10個圖像到文件夾我必須更改此行代碼：var numberOfImages = 13到此var numberOfImages = 23。

所以我正在尋找一種方法來修改我的代碼，而不是設置圖像數量的限制。所以我可以在文件夾中上傳圖片，然後自動在我的3D對象中看到它們。

我一直在閱讀互聯網，我發現我可以在我的代碼中使用正則表達式來解決這個問題。

我想知道如果使用正則表達式是一個真正的解決方案。學習正則表達式來解決這個問題值得嗎？

你有什麼建議嗎？還有另一個解決方案？也許它很簡單，我應該寫一段不同的代碼，但如果它更復雜一些，我應該學習一些語言，我想學習正確的語言。

Answer 1

首先，如果您打算用幾乎任何語言編程，那麼知道正則表達式以及如何/何時使用它們是值得的，因此學習它們會很有用。

如果這是您控制服務器的客戶端/服務器問題，解決此問題的常用方法是服務器將掃描服務器上的文件系統，並告知客戶端要準備多少圖像。

如果您必須完全在客戶端上解決這個問題，那麼您無法直接從客戶端掃描文件系統，但您可以請求增加文件編號，並且您可以看到（異步）圖片。這不是特別容易編碼，因爲響應將是異步的，但可以完成。

這裏的預加載圖像，並找出一個方案，他們停止了成功預壓：

function preloadImages(srcs, callback) { 
    var img, imgs = []; 
    var remaining = srcs.length; 
    var failed = []; 

    function checkDone() { 
     --remaining; 
     if (remaining <= 0) { 
      callback(failed); 
     } 
    } 

    for (var i = 0; i < srcs.length; i++) { 
     img = new Image(); 
     img.onload = checkDone; 
     img.onerror = img.onabort = function() { 
      failed.push(this.src); 
      checkDone(); 
     } 
     img.src = srcs[i]; 
     imgs.push(img); 
    } 
} 

var maxNumberOfImages = 30, images = []; 
for (var i = 1; i <= maxNumberOfImages; i++) { 
    images.push('sources/instagram/image' + i + ".jpg"); 
} 

preloadImges(images, function(failed) { 
    var regex = /(\d+)\.jpg$/; 
    var nums = failed.map(function(item) { 
     var matches = item.match(regex); 
     return parseInt(matches[1], 10); 
    }).sort(); 
    var numImages = nums[0]; 
    // now you know how many good images there are 
    // put your code here to use that knowledge 
}); 

注意：這使用正則表達式來解析圖像編號URL的。

這將是可能的代碼沒有預設的限制，但它會更多的工作。您可能一次請求圖片10，如果您沒有收到任何錯誤，則請求下一個10的塊，直到您找到第一個失敗爲止。