Загрузчик фалов в 30 строк (dd+multi+del)
 

http://learn.javascript.ru/play/qXwXEb или http://jsfiddle.net/2HKCX/5/

В общем поспорили мы с nerv, можно ли написать нормальный загрузчик файлов в 30 строк, с drug&drop, % загрузки, удалением из списка выбранных файлов. В общем человеческий.

Я считаю, что я вполне себе справился, nerv насколько я понял считает что спор я проиграл и нужно использовать обязательно доп. либу аля ангуляр обязательно.

Небольшая оговорка: в первоначальном споре должна была еще быть загрузка для старых ослов в iframe. Я не стал ее пихать ибо не продакшн и по сути это к спору имеет мало отношения, но в случае чего можно выровнять листнеры и впихнуть костыль в код.

В общем-то зашли мы в конце концов в тупик, nerv считает код не читабельным, я думаю что 30 строк помещающихся на экране вполне можно считать. Также он считает что у меня обфускация, а я считаю что это удачный сахар.

Если я в чем-то ошибся - nerv поправь меня.

Что скажите? Я думаю такой код с небольшими допилками вполне себе может существовать.

Ну и сам код(js only):

var d=document, q='querySelector', on='addEventListener', f=d[q]('#f'), list=d[q]('#list'), upload=d[q]('#upload'), files=[], form = new FormData(), request = new XMLHttpRequest();

    function add (f) {
        for(var i = 0; i < f.length; i += 1) {
            files.push(f[i]);
            list.insertAdjacentHTML('beforeend', '<div class="item">'+f[i].name+', size: '+f[i].size+'<div class="del" data-i="'+i+'">delete</div></div>');
        }
    }
    f[on]('change', function(e) { add(e.target.files); f.value = ''; });
    list[on]('click', function (e) {
        var t = e.target;
        if (t.className == 'del') {
            files.splice(t.getAttribute('data-i'),1);
            t.parentNode.parentNode.removeChild(t.parentNode);
        }
    });
    function drag (e) {  e.stopPropagation();  e.preventDefault();}
    list[on]('dragenter', drag, false);
    list[on]('dragover', drag, false);
    list[on]('drop', function (e) { add(e.dataTransfer.files); f.value = ''; drag(e); }, false);

    upload[on]('click', function () {
        for(var i = 0; i < files.length; i += 1) {
            form.append("photo[]", files[i], files[i].name);
        }
        request.upload[on]('progress', function(e){ (e.lengthComputable) ? list.innerHTML = 'загружено: ' + Math.floor((e.loaded * 100) / e.total) + '%' : 'файлы загружены'}, false);
        request.onload = function () { list.innerHTML = 'файлы загружены'; }
        request.open("POST", "./post.php", true);
        request.send(form);
    });

нерв считает твое решение:
- не гибким
- неудобным в плане кастомизации, коллбеков и т.п.
- частично обсфуцированным

А какую либу кому использовать и использовать ли вообще личное дело каждого.

Моя позиция в том, что нормальный загрузчик 100+ строк минимум. И вряд ли он будет сахарный, если в нем будет только 100 строк :)

Т.е. твое решение придется постоянно исправлять / переписывать / допиливать, в моем только менять настройки.

Если уж зашла речь, мое решение. Кстати, тоже не оч сахарное )

это сахар
$ в jquery тоже сахар.

По поводу гибкости я не очень понял. Но в общем мы зашли в тупик из-за того, кто что считает сахаром, а что обфускацией.

d[q], f[on], l - это обфускация а не сахар.
Если вырвать этот код из контекста, то совершенно непонятно что это за объекты, в отличии от общепринятых document.querySelector, someElement.addEventListener

Задавать короткие, нечитаемые, контекстно-зависимые, только вам понятные(пока вы пишите код) алиасы для стандартных объектов -усложняет поддержку и разработку проекта как другими людьми, так и вами через полгода, и потому не может быть сахаром

Gvozd,
Обфускация это запутывание кода, а здесь сокращения. По сути я мог не сокращать, но так код хорошо помещается в этот форум, в общем считай кроссмониторный.

d[q] надо заменить на q так будет сахарнее.
on - тоже международное навешивание событий.

Код написанный на спор, не идет ни в какую поддержку. (теперь идет см. ниже)

По твоим словам все разработчики всех либ тупые люди, раз делают именно это.

Ты наверное вместо id пишешь identificator.
Ты еще начни меня убеждать, что у тебя никогда небыло желания писать вместо document - d, а вместо document.querySelector - q, а вместо console.log - log.

