Паттерны для клиентской части веба
От: busk  
Дата: 14.10.10 18:29
Оценка:
Вот пишут все про паттерны. но речь в основном про сервер.
А вот про JS, CSS как-то особо нет инфы.
Вот есть большой проект на асп.нет.
В нем много css и js.
Как это всё лучше проектировать, чтобы это не вылилось в один большой файл для тех и других?
Вот недавние проблемы, что подтолкнуло меня к написанию данной темы:
1. На странице aspx есть веб-контрол ascx. И на странице и на контроле в разметке была js функция с одним и тем же названием. В итоге функционал не работал, т.к.
вместо одного вызывался другой метод.
2. Часто встречал, что на кнопке уже висит скрипт зарегенный на сервере. Как себя обезопасить от перетирания? Просто += ?
Re: Паттерны для клиентской части веба
От: rsdn2010  
Дата: 14.10.10 18:34
Оценка:
Здравствуйте, busk, Вы писали:

B>Вот пишут все про паттерны. но речь в основном про сервер.

B>А вот про JS, CSS как-то особо нет инфы.
B>Вот есть большой проект на асп.нет.
B>В нем много css и js.
B>Как это всё лучше проектировать, чтобы это не вылилось в один большой файл для тех и других?

мой метод такой
использовать jquery
код специфичный для компонента системы обертывается в плагин к jquery
и к нему идет отдельный css файл
Re: Паттерны для клиентской части веба
От: vmpire Россия  
Дата: 14.10.10 19:52
Оценка: 2 (1)
Здравствуйте, busk, Вы писали:

B>Вот пишут все про паттерны. но речь в основном про сервер.

B>А вот про JS, CSS как-то особо нет инфы.
Вообще, паттерны не привязаны к конкретному языку или окружению. Это паттерны,а не библиотеки. Синглетон, например, одинаково успешно реализуется и на C# и на JS и на VB.

B>Вот есть большой проект на асп.нет.

B>В нем много css и js.
B>Как это всё лучше проектировать, чтобы это не вылилось в один большой файл для тех и других?
Так же как и на любых других языках: разбивать на слабо связанные компоненты, которые занимаются каждый своим делом.

B>Вот недавние проблемы, что подтолкнуло меня к написанию данной темы:

B>1. На странице aspx есть веб-контрол ascx. И на странице и на контроле в разметке была js функция с одним и тем же названием. В итоге функционал не работал, т.к.
B>вместо одного вызывался другой метод.
Используйте объекты и инкапсуляцию методов, которые не видно снаружи. Тогда они и не пересекутся.

B>2. Часто встречал, что на кнопке уже висит скрипт зарегенный на сервере. Как себя обезопасить от перетирания? Просто += ?

Если Вы имеете в виду строку (например, обработчик, назначенный на сервере), то += через точку с запятой. Только могут быть проблемы, если там был return. В этом случае нужно будет хитро комбинировать вызовы с return через логические операторы.
А если работа идёт уже на уровне объектной модели, тогда всё проще.


    var oldOnChange = control.onchange;
    control.onchange = function() { AdditionalHandler(); oldOnChange (); };
Re[2]: Паттерны для клиентской части веба
От: gandjustas Россия http://blog.gandjustas.ru/
Дата: 14.10.10 21:18
Оценка:
Здравствуйте, vmpire, Вы писали:

V>Здравствуйте, busk, Вы писали:


B>>Вот пишут все про паттерны. но речь в основном про сервер.

B>>А вот про JS, CSS как-то особо нет инфы.
V>Вообще, паттерны не привязаны к конкретному языку или окружению. Это паттерны,а не библиотеки. Синглетон, например, одинаково успешно реализуется и на C# и на JS и на VB.
Только синглтон нахрен не нужен ни на сервере, ни на клиенте.

B>>Вот есть большой проект на асп.нет.

B>>В нем много css и js.
B>>Как это всё лучше проектировать, чтобы это не вылилось в один большой файл для тех и других?
V>Так же как и на любых других языках: разбивать на слабо связанные компоненты, которые занимаются каждый своим делом.
Ок, какие компоненты ты считаешь слабосвязными в JS?
Учитывай что там нету модульности вообще, весь код исполняется в одном пространстве имен. Кроме того можно переопределить любой метод или поле класса.
Также интересный вопрос как производить композицию этих слабосвязных компонент.

