LINUX.ORG.RU

Делаю web-приложение. ЧЯДНТ?


0

1

Делаю web-приложение. Должно кешироваться в мобильном телефоне (если нет сети). Браузер — iPhone, Android, Firefox. Возможно IE который в windows mobile-7. Ещё возможно другие, старые, телефоны, ну там как повезёт.

Общий принцип работы такой: вначале загружается index.html, в котором надпись мол «ваш браузер устарел blablabla». И внутри index.html имеется <script> с ссылкой на javascript код собственно, в котором программа. Программа отображает несколько окон/экранов пользователю, где элементы управления. Ну тут всё понятно. Загрузка экрана ведётся из отдельного HTML-файла — шаблона через XMLHttpRequest(). После загрузки отдельные поля в шаблоне (находятся через id) заменяются как нужно, либо, если это списки, размножаются с отрыванием id и заполнением данными. Ну а далее пользователь жмёт кнопки. Загрузка делается так, что когда загрузили, то делается просто document.documentElement.innerHTML=req.responseText.

В момент загрузки шаблона показывается элемент (DOM node) с надписью «please wait, loaging...» Если загрузка неуспешна, то «load error: blablabla». Также есть window.onerror который тоже показывает текст ошибки пользователю. Всё это делается так: в index.html имеется три вставки <script id=«error_или_loading» language=«text»>ШАБЛОН В HTML</script>. Эти три вставки сразу после запуска JS извлекаются по id и копируются в переменные. Потом при загрузке, при ошибках они просто в document.documentElement.innerHTML=variable вставляются (тоже как шаблон, в них тоже по id заменяются надписи если надо). Принципиально, что эти вставки идут до <script> с javascript (иначе он их не найдёт, ибо запустится раньше). А когда javascript загрузился, то он проверяет наличие XMLHttpRequest(), если ок, то после onload загружает сам уже шаблон с заглавной страницей.

Для хранения постоянных данных используется localStorage. Видимо, следует использовать cookies для старых браузеров.

Во-первых имею проблему в андроиде (версии разные... не существенно, 4.1 например). Иногда загружается шаблон первой страницы (200), она отображается, потом onreadystatechange вызывается ещё раз с кодом status 0. Бывает сразу 0. Если сделать запрос синхронным, то NETWORK_ERR: XMLHttpRequest Exception 101. А иногда работает. Чертовщина. Причём не работает когда есть <html manifest=«cache.manifest» lang=«ru»>. Если cache.manifest убрать, то всё ок.

Во-вторых перезагрузить страницу после изменения тяжело. Особенно в андроиде. cache.manifest каждый раз меняю. Без толку. Непонятные пляски с бубном и после 10-го раза перезагружается. На десктопе в firefox всё ок. В chrome тоже. Вроде, помогает, открытие манифеста вручную в браузере (андроида), не понял.

Во-третьих в андроиде не работает такое: <audio autoplay=«autoplay»><source type=«audio/wav» src=«sounds/warn.wav» /></audio> И из javascript, без autoplay, тоже.

Что я могу делать принципиально неправильно? Ниже код загрузки:

function load(page, callback) {
        log("loading '"+page+"'");
        document.documentElement.innerHTML=Loading;

        var statechange=function() {
                log("req:", page, "state: ", req.readyState);
                switch(req.readyState) {
                case 1:
                        document.getElementById("loading1").style.display="inline";
                        break;
                case 2:
                        document.getElementById("loading2").style.display="inline";
                        break;
                case 3:
                        document.getElementById("loading3").style.display="inline";
                        break;
                case 4:
                        clearTimeout(timeout);
                        log("req status: ", req.status);
                        switch (req.status) {
                        case 200:
                                document.documentElement.innerHTML=req.responseText;
                                //log("calling: ", callback/*.toString().match(/function ([^\(]+)/)[1]*/);
                                callback();
                                break;
                        case 0:
                                document.documentElement.innerHTML=LoadFail;
                                document.getElementById("errcode").innerHTML="XMLHttpRequest() failed: "+req.responseText;
                                break;
                        default:
                                document.documentElement.innerHTML=LoadFail;
                                document.getElementById("errcode").innerHTML=req.status;
                        }
                        break;
                default:
                        document.getElementById("loading1").style.display="none";
                        document.getElementById("loading2").style.display="none";
                        document.getElementById("loading3").style.display="none";
                }
        };

        var timeout=setTimeout(function () {
                document.documentElement.innerHTML=LoadFail;
                document.getElementById("errcode").innerHTML="Timeout!";
        }, 8000);

        try {
                var req=new XMLHttpRequest();
                req.onreadystatechange=statechange;
                req.open("GET", page, true);
                req.send(null);
        }
        catch (err) {
                document.documentElement.innerHTML=LoadFail;
                document.getElementById("errcode").innerHTML=err;
                return;
        }
}

Используется так: load("pattern.html", function() { что сделать после загрузки.. });


