VPF::Обсуждение темы о "прототипах"

Sardar

Дата 30.4.2005, 23:42 (ссылка)

(нет голосов)

Загрузка ...

Бегун

Профиль
Группа: Модератор
Сообщений: 6986
Регистрация: 19.4.2002
Где: Нидерланды, Groni ngen

Репутация: 78
Всего: 317

Здесь можно выражать спасибы, а также спрашивать что не ясно. Делать заявки на другие темы и аспекты JS. Впрочем я сам буду постепенно выкладывать "подноготную" smile

--------------------

Опыт - сын ошибок трудных © А. С. Пушкин
Процесс написания своего велосипеда повышает профессиональный уровень программиста. © Opik
Оценить мои качества можно тут.

Aliance

Дата 1.5.2005, 20:27 (ссылка)

(нет голосов)

Загрузка ...

I ♥ <script>

Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

Репутация: 55
Всего: 137

Браво

--------------------

• Все о событиях
• Объекты и массивы
• ОКНА И ФРЕЙМЫ

JAVA ≠ JavaScript

Aliance

Дата 22.5.2005, 20:05 (ссылка)

(нет голосов)

Загрузка ...

I ♥ <script>

Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

Репутация: 55
Всего: 137

Объясни, зачем вот это:

Код


//раз функция это обьект, то создадим ей свой метод :)
test1.callMe=function(arg){
  this(arg); //мы же функция =)
};
test1.callMe("проба"); //вызов функции test1: "test1: проба"

в первом посте...
Оно ж ничего не делает...

--------------------

• Все о событиях
• Объекты и массивы
• ОКНА И ФРЕЙМЫ

JAVA ≠ JavaScript

Sardar

Дата 22.5.2005, 20:52 (ссылка)

(нет голосов)

Загрузка ...

Бегун

Профиль
Группа: Модератор
Сообщений: 6986
Регистрация: 19.4.2002
Где: Нидерланды, Groni ngen

Репутация: 78
Всего: 317

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

Неужели кто то решил таки прочесть сие smile

Какюсь, ещё не дописал, даже примеров из жизни не привёл, всё потом... smile

--------------------

Aliance

Дата 22.5.2005, 21:12 (ссылка)

(нет голосов)

Загрузка ...

I ♥ <script>

Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

Репутация: 55
Всего: 137

Ясно-понятно. Я это хорошо понимаю, значит пропускаем smile

Во втором посте в самом первом коде, почему вот это

Код


    alert(parg.length); //2, 2

выдает 2, а не 0?

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

--------------------

• Все о событиях
• Объекты и массивы
• ОКНА И ФРЕЙМЫ

JAVA ≠ JavaScript

Sardar

Дата 22.5.2005, 22:05 (ссылка)

(нет голосов)

Загрузка ...

Бегун

Профиль
Группа: Модератор
Сообщений: 6986
Регистрация: 19.4.2002
Где: Нидерланды, Groni ngen

Репутация: 78
Всего: 317

Цитата(Aliance @ 22.5.2005, 20:12)

выдает 2, а не 0?

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

Попробуй написать пару тестов, сразу поймёшь суть smile

--------------------

Aliance

Дата 22.5.2005, 22:10 (ссылка)

(нет голосов)

Загрузка ...

I ♥ <script>

Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

Репутация: 55
Всего: 137

Sardar
smile

проблемы возникли из-за того, что я стал учить php.
Все время кажется, что нельзя прочитать те значения, которые объявлены после их чтения...
Понятно, теперь.
Добавлено @ 22:18
Вау, я понял пост номер три полностью. Я понял что мне было не понятно - функция test - конструктор. Если мы пишем this - мы создаем новое свойство у объекта... а если var - то переменную smile

Теперь собственно буду ждать инфы о собственно-прототипах, спасибо Сардару smile

--------------------

• Все о событиях
• Объекты и массивы
• ОКНА И ФРЕЙМЫ

JAVA ≠ JavaScript

Иль

Дата 28.5.2005, 18:18 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 544
Регистрация: 3.3.2005
Где: Москва

Репутация: 2
Всего: 14

Цитата(Sardar @ 30.4.2005, 23:42)

Здесь можно выражать спасибы

