Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 17.09.2011, 00:18
sinistral
Посмотреть профиль Найти все сообщения от melky
 
Регистрация: 28.03.2011
Сообщений: 5,418

способы организации кода
я - единственный скриптер в проекте. таких случаев будет минимум два.

то бишь, я буду писать много кода, который надо как-то структурировать.

я рассмотрел несколько вариантов :
  1. использование namespace. не знаю, почему, но мне это кажется гавнокодом. Да, выглядит красиво и само по себе практично, но не моё. Хотя, может я просто смотрел на неймспейсы с плохой стороны ?
  2. модули. хотя это, по сути, и есть неймспейсы, в моём представлении "модуль" - скрипт, который экспортирует в глобальное пространство имён свой объект для манипуляций (к примеру, jQuery. я примерно так же делаю это - через замыкание и в путь с window).

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

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

на странице один скрипт. он подключается через src="..." и подгружает все остальные скрипты.

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

так вот. как бы я ни старался,увидеть свои скрипты в web-dev tools я не могу!

они загружаются, всё хорошо, но отладить я их не могу :/

....
собстно, к вам 2 вопроса, насчёт организации и насчёт дебага отложенных скриптов.
буду рад любой помощи.
Ответить с цитированием
  #2 (permalink)  
Старый 17.09.2011, 13:52
sinistral
Посмотреть профиль Найти все сообщения от melky
 
Регистрация: 28.03.2011
Сообщений: 5,418

апну и кое-что добавлю. будет кому полезно, если с таким же столкнётся.

чтобы не е-ся с отладкой прилетевших асинхронно скриптов, не надо использовать jquery

используйте старый добрый нативный JavaScript.

тогда скрипты появляются в вкладке "scripts" и возможности дебага прилетевших скриптов вместе с ними.

PS. делаю все-таки через неймспейсы ^_^
Ответить с цитированием
  #3 (permalink)  
Старый 17.09.2011, 19:37
Профессор
Отправить личное сообщение для DjDiablo Посмотреть профиль Найти все сообщения от DjDiablo
 
Регистрация: 04.02.2011
Сообщений: 1,815

Вот те груда мыслей из моего проекта. Что полезно, выбери ))

1) (насчёт отладки) Помоему к тебе разработка методом тестирования так и проситься.
К каждому модулю по тесту, тогда тебе пофиг будет Jquery там или нет.
Тест проходи значит можно двигаться дальше. Вопрос установки скрипта это уже другая песня. Тем более если ты один скриптер то ты сам и управляешь всеми конфликтами.

2) (организация) неймспейсы не быдлокод ! вообще есть два способа управления модулями. Централизованная загрузка и децентрализованная. При централизованной ты грузишь всё и инициализируешь в нужном тебе порядке. При децентрализованной каждый модуль проверяет доступность нужных ему компонентов. Лично Я, для ядра применяю централизованную загрузку, а для плагинов децентрализованную. Для децентрализованной загрузке я написал обёртку над jquery getScript. которая проверяет наличие нужных скриптов,css и шаблонов, подгружает недостающие и только затем передаёт callback на инициализацию плагина. Работает на ура. Оправдано тем что ядро небольшое- его проще компилировать и грузить централизованно большими кусками. Плагины могут разработаны кем угодно, так что централизованно не уследишь, здесь спасают события. Что именно тебе надо, уж решая сам по обстоятельствам.

3) нативный javaScript есть мазохизм приналичии jquery UI, javaScriptMvc, blackBone. - помоему ты сильно пытаешся усложнить свою жизнь, и увеличиваешь время разработки проекта. Короче я сильно против нативного js.

4) (ещё не много об организации) У меня редактор сайтов, причём на html5. Куча всяких наворотов типо вращения картинки,undo redo, свободная или стандартная для html, вёрстка, вложенные друг в друга виджеты (типо слайдер вложенный в TAB) и тд.
как решаю задачу.
Рублю прект на четыре части. 1) model(данные и оперирование данными модели), 2) bisness(логика приложения) 3) present (интерфейс отслеживание событий и тд), 4) template - шаблоны (шаблонизатор ejs).

