jQuery - функции внутри (function ($) {// code} (jQuery));

Question

У меня есть функция для создания карты Google вместе с некоторой другой логикой для создания маркеров, информационных окон и включения некоторого взаимодействия с пользователем для управления картой.

При использовании jQuery и WordPress по умолчанию используется функция $для совместимости отключен.

Чтобы преодолеть это, я инкапсулировал весь свой код JavaScript в следующем блоке:

(function ($) {

function initMap() {
console.log("Initmap start");
map = new google.maps.Map(document.getElementById("dealer-map"), {
    center: new google.maps.LatLng(54.583408, -4.125605),
    zoom: 5
});
setMarkers(map);
}

//...other code

}(jQuery));

(Извините, я не уверен, что вышебудет известен как, отсюда и название)

В коде API Карт Google есть функция обратного вызова, которая вызывает функцию initMap(); после загрузки API, однако это не работает.Я пытаюсь вызвать это вручную через консоль разработчика Chrome, но получаю:

ReferenceError: initMap не определен

Есть ли способ обойти это?Или было бы проще просто включить функцию $?

Answer 1

Вот три способа сделать это:

function initMap() {
  (function($) {
    /*...*/
  })(jQuery);
}

или

function initMap() {
  const $ = jQuery;
  /*...*/
}

или

function init($) {
  /*...*/
}

function initMap() {
  init(jQuery);
}

Answer 2

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

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

Я не знаю достаточно о WordPress, чтобы обсудить, как это сделать.

function scope1() {
  // This scope is private
  function private() {
  }
}

function scope2() {
  // This is a whole different scope that cannot
  // see anything inside of scope 1.
  function private() {
  }
}