B>>Вот недавние проблемы, что подтолкнуло меня к написанию данной темы:

B>>1. На странице aspx есть веб-контрол ascx. И на странице и на контроле в разметке была js функция с одним и тем же названием. В итоге функционал не работал, т.к.
B>>вместо одного вызывался другой метод.
V>Используйте объекты и инкапсуляцию методов, которые не видно снаружи. Тогда они и не пересекутся.
А кто мешает подменить объкет? И что значит "которые не видно снаружи"?


V>
V>    var oldOnChange = control.onchange;
V>    control.onchange = function() { AdditionalHandler(); oldOnChange (); };
V>

ыыы
лучше сразу jquery
Re[3]: Паттерны для клиентской части веба
От: vmpire Россия  
Дата: 14.10.10 23:47
Оценка:
Здравствуйте, gandjustas, Вы писали:

V>>Вообще, паттерны не привязаны к конкретному языку или окружению. Это паттерны,а не библиотеки. Синглетон, например, одинаково успешно реализуется и на C# и на JS и на VB.

G>Только синглтон нахрен не нужен ни на сервере, ни на клиенте.
Ну это, типа, пример был. Подставьте ммя своего любимого паттерна.

B>>>Вот есть большой проект на асп.нет.

B>>>В нем много css и js.
B>>>Как это всё лучше проектировать, чтобы это не вылилось в один большой файл для тех и других?
V>>Так же как и на любых других языках: разбивать на слабо связанные компоненты, которые занимаются каждый своим делом.
G>Ок, какие компоненты ты считаешь слабосвязными в JS?
Контексты выполнения

G>Учитывай что там нету модульности вообще, весь код исполняется в одном пространстве имен.

Пространство имён можно сделать частью имени. Не так структурно и не очень удобно, но не невозможно.

G>Кроме того можно переопределить любой метод или поле класса.