плагин это маленькое приложение так же порубленное на четыре логические части.
Ядро с плагинами взаимодействует посредством системы сообщений. ибо ядро не знает о том какие плагины установлены на страницы. Оно просто генерирует событие, а кто уж подписан тот и обработает. Плагины просто обращаются к методам ядра, так как ядро относительно стабильно. В крайнем случае, я прикручу фасад к функциям ядра, но пока не вижу смысла.

Все плагины наследуют код от обьекта Widget, который содержит общий для всех виджетов функционал, а также стандартные обработчики событий, которые плагин естественно может переопределить. Наследование реализовано методом class фреймворка javascriptMvc.

О разделении проекта на части на нативном js даже думать страшно. Не думаю что я бы справился на голом javaScript,ибо и без того работы очень много. Однако мне чуть проще тем что я заказчик, архитектор, php и js программист в одном лице. И мои возможности нечем не ограничены, кроме времени. В октябре надо-бы альфу выпустить уже.
__________________
Лучше калымить в гандурасе чем гандурасить на колыме

Последний раз редактировалось DjDiablo, 17.09.2011 в 21:18.
Ответить с цитированием
  #4 (permalink)  
Старый 17.09.2011, 21:12
Новичок на форуме
Отправить личное сообщение для Kolyaj Посмотреть профиль Найти все сообщения от Kolyaj
 
Регистрация: 19.02.2008
Сообщений: 9,177

Сообщение от melky
на странице один скрипт. он подключается через src="..." и подгружает все остальные скрипты.
Это ж сколько запросов за скриптами делается на одной странице? Все скрипты должны собираться на сервере в один файл. Это намного увеличит скорость загрузки страницы. И в html лазать не надо.

BuildJS в помощь.
Ответить с цитированием
  #5 (permalink)  
Старый 18.09.2011, 01:05
sinistral
Посмотреть профиль Найти все сообщения от melky
 
Регистрация: 28.03.2011
Сообщений: 5,418

Сообщение от Kolyaj Посмотреть сообщение
Это ж сколько запросов за скриптами делается на одной странице? Все скрипты должны собираться на сервере в один файл. Это намного увеличит скорость загрузки страницы. И в html лазать не надо.

BuildJS в помощь.
шесть прилетевших

у меня ноды нет, но огромное вам спасибо за подкинутую идею!

буду склеивать файлы через cat и пропихивать один файл на страницу!

Сообщение от DjDiablo Посмотреть сообщение
1) (насчёт отладки) Помоему к тебе разработка методом тестирования так и проситься.
у меня что-то похожее. я пишу какое-либо нововведение ( будь то клик по кнопке ), закачиваю на сервак, там дебаггером проверяю результаты.

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

Сообщение от DjDiablo Посмотреть сообщение
[b]2) (организация) неймспейсы не быдлокод !.
угу. я в этом уже убедился.
я придумал себе велосипед для загрузки неймспейсов. хоть я и сам до него допёр, понял, что это называется "централизованной" загрузкой.

Сообщение от DjDiablo Посмотреть сообщение
3) нативный javaScript есть мазохизм приналичии jquery UI, javaScriptMvc, blackBone. - помоему ты сильно пытаешся усложнить свою жизнь, и увеличиваешь время разработки проекта. Короче я сильно против нативного js.
я пишу на jquery, т.к. только её нормально знаю и могу быстро писать.

написал то я быстро, но вот начался рефакторинг и ... не скоро кончится.

на jquery написаны несколько неймспейсов, таких как "взаимодействие с api", "модальные окна" и т.д.

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

PS я вообще ненавижу использовать чужие наработки. тот же backbone, когда я про него читал, может обойтись и без меня. кажется, это паранойя

