apelserg May 27 2015 at 16:42

Сайт на основе одной HTML-страницы

5 min

19K

Ajax*Website development*HTML*

-24

Comments 32

Evgeny42 May 27 2015 at 16:47

На дворе 2007, ребята придумывают signle page application.

+16

signalizator May 27 2015 at 17:00

В 2007 spa уже были, начало было в 2005 году.

Rastishka May 28 2015 at 09:09

IDE: Notepad
…
body onload='onPageLoad()'

А добавили бы в теги «ретро разработка» — и могли бы плюсы собрать.

vedenin1980 May 28 2015 at 09:17

А если бы добавили тег «юмор»…

UFO just landed and posted this here

vedenin1980 May 28 2015 at 09:57

Но какое это все имеет отношение к IDE (Интегрированной среде разработки)? Что в блокноте интегрированого-то?

UFO just landed and posted this here

vedenin1980 May 28 2015 at 10:36

Не, не пойдет. Вот far с плагином подсветки синтакиса и плагином ftp можно технически обозвать простейшей IDE для html/js/php.

UFO just landed and posted this here

pepelsbey May 27 2015 at 16:58

Вы кажется забыли объяснить, зачем вы заново реализуете то, что браузеры и так умеют делать без JavaScript: запрашивать HTML-страницы по ссылкам.

+18

vedenin1980 May 27 2015 at 17:30

Не говоря уже о том что настроив переадресацию запросов в .htaccess можно сделать как бы эмуляцию signle page application, то есть пользователь будет вводить url?id=533&folder=ddd, а получать содержимое файла /ddd/553.html, да и ссылки в iframe работают без всякого JS.

demimurych May 28 2015 at 02:00

Кажется Вы не поняли иронию pepelsbey. Вопрос не в красивых ссылках, а в том какая непосредственно выгода в использовании своего собственного механизма загрузки контента.

vedenin1980 May 28 2015 at 10:00

Ну выгода есть, angular'ы и backbon'ы ценны именно за собственный механизм загрузки контента, но придумывать такой топорный велосипед смысла нет никакого, уж лучше использовать классический механизм ifram'ов, он устарел лет на 15-20, но это лучше чем такой велосипед.

UFO just landed and posted this here

zBit May 27 2015 at 17:45

Больше похоже на хабрасуицид, если честно :)
SPA зародились уже ооочень давно, ты опоздал с материалом лет на 10 :)

Придирки

Ни одна из перечисленных IDE не является IDE, это текстовые редакторы.
Ещё и с перезагрузкой страниц…
Ещё и в текстовых файлах…
Ещё и вёрстка табличная…

Ну совсем грустно ;(

А для тех, кто понимает, что создавать свой велосипед не всегда оправдано — есть AngularJS.

izac May 27 2015 at 18:54

Прямо, хабра и машина времени.

maximw May 27 2015 at 18:56

У вас в getUrlParametr() ошибка.
Если значение параметра содержит знак равно, то будет возращено обрезанное значение от начала до первого вхождения знака равно.
example.com?test=123&test1=22=33=444

console.log(getUrlParametr('test1')); // "22"

UFO just landed and posted this here

maximw May 27 2015 at 19:33

По-хорошему надо. Но работает и без эскйепа, проверял.

Kano May 27 2015 at 19:48

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

-2

zBit May 27 2015 at 19:53

Мне кажется, что по началу лучше не изобретать свои велосипеды, а учиться использовать уже существующие инструменты. Всё же создать качественный велосипед, как мне кажется, может только опытный программист и делать он это будет только при острой необходимости.
Поэтому, совет всем новичкам: не тратьте время на это дело, лучше изучайте уже существующие инструменты.
Ну и, ИМХО, учиться по статьям человека, который тоже учиться — плохая затея.

TheShock May 28 2015 at 14:44

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

vedenin1980 May 28 2015 at 14:59

Нее, это не тот велосипед, который нужно изобретать. Если бы автор попытался повторить что-то вроде angularJS (ну или хотя бы JQuery), флаг ему в руки, а в «изобретение» велосипеда с деревянными колесами ничего хорошего не даст.

gonzazoid May 27 2015 at 20:57

для новичков с азами веба это не надо — у них есть html import, custom elements, shadow dom и html templates, которые уже сейчас работают везде с полифилами, а к моменту овладения новичками азов — имхо, будут работать везде нативно.

sayber May 27 2015 at 20:53

Эта статья случайно не с времен основания хаба?
Что то материал смахивает на оч. древний, когда люди только услышали про ajax.

m0sk1t May 28 2015 at 01:51

Долго хранилась в черновиках а тут рука дрогнула над кнопкой «Опубликовать» =)

gag_fenix May 28 2015 at 14:27

Жаль, поисковики не увидят всей этой красоты…

UFO just landed and posted this here

dshster May 28 2015 at 18:28

Нормальные поисковики умеют видеть хеш-линки в ссылках (#!) и перенаправлять запрос на ?_escaped_fragment_=, а там уже умный сервер запускает phantomjs, который чудненько умеет исполнять javascript и выдавать результат. Angularjs так и индексируется.

apelserg May 29 2015 at 13:38

У-уф — холодный душ полезен для здоровья.

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

Использую этот подход пару-тройку лет, но в интернете целостного описания или примера не нашёл. А выгода есть. Как сказал классик «Не эстетично, зато просто, дёшево и практично». Так появилась эта публикация.

Заметки на полях:

Это не SPA, хотя внешне очень похоже. Есть SPA-верся, но проще и полезнее эта, например иногда хочется Shift+Ссылка.
Это не замена AngularJS. Если надо — Angular легко уживается внутри.
Это не велосипед. Велосипед не может состоять из одной функции в пять строк. А суть всего подхода — в применении функции разбора URL.
По-поводу табличной вёрстки. Демо не имеет отношения к дизайну, его цель — показать наглядный и целостный пример.
По-поводу Notepad. Профит применения дефолтных текстовых редакторов:
- Всегда и везде под рукой, быстро открываются, не глючат, не устанавливаются по пол дня.
- За всё время для этого проекта не потребовалось ничего сложнее (это правда).

zBit May 29 2015 at 16:51

Ещё ещё один холодный душ :)

Это не SPA, хотя внешне очень похоже

В заголовке написано "Сайт на основе одной HTML-страницы". Единственное, чем ваш SPA отличается от нормального SPA — перезагрузка страницы.

Есть SPA-верся, но проще и полезнее эта, например иногда хочется Shift+Ссылка.

Если руки совсем не кривые, то на AngularJS работает и клик средней клавишей и shift+клик по ссылке.

Велосипед не может состоять из одной функции в пять строк

Кто сказал? :)

Профит применения дефолтных текстовых редакторов

А ещё он по-дефолту сохраняет файлы в _не utf-8_, не видит unix line endings, в нём нет подсветки синтаксиса, нет автодополнений, да там вообще нифига нет, кроме поля в котором можно ввести какой-то текст :) (Мы же про Notepad, а не про Notepad++?)

И по поводу

быстро открываются, не глючат, не устанавливаются по пол дня

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

Грусть, тоска, печаль…

UFO just landed and posted this here

Show the best of all time