Js FE modularity

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

Для это и придумали подход к модульности через неймспейсинг

module1.js:

var MODULE1 = (function(){
   var privateField1={...};
   var privateField2={...};

   var privateMethod1=function{...};
   var privateMethod2=function{...};

   return {
     publicField1: {...},
     publicField2: {...},
     publicMethod1: function(){...},
     publicMethod2: function(){...}
   };
})();

Global Imports

Ну если быть до конца искренним, то глобальные переменные все же нужны, но очень в ограниченном и аргументированном количестве.
Когда мы их испльзуем внутри наших моделей мы сталкиваемся с главными проблемами:
1) Мы можем их случайно изменить.
2) У нас очень много вложенностей-замыканий и это очень неефективно обращаться из них в глобальный скоуп с точки зрения произодительности. Эти проблемы решаются передачей глобальной переменной на этапе создания модуля на странице:

var MODULE1 = (function(neededGlobalInside){
   var privateField1={...};
   var privateField2={...};

   var privateMethod1=function{...};
   var privateMethod2=function{...};

   return {
     publicField1: {...},
     publicField2: {...},
     publicMethod1: function(){...},
     publicMethod2: function(){...}
   };
})(global1);

Эта процедура называется global imports

Augmentation
Процедура, которая помогает нам расширить существующий модуль
augmentation1-for-module1.js:

MODULE1 = function(oldNS){
   var newprivateField1={...};
   
   var newprivateMethod1=function{...};
   oldNS.newpublicMethod1: function(){...};
    
   return oldNS;
}(MODULE1);