Сообщение от DjDiablo Посмотреть сообщение
[b]4) (ещё не много об организации) ....
отсюда я извлёк, что надо писать код от общего к частному.

в принципе, я стараюсь сейчас так делать. только я это называю "расширяемость"

Сообщение от DjDiablo Посмотреть сообщение
У меня редактор сайтов, причём на html5. В октябре надо-бы альфу выпустить уже.
утечка
Ответить с цитированием
  #6 (permalink)  
Старый 18.09.2011, 04:45
Профессор
Отправить личное сообщение для DjDiablo Посмотреть профиль Найти все сообщения от DjDiablo
 
Регистрация: 04.02.2011
Сообщений: 1,815

1й пост я писал сильно под пивом. Рад что вообще хоть как-то попал в тему ))). Влюбом случае сейчас 5утра, спать неохото, а вот пофилосовствовать я люблю )) Тем более в 5 утра говорить больше нескем )))))

я немного напишу про свою архитектуру. Что-то из этого тебе должно пригодиться, постораюсь делать пометки на полезности.
Для проекта, использую JavaScriptMVC так как по сути он добавляет к jquery организацию кода и расширяет базовый функционал jquery.

Я использую 4х слойный клиент и это выглядит так.

Первый слой template. по сути шаблон для шаблонизатора. Шаблонизатор ejs, стандартный из поставки javascriptMVC. Во первых html не болтается в коде что упрощает понимание, во вторых за отдельный шаблон меня любят дизайнеры )). А ещё интерфейс можно набросать на этапе прототипирования приложения, ещё до того как всё это попадёт к js кодеру. Что сильно облегчает кодеру жизнь.

второй слой controller - здесь описана вся логика интерфейса. Обработка событий jquery. все возможный drag and drop и тд.
Из вкусняшек контролёра JavascriptMVC, обработка событий примерно таким макаром.
".knopka click":function(){
   //полезный код который сработает при  щелчке по элементу c классом knopka
}

и никаких click() и bind() мне не надо. Фреймворк сам использует их вместо меня.
Кстатии контролёр этого фреймворка очень сильно похож на jqueryUI только без его недостатков. + очень удобная система классов. К примеру у меня все плагины основанные на контролёрах, наследуют базовый функционал и стандартные обработчики событий от одного родительского класса.


// создаём контролёр горизонт на базе WidgetAdmin  который мы создали заранее, и прописали там общие для всех контролёров методы, и обработчики событий.
 
