Кадр в компоненте Javascript - Как обрабатывать 'configuration'

Я пытаюсь создать компонент Javascript, который я могу просто «включить» на странице, и он в основном выводит форму. Я, вероятно, буду использовать шаблоны Handlebars внутри моего компонента.Кадр в компоненте Javascript - Как обрабатывать 'configuration'

Однако, я борюсь с тем, как лучше структурировать конфигурацию моего компонента я думал о некоторых, как передать его в как:

<script src = “my-component.js”> 
    var config = { 
     key1: ‘whatever’, 
     key2: ‘whatever' 
    } 
</script>

... Но как я мог бы достать мой config объект, в пределах my-component.js?
Есть ли более предпочтительный Approac

источник

2014-12-27 Alex

Ну, это недействительный скрипт, вы не можете иметь как атрибут src, так и текст в тегах скрипта, у вас должен быть один или другой. –

Как уже указывалось в комментариях, внешний файл и тело сценария не смешиваются. Работа в отдельных файлах с объектами window и/или функциями конструктора. Терминология для этих комбинаций объектов изменяется по-разному.

Одним из таких важных функций стартера является IIFE (немедленно Вызывается функция Expression)

// wrap an anonymous function 
(function(window){ 
    /* window available as private variable */ 
}(window)); // calls the function with global window as parameter

С помощью этой небольшой настройки, вы можете:

связывают/использовать объекты из параметров в частном пути
использовать библиотеки в «безопасном» способе
автоматически и последовательно создавать экземпляры модулей
создавать доступные модули/компоненты
...

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

Загрузчик файла:

(function() { 

    // 1. PRIVATE INITIALIZER 
    function init() { 
     Project.classes(); 
     Project.components(); 
    } 

    // 2. CONFIGURATION OVERRIDE 
    var cfg = { 
     modTwo: { 
      container: '[data-module="two"]' 
     } 
    }; 

    // 3. GLOBAL NAMESPACE 
    window.Project = { 
     // allows optional configuration on the object 
     classes: function() { 
      return { 
       moduleOne: new Project.ModuleOne(), 
       moduleTwo: new Project.ModuleOne(cfg.modTwo) 
      }; 
     }, 

     // has private configuration 
     components: function() { 
      Project.Cookiebox.init(); 
     } 
    }; 

    // 4. ON WINDOW LOAD 
    window.addEventListener('load', init); 

}());

Типичный модуль файла:

/** 
* @param  {Function} $ jQuery v1.11.1 
* @param  {Object} project 
*/ 
window.Project = (function ($, project) { 
    // 1. CONFIGURATION 
    var cfg = { 
     container: '[data-module="one"]' 
    }; 

    // 2. CONSTRUCTOR 
    project.ModuleOne = function (options) { 
     this.settings = $.extend(true, {}, cfg, options); 
     this.init(); 
    }; 

    // 3. PROTOTYPE OBJECT 
    project.ModuleOne.prototype = { 

     version: 0.1, 

     init: function() { 
      this.cacheItems(); 

      if (this.container.length) { 
       this.bindEvents(); 
      } 
     }, 

     cacheItems: function() { 
      this.container = $(this.settings.container); 
     }, 

     bindEvents: function(){ 
      this.container.on('click', function(ev){ 
       /*do something*/ 
      }); 
     } 
    }; 

    // 4. GLOBALIZE NAMESPACE 
    return project; 

}(window.jQuery, window.Project || {}));

Типичный компонент файла (немного отличается):

/** 
* @param  {Function} $ jQuery v1.11.1 
* @param  {Object} project 
*/ 
window.Project = (function ($, project) { 

    // 1. CONFIGURATION 
    var cfg = { 
     container: '[data-component="cookiebox"]' 
    }; 

    // 2. COMPONENT OBJECT 
    project.Cookiebox = { 

     version: 0.1, 

     init: function() { 
      this.cacheItems(); 

      if (this.container.length){ 
       this.bindEvents(); 
      } 
     }, 

     cacheItems: function() { 
      this.container = $(cfg.container); 
     }, 

     bindEvents: function() { 
      this.container.on('click', function() { 
       /* set cookie and toggle the container */ 
      }); 
     } 
    }; 

    // 3. GLOBALIZE NAMESPACE 
    return project; 

}(window.jQuery, window.Project || {}));

Затем в HTML вывод он должен выглядеть примерно так:

<head> 
    <script src="http://path-to-jquery.js">/*preferably minified and bundled*/</script> 
</head> 
<body> 
    <div data-module="one"></div> 
    <div data-module="two"></div> 
    <div data-component="cookiebox"></div> 
    <script src="http://path-to-loader.js">/*preferably minified and bundled*/</script> 
    <script src="http://path-to-moduleone.js">/*preferably minified and bundled*/</script> 
    <script src="http://path-to-cookiebox.js">/*preferably minified and bundled*/</script> 
</body>

Я могу продолжать добавлять информацию здесь и там, но, похоже, это становится уже слишком много. Дайте мне знать, если это вас интересует, и требуется дополнительное объяснение.

источник

2014-12-27 08:12:06

Кадр в компоненте Javascript - Как обрабатывать 'configuration'

ответ

Смежные вопросы