"Можно" не значит "нужно". Да, от этого JS не защищает. Но часто ли в программе с нормальным дизайном (в C#) Вы получали ошибку компиляции о переопределении метода? Так ли это опасно практически?

G>Также интересный вопрос как производить композицию этих слабосвязных компонент.

Так же, как, например, в С# (только без сборок, естественно). Дёргать публичные методы других объектов.
В принципе, можно хоть IOC container написать, только ограниченный, без интерфейсов.

B>>>Вот недавние проблемы, что подтолкнуло меня к написанию данной темы:

B>>>1. На странице aspx есть веб-контрол ascx. И на странице и на контроле в разметке была js функция с одним и тем же названием. В итоге функционал не работал, т.к.
B>>>вместо одного вызывался другой метод.
V>>Используйте объекты и инкапсуляцию методов, которые не видно снаружи. Тогда они и не пересекутся.
G>А кто мешает подменить объкет?
Который?
G>И что значит "которые не видно снаружи"?
Приватный метод объекта. Приватные методы разных объектов могут сколько угодно пересекаться по имени, ничего не сломается.


V>>
V>>    var oldOnChange = control.onchange;
V>>    control.onchange = function() { AdditionalHandler(); oldOnChange (); };
V>>

G>ыыы
G>лучше сразу jquery
Я и не говорю, что JQuery это плохо. Просто топикстарер его, видимо, не использует вот я и аписал на чистом JS,
Re[4]: Паттерны для клиентской части веба
От: gandjustas Россия http://blog.gandjustas.ru/
Дата: 15.10.10 07:29
Оценка:
Здравствуйте, vmpire, Вы писали:

B>>>>Вот есть большой проект на асп.нет.

B>>>>В нем много css и js.
B>>>>Как это всё лучше проектировать, чтобы это не вылилось в один большой файл для тех и других?
V>>>Так же как и на любых других языках: разбивать на слабо связанные компоненты, которые занимаются каждый своим делом.
G>>Ок, какие компоненты ты считаешь слабосвязными в JS?
V>Контексты выполнения
Пример?

G>>Учитывай что там нету модульности вообще, весь код исполняется в одном пространстве имен.

V>Пространство имён можно сделать частью имени. Не так структурно и не очень удобно, но не невозможно.
Те возможно, но смысла нет. Это почти всегда означает тоже что и невозможно.

G>>Кроме того можно переопределить любой метод или поле класса.

V>"Можно" не значит "нужно". Да, от этого JS не защищает. Но часто ли в программе с нормальным дизайном (в C#) Вы получали ошибку компиляции о переопределении метода? Так ли это опасно практически?
Очень опасно, особенно при разработке библиотеки на js. Потому что внезапно поломать скрипт кто угодно (в том числе и новая версия браузера).

G>>Также интересный вопрос как производить композицию этих слабосвязных компонент.

V>Так же, как, например, в С# (только без сборок, естественно). Дёргать публичные методы других объектов.
В JS нету разделения на публичные и приватные, поэтому декомпозиция и композиция получается совсем не такая, как в C#

V>В принципе, можно хоть IOC container написать, только ограниченный, без интерфейсов.

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

B>>>>Вот недавние проблемы, что подтолкнуло меня к написанию данной темы:

B>>>>1. На странице aspx есть веб-контрол ascx. И на странице и на контроле в разметке была js функция с одним и тем же названием. В итоге функционал не работал, т.к.
B>>>>вместо одного вызывался другой метод.
V>>>Используйте объекты и инкапсуляцию методов, которые не видно снаружи. Тогда они и не пересекутся.
G>>А кто мешает подменить объкет?
V>Который?
Для которого будут вызываться методы.

G>>И что значит "которые не видно снаружи"?

V>Приватный метод объекта. Приватные методы разных объектов могут сколько угодно пересекаться по имени, ничего не сломается.
У js нету приватных членов, все члены класса публичные.

V>>>
V>>>    var oldOnChange = control.onchange;
V>>>    control.onchange = function() { AdditionalHandler(); oldOnChange (); };
V>>>

G>>ыыы
G>>лучше сразу jquery
V>Я и не говорю, что JQuery это плохо. Просто топикстарер его, видимо, не использует вот я и аписал на чистом JS,
Re[5]: Паттерны для клиентской части веба
От: vmpire Россия  
Дата: 15.10.10 12:09
Оценка: 1 (1)
Здравствуйте, gandjustas, Вы писали:

V>>Контексты выполнения

G>Пример?
ниже

G>>>Учитывай что там нету модульности вообще, весь код исполняется в одном пространстве имен.

V>>Пространство имён можно сделать частью имени. Не так структурно и не очень удобно, но не невозможно.
G>Те возможно, но смысла нет. Это почти всегда означает тоже что и невозможно.
Я не писал, что смысла нет. Я писал, что не очень удобно. А есть смысл или нет — каждый решает сам для себя.

G>>>Кроме того можно переопределить любой метод или поле класса.

V>>"Можно" не значит "нужно". Да, от этого JS не защищает. Но часто ли в программе с нормальным дизайном (в C#) Вы получали ошибку компиляции о переопределении метода? Так ли это опасно практически?
G>Очень опасно, особенно при разработке библиотеки на js. Потому что внезапно поломать скрипт кто угодно (в том числе и новая версия браузера).
Опять таки, приватные методы спасут. Пример ниже.

G>>>Также интересный вопрос как производить композицию этих слабосвязных компонент.

V>>Так же, как, например, в С# (только без сборок, естественно). Дёргать публичные методы других объектов.
G>В JS нету разделения на публичные и приватные, поэтому декомпозиция и композиция получается совсем не такая, как в C#
см. пример.

V>>В принципе, можно хоть IOC container написать, только ограниченный, без интерфейсов.

G>Придется большой фреймворк написать, так как у тебя много точек входа (обработчики событий), а тебе придется на каждый из них инжектить свои объекты в код обработчика.
G>А можно банально сделать объект\ассоциативный массив, который по имени отдает нужный объект, получится что-то вроде SL.
G>Но снова смысла мало, так как единое пространство имен.
Ну так это не проблема композиции, это проблема пространств имён. Композиция-то нормально делается.

B>>>>>Вот недавние проблемы, что подтолкнуло меня к написанию данной темы:

B>>>>>1. На странице aspx есть веб-контрол ascx. И на странице и на контроле в разметке была js функция с одним и тем же названием. В итоге функционал не работал, т.к.
B>>>>>вместо одного вызывался другой метод.
V>>>>Используйте объекты и инкапсуляцию методов, которые не видно снаружи. Тогда они и не пересекутся.
G>>>А кто мешает подменить объкет?
V>>Который?
G>Для которого будут вызываться методы.
Так это в любом языке можно, при чём тут JS. В C# тоже можно заменить объект в переменной.

G>>>И что значит "которые не видно снаружи"?

V>>Приватный метод объекта. Приватные методы разных объектов могут сколько угодно пересекаться по имени, ничего не сломается.
G>У js нету приватных членов, все члены класса публичные.

Итак, пример (отсюда):



// Конструктор.
function NewClass() {
  this.from = "author";   // открытое свойство (this)
  var name  = "somebody"; // закрытое свойство (var)

  // Приветствие.
  this.hello = function() {
    // закрытые свойства пишем без this
    alert("Hello, "+name+", from "+this.from);
  }
  
  // Метод для установки значения закрытого свойства.
  this.setName = function(n) {
    name = n;
  }
}

// Создаем объект и проверяем работу.
var obj = new NewClass();
obj.setName("world");
obj.hello();

// Другой объект - для проверки.
var obj1 = new NewClass();
obj1.hello();


Точно так же делаются приватные методы
Re[5]: Паттерны для клиентской части веба
От: Воронков Василий Россия  
Дата: 15.10.10 12:21
Оценка:
Здравствуйте, gandjustas, Вы писали:

G>>>И что значит "которые не видно снаружи"?

V>>Приватный метод объекта. Приватные методы разных объектов могут сколько угодно пересекаться по имени, ничего не сломается.
G>У js нету приватных членов, все члены класса публичные.

Хватит мучать мозг человеку, все это в JS прекрасно имитируется на замыканиях. Пространства имен задаются через литерал объекта и пр.
Re[6]: Паттерны для клиентской части веба
От: gandjustas Россия http://blog.gandjustas.ru/
Дата: 15.10.10 21:29
Оценка:
Здравствуйте, vmpire, Вы писали:

G>>>>И что значит "которые не видно снаружи"?

V>>>Приватный метод объекта. Приватные методы разных объектов могут сколько угодно пересекаться по имени, ничего не сломается.
G>>У js нету приватных членов, все члены класса публичные.

V>Итак, пример (отсюда):



V>

V>// Конструктор.
V>function NewClass() {
V>  this.from = "author";   // открытое свойство (this)
V>  var name  = "somebody"; // закрытое свойство (var)

V>  // Приветствие.
V>  this.hello = function() {
V>    // закрытые свойства пишем без this
V>    alert("Hello, "+name+", from "+this.from);
V>  }
  
V>  // Метод для установки значения закрытого свойства.
V>  this.setName = function(n) {
V>    name = n;
V>  }
V>}

V>// Создаем объект и проверяем работу.
V>var obj = new NewClass();
V>obj.setName("world");
V>obj.hello();

V>// Другой объект - для проверки.
V>var obj1 = new NewClass();
V>obj1.hello();
V>


V>Точно так же делаются приватные методы


Это разграничение области видимости через замыкания. Кстати вполне себе паттерн для JS.
Re[6]: Паттерны для клиентской части веба
От: gandjustas Россия http://blog.gandjustas.ru/
Дата: 15.10.10 21:30
Оценка:
Здравствуйте, Воронков Василий, Вы писали:

ВВ>Здравствуйте, gandjustas, Вы писали:


G>>>>И что значит "которые не видно снаружи"?

V>>>Приватный метод объекта. Приватные методы разных объектов могут сколько угодно пересекаться по имени, ничего не сломается.
G>>У js нету приватных членов, все члены класса публичные.

ВВ>Хватит мучать мозг человеку, все это в JS прекрасно имитируется на замыканиях. Пространства имен задаются через литерал объекта и пр.


Конечно, это и есть паттерны для JS и подобных языков. GOF тут отдыхает.
Re[7]: Паттерны для клиентской части веба
От: busk  
Дата: 16.10.10 06:16
Оценка:
Здравствуйте, gandjustas, Вы писали:

G>Здравствуйте, Воронков Василий, Вы писали:


ВВ>>Здравствуйте, gandjustas, Вы писали:


G>>>>>И что значит "которые не видно снаружи"?

V>>>>Приватный метод объекта. Приватные методы разных объектов могут сколько угодно пересекаться по имени, ничего не сломается.
G>>>У js нету приватных членов, все члены класса публичные.

ВВ>>Хватит мучать мозг человеку, все это в JS прекрасно имитируется на замыканиях. Пространства имен задаются через литерал объекта и пр.


G>Конечно, это и есть паттерны для JS и подобных языков. GOF тут отдыхает.


резюмируя: вы опровергаете изречение vmpire Вообще, паттерны не привязаны к конкретному языку или окружению. Это паттерны,а не библиотеки. Синглетон, например, одинаково успешно реализуется и на C# и на JS и на VB., а утверждаете что в JS паттерны реализуются только через замыкания?

и вопрос номер два

B>>1. На странице aspx есть веб-контрол ascx. И на странице и на контроле в разметке была js функция с одним и тем же названием. В итоге функционал не работал, т.к.

B>>вместо одного вызывался другой метод.
V>Используйте объекты и инкапсуляцию методов, которые не видно снаружи. Тогда они и не пересекутся.
B>>А кто мешает подменить объкет? И что значит "которые не видно снаружи"?

как же в итоге такого избежать?
Re[6]: Паттерны для клиентской части веба
От: busk  
Дата: 16.10.10 07:56
Оценка:
Здравствуйте, vmpire, Вы писали:

V>Итак, пример (отсюда):



V>

V>// Конструктор.
V>function NewClass() {
V>  this.from = "author";   // открытое свойство (this)
V>  var name  = "somebody"; // закрытое свойство (var)

V>  // Приветствие.
V>  this.hello = function() {
V>    // закрытые свойства пишем без this
V>    alert("Hello, "+name+", from "+this.from);
V>  }
  
V>  // Метод для установки значения закрытого свойства.
V>  this.setName = function(n) {
V>    name = n;
V>  }
V>}

V>// Создаем объект и проверяем работу.
V>var obj = new NewClass();
V>obj.setName("world");
V>obj.hello();

V>// Другой объект - для проверки.
V>var obj1 = new NewClass();
V>obj1.hello();
V>


Пул вопросов:

1. а здесь идеология такая же: каждый класс в отдельный файл?
2. если класс должен работать с данными формы, то он должен через методы принимать параметры или сам захватывать?
3. Т.е. если у меня есть клиентская проверка валидности Клиента, то у меня должен быть класс Сервиса проверки, легкая сущность Клиент, и соотвественно о сущности Клиент знает только
Сервис?
4. При слабой связанности как контролировать, что для данной страницы включены все необходимые js файлы? Ведь как я понимаю вы говорите про логическое разделение файлов
Re[8]: Паттерны для клиентской части веба
От: gandjustas Россия http://blog.gandjustas.ru/
Дата: 16.10.10 08:47
Оценка: +1
Здравствуйте, busk, Вы писали:

B>Здравствуйте, gandjustas, Вы писали:


G>>Здравствуйте, Воронков Василий, Вы писали:


ВВ>>>Здравствуйте, gandjustas, Вы писали:


G>>>>>>И что значит "которые не видно снаружи"?

V>>>>>Приватный метод объекта. Приватные методы разных объектов могут сколько угодно пересекаться по имени, ничего не сломается.
G>>>>У js нету приватных членов, все члены класса публичные.

ВВ>>>Хватит мучать мозг человеку, все это в JS прекрасно имитируется на замыканиях. Пространства имен задаются через литерал объекта и пр.


G>>Конечно, это и есть паттерны для JS и подобных языков. GOF тут отдыхает.


B>резюмируя: вы опровергаете изречение vmpire Вообще, паттерны не привязаны к конкретному языку или окружению. Это паттерны,а не библиотеки. Синглетон, например, одинаково успешно реализуется и на C# и на JS и на VB., а утверждаете что в JS паттерны реализуются только через замыкания?

Не понял как две части высказывания связаны между собой.
Действительно считаю высказывание "паттерны не привязаны к языку" неверным. Большая часть паттернов GOF направлены именно на устранение недостатков языков, другие направлены на исправление "слишком ОО-проектирования".

Аналогично паттерн JS — инкапсуляция через замыкания направлен на исправление недостатка языка.

B>и вопрос номер два


B>>>1. На странице aspx есть веб-контрол ascx. И на странице и на контроле в разметке была js функция с одним и тем же названием. В итоге функционал не работал, т.к.

B>>>вместо одного вызывался другой метод.
V>>Используйте объекты и инкапсуляцию методов, которые не видно снаружи. Тогда они и не пересекутся.
B>>>А кто мешает подменить объкет? И что значит "которые не видно снаружи"?

B>как же в итоге такого избежать?

Так же через замыкания. Ведь в самом JS нету инкапсуляции.
Re[9]: Паттерны для клиентской части веба
От: busk  
Дата: 16.10.10 09:13
Оценка:
Здравствуйте, gandjustas, Вы писали:
B>>>>1. На странице aspx есть веб-контрол ascx. И на странице и на контроле в разметке была js функция с одним и тем же названием. В итоге функционал не работал, т.к.
B>>>>вместо одного вызывался другой метод.
V>>>Используйте объекты и инкапсуляцию методов, которые не видно снаружи. Тогда они и не пересекутся.
B>>>>А кто мешает подменить объкет? И что значит "которые не видно снаружи"?

B>>как же в итоге такого избежать?

G>Так же через замыкания. Ведь в самом JS нету инкапсуляции.

я так понял что как таковых паттернов в JS нет, есть замыкания?
Re[10]: Паттерны для клиентской части веба
От: gandjustas Россия http://blog.gandjustas.ru/
Дата: 16.10.10 09:37
Оценка:
Здравствуйте, busk, Вы писали:

B>Здравствуйте, gandjustas, Вы писали:

B>>>>>1. На странице aspx есть веб-контрол ascx. И на странице и на контроле в разметке была js функция с одним и тем же названием. В итоге функционал не работал, т.к.
B>>>>>вместо одного вызывался другой метод.
V>>>>Используйте объекты и инкапсуляцию методов, которые не видно снаружи. Тогда они и не пересекутся.
B>>>>>А кто мешает подменить объкет? И что значит "которые не видно снаружи"?

B>>>как же в итоге такого избежать?

G>>Так же через замыкания. Ведь в самом JS нету инкапсуляции.

B>я так понял что как таковых паттернов в JS нет, есть замыкания?


Замыкания — это возможность языка, а паттерны — это способы решения некоторых задач.
Re[7]: Паттерны для клиентской части веба
От: vmpire Россия  
Дата: 18.10.10 08:00
Оценка:
Здравствуйте, busk, Вы писали:

V>>Итак, пример (отсюда):


B>1. а здесь идеология такая же: каждый класс в отдельный файл?

На ваш вкус. Язык этого не требует, но если классы больше одного экрана, то это вполне разумно.

B>2. если класс должен работать с данными формы, то он должен через методы принимать параметры или сам захватывать?

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

B>3. Т.е. если у меня есть клиентская проверка валидности Клиента, то у меня должен быть класс Сервиса проверки, легкая сущность Клиент, и соотвественно о сущности Клиент знает только Сервис?

Не понял, что Вы называете Клиентом и Сервером. Если Сервер — это клиентская бизнес-логика, а Клмент — логика добычи данных из форм — то да.

B>4. При слабой связанности как контролировать, что для данной страницы включены все необходимые js файлы? Ведь как я понимаю вы говорите про логическое разделение файлов

Файлы не проконтролировать (то есть можно, но это криво). Но можно в каждом классе проверять наличие нужных ему классов и падать если их нет.
 
Подождите ...
Wait...
Пока на собственное сообщение не было ответов, его можно удалить.