WidgetAdmin.extend("horizont",{
       // опции
       options: {
        greetings: "Hello"
       },
       // конструктор
       init:function(el){
            el.append("привет");
       },
       // обработчик
       "button.knopka click":function(){
       }
},
{
    //всё что обьявлено здесь попадёт в прототип обьекта. Тоесть будет общим  для всех экземпляров этого контролёра        
);

// создаём контроллёр как любой виджет.
$("#test").horizont({
       greetings:"astala vista"
});


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

Дальше весело Ниже в MVC могла бы быть толстая модель, но мне не совсем это подходит, возможно не подойдёт и тебе.

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

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

Модель Здесь находятся данные, и основные методы работы с ними. В моём случае это оправдано желанием инкапсулировать данные общие для нескольких бизнес процессов в одном месте. В частности позиционирование виджетов, корзина, и система сохранения требует определять местоположение виджетов и оперировать ими на уровне контейнеров с учётом их вложенности. Поэтому я реализовал модель, абстракцию над DOM позволяющую работать на уровне контейнеров, роль хранилища данных при этом играет dom дерево браузера.
Особой выгоды в реализации моделей из фреймворка я пока неувидел, хватает и обычных обьектов играющих роль модели, но повторю это только мне и только пока.

в чём кайф для тебя. Обмен данных с сервером обычно производится на уровне модели. Но так как у тебя нет постоянного доступа к серверу, ты можешь имитировать взаимодействие с сервером на уровне модели. Так как бизнес процессы не имеют понятия о том как работает сервер, а общаться c сервером просят модель, то и подмену данных с сервера в модели на имитацию они не заметят. То есть ты сможешь выполнить отладку даже на локальном ПК, неприбегая к установке скрипта на сервер. Установка на сервер потребует только модификации модели, весь остальной код затронут небудет.

Теперь об общей композиции.
обычно хватает и трёх слоёв MVC, так как на клиентах обычно нет сложной бизнес логики.

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

> Если нужны тесты логики приложения, придётся создавать отдельный бизнес слой. тоесть вытащить всю бизнес логику из контролёра оставив ему только взаимодействие с пользователем.
> можно разместить конечно логику приложения и в модели, вместе с взаимодействием с сервером. Но если ты будешь, имитировать взаимодействие с сервером в перемешку с логикой приложения, это будет выглядить очень некрасиво, да и неудобно. Всё равно придётся выносить имитацию в отдельный слой на клиенте, или на какую то балванку серверной части предназначенную только для отладки клиента.

Что касается JavaScriptMVC. Вообще это самый логичный выбор фреймворка для любителей jquery, нравится мне в нём почти всё. И система классов, и события в контролёре, и шаблонизация строкой $(".iTarget").html("путь к шаблону",{данные для шаблона}). Однако управление модулями при помощи steal меня бесит, за месяц работы с этой штукой я так и несумел дать ей ума. Она или неподгружает скрипты или не передаёт команду на инициализацию или ещё что. Быть может я что-то нетак делаю, в конце концов меня это достало и я сделал свою реализацию, абстракцию над getScript из jquery которая проверяет был ли загружен уже данный скрипт а если нет то грузит. И наступило счастье.

уф, выдал
================================================== ============================================
2 часть ЭПОСА )).
Примечание 1.
Вообще не понятно что за сложности с установкой скриптов на сервер.
Я бы организовал работу таким образом чтобы каждый программист имел свою сборку, сборка js программистов, сборки php программистов и общая мастер сборка в которые входят последние стабильные js и php сборки. Если мастер сборка багов не выявила, то и js и php разработчики обьединяют свою локальную сборку с мастер сборкой, или берут за основу мастер сборку и работают дальше с ней как с локальной.

к недостаткам модели можно отнести просмотренные баги в мастер сборках, которые могут объявить в неподходящий момент и парализовать работу js или php кодеров по чужой вине. Впрочем чтобы php кодер не простаивал из за косяка js разработчика, он просто может поставить себе предыдущий стабильный релиз скрипта от js кодера, и продолжать разработку не дожидаясь пока js разработчик исправит баги. Для реализации этого даже репозитория некакого не надо, достаточно функции копирования в тотал командер и общедоступного ftp))))

Примечание 2.
Я тут подумал, что быть может нет вовсе необходимости постоянно ставить клиентский скрипт на сервер, возможно тебе достаточно повесить скрипт на обычную html'ку а с сервером общаться посредством кросс доменных запросов. Если конечно сервер доступен и хоть как-то работает, и туда выкладывают стабильные релизы от php кодеров, то такой чудиковатый подход мог бы проконать. Опять же так как всё общение с сервером проходит через модели, то как ты будешь делать запросы ты решаешь в модели. Следовательно остальной код твоей хитростью не задет. Ибо остальным слоям решительно пофиг откуда модели берут данные.

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

Однако утро, уже рассвело, пора спать ))))

зы.
Цитата:
утечка
Это была не утечка, а реклама ))), Проект openSource, всё равно его скоро выкладывать в общий доступ.
__________________
Лучше калымить в гандурасе чем гандурасить на колыме

Последний раз редактировалось DjDiablo, 18.09.2011 в 13:48.
Ответить с цитированием
  #7 (permalink)  
Старый 18.09.2011, 04:50
Аватар для vflash
Профессор
Отправить личное сообщение для vflash Посмотреть профиль Найти все сообщения от vflash
 