Не, ну так не делают , "... загружается index.html, в котором надпись мол «ваш браузер устарел blablabla». " Ты еще выдай - «только лохи ходят с таким телефоном ».

Надо спросить «Желаете чтобы Ваш браузер стал еще более совершенным ? »

ilovewindows ★★★★★ ()

принципиально неправильно тут все, но я не слишком с мобилками, потому подожди кого-то более адекватного

trashymichael ★★★ ()
Ответ на: комментарий от trashymichael

«Всё неправильно» — а что именно, например? И причём тут мобилки? Только не надо про jQuery и т.п. Никаких сторонних библиотек.

fk0 ()
Ответ на: комментарий от fk0

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

trashymichael ★★★ ()
Ответ на: комментарий от trashymichael

Ага. Только только потом выясняется, что одно не работает тут, другое не работает там, третье ещё где-то, сам в мегабайтах стороннего кода не разберёшься. А каких-то волшебных возможностей от него и нет. И да, ещё over GPRS, без 3G, bloatware загружается часами.

fk0 ()
Ответ на: комментарий от fk0

jQuery как раз таки работает везде, потому что его куча разработчиков использует. А твой велосипед везде работать не будет. А когда начнёт - у тебя получится такой же jQuery, только глючный, тормозной и здоровый.

Legioner ★★★★★ ()
Ответ на: комментарий от Legioner

есть еще куча всего, тот же zepto

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

trashymichael ★★★ ()
Ответ на: комментарий от trashymichael

В случае jQuery ошибка скорее в твоем коде, а не в библиотеке.

Kadi ()
Ответ на: комментарий от trashymichael

это ж надо сначала отладить всю библиотеку. ведь ошибка скорей всего в ней.

читаю

Kadi ()
Ответ на: комментарий от Kadi

Ничего принципиального, что самому не сделать, в jQuery нет. Скорей потому, что мне несколько другое нужно и/или я не знаю как использовать остальные возможности jQuery.

Нужны скорей какая-то отладка в браузере средствами самой программы, кросс-браузерный механизм обработки ошибок, обход ошибок/особенностей разных браузеров в разных ситуациях. XmlHttpRequest возвращает 0 на Android если документ уже в кеше (вместо 200). Это ж надо было догадаться. Или не работает console.log, или window.onerror. Или getElementsByTag не возвращает ничего кроме того, что в body. Какая библиотека такие тонкости реализует? А ещё в IE вообще ничего не работает, даже for...in...

Но это одна сторона медали. Другая — архитектура ПО. Как в целом делать, об этом здесь не сказали ни слова. Во-первых мой подход действительно косячный. Следовало бы все html, кроме первого index.html (где «ваш браузер устарел» и javascript), объединить в один большой файл. И не перезагружать каждый раз документ целиком. А поделить его на несколько div и делать visible нужный в нужный момент времени. Тогда во-первых можно сделать постоянно видимые элементы (для навигации между разделами, например). Во-вторых уходит «please wait loading...» и вообще подзагрузка на ходу. Загружается один раз. Ещё уходит проблема с таймерами (страницу перезагрузил, а потом что-то связанное с исчезнувшими элементами сработало). Ну с шаблонами, понятно, нужно тогда неразрушающим методом работать. Вот библиотка шаблонов была бы полезна, но я не знаю такой. Чтоб элементы внутри div каким-то простым способом из объекта, например, заполнять. Без ручного перебора. Потом, какой-то механизм MVC для всех GUI-элементов. То что даёт HTML далеко от идеала во-первых, во-вторых хотелось бы делать свои кнопки, например, с графикой. Или композитные, состоящие из нескольких элементов, виджеты. Например, поле ввода с выпадающим списком по кнопке. Да и в целом как программировать на javascript вопрос. Во-первых нужно держать в голове, что программа исключительно событийно-управляемая. Во-вторых архитектура в целом, непонятно как строить. namespaces нет, классов нет. Есть объекты связанные с функциями, в голове это как-то плохо укладывается. Где вообще внятно можно про это почитать? В интернетах плохие пересказы в стиле фактологии how-to, как это работает же умалчивается. Ни функциональный стиль, ни ООП. Скопировать объект целая проблема. Видимо вообще, следует поделить программу на объекты-классы для отдельных элементов GUI. Вопрос в методике программирования. А уж jQuery там или что, дело десятое.

fk0 ()
Ответ на: комментарий от fk0

Нужны скорей какая-то отладка в браузере средствами самой программы, кросс-браузерный механизм обработки ошибок, обход ошибок/особенностей разных браузеров в разных ситуациях. XmlHttpRequest возвращает 0 на Android если документ уже в кеше (вместо 200). Это ж надо было догадаться. Или не работает console.log, или window.onerror. Или getElementsByTag не возвращает ничего кроме того, что в body. Какая библиотека такие тонкости реализует? А ещё в IE вообще ничего не работает, даже for...in...

все эти вопросы решает жквери и другие библиотеки

Следовало бы все html, кроме первого index.html (где «ваш браузер устарел» и javascript), объединить в один большой файл.

