Обработка файлов Javascript

Question

Я пытаюсь загрузить текстовый файл на стороне клиента с помощью перетаскивания. Я смотрел на пример кода и учебники здесь: http://www.thebuzzmedia.com/html5-drag-and-drop-and-file-api-tutorial/ и здесь http://blog.teamtreehouse.com/reading-files-using-the-html5-filereader-api

Все правильно работает вплоть до события reader.onload.

function handleFiles(files) 
{ 
var file = files[0]; 
var reader = new FileReader(); 

//create function to deal with the file once it is loaded 
reader.onload = handleLoadedFile(); 

// begin the read operation 
reader.readAsText(file); 

} 

function handleLoadedFile(event) 
{ 
alert(event.target.result); 
} 

Я думал, что текст должен быть в event.target.result, но это не так! Предупреждение не срабатывает.

Answer 1

Вместо

//create function to deal with the file once it is loaded 
reader.onload = handleLoadedFile(); 

вы должны написать

//store reference to function to deal with the file once it is loaded 
reader.onload = handleLoadedFile; 

Объяснение:

При написании eventhandler = afunction() в EventHandler сохраняет результат функции, в вашем случае это undefined, так как ваш handleLoadedFile ничего не возвращает.

В случае eventhandler = afunction функция не оценивается во время установки обработчика. Сохраняется только ссылка на функцию. Во время срабатывания события хранимая ссылка будет оцениваться оператором () (вероятно, это не совсем правильное имя, но вы, по крайней мере, можете думать о () beeing для оператора).

BTW это ошибка, которую делают опытные программисты JavaScript довольно часто. И есть случаи, когда это правильно, например .:

reader.onload = createEventListener('success'); 
reader.onerror = createEventListener('error'); 

function createEventListener(type) { 
    return function(event) { 
     var content; 
     if (type === 'success') { 
      content = processMyFile(event.target.result); 
     } else { 
      content = 'An Error occurred. Please try another file.'; 
     } 
     $('#content').html(content); 
    } 
} 

Таким образом, вы можете видеть, что это не является неправильным во всех случаях не использовать () при настройке обработчика событий. Надеюсь, я не слишком вас смутил, так как в приведенной выше конструкции содержится мощная языковая функция JavaScript (а именно Closures), которая требует некоторого времени, чтобы быть понятным.

FYI: Есть другие способы, чтобы вызвать функцию, когда у вас есть ссылка на него: call и apply просто избежать понижающих голосов от гуру ;-) применение JavaScript

Дополнительной подсказки: Пожалуйста, не используйте alert() для отлаживая ваш код. При тестировании с помощью современных браузеров (Internet Explorer < 11 следует избегать), у вас есть намного лучший способ отслеживать код: console.log() и другие методы console. Вам понравится использовать его, потому что вам не нужно нажимать кнопку «ОК», и вы не изменяете поведение своих асинхронных операций так резко, как с alert. Прочитайте Mastering Console Logging и поиграйте с ним - вы никогда не оглядитесь назад!