Регистрация: 09.07.2007
Сообщений: 304

предпочитаю namespace. namespace-ы удобно контролировать через фаирбаг(закладка DOM). логику если необходимо можно разбить на файлы.

область видимости для локальных небольших частей или там где это необходимо.


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

для себя написал js-скрипт (можно реализовать и на сервере, один человек взялся сделать это) который по этому файлу делает загрузку скриптов. в разработке любая ошибка сразу указывает в каком файле ошибка. для боя собираю все в один файл.
вот пример
разработка(dev) - http://vflash.ru/rr2jquery/demo.use_script.html
собираю в один файл - http://vflash.ru/rr2jquery/demo.use_pack.html

в некоторых браузерах есть проблемы с порядком загрузки файлов(IE6,IE10). но это не так страшно потому как разработку веду в firefox у которого нет таких проблем.
__________________
лучшая rss читалка zzreader.com

Последний раз редактировалось vflash, 18.09.2011 в 04:52.
Ответить с цитированием
  #8 (permalink)  
Старый 18.09.2011, 08:15
Новичок на форуме
Отправить личное сообщение для Kolyaj Посмотреть профиль Найти все сообщения от Kolyaj
 
Регистрация: 19.02.2008
Сообщений: 9,177

Сообщение от melky
у меня ноды нет
Странный аргумент. Но боевом сервере он не нужен, а на локалку ставится за 5 минут.
Ответить с цитированием
  #9 (permalink)  
Старый 18.09.2011, 15:59
sinistral
Посмотреть профиль Найти все сообщения от melky
 
Регистрация: 28.03.2011
Сообщений: 5,418

DjDiablo, ахренеть

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

но эти проблемы с доступом к html и невозможностью даже банально скачать сорцы (гемор!) вынуждают меня так поступать со скриптами

в будущем, к концу разработки, облагорожу их, и будет всё нормально : 1 сжатый файл, PROFIT

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

работа разделена на категории, для каждой категории - свой отдельный скрипт.

каждый отдельный скрипт в замыкании реализует свой функционал и инкапсулирует необходимые методы в свой неймспейс.

каждый скрипт ничего не знает о других, т.е. он ничего не использует, только реализует.

// load.js
MYNS = {}


// api.js
(function(){   

    var api = MYNS.API = {};

    api.makeReq = ........

})();


венцом оказывается основной файл page.js, который как раз использует все эти наработки и ничего не реализует.

весь код в page js обрамлен в функцию-обработчик события загрузки страницы, так что я с уверенностью могу использовать наработки.

Сообщение от Kolyaj Посмотреть сообщение
Странный аргумент. Но боевом сервере он не нужен, а на локалку ставится за 5 минут.
я пока не брался за ноду, вообще. изучать времени тоже пока нет. всё время теряется на учёбу+разработку.

так что пока так может, на зимних каникулах почитаю про ноду, но никак не сейчас.
Ответить с цитированием
  #10 (permalink)  
Старый 18.09.2011, 18:58
Новичок на форуме
Отправить личное сообщение для Kolyaj Посмотреть профиль Найти все сообщения от Kolyaj
 
Регистрация: 19.02.2008
Сообщений: 9,177

Сообщение от melky
я пока не брался за ноду, вообще. изучать времени тоже пока нет. всё время теряется на учёбу+разработку.
Там не надо ничего изучать, там надо запустить уже написанный скрипт.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
скрыть из исходного кода часть javascript кода. javasc Javascript под браузер 10 12.03.2014 09:32
Рег.выражения, подсветка кода lynch1 Events/DOM/Window 6 17.12.2012 20:04
Ищу приличный редактор кода под JS Universe Общие вопросы Javascript 28 30.10.2012 18:30
Стоимость строки вашего кода? greatilya Оффтопик 4 02.06.2011 16:46
Добавление методов к стандартным объектам и совместимость кода Василий Б. Общие вопросы Javascript 10 20.07.2010 12:00