Выражаю свои СПАСИБЫ.
Sardar, спасибо что потрудился и потратил время, хорошо цементирует smile

, гут.

--------------------

Ты виндусятник?... А я да. smile

Иль

Дата 2.6.2005, 20:28 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 544
Регистрация: 3.3.2005
Где: Москва

Репутация: 2
Всего: 14

Я не ошибаюсь, что в рекурсии каждый раз создаются новые объекты function?

Это сообщение отредактировал(а) Иль - 2.6.2005, 20:55

--------------------

Ты виндусятник?... А я да. smile

Sardar

Дата 3.6.2005, 00:44 (ссылка)

(нет голосов)

Загрузка ...

Бегун

Профиль
Группа: Модератор
Сообщений: 6986
Регистрация: 19.4.2002
Где: Нидерланды, Groni ngen

Репутация: 78
Всего: 317

Цитата

Я не ошибаюсь, что в рекурсии каждый раз создаются новые объекты function?

Иль, ты всё правильно понял потому функция и держит "контекст вызова внешней функции" smile

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

--------------------

Иль

Дата 3.6.2005, 10:57 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 544
Регистрация: 3.3.2005
Где: Москва

Репутация: 2
Всего: 14

Sardar, я недопонимаю. Получается что на практике реализация этого объектного подхода в рекурсии или вложенном вызове самой себя через другие функции не работает?
Вот смотри, есть функция.caller и есть arguments.callee. Они ж дают ссылки на соответствующие объекты, тогда ж почему в операторе if сравниваются их строковое представление?

Код


<html><head><meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
</head><body onclick="sd()">
<script language="JavaScript" type="text/JavaScript">
var c,h,r
function sd(){
if(!h){
h=1
}else{
if(h==1){
c=sd.caller
h=arguments.callee
r=arguments
alert((c==h)+"\n очень хочется false")
alert(r)
//testOn("sd.arguments.callee")
}else{
alert(sd.caller.arguments)
alert((r==sd.caller.arguments)+"\n - А хочется true")
alert(c+"\n\n\n\n\t"+(c==arguments.callee)+" -А хочется false\n\n\n\n"+arguments.callee);
alert(c+"\n\n\n\n\t"+(c==sd.caller)+" -А хочется false\n\n\n\n"+sd.caller);
return
}}
sd()
}
</script>
</body></html>

Добавлено @ 11:02
Или это из-за специфики работы оператора if

Это сообщение отредактировал(а) Иль - 3.6.2005, 12:30

--------------------

Ты виндусятник?... А я да. smile

Aliance

Дата 16.6.2005, 13:12 (ссылка)

(нет голосов)

Загрузка ...

I ♥ <script>

Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

Репутация: 55
Всего: 137

ppc. Я наконец-то понл примененеие протопипа в большинстве случаев. Ура, товарищи.
Все таки я прочел проф. книгу - понимаю, что до этого нужно "дорости" самостоятельно =)
Вот непонятой осталась одна область:
Зачем протопипы сущ-ют для функции?

--------------------

• Все о событиях
• Объекты и массивы
• ОКНА И ФРЕЙМЫ

JAVA ≠ JavaScript

Sardar

Дата 17.6.2005, 02:53 (ссылка)

(нет голосов)

Загрузка ...

Бегун

Профиль
Группа: Модератор
Сообщений: 6986
Регистрация: 19.4.2002
Где: Нидерланды, Groni ngen

Репутация: 78
Всего: 317

Иль, нет не их строковое преставление сравниваеться, сравниваються ссылки, если обе переменные ссылаються на один обьект функцию, то они идеентичны. Другое дело что caller вещь весьма магическая, не рекомендуемая к употреблению smile

Можешь даже заметить что sd.caller, arguments.callee.caller и arguments.caller это разные вещи, хотя по смсылу должны ссылаться на деиный обьект функцию(после рекурсионного вызова). Я не понял вопроса smile

P.S. ивиняюсь что так поздно отвечаю, потестил, получил результаты что не смог обьяснить, а навязывать свою точку зрения не хотел =)

Цитата(Aliance @ 16.6.2005, 12:12)

Зачем протопипы сущ-ют для функции?

