VPF::вызов строчного литерала как метода. jQuery

pasha4ur

Дата 13.10.2014, 19:46 (ссылка)

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

Загрузка ...

дизайнер

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

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

Всем привет

Не пойму, почему работает у автора эта строка:

function () { $this[config.effect](config.speed);}

config.effect - это строка и туда придет строчный литерал.

Код


(function() {
    
$('html').addClass('js');

var contactForm = {

    container: $('#contact'),

    config: {
        effect: 'slideToggle',
        speed: 500
    },

    init: function(config) {
        $.extend(this.config, config);

        $('<button></button>', {
            text: 'Contact Me'
        })
            .insertAfter( 'article:first' )
            .on( 'click', this.show );
    },

    show: function() {
        var cf = contactForm,
            container = cf.container,
            config = cf.config;

        if ( container.is(':hidden') ) {
            contactForm.close.call(container);
            container[config.effect](config.speed);
        }
    },

    close: function() {
        var $this = $(this), // #contact
            config = contactForm.config;

        if ( $this.find('span.close').length ) return;

        $('<span class=close>X</span>')
            .prependTo(this)
            .on('click', function() {
                // this = span
                $this[config.effect](config.speed);
            })
    }
};

contactForm.init({
    // effect: 'fadeToggle',
    speed: 300
});

})();

Это сообщение отредактировал(а) pasha4ur - 13.10.2014, 19:48

ksnk

Дата 14.10.2014, 11:28 (ссылка)

(голосов:1)

Загрузка ...

прохожий

Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 48
Всего: 386

А что удивляет? Все сущности в JS - объекты. К объектам есть литеральный доступ, через точку и "массивный", через "вырезку". Так оно устроено.

Это сообщение отредактировал(а) ksnk - 14.10.2014, 11:28

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

Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image

pasha4ur

Дата 14.10.2014, 16:57 (ссылка)

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

Загрузка ...

дизайнер

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

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

Это я знаю.

проблема в том, что в $this[config.effect] лежит строка 'slideToggle'. Как ее можно вызывать? Это все равно, что написать

Код


var v = 'slideToggle'(500);

моя не понимать этого

Неужели там eval() парсит код и вызывает анимационный метод по ссылке?

Это сообщение отредактировал(а) pasha4ur - 14.10.2014, 17:02

ksnk

Дата 17.10.2014, 09:33 (ссылка)

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

Загрузка ...

прохожий

Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 48
Всего: 386

pasha4ur, в JS у всех полей объектов есть имена. Фактически - ассоциативный массив. И да, JS - это интерпретатор он весь состоит из одного большого евала smile

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

Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image

sQu1rr

Дата 17.10.2014, 13:15 (ссылка)

(голосов:1)

Загрузка ...

Опытный

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

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

Цитата(pasha4ur @ 14.10.2014, 16:57

)

Это все равно, что написать

Нет, это всеравно что написать

Код


$this.slideToggle(500);

Потому что как я понимаю не

Цитата(pasha4ur @ 14.10.2014, 16:57

)

в $this[config.effect] лежит строка 'slideToggle'

а в config.effect лежит строка 'slideToggle'

pasha4ur

Дата 19.10.2014, 00:07 (ссылка)

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

Загрузка ...

дизайнер

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

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

ksnk про объекты я знаю. Но все равно не пойму, как он так строку использует, как функцию.

Цитата(sQu1rr @ 17.10.2014, 13:15

)

Потому что как я понимаю не

там он лежит.

все равно, что написать $this.config.effect.

_zorn_

Дата 20.10.2014, 02:28 (ссылка)

(голосов:1)

Загрузка ...

Эксперт

Профиль
Группа: Завсегдатай
Сообщений: 1077
Регистрация: 21.8.2007

Репутация: 1
Всего: 12

Цитата(pasha4ur @ 19.10.2014, 08:07

)

там он лежит.

все равно, что написать $this.config.effect.

Нет

Код


...
var contactForm = {
...
    config: {
        effect: 'slideToggle',
        speed: 500
    },
...
            config = contactForm.config;
...
                $this[config.effect](config.speed);
...

$this[config.effect](config.speed); === $this['slideToggle'](config.speed); === $this.slideToggle(config.speed);

pasha4ur

Дата 20.10.2014, 19:35 (ссылка)

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

Загрузка ...

дизайнер

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

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

А почему нельзя сделать так?

$this.config.effect(config.speed)

"$this['slideToggle'](config.speed);"
В объекте contactForm нет же свойства с названием 'slideToggle'

sQu1rr

Дата 20.10.2014, 20:03 (ссылка)

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

Загрузка ...

Опытный

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

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

Цитата(pasha4ur @ 20.10.2014, 19:35

)

А почему нельзя сделать так?

Цитата(pasha4ur @ 19.10.2014, 00:07

)

про объекты я знаю.

Нельзя потому что "точка" это доступ к полям объекта. $this.config.effect - это дуступ к полю effect переменной config внутри объекта $this. Выполняется слева на право.
$this = { config: { effect: 'asdf' }, asdf: true };
$this.config.effect // asdf
$this[$this.config.effect] // true, == $this['asdf'] == $this.asdf

Цитата(pasha4ur @ 20.10.2014, 19:35

)

В объекте contactForm нет же свойства с названием 'slideToggle'

Ну так $this это же не объект contactForm smile

_zorn_

Дата 21.10.2014, 07:04 (ссылка)

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

Загрузка ...

Эксперт

Профиль
Группа: Завсегдатай
Сообщений: 1077
Регистрация: 21.8.2007

Репутация: 1
Всего: 12

Цитата(pasha4ur @ 21.10.2014, 03:35

)

А почему нельзя сделать так?

$this.config.effect(config.speed)

$this.config.effect - не метод (функция), а просто строка. Ее нельзя вызвать.
Если только таким извратом

Код


eval('$this.'+$this.config.effect+'('+config.speed+')');

но зачем ?

Цитата(pasha4ur @ 21.10.2014, 03:35

)

В объекте contactForm нет же свойства с названием 'slideToggle'

Код

var $this = $(this)

Теперь $this - это jQuery обертка contactForm у которой есть метод slideToggle.

pasha4ur

Дата 20.1.2015, 20:46 (ссылка)

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

Загрузка ...

дизайнер

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

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

Получается, что по этому текстовому ключу ['slideToggle'] мы вызываем метод в объекте обертке $(this).

Забыл про строку var $this = $(this)

Это сообщение отредактировал(а) pasha4ur - 20.1.2015, 21:01

sQu1rr

Дата 21.1.2015, 20:04 (ссылка)

(голосов:1)

Загрузка ...

Опытный

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

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

Цитата(pasha4ur @ 20.1.2015, 17:46

)

Получается, что по этому текстовому ключу ['slideToggle'] мы вызываем метод в объекте обертке $(this).

Вприниципе да. По этому текстовому ключу мы получаем доступ к методу который и вызываем. Метод есть под этим ключем потому что обертка $(this). Все верно, да
2 месяца - это довольно долго что бы это понять smile

pasha4ur

Дата 22.1.2015, 23:58 (ссылка)

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

Загрузка ...

дизайнер

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

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

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

Я это время не занимался js (он мне и не особо понравился из-за своей кривости + книга нудная была (подробное руководство)). Прочитал книгу по WP, немного поэкспериментировал с убунту(вернулся в виндовс). Сейчас вот начал читать книгу по PHP, от которого меня все стратсно отговаривают в сторону руби, питона и джавы (только вакансий джунов по ним вообще в моей области нет).

Это сообщение отредактировал(а) pasha4ur - 23.1.2015, 00:01

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