Как оптимизировать / упорядочить область видимости библиотеки браузера с большим количеством функций?(Хорошая практика) - PullRequest
0 голосов
/ 31 мая 2018

Я получил файл JS с ~ 2000 строками кода (не минимизирован / с комментариями), и я стремлюсь оптимизировать способ хранения функций и их область действия, чтобы избежать спама в глобальной области.АКА создай что-нибудь приятное.

Это мой первый "модуль / библиотека".

Начнем с простой библиотеки, которая будет включена в веб-страницу:

(function() {
  console.log('Awesome')
}).call(this)

Библиотеку можно вызывать внутри веб-страницы, IFrame или веб-пользователя и выполнять разные функции в зависимости от среды.

Прямо сейчас мой подход похож на этот:

MyModule.js:

(function() {
  // Detect if running in a webworker
  function isWebworker() {
    if (window.document === undefined) {
      return true;
    } else {
      return false;
    }
  }
  // Detect if the script is running inside an IFrame
  function isIFrame () {
      try {
          return window.self !== window.top;
      } catch (e) {
          return true;
      }
  }

  function createModal() {}
  function clickModal() {}
  function calculate() {}
  function createWorker() {}

  if(isWebworker()) {
    var ww = function() {}
    ww.prototype.size = 512;
    ww.prototype.calc = calculate;
  } else if(isIFrame()) {
    // Some functions here will be in window.MyModule, others are private.
  } else {
    // Is main window - probably
    // Some functions here will be in window.MyModule, others are private.
    var drawer = function() {}
    drawer.prototype.drawtime = null;
    drawer.prototype.draw = draw;
    if(window.MyModule) {
      window.MyModule = {};
      window.MyModule.drawer = drawer;
    } else {
      window.MyModule.drawer = drawer;
    }

  }
}).call(this)

includeMyModule.js (используется только в главном окне):

(function() {
  var ModuleName = 'MyModule';
  if (!window[ModuleName]) {
    window[ModuleName] = {};
  }
  window[ModuleName].ready = window[ModuleName].ready || function(rd) {
    (window[ModuleName]['rand'] = window[ModuleName]['rand'] || []).push(rd);
  };

  var s = document.createElement('script');
  s.type = 'text/javascript';
  s.async = true;
  s.src = '/MyModule.min.js';

  var ss = document.getElementsByTagName('script')[0];
  ss.parentNode.insertBefore(s, ss);
})();

Надеюсь, я понял.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...