В смысле зачем? Функция это тоже обьект, следовательно имеет конструктор(Function), следовательно и прототип(Function.prototype). Будешь ли ты это использовать, третий вопрос, но в языке не должно быть исключений если это не необходимо smile

P.S. В Опере 6 обьект Function не существует. В IE обьект event, window и другие DOM0 обьекты не имеют поля constructor. Это конечно верно, это всё синглтоны, но вносит исключения, что не есть гуд.

--------------------

Aliance

Дата 17.6.2005, 12:02 (ссылка)

(нет голосов)

Загрузка ...

I ♥ <script>

Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

Репутация: 55
Всего: 137

Цитата(Sardar @ 17.6.2005, 03:53)

В смысле зачем? Функция это тоже обьект, следовательно имеет конструктор(Function), следовательно и прототип(Function.prototype). Будешь ли ты это использовать, третий вопрос, но в языке не должно быть исключений если это не необходимо

Так и знал, что ответ будет таким. Я это прекрасно знаю. меня именно интересует применение smile

--------------------

• Все о событиях
• Объекты и массивы
• ОКНА И ФРЕЙМЫ

JAVA ≠ JavaScript

Sardar

Дата 18.6.2005, 01:04 (ссылка)

(нет голосов)

Загрузка ...

Бегун

Профиль
Группа: Модератор
Сообщений: 6986
Регистрация: 19.4.2002
Где: Нидерланды, Groni ngen

Репутация: 78
Всего: 317

Цитата(Aliance @ 17.6.2005, 11:02)

Так и знал, что ответ будет таким. Я это прекрасно знаю. меня именно интересует применение

Ну я по натуре человек предсказуемый smile

А применяться это может например чтобы IE5.0 пофиксить, он не поддерживает методов call и apply у функций.

Код

if(typeof(Function)!="undefined" && typeof(Function.prototype.call)!="function")
 Function.prototype.call=function(obj, args) {
   if(typeof(obj)!="object") return;
   //и так, создадим у обьекта новое рандомное не заюзанное поле, куда и включим функцию
   var name="_my_call_temp_name_"+Math.round(Math.random()*1000000);
   while(typeof(obj[name])!="undefined") name="_my_call_temp_name_".Math.round(Math.random()*1000000);
   obj[name]=this;
   //теперь вызовем усё что пришло
   var arg="";
   for(var i=1; i<arguments.length; i++) arg+=", arguments["+i+"]";
   eval("obj."+name+"("+arg.substr(2)+");");
   //теперь подчистим за собой
   delete obj[name];
 }

function test(arg1, arg2) {
  alert("Object field: "+this.field+"\nArgument 1: "+arg1+"\nArgument 2: "+arg2);
}
a={field:"pole!"};
test.call(a, "argument 1 !!!", "argument 2 !");

Аналогично пишеться apply.

--------------------

Aliance

Дата 18.6.2005, 18:06 (ссылка)

(нет голосов)

Загрузка ...

I ♥ <script>

Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

Репутация: 55
Всего: 137

Вот, оно. Лови в репу smile

--------------------

• Все о событиях
• Объекты и массивы
• ОКНА И ФРЕЙМЫ

JAVA ≠ JavaScript

o.s.a.

Дата 30.7.2005, 10:11 (ссылка)

(нет голосов)

Загрузка ...

Xo4y B MocKBy

Профиль
Группа: Участник
Сообщений: 312
Регистрация: 16.2.2005
Где: Ташкент

Репутация: 5
Всего: 15

Извините, а скоро будет продолжение? А то очень интересно. smile

--------------------

Не могу стоять, пока другие работают, пойду полежу.

Гость_12345

Дата 17.10.2005, 00:59 (ссылка)

(голосов: 0)

Загрузка ...

Unregistered

ЦеННо, но заметил баги в языке интерфейса. Не все слова пишутся с 2 "н". Список замеченных опечаток ниже : ; )

ссылка: http://forum.vingrad.ru/index.php?showtopic=50738
изложенно -> изложено
записанны -> записаны
вызванна -> вызвана
созданна -> создана (3 раза)
показанно -> показано

Sardar

Дата 17.10.2005, 01:53 (ссылка)

(нет голосов)

Загрузка ...

Бегун

