Глобальные переменные JS в пределах области управления пользователя?

Question

Скажите, что у вас есть пользовательский элемент управления, который использует сторонний JS API (использует додзе). У вас есть функция JS loadMap, которая инициализирует некоторые глобальные переменные для вашего управления и подключает некоторые события (от стороннего API) к вашим обработчикам событий JS. В обработчиках событий вам нужно использовать глобальные переменные, которые вы определили в loadMap.

Проблема: Если у меня есть более чем один экземпляр этого элемента управления в одной и той же странице, что Глобалы бы наложиться друг на друга и не работал бы.

Вопрос:
Как я могу написать JS иметь глобальные переменные в области видимости экземпляра элемента управления, если это имеет смысл? или любое предложение, которое решит мою проблему.

Вот мой код управления JS (я минимизируюсь его просто показать проблему), мои Глобал определены в первых 3-х линиях

//create the global variables 
var mapVar; 
var geocoderVar; 
var toolbarVar; 

function loadMap(divMap, divSearch) { 
    ... 
    // create the map 
    mapVar = new esri.Map(divMap, { 
     zoom: 0, 
     minZoom: 0, 
     maxZoom: 10, 
     lods: lods 
    });  

    // create the geocoder 
    if (geocoderVar === null) { 
     geocoderVar = new esri.dijit.Geocoder({ 
      map: mapVar 
     }, divSearch); 
     geocoderVar.startup(); 
    } 
    //Hook up event handlers 
    dojo.connect(mapVar, "onExtentChange", checkScale); 
    dojo.connect(mapVar, "onLoad", createToolbar);  
} 

function createToolbar(themap) { 
    dojo.connect(mapVar, "onClick", function (evt) { 
     if (canDrop === true) { 
       point = evt.mapPoint; 
      mapVar.graphics.clear(); 
      ... 
     } 
     ... 

    }); 
    //create the toolbar variable 
    toolbarVar = new esri.toolbars.Draw(mapVar); 
    ... 
    dojo.connect(toolbarVar, "onDrawEnd", addToMap); 
} 

function checkScale(extent, delta, outLevelChange, outLod) { 

    if (outLod.level == 10) { 
     canDrop = true; 
     window[controlName + '_toolbarVar'].activate(esri.toolbars.Draw.POINT, { showTooltips: false }); 
    } 
    else { 
     window[controlName + '_toolbarVar'].deactivate(); 
     canDrop = false; 
    } 
} 
... 

Answer 1

Дайте код анонимной локальную область видимости, а не писать все в глобальном масштабе:

(function(any, globals, you, need, to, pass, in, as, an, instance){ 
    //All code local to your control goes here 
    global = "etc..." 

.... 
}(any, globals, you, need, to, pass, in, as, an, instance)); 

Передавая глобальные переменные как сами, их локальная версия переопределяет глобальность и предотвращает взаимодействие.

Редактировать: Чтобы сделать это из внешнего JS-файла, просто объявите свой код как одну функцию и вызовите его один раз каждый раз, когда ваш контроль загружается. Затем вы должны включить файл JS только один раз на ваш шаблоне:

в файле JS:

var myFuncLib = function(any, globals, you, need, to, pass, in, as, an, instance){ 
     //All code local to your control goes here 
     global = "etc..." 

    .... 
    }; 

вашего контроля:

<script> 
myFuncLib(any, globals, you, need, to, pass, in, as, an, instance); 
</script> 

глобал прошли в могут быть clsses/идентификаторов конкретные к элементам управления, элементам DOM, другим библиотечным ресурсам и т. д.

Это решение также подходит к шаблону библиотеки, называемому «шаблоном модуля». Существует множество хороших ресурсов ava ilable по этой теме, не последним из которых является спецификация CommonJS (http://wiki.commonjs.org/wiki/Modules/1.1) для ее реализации в библиотеках и множество загрузчиков сценариев, которые используют этот шаблон.