Использование регулярных выражений в javascript для управления исходными файлами

Question

Я делаю свои первые шаги по кодированию с помощью JavaScript, а также играю с библиотекой webgl с именем Three.js.

После просмотра некоторых уроков и проведения некоторых экспериментов я, наконец, сделал следующее: 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 = 13var 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, пока не найдете первый сбой.