Такой стиль кода пришел именно во время написания этого скрипта и я начинаю думать, что он не просто сокращения, а очень даже упрощает написание и чтение кода.

Тогда у меня для тебя плохие новости ... Я тебе по первой строке скажу что FormData отправляет форму на сервер. Свойство у нее такое! на сервер отправлять данные.

и я, и я, и я того же мнения :)
а во время написания другого скрипта, придет другой стиль :)

не знаю почему тебе все время мерещится, что тебя кто-то в чем то убеждает. Люди просто высказывают свое мнение :)

Кстати, тему ты создал не в том разделе. Надо было в оффтопе создавать.

Сей скрипт кому надо пригодится может!

Как и другие имею мнение я. ;)

Сидел я думал и понял мысль важную!

Я создал микробиблиотеку, только добавить еще сахара, сокращений и удобства.

И зваться сея библиотека будет corn.js

https://github.com/seolog/corn.js

Библиотека предназначена в первую очередь для работы в консоли. Но также может быть использована там, где нет смысла тянуть даже zepto.

Будет добавлен(возможно опционально) метод для работы с массивом(списком элементов) и возможно ajax. На этом пожалуй все!

:)

Так как кроме уже известных мне стандартных имен для стандартных объектов и методов, мне нужно держать в голове еще и ваши придуманные "сокращения"(а при анализе другой либы, они будут называться по другому), которым вы еще и не дали нормальных имен - это запутывание кода для всех, кроме вас.

Шта?
Длина строки более 80 символов не может считаться кроссмониторной

Не надо перевирать.
Я про умственные способности ничьи не говорил.
Более того подобная практика имеет свои некоторые плюсы, и область применения.
Я лишь утверждаю, что такие вещи усложняют разработку другим людям, и потому не может считаться сахаром.

Я работал с jQuery, и видел подобные алиасы.
И насколько я могу судить из структуры и ориентированности проекта, это сделано не для того чтобы разработчикам было "удобнее" писать код, а для того чтобы полученная либа лучше сжималась обфускатором, ведь core_hasOwn.call( cache, id) жмется лучше, чем вызов cache.hasOwnProperty( id )
Да, для обфускации такие алисы подходят хорошо, но никак не для удобства разработки

Не стоит перегибать палку в крайности, и додумывать за меня.
Нет, я вполне спокойно пишу id, потому что это вполне себе общеизвестный синоним слова identificator, о чем знают википедия, гугло-переводчик, и большинство разработчиков.
Честно - не было.

В таком виде ее никто не будет использовать.
Добавьте лицензию распространения, и копирайты

Я понял тебе очень сложно запомнить 3 буквы и 4 слова.

Да, да очень усложняет разработку. Либа созданная по сути для консоли, очень очень усложняет жизнь другим придуманным людям. Раздвоение личности?

Gvozd,
Что ты думаешь о том, что в Google Chrome консоли доступен метод $$ который возвращяет NodeList? Он усложняет поддержку кода? Его сложно запомнить? Это жуткий непонятный алиас?

Поэтому я убрал 2 буквы и 1 слово.

Теперь микро либа содержит 1 букву и 3 слова. Разрешаю заменять букву q на любую другую.

Также теперь можно применять forEach к выборке, т.к. q возвращает не NodeList, а массив.

Если вторым аргументом в q идет функция, то это фильтр. Другими словами forEach можно и не применять, а сразу отфильтровать полученный массив. Нельзя фильтровать если e (e.querySelectorAll) не документ, а элемент - другими словами если вторым аргументом в q идет element

q без аргументов возвращает document

Спасибо вам Gvozd за ценный совет. Теперь пользователи либы могут смело копировать лицензию и копирайты в консоль и быть уверены, что используют только лицензионное ПО.

Итак прошло полтора года, я с первого беглого взгляда понимаю что происходит в коде, достаточно посмотреть присвоение переменных.

Вывод: Иногда, не всегда, но иногда, не стоит слушать чужое мнение, особенно если оно стереотипное.

соглачен,
и кстати, лично мне очень понравился этот стиль кода ;)
особенно выделеное

var d=document,
q='querySelector',
on='addEventListener',
*!*
f=d[q]('#f'),
list=d[q]('#list'),
upload=d[q]('#upload'),
*/!*
files=[],
form = new FormData(),
request = new XMLHttpRequest();

удобно же :yes: