JSXGraph, с более чем одной доской на странице, что рекомендуется, чтобы избежать конфликта имен? - PullRequest
Новая
       42

JSXGraph, с более чем одной доской на странице, что рекомендуется, чтобы избежать конфликта имен?

1 голос
/ 03 мая 2020

О наличии более чем одной доски на странице:

При кодировании графика удобно использовать соглашения об именах для переменных, например, имя для ползунка. По умолчанию Javascript представляет глобальное пространство имен, поэтому, если у вас более одной доски на странице, вам следует избегать столкновения имен. Каков рекомендуемый способ сделать это?

1 Ответ

1 голос
/ 03 мая 2020

[Примечание: stackoverflow поддерживает автоответчик в стиле Q & A. Это намеченный ответ-ваш-собственный вопрос]

Это общий Javascript вопрос.

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

В контексте Javascript общий способ реализации этого обходного пути называется выражением немедленного вызова функции (IIFE). 

(function() {
  var board = JXG.JSXGraph.initBoard('jxgbox1' {/* ... */});
  var a = board.create('point', [0, 0]);
})();

Javascript имеет область действия функции. Использование IIFE выгодно использует эту особенность: IIFE создает область. Функции внутри этой области могут обращаться к странице (поэтому доска будет помещена в div с идентификатором 'jsxbox1'), но переменные внутри IIFE отделены от глобального пространства имен.

В разговоре о языках программирования в целом этот шаблон создания отдельных областей называется «замыканиями».


Минимальный пример для двух плат 

 (function() {
     var board = JXG.JSXGraph.initBoard('jxgbox1' {/* ... */});
     var a = board.create('point', [0, 0]);
 })();
 (function() {
     var board = JXG.JSXGraph.initBoard('jxgbox2' {/* ... */});
     var a = board.create('point', [0, 0]);
 })();

Примечательно:
Возможность передачи параметров одинаково доступен для IIFE:

Минимальный пример: 

 (function(divID) {
     var board = JXG.JSXGraph.initBoard(divID, {/* ... */});
     var a = board.create('point', [0, 0]);
 })('jxgbox1');
 (function(divID) {
     var board = JXG.JSXGraph.initBoard(divID, {/* ... */});
     var a = board.create('point', [0, 0]);
 })('jxgbox2');


Ключевое слово 'var'

Здесь необходимо ключевое слово «var». Когда переменная создается без использования ключевого слова var, механизм Javascript будет проходить по цепочке областей действия. Если переменная не найдена нигде в цепочке областей действия, переменная будет создана в глобальном пространстве имен. Если механизм Javascript находит переменную в цепочке областей действия, он будет использовать существующую переменную. При использовании ключевого слова var цепочка областей видимости не просматривается.

...