ад и израиль, но ты попробуй, потом не захочешь (либо разрабатывать нормально а для релиза билдить в общий шаблон, етц)

Вот библиотка шаблонов была бы полезна, но я не знаю такой. Чтоб элементы внутри div каким-то простым способом из объекта, например, заполнять. Без ручного перебора. Потом, какой-то механизм MVC для всех GUI-элементов.

БАТЮШКИ ЭТО ЖЕ СТОРОННИЕ БИБЛИОТЕКИ

шаблонизаторы, тыщи их, underscore.template например, Backbone для MVC, это лишь одни из тысяч, советую по собственному опыту, работает в среднем РИА, всем доволен все работает

То что даёт HTML далеко от идеала во-первых, во-вторых хотелось бы делать свои кнопки, например, с графикой. Или композитные, состоящие из нескольких элементов, виджеты. Например, поле ввода с выпадающим списком по кнопке.

HTML, CSS, RTFM

Да и в целом как программировать на javascript вопрос. Во-первых нужно держать в голове, что программа исключительно событийно-управляемая. Во-вторых архитектура в целом, непонятно как строить. namespaces нет, классов нет. Есть объекты связанные с функциями, в голове это как-то плохо укладывается.

тыщи хороших книг, тыщи сообществ. думаю, жс один из самых бурных языков сегодня. ты спросил советов мудрых. а на самом деле тебе нужно было бы спросить у начинающих. начни с какого-то javascript.ru, MDN, почитай код на гитхабе. посмотри Backbone, посмотри библиотеки виджетов, в чем проблемы?

у прототипно-ориентированный подход ничем не хуже этих ваших классов, и асинхронность это не так страшно как кажется.

trashymichael ★★★ ()
Ответ на: комментарий от trashymichael

Backbone это модели и слабый роутер, что я бы не назвал MVC.

zz ★★★★ ()
Ответ на: комментарий от fk0

Вот библиотка шаблонов была бы полезна, но я не знаю такой. Чтоб элементы внутри div каким-то простым способом из объекта, например, заполнять. Без

Knockout

непонятно как строить. namespaces нет, классов нет.

AMD, Common JS

zz ★★★★ ()
Ответ на: комментарий от zz

knockout большее мвц? я знаю, да, ты бы еще не сказал что в с++ есть ооп, ибо оно в смолтоке только. мвц это не библиотека, это в твоей голове, и сделать его можно на библиотеках или на голых функциях, бэкбон лишь дает толчек, вполне достаточный. посмотри еще раз мануал бекбона, ты видать давно туда заглядывал

trashymichael ★★★ ()
Ответ на: комментарий от trashymichael

Из контекста же понятно, что я предлогал нокаут как шаблонизатор :)

Мне просто показалось что ты счтаешь бакбон не КАРКАСОМ, требующем овер10000 бойлерплейт кода и не умеющим ничего кроме моделей, а mvc фреймворком.

zz ★★★★ ()

И начался холивар на тему «Нужен ли фреймворк»...
Это уже ему решать что писать а что нет! От себя могу добавить что хоть и не используешь фреймворки, но всеравно какое то подобие библиотеки должно быть, пусть даже и самодельной, потому как читать такую простынь не очень и удобно. Да и килобайтыбайты можно экономить только на замене document.getElementById на $.
Нужно всегда писать реюзабильный код!

jamy ()
Ответ на: комментарий от zz

почему ничего, почему только моделей. что же юзаешь ты? хотя да, 1500 строк кода с комментариями фреймворком назвать трудно

trashymichael ★★★ ()
Ответ на: комментарий от trashymichael

От бекбона сейчас только роутер и ивенты, думаю оба выкинуть, хотя если ты знаешь как его МАГИЧЕСКИ научить сохранять стейт для роутов - буду благодарен. Все остальное - велосипедные ad-hoc контроллеры, контролы и модели построеные вокруг нокаутовских observable и биндингов. Вдохновляющее видео: http://www.knockmeout.net/2012/08/thatconference-2012-session.html

zz ★★★★ ()
Ответ на: комментарий от ilovewindows

Вообще, тут надо

<noscript>Ваш браузер говно</noscript>
<p>Инициализация... .. .</p>
или <script>document.write("Идёт загрузка");</script>
Дальше стена текста, нираспарсил.

Kalashnikov ★★★ ()
Ответ на: комментарий от zz

стейт это типа переходишь с одного на другой почисть предыдущий?

trashymichael ★★★ ()
Ответ на: комментарий от trashymichael

Это чтобы при клике в браузере назад у меня вернулось то состояние что я передал когда создавал запись в истории.

zz ★★★★ ()
Ответ на: комментарий от zz

я не совсем понял, но по-моему это задача клиентского кода, точнее, по-моему это только твоя задача, что ей делать во фреймворке. меньше магии больше прагматики

trashymichael ★★★ ()
Вы не можете добавлять комментарии в эту тему. Тема перемещена в архив.