Профиль
Группа: Модератор
Сообщений: 6986
Регистрация: 19.4.2002
Где: Нидерланды, Groni ngen

Репутация: 78
Всего: 317

Гость_12345 спасибо, исправил.

--------------------

Greendrake

Дата 22.1.2006, 21:52 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 364
Регистрация: 14.7.2005

Репутация: нет
Всего: 6

Откопал обалденную презентацию по сабжу, рекомендую её также всем кому интересна обсуждаемая статья
http://sbnt.jinr.ru/iris/articles/javascript-titov.ppt

По теме: объясните мне плиз вот энтот объектно-прототипный синтаксис, который использовал Котеров в своём JSHttpRequest (привожу "каркас" его кода):

Код


function JSHttpRequest() {}
(
function() {
  var count       = 0;
  
  JSHttpRequest.dataReady = function(id, text, js) {
// ..........
  }
  
  JSHttpRequest.prototype = {
    onreadystatechange: null,
    abort: function() {},
    _dataReady: function(text, js) {}
   }
}
) ();

Как-то очень всё хитро. Сначала задаётся название головного объекта - JSHttpRequest, после него - () - типа это функция, затем - {} - типа это объект. А затем всё остальное помещается в скобки ( ..... ), внутри которых (разве так можно??) определён прототип всей этой бандуры. А после них на конце ещё (); Круто блин, тоже так хочу уметь smile

Это сообщение отредактировал(а) Greendrake - 23.1.2006, 00:03

Zeroglif

Дата 23.1.2006, 15:10 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 644
Регистрация: 22.9.2005

Репутация: 28
Всего: 66

Цитата(Greendrake @ 22.1.2006, 21:52

)

внутри которых (разве так можно??) определён прототип всей этой бандуры. А после них на конце ещё (); Круто блин, тоже так хочу уметь

Пошли по порядку:

Строка1:
в глобальном контексте объявлена функция с именем JSHttpRequest (обычная function declaration, то есть функция доступна скрипту в любой момент ибо интерпретатор отловил её сразу же). Автоматом создан объект prototype. Судя по пустому телу служит неким пустым классом (это жаргон), который впоследствии явно будет жёстко изнасилован. Больше интересной инофрмации нет.

Строка 2: доходит очередь до анонимной функции (тоже в глобальном контексте). Подробнее:

- раз у нас анонимная функция, значит нету имени (хе-хе), если нету имени - мы имеем дело с выражением/литералом/FunctionExpression;

- чтобы не было в этом сомнений заключаем всё многострочное мясо в скобки, результат выражения вернёт объект самой функции;

- если нужно сразу же функцию вызвать - добавляем оператор вызова функции ()

-проще говоря, конструкция вида:

Код


function F(a){alert(a)};
F(1);

в своём безымянном представлении и с одновременным вызовом выглядит так:

Код


(function(a){alert(a)})(1);

Строка 4: неизвестно зачем создаём локальную переменную count со значением 0;

Строка 6: начинаем насиловать объект JSHttpRequest, к которому добавляем свойство dataReady, на конце живёт анонимная функция с локальными переменными (параметрами), то бишь налицо метод (это жаргон) объекта JSHttpRequest.

Строка 10: переопределяем созданный ранее объект prototype на свой собственный, со своими свойствами.

Что будет дальше - я понятия не имею, но судя по подготовке начнут плодится экземпляры new JSHttpRequest(), что-нибудь в этом роде.

Конец.

Greendrake

Дата 23.1.2006, 23:55 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 364
Регистрация: 14.7.2005

Репутация: нет
Всего: 6

Zeroglif, спасибо, вроде прояснилось.

Не понял, зачем могло понадобиться определять метод dataReady сначала напрямую - JSHttpRequest.dataReady, а потом другим способом - внутри прототипа, с нижним подчёркиванием в начале (кстати что оно означает, для чего служит, и что если без него?): _dataReady: function(text, js) {}

Как я понял, переопределяем методы через прототип для того, чтобы потом можно было создавать экземпляры JSHttpRequest, верно? Т.к. если определить просто по типу JSHttpRequest.dataReady, то этот метод присобачится именно к этому конкретному JSHttpRequest, а к его клонам - уже нет?

Sardar

Дата 24.1.2006, 00:56 (ссылка)

