Блог

Допустим, у меня есть 3 функции. Если я напишу их все один за другим, друг под другом, все они будут доступны для глобального пространства имен, отсюда и глобальная поляризация. Итак, один из способов, по-видимому, следующий.

 var test;
(function() {

 test.funct1 = function(){

 }

 test.funct2 = function(){

 }

 test.funct3 = function(){

 }

})
 

Теперь мы уменьшили проблему, поскольку функции не помещаются в глобальное пространство имен. Мы могли бы сказать, что они все еще существуют, но не полностью. test будет помещен в глобальный namespace , на котором будут все другие функции.

Вопрос 1) Теперь проблема все еще существует, если у кого-то или какой-то библиотеки есть test , проблема в том, что мои test и библиотеки test столкнутся, что кажется слишком плохим. Как люди решают это без какой-либо библиотеки / фреймворка или чего-либо еще (без webpack)?

Вопрос 2) Хорошо, итак, webpack решает вышеуказанную проблему. В webpack каждый файл является модулем. Это понятно, но, тем не менее, хороший хороший пример был бы отличным, некоторые вещи все еще нужно поместить в глобальную область. Я был бы признателен за хороший хороший пример.

Теперь проблема все еще существует, если у кого-то или какой-то библиотеки есть test , проблема заключается в том, что мой тест и тест библиотеки столкнутся, что кажется слишком плохим. Как люди решают это без какой-либо библиотеки / фреймворка или чего-либо еще (без webpack)?

Объявите test only внутри области видимости, где это необходимо; не делайте его глобальным. Например, вы могли бы:

 <script>

(() => {
  const test = {
    funct1() {
      // ...
    }
    // ...
  };
  // do stuff with test
})();

(() => {
  const test = {
    OTHER_METHOD() {
      // ...
    }
    // ...
  };
  // do stuff with test
})();

</script>
 

Таким образом, ни test один из них не является глобальным; они оба заключены в свой собственный IIFE, и все виды использования конкретного test будут находиться внутри этого IIFE.

некоторые вещи все еще нужно поместить в глобальную область

Весь смысл модульной системы, такой как Webpack, заключается в том, чтобы избежать необходимости загрязнять глобальный объект; если ваш код структурирован разумно, в этом не должно быть никакой необходимости. Но если бы вам пришлось, просто обратитесь к глобальному объекту и присвоите одному из его свойств, например:

 // someModule.js
window.SomethingGlobal = {
  // stuff
};
 

Это не относится конкретно к Webpack; такой же точный подход к снижению глобального загрязнения доступен в модулях ES6