Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 19.06.2009, 18:36
Интересующийся
Отправить личное сообщение для LowCoder Посмотреть профиль Найти все сообщения от LowCoder
 
Регистрация: 19.06.2009
Сообщений: 13

Непонятная структура кода (новичковый вопрос)
На данном сайте есть статья по drag n drop
http://javascript.ru/ui/draganddrop

в ней есть такая структура

var dragMaster = (function() {
    // private методы и свойства
    var dragObject
 
    function mouseDown(e) {
        клик на переносимом элементе: начать перенос
    }
 
    function mouseMove(e){
        if (dragObject) {
            отобразить перенос объекта
        }
    }
 
    function mouseUp(e){
        if (dragObject) {
            конец переноса
        }
    }
 
    // public методы и свойства    
    return {
        init: function() {
            // инициализовать контроллер
            document.onmousemove = mouseMove
            document.onmouseup = mouseUp
        },
 
        makeDraggable: function(element){
            // сделать элемент переносимым
            element.onmousedown = mouseDown
        }
    }
 
}())



мне соверешенно непонятно зачем нужны скобки в перед словом function

var dragMaster =     =>(<= вот эта скобка function() и вот эти
}()) в конце


почему нельзя было написать?
var dragMaster = function() {...код функции с вложенными функциями ...}


но так не работает понятное дело Объясните плиз а то вообще не въеду. Только если можно подробно на уровне 1 класс 1 четверть. Статьи с сайта читал есть подозрения что надо курить замыкания. Но просто не понимаю что вообще это за конструкция

var somthing = ()


и не функция вроде и не объект.. Объект же объявляется через фигурные скобки... Совсем не пойму
Ответить с цитированием
  #2 (permalink)  
Старый 20.06.2009, 02:38
Аватар для Riim
Рассеянный профессор
Отправить личное сообщение для Riim Посмотреть профиль Найти все сообщения от Riim
 
Регистрация: 06.04.2009
Сообщений: 2,379

Функция создается и сразу запускается.
Ответить с цитированием
  #3 (permalink)  
Старый 20.06.2009, 04:37
UDN UDN вне форума
Аспирант
Отправить личное сообщение для UDN Посмотреть профиль Найти все сообщения от UDN
 
Регистрация: 18.06.2009
Сообщений: 55

Объясню на примере:
var ms=(new Date).getTime(); /*получить ms с 1970 года*/
Здесь скобки требуются для инициализации объекта
в противном случае потребуетсяв к функции обращатся так
var ms=(new Date);ms.getTime();
Подобная конструкция применяется для минимизации.
var start=(new Date).getTime();
... my code ...
var ms=(new Date).getTime()-start; на выходе скорость выполнения
участка кода.
Ответить с цитированием
  #4 (permalink)  
Старый 20.06.2009, 04:39
UDN UDN вне форума
Аспирант
Отправить личное сообщение для UDN Посмотреть профиль Найти все сообщения от UDN
 
Регистрация: 18.06.2009
Сообщений: 55

Проще говоря это одна из форм записи
Ответить с цитированием
  #5 (permalink)  
Старый 20.06.2009, 04:42
UDN UDN вне форума
Аспирант
Отправить личное сообщение для UDN Посмотреть профиль Найти все сообщения от UDN
 
Регистрация: 18.06.2009
Сообщений: 55

var dragMaster = function() {...код функции с вложенными функциями ...}
можешь записать
function dragMaster() {...код функции с вложенными функциями ...}
Ответить с цитированием
  #6 (permalink)  
Старый 20.06.2009, 05:30
Интересующийся
Отправить личное сообщение для LowCoder Посмотреть профиль Найти все сообщения от LowCoder
 
Регистрация: 19.06.2009
Сообщений: 13

Спасибо за ответы
Ответить с цитированием
  #7 (permalink)  
Старый 20.06.2009, 06:54
Интересующийся
Отправить личное сообщение для LowCoder Посмотреть профиль Найти все сообщения от LowCoder
 
Регистрация: 19.06.2009
Сообщений: 13

Сообщение от UDN Посмотреть сообщение
Объясню на примере:
var ms=(new Date).getTime(); /*получить ms с 1970 года*/
Здесь скобки требуются для инициализации объекта
в противном случае потребуетсяв к функции обращатся так
var ms=(new Date);ms.getTime();
участка кода.
Все равно есть непонятки
вот эти два примера кода выдают разный результат
var ms=(new Date).getTime();
alert("Time"+ms);

Time1245469872876
а этот
var ms=(new Date);
ms.getTime();
alert("Time"+ms);

выдает
TimeSat Jun 20 2009 07:50:16 GMT+0400