(нет голосов)

Загрузка ...

Бегун

Профиль
Группа: Модератор
Сообщений: 6986
Регистрация: 19.4.2002
Где: Нидерланды, Groni ngen

Репутация: 78
Всего: 317

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

Также обойти в ИЕ утечку памяти при использовании closures, хотя именно в примере её не будет, но это не весь код.

JSHttpRequest.dataReady это поле функции (closure) JSHttpRequest, а _dataReady это поле обьектов порождённых от JSHttpRequest, т.е. совершенно разные вещи smile

--------------------

Иль

Дата 24.1.2006, 11:49 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 544
Регистрация: 3.3.2005
Где: Москва

Репутация: 2
Всего: 14

Цитата(Greendrake @ 22.1.2006, 21:52

)

Откопал обалденную презентацию по сабжу, рекомендую её также всем кому интересна обсуждаемая статья
http://sbnt.jinr.ru/iris/articles/javascript-titov.ppt

Там говорится про перегрузку методов - нет её в JavaScript. Там не перегрузка а переопределение методов

--------------------

Ты виндусятник?... А я да. smile

regis

Дата 20.2.2006, 15:10 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 232
Регистрация: 12.12.2005
Где: Москва, Россия

Репутация: нет
Всего: 7

Sardar, спасибо большое! Попробую разобраться с JS на досуге...

--------------------

В. В чем разница между hardware и software?О. В отличие от второго, по первому можно двинуть кулаком или пнуть ногой.

dm9

Дата 19.3.2006, 22:30 (ссылка)

(нет голосов)

Загрузка ...

Дмитрий Копытин

Профиль
Группа: Vingrad developer
Сообщений: 3876
Регистрация: 22.7.2002
Где: Москва

Репутация: нет
Всего: 137

Я прочитал - всё понятно, большое спасибо. Правда, я читаю это после котеровских набл, так что пошло достаточно легко smile

Очень хотелось прочитать про всякие стандартные функции, переменные (ну, arguments будет корректно переменной назвать?) и свойства.

Например, call(), apply(), arguments, .caller, .callee.

О таких вещах узнаёшь как-то случайно, из статей, из обсуждений - сами авторы считают их вещью всем известной и очевидной. Котеров, например, пишет про основы Ява-Скрипта, и считает, что читатель знаком с apply и call. Странно это... (Не наезд, всем авторам в любом случае большое спасибо - это так, пожелание).

Ciber SLasH

Дата 19.3.2006, 23:44 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Участник Клуба
Сообщений: 1813
Регистрация: 9.11.2004
Где: С.-Петербург

Репутация: 24
Всего: 67

[offtop]
dm9, а ты качни справочник по JS в моей подписи, и будешь знать какие методы есть у тех или иных объектах (в догонку ещё и WDH не мешало бы скачать). smile

[/offtop]

Sardar

Дата 20.3.2006, 01:19 (ссылка)

(нет голосов)

Загрузка ...

Бегун

Профиль
Группа: Модератор
Сообщений: 6986
Регистрация: 19.4.2002
Где: Нидерланды, Groni ngen

Репутация: 78
Всего: 317

Цитата(dm9 @ 19.3.2006, 21:30

)

про всякие стандартные функции

Сразу забудь тогда про IE5.0- , этот зверь не поддерживает ничего из JS, по сути это почти VBS с изменённым синтаксисом, такой же уровень гибкости.

.caller трогать нельзя, теоретической основы под этим не помню, но в JS1.5 (все современные браузеры) он deprecated

arguments это весьма логичный способ подойти к аргументам функции, у которой их может быть сколько угодно. Также для простоты забросили туда и остальную инфу типа callee. Жаль что это обьект, а не Array, не хватает многих функций (map, filter и т.д.), которые сами вешаем (камень в огород ECMA) на прототип Array.

call и apply выполняют одно и тоже - вызывают функцию в контексте обьекта, только способ передачи аргументов разный. Что бы это понять и грамотно заюзать, потребуеться серьёзно упроситься от классического ООП. Развёртка аргументов круче в Python, хватило бы тогда и одной call функции. В Fortress лучше сделан реверанс в сторону фанатов ООП, которые не всегда понимают "этот метод может быть методом любого обьекта и изменяться динамически". Множества "операций" traits по моему очень красиво и эффективно.

