OpenLayers: почему console.info в браузере может найти переменную
Я пытаюсь установить console.info(ol_map) из браузера, но выдает ошибку неопределенный. Команда работает через код. Почему это происходит?
Я использую фреймворк Symfony с Webpack Encore для управления моими активами.
файл: map.js
require('ol/ol.css');
require('../css/map.css');
import View from 'ol/view';
import VectorLayer from 'ol/layer/vector';
import TileLayer from 'ol/layer/tile';
import Map from 'ol/map';
var proj = require('ol/proj').default;
var ol_Map = require('ol/map').default;
//var ol_layer_Tile = require('ol/layer/tile').default;
var ol_source_OSM = require('ol/source/osm').default;
var ol_View = require('ol/view').default;
var coordinate = require('ol/coordinate').default;
//var VectorLayer = require('ol/layer/vector').default;
var VectorSource = require('ol/source/vector').default;
var GML = require('ol/format/gml').default;
var WFS = require('ol/format/wfs').default;
const ol_map = new Map({
target: 'map',
layers: [
new TileLayer({
source: new ol_source_OSM()
}),
//new VectorLayer({
// source: new VectorSource({
// format: new WFS(),
// url: 'http://environment.data.gov.uk/ds/wfs?SERVICE=WFS&INTERFACE=ENVIRONMENTWFS--864c72de-d465-11e4-855f-f0def148f590'
// })
//})
],
view: new ol_View({
//cordinates in ESPG3857
center: [-254382.41,7068896.29],
zoom: 6
})
});
console.info(ol_map);
файл: map.html.twig
{% extends '::base.html.twig' %}
{# STYLESHEETS-------------------------------------------------- #}
{% block stylesheets %}
{{ parent() }}
<link href = "{{ asset('build/map.css') }}" rel = "stylesheet" />
{#<link href = "https://openlayers.org/en/v4.6.5/css/ol.css" rel = "stylesheet" type = "text/css"/>#}
{% endblock %}
{# PAGE CONTENT-------------------------------------------------- #}
{% block title %}OpenLayers example{% endblock %}
{% block body %}
<body>
<h2>My Map</h2>
<div id = "map" class = "map"></div>
<div class = "arrow_box" id = "popup-container" style = "display: none;"></div>
<script src = "{{ asset('build/map.js') }}"></script>
</body>
{% endblock %}
{# JAVASCRIPTS-------------------------------------------------- #}
{% block javascript %}
{{ parent() }}
{#<script src = "https://openlayers.org/en/v4.6.5/build/ol.js" type = "text/javascript"></script>#}
{% endblock %}
Можете ли вы увидеть код (ol_map) через инструмент разработчика? может быть, webpack также уберет переменную const?
да, я вижу код (вы имеете в виду вкладку источников, если я правильно понял?)
если webpack не искажает код, это может быть проблемой в области видимости. некоторые коды обертывают код OL, я думаю.
Он не экспортируется, поэтому эта переменная является локальной для модуля. Если вы хотите получить к нему доступ в консоли браузера, вы можете поставить window.ol_map = ol_map
@dube да, уловка работает, не могли бы вы объяснить, почему это происходит? (также опубликуйте свой ответ, чтобы отметить его как ответ)
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Вот более подробное объяснение моего комментария выше:
В Webpack каждый модуль (файл) импортирует и экспортирует код. Когда код транслируется / упаковывается для браузера, каждый из этих модулей включается в закрытие, чтобы внутренний код не просачивался в другие модули. Это очень важно, иначе вам всегда придется следить за тем, чтобы случайно не перезаписать переменные или функции из других модулей.
Я предполагаю, что вы ошибочно предположили, что ваш модуль верхнего уровня отличается и что все экспортируется в область верхнего уровня (окна) браузера. Это не тот случай!
Консоль браузера работает в основной области, где ваша внутренняя переменная ol_map неизвестна. Конечно, эта переменная где-то есть, но это где-то внутри какая-то функция (или даже глубже, в подподподразделе ...- функция). Возможно, ваша переменная также была переименована в webpack (чтобы уменьшить размер кода), поэтому даже когда вы добавляете точку останова отладки в свой код, вы можете не сразу распознать свою переменную (но она есть!).
Однако есть некоторые глобальные вещи, к которым вы можете получить доступ изнутри модуля: window - это объект окна браузера. Он представляет глобальную область видимости. Например, когда вы записываете var x = 'hello'; в свою консоль, эта переменная x станет свойством window.
Таким образом, записывая window.ol_map = ol_map в свой код, вы создаете глобальную переменную, к которой затем можете легко получить доступ в браузере и консоли браузера.
спасибо, ваше объяснение идеально, знаю, я понимаю, что происходит.
@Aurelien Да, это не имеет значения, у меня та же ошибка.