Т.е понятно что в первом случае это кол-во миллисекунд а второе тоже самое но в отформатированном варианте. Но как то неаккуратненько. (c) Т.е нельзя сказать что вызовы абсолютно идентичны.
Ответить с цитированием
  #8 (permalink)  
Старый 20.06.2009, 07:18
Интересующийся
Отправить личное сообщение для LowCoder Посмотреть профиль Найти все сообщения от LowCoder
 
Регистрация: 19.06.2009
Сообщений: 13

И еще сорри за занудство - но даже ести это как бы создание функции и сразу её запуск то зачем нужны скобки в конце кода
}()) в конце блока кода


что они дают и зачем нужны? Без них кстати не работает. Почему нельзя было написать так
}var dragMaster = (function() {...} )


А занудство тоже оправдано поскольку этап первоначльного въезжание в язык наиболее сложный так как непонятны многие базовые концепции, а еще в такой язык как с ЖаваСкрипт с исключительно путанным синатксисом. Похоже разработчки стандарта ЕСМА употребляли .. причем даже не траву а что то сильно потяжелее. Совершенно непонятно зачем было делать настолько сложный и запутанный язык для совершенно прикладных задач. Но это конечно имхо.
Ответить с цитированием
  #9 (permalink)  
Старый 20.06.2009, 10:54
Аватар для Riim
Рассеянный профессор
Отправить личное сообщение для Riim Посмотреть профиль Найти все сообщения от Riim
 
Регистрация: 06.04.2009
Сообщений: 2,379

Сообщение от LowCoder
вот эти два примера кода выдают разный результат
Они и должны выдавать разный результат.

Сообщение от LowCoder
но даже ести это как бы создание функции и сразу её запуск
Ни если даже, а так и есть.

Сообщение от LowCoder
что они дают и зачем нужны? Без них кстати не работает.
Они запускают эту созданную функцию.

Сообщение от LowCoder
с исключительно путанным синатксисом
Сообщение от LowCoder
Совершенно непонятно зачем было делать настолько сложный и запутанный язык
Мне все это сразу понятно становилось. Не знаю, что вы тут путанного увидели.
Ответить с цитированием
  #10 (permalink)  
Старый 20.06.2009, 12:35
Профессор
Отправить личное сообщение для Dmitry A. Soshnikov Посмотреть профиль Найти все сообщения от Dmitry A. Soshnikov
 
Регистрация: 25.02.2008
Сообщений: 707

LowCoder,

Материал:

- "проблема": http://javascript.ru/ecma/part12#a-12.4
- решение: http://javascript.ru/ecma/part11#a-11.1.6

Скажу кратко (подробно, нужно потратить больше времени, текста и уже нужно иметь определённую теоретическую базу), чтобы не путать.

Функции деляться на:

- "Функция-Объявление" (FunctionDeclaration, FD);
- "Функция-Выражение" (FunctionExpression, FE).

Разницу сейчас тоже не буду описывать, т.к. это не важно в данном вопросе.

Так вот, исходя из п.12.4:

Цитата:
ИнструкцияВыражение не может начаться с открывающей фигурной скобки, т.к. тогда оно было бы неотличимо от Блока. Также ИнструкцияВыражение не может начинаться с ключевого слова function, т.к. тогда оно было бы неотличимо от ОбъявленияФункции
Т.е.

function a() {}();


Ошибка, т.к. неотличимо от "Функция-Объявление", которую нельзя вызвать сразу.

Соответственно, нужно переделать выражение так, чтобы оно стало "Функция-Выражение". Самый простой способ - оператор группировки.

(function a() {})();


Все ок, т.к. теперь это FE.

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

var a = (function () { var b = 10; return b; })();


Создаём FE, и тут же её вызываем. Переменная "а" теперь 10, но переменная "b" не существует после вызова функции.

Конструкию (function () { _наш_код_ })(); можно назвать инициализирующим пространством нашего объекта/библиотеки и т.д. Это пространство позволит вернуть наружу минимальный интерфейс, но (повторюсь) внутри себя иметь множество дополнительных, вспомогательных объектов, которые будут не видны снаружи:

var a = (function () {
  
  // "private"
  var b = 10;
  
  function c() {
    return b + 10;
  }

  // интерфейс наружу
  return {
    test: c,
    q: b,
    z: function () {
      return c() + 10;
    }
  };  

})();

// "a" инициализирован
// надеюсь, понятно, что "а" - есть возвращённый объект, но не функция!
// функция (FE) использовалась нами лишь для создания
// "нашего пространства" и для возвращения этого объекта

alert(a.test()); // 20
alert(a.q); // 10
alert(a.z()); // 30


Однако, ни "b", ни "c" не доступны посредством "а" напрямую.
__________________
Тонкости ECMAScript

Последний раз редактировалось Dmitry A. Soshnikov, 20.06.2009 в 13:21.
Ответить с цитированием
Ответ


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

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