По поводу использования, обычно народ решает задачи "привычными" методами, мне например проще так:

Код

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
    <title>Untitled</title>
<script type="text/javascript">
<!--
//наложить функцию на массив
if(!Array.prototype.map) Array.prototype.map = function(func, arr) {
  var ret=[];
  for(var i=0; i<this.length; i++) {
    if(arr instanceof Array) ret.push(func(this[i], arr[i]));
    else ret.push(func(this[i]));  
  }
  return ret;
}

//поделить строку на равные куски
if(!String.prototype.chunk) String.prototype.chunk = function(size) {
  if(size < 1) return this;
  var ret=[];
  for(var i=0; i<this.length; i+=size)
     ret.push(this.substr(i, size));
  return ret;
}

//собсно сам "перелив"
function colorFade(id, obj, style, colorfrom, colorto, secs) {
   function numerize(v) { return parseInt(v, 16);}

   var nid = '~'+id;   
   var steps = secs * 1000 / arguments.callee.resolution;
   var reg = /\#?([0-9a-fA-F]{6})/;
   colorfrom = reg.exec(colorfrom)[1].chunk(2).map(numerize);
   colorto = reg.exec(colorto)[1].chunk(2).map(numerize);
   var colorstep = colorfrom.map(function(a, b) {return (a - b)/steps;}, colorto);
   
   var curstep = 0;
   var dir = 1;
   var ret = colorto;
   
   function next(a, b) { return (a + b * dir); }
   
   if(arguments.callee.handles[nid]) window.clearTimeout(arguments.callee.handles[nid]);
   arguments.callee.handles[nid] = window.setInterval(function() {
      ret = ret.map(next, colorstep);
      obj.style[style] = "rgb("+ ret.map(Math.round).join(',')+")";
      
      if(++curstep >= steps) {
         ret = dir>0? colorfrom: colorto;
         curstep = 0;
         dir*=-1;
      }
   }, arguments.callee.resolution);
}
colorFade.handles={};
colorFade.resolution = 50;


//-->
</script>
</head>

<body>
<div>
  <button onclick="colorFade('test1', this.parentNode, 'backgroundColor', '#4e0973', '#e2f5db', 3);">Start</button>
</div>
<div>
  <button onclick="colorFade('test2', this.parentNode, 'backgroundColor', '#f5dbe5', '#5c430a', 3);">Start</button>
</div>
<div>
  <button onclick="colorFade('test3', this.parentNode, 'backgroundColor', '#ffffff', '#160a5c', 3);">Start</button>
</div>
</body>
</html>

Вместо удержания моря глобальных массивов (регистров) или собирать "классы". Как видно, даже самая простая задача не обходиться без расширения интерфейса стандартных обьектов, в частности массива... и очень не хватает человеческого списка, хештаблицы, карты(любой обьект, любой обьект) и многих других вещей. Порой думаю что за это растрелял бы парней ECMA... smile

P.S. глянул на пост, больше критики на JS чем ожидал... smile

Эх нужа ему хорошая встряска, а то популярный (вернее ECMA, везде, от апплетов и плагинов для декстопов, кончая скриптами к XSLT и т.д), а по выразительности сильно уступает современным скриптовым языкам.

--------------------

dm9

Дата 20.3.2006, 03:11 (ссылка)

(нет голосов)

Загрузка ...

Дмитрий Копытин

Профиль
Группа: Vingrad developer
Сообщений: 3876
Регистрация: 22.7.2002
Где: Москва

Репутация: нет
Всего: 137

В примере разобрался, спасибо!

Вот это, конечно, для меня странно smile

function colorFade()
colorFade.handles={};
colorFade.resolution = 50;

То есть код я понимаю, но я бы стал "собирать класс"... Интересное применение. Буду осознавать smile

Цитата

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

Скажи, а не существует таких библиотек, которые это всё реализуют? Наверняка кто-то пытался собрать этакий STL для JS.

Ciber SLasH

Дата 20.3.2006, 03:13 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Участник Клуба
Сообщений: 1813
Регистрация: 9.11.2004
Где: С.-Петербург

Репутация: 24
Всего: 67

Sardar, я снимаю перед тобой шляпу. smile

Мне бы так научиться жонглировать в скриптах.
Я посмотрел код, разобрался, понял реализацию, но до меня не доходит сам алгоритм работы colorFade-а.
Не мог бы ты описать сам алгоритм?

dm9

Дата 20.3.2006, 03:42 (ссылка)

(нет голосов)

Загрузка ...

Дмитрий Копытин

Профиль
Группа: Vingrad developer
Сообщений: 3876
Регистрация: 22.7.2002
Где: Москва

Репутация: нет
Всего: 137

Цитата(Ciber SLasH @ 20.3.2006, 04:13

)

Не мог бы ты описать сам алгоритм?

Давай я попробую smile

Цитата(Sardar @ 20.3.2006, 02:19

)

function colorFade(id, obj, style, colorfrom, colorto, secs) {
// Это понятно
function numerize(v) { return parseInt(v, 16);}
// Не знаю, зачем smile

Всё будет работать и без этого, вроде бы. То есть var nid = id тоже работает
var nid = '~'+id;
// secs * 1000 - миллискекунды, за которые всё должно перелиться
// arguments.callee.resolution - задержка между двумя изменениями цвета, миллисекунды
// secs * 1000 / arguments.callee.resolution - число шагов, за которые произойдёт полное изменение цвета
var steps = secs * 1000 / arguments.callee.resolution;
// рег, которые выделит из XXXXXX или #XXXXXX (где Х - цифра) 6 цифр.
var reg = /\#?([0-9a-fA-F]{6})/;
// Теперь в массиве colorfrom будут составляющие цвета (colorfrom[0] - R, colorfrom[1] - G, colorfrom[2] - B)
colorfrom = reg.exec(colorfrom)[1].chunk(2).map(numerize);
// Аналогично, только для того цвета, К которому идём, а не ОТ которого
colorto = reg.exec(colorto)[1].chunk(2).map(numerize);
// Массив, 3 элемента (RGB). Содержит изменение цвета на каждом шаге. То есть в colorstep[0] содержится число, которое будет добавляться к R-составляющей цвета на каждом шаге, и т. д. Изменение цвета происходит по линейному закону.
var colorstep = colorfrom.map(function(a, b) {return (a - b)/steps;}, colorto);
// Текущий шаг - 0 (инициализация)
var curstep = 0;
// Направление изменения цвета (1 - от colorfrom к colorto, 0 - наоборот)
var dir = 1;
// Инициализация цвета. Тут у Сардара небольшая ошибка - по логике тут должна быть colorfrom, а не to. Чтобы исправить - надо разбираться со знаками выражений. Сейчас я этим заниматься не буду smile

Это сообщение отредактировал(а) dm9 - 20.3.2006, 03:46

Ciber SLasH

Дата 20.3.2006, 05:54 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Участник Клуба
Сообщений: 1813
Регистрация: 9.11.2004
Где: С.-Петербург

Репутация: 24
Всего: 67

dm9, спасибо за разжовывание. В принципе меня интересовал только сам механизм смены цветов. smile

Sardar

Дата 20.3.2006, 11:35 (ссылка)

(нет голосов)

Загрузка ...

Бегун

Профиль
Группа: Модератор
Сообщений: 6986
Регистрация: 19.4.2002
Где: Нидерланды, Groni ngen

Репутация: 78
Всего: 317

Цитата(dm9 @ 20.3.2006, 02:11

)

Вот это, конечно, для меня странно smile

colorFade.handles={}; - в JS нет человеческой карты обьект=>обьект, потому пользуемся обьектом как хештаблицей. Сохраняем таймеры в общем регистре, что бы потом можно было остановить если человек нескольк раз нажмёт на кнопку.
colorFade.resolution = 50; - это конфигурационная переменная, одна на все fade.
Да можно было сделать некий класс, возможно даже singleton, но в JS мне так проще. В PHP5 или в Java уже классами.

Цитата(dm9 @ 20.3.2006, 02:42

)

// Не знаю, зачем smile Всё будет работать и без этого, вроде бы. То есть var nid = id тоже работает

Не совсем, это идентификатор для карты handles, где храним таймеры. Но карт в JS нет, это обьект, а обьект имеет стандартный интерфейс. Таким образом ключь toString и прочие будут перезаписывать совсем не то что ты хотел. В итоге лучше "обезоапсить" добавив тильду, т.к. ни одно поле у обьекта с тильды не начинаеться. Не красивый, но рабочий хак... smile

Цитата(dm9 @ 20.3.2006, 02:42

)

ут у Сардара небольшая ошибка - по логике тут должна быть colorfrom, а не to

Угу, пример накатал за 15 минут для поста, ночью, была заморочка с "дёрганьем цветов" если от c colorfrom, разбираться не хотел и попросту схалтурил smile

Отсюда можно вывести два понятия что люди часто путают: выразительность и читабельность языка. Выразительность это то, на сколько просто языком описать свою мысль/идею, либо это пара строк кода, либо 100кб в куче файлов. Читабельность это простота восприятия синтаксиса, не каждый новичёк считает тернарный оператор ?: хорошо читаемым, в то же время он очень выразителен. Самые читабельные по моему паскалеподобные языки, самые выразительные функциональные и ООП (Java и C#, a C++ пусть идёт лесом). Чем выше уровень программиста, тем больше потребность именно в выразительности. ИМХО JS'у не хватает выразительности, это красивый и мощный язык, но имплементируя его я бы пошёл дальше ECMA. Если откинуть прямую "обьектность" то легко можно распараллелить исполнение (хотя это будет уже не JS...), натолкнуло это

Ciber SLasH, ничего в алгоритме нету smile

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

--------------------

dm9

Дата 20.3.2006, 12:23 (ссылка)

(нет голосов)

Загрузка ...

Дмитрий Копытин

Профиль
Группа: Vingrad developer
Сообщений: 3876
Регистрация: 22.7.2002
Где: Москва

Репутация: нет
Всего: 137

А всё-таки... немного оффтоп, конечно, но тут вся тема - оффтоп smile

Цитата(dm9 @ 20.3.2006, 04:11

)

Интересны не отдельные разработки "по мелочам", а именно попытка собрать всё в один пакет.

Sardar

Дата 20.3.2006, 12:52 (ссылка)

(нет голосов)

Загрузка ...

Бегун

Профиль
Группа: Модератор
Сообщений: 6986
Регистрация: 19.4.2002
Где: Нидерланды, Groni ngen

Репутация: 78
Всего: 317

Цитата(dm9 @ 20.3.2006, 11:23

)

Интересны не отдельные разработки "по мелочам", а именно попытка собрать всё в один пакет.

Лишний вес по сути Посмотри что я писал для этой шкурки форума, MyLib.js, там доведение до ума интерфейса Array, addEventListener и прочее. Только то что использовал, то и осталось. Видел либы для анимаций и эфефктов, дахзе сам писал, но как то в реальной жизни не требуеться. Да и написать это всё по новой просто, скрипты ведь.

Угу, думал как это всё аккуратно вырезать в отдельную тему, от работы в мыслях хаос, почищю топ позже smile

--------------------

elferno

Дата 31.8.2007, 15:53 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 35
Регистрация: 31.8.2007

Репутация: нет
Всего: -3

я похоже слишком  примитивный  чтобы  понять  концеп
прототипного JS, Вы не могли бы, пожалуйсто, ответить:

1. зачем вообще применять такую модель.
2. если я все пишу примитивным способом:

            document.getElementById("my_element").innerHTML='123';

            вместо

            inner='123';
            document.getElementById("my_element").appendChild(inner);   //вроде как-то так

то каким образом мне сейчас лучше поступить?

заранее спасибо.

P.S. был бы весьма признателен получив Ваш ответ в ICQ на номер 282-897-997

Это сообщение отредактировал(а) elferno - 31.8.2007, 16:06

cruelangel

Дата 12.9.2007, 22:43 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 319
Регистрация: 12.9.2007

Репутация: 4
Всего: 8

>во многих языках есть понятие полей обьекта, при изменении которого вызывается функция обработчик(т.н. get/set функции).

их правильнее называть свойствами, а поля - это просто хранилище данных безо всяких геттеров и сеттеров

1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: Общие вопросы \| Следующая тема »