https://varya.me/component---src-templates-post-js-content-file-pa…-system-index-en-md-2d9de0eaf0342c269d3e.js

1"use strict";(self.webpackChunkvarya_me=self.webpackChunkvarya_me||[]).push([[7590],{7150:function(n,a,s){s.r(a),s.d(a,{default:function(){return f}});var e=s(8453),t=s(6540);function p(n){const a=Object.assign({p:"p",a:"a",strong:"strong",em:"em",span:"span",h3:"h3"},(0,e.RP)(),n.components);return t.createElement(t.Fragment,null,t.createElement(a.p,null,"The recently published ",t.createElement(a.a,{href:"http://bem.info/tutorials/articles/bem-js-tutorial/"},"step-by-step tutorial on\ni-bem.js")," mentioned ",t.createElement(a.strong,null,"YM\nmodular system")," as a base for component JavaScript solution behind BEM. Why do\nwe need another modular system? Let us see..."),"\n",t.createElement("excerpt"),"\n",t.createElement(a.p,null,"The author of YM modules, ",t.createElement(a.a,{href:"https://github.com/dfilatov"},"Dmitry Filatov")," recently\ncame up with an ",t.createElement(a.a,{href:"http://habrahabr.ru/post/213627/"},"article about YM modules")," in\nRussian. And below you can find the translation."),"\n",t.createElement("hr"),"\n",t.createElement(a.p,null,"So, one more modular system? Besides CommonJS and AMD? Why should we care?"),"\n",t.createElement(a.p,null,"I will not write why modules and modular systems are needed, there are plenty of\narticles about it. Let us rather proceed to the main question: why do we need\n",t.createElement(a.em,null,"another")," modular system?",t.createElement("br"),"\nFor sure, there are CommonJS and AMD, but working on large projects with them I faced\nlarge drawbacks. One is that they are synchronous. This is not fatal, but in my\nproject we often had to provie different hacks for it."),"\n",t.createElement(a.p,null,"Let us say, we have 3 modules: moduleA, moduleB and moduleC. moduleC depends on\nboth moduleA and moduleB. Initially I will describe this in code for all the\nthree solutions:"),"\n",t.createElement(a.p,null,"####CommonJS"),"\n",t.createElement(a.p,null,t.createElement(a.em,null,"moduleA.js:")),"\n",t.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<div class="gatsby-highlight" data-language="js"><pre class="language-js"><code class="language-js">module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token string">"A"</span><span class="token punctuation">;</span></code></pre></div>'}}),"\n",t.createElement(a.p,null,t.createElement(a.em,null,"moduleB.js:")),"\n",t.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<div class="gatsby-highlight" data-language="js"><pre class="language-js"><code class="language-js">module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token string">"B"</span><span class="token punctuation">;</span></code></pre></div>'}}),"\n",t.createElement(a.p,null,t.createElement(a.em,null,"moduleC.js:")),"\n",t.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<div class="gatsby-highlight" data-language="js"><pre class="language-js"><code class="language-js"><span class="token keyword">var</span> moduleA <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"A"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\nmoduleB <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"B"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n\nmodule<span class="token punctuation">.</span>exports <span class="token operator">=</span> moduleA <span class="token operator">+</span> moduleB <span class="token operator">+</span> <span class="token string">"C"</span><span class="token punctuation">;</span></code></pre></div>'}}),"\n",t.createElement(a.p,null,t.createElement(a.em,null,"Linking and usage:")),"\n",t.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<div class="gatsby-highlight" data-language="js"><pre class="language-js"><code class="language-js"><span class="token keyword">var</span> moduleC <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"C"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\nconsole<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>moduleC<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// prints "ABC"</span></code></pre></div>'}}),"\n",t.createElement(a.p,null,"####AMD"),"\n",t.createElement(a.p,null,t.createElement(a.em,null,"moduleA.js:")),"\n",t.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<div class="gatsby-highlight" data-language="js"><pre class="language-js"><code class="language-js"><span class="token function">define</span><span class="token punctuation">(</span><span class="token string">"A"</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n  <span class="token keyword">return</span> <span class="token string">"A"</span><span class="token punctuation">;</span>\n<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div>'}}),"\n",t.createElement(a.p,null,t.createElement(a.em,null,"moduleB.js:"),":"),"\n",t.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<div class="gatsby-highlight" data-language="js"><pre class="language-js"><code class="language-js"><span class="token function">define</span><span class="token punctuation">(</span><span class="token string">"B"</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n  <span class="token keyword">return</span> <span class="token string">"B"</span><span class="token punctuation">;</span>\n<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div>'}}),"\n",t.createElement(a.p,null,t.createElement(a.em,null,"moduleC.js:")),"\n",t.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<div class="gatsby-highlight" data-language="js"><pre class="language-js"><code class="language-js"><span class="token function">define</span><span class="token punctuation">(</span><span class="token string">"С"</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token string">"A"</span><span class="token punctuation">,</span> <span class="token string">"B"</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">moduleA<span class="token punctuation">,</span> moduleB</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n  <span class="token keyword">return</span> moduleA <span class="token operator">+</span> moduleB <span class="token operator">+</span> <span class="token string">"C"</span><span class="token punctuation">;</span>\n<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div>'}}),"\n",t.createElement(a.p,null,t.createElement(a.em,null,"Linking and usage:")),"\n",t.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<div class="gatsby-highlight" data-language="js"><pre class="language-js"><code class="language-js"><span class="token function">require</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">"С"</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">moduleC</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>moduleC<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// prints "ABC"</span>\n<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div>'}}),"\n",t.createElement(a.p,null,"####YM"),"\n",t.createElement(a.p,null,t.createElement(a.em,null,"moduleA.js:")),"\n",t.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<div class="gatsby-highlight" data-language="js"><pre class="language-js"><code class="language-js">modules<span class="token punctuation">.</span><span class="token function">define</span><span class="token punctuation">(</span><span class="token string">"A"</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">

1provide</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n  <span class="token function">provide</span><span class="token punctuation">(</span><span class="token string">"A"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div>'}}),"\n",t.createElement(a.p,null,t.createElement(a.em,null,"moduleB.js:")),"\n",t.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<div class="gatsby-highlight" data-language="js"><pre class="language-js"><code class="language-js">modules<span class="token punctuation">.</span><span class="token function">define</span><span class="token punctuation">(</span><span class="token string">"B"</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">provide</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n  <span class="token function">provide</span><span class="token punctuation">(</span><span class="token string">"B"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div>'}}),"\n",t.createElement(a.p,null,t.createElement(a.em,null,"moduleC.js:")),"\n",t.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<div class="gatsby-highlight" data-language="js"><pre class="language-js"><code class="language-js">modules<span class="token punctuation">.</span><span class="token function">define</span><span class="token punctuation">(</span><span class="token string">"C"</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token string">"A"</span><span class="token punctuation">,</span> <span class="token string">"B"</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">provide<span class="token punctuation">,</span> moduleA<span class="token punctuation">,</span> moduleB</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n  <span class="token function">provide</span><span class="token punctuation">(</span>moduleA <span class="token operator">+</span> moduleB <span class="token operator">+</span> <span class="token string">"C"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div>'}}),"\n",t.createElement(a.p,null,t.createElement(a.em,null,"Linking and usage:")),"\n",t.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<div class="gatsby-highlight" data-language="js"><pre class="language-js"><code class="language-js">modules<span class="token punctuation">.</span><span class="token function">require</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">"С"</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">moduleC</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>moduleC<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// prints "ABC"</span>\n<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div>'}}),"\n",t.createElement(a.p,null,"Nothing interesting yet. All three examples are similar, although you may\nnotice the ",t.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text">provide</code>'}})," callback in the YM example. What is it for?"),"\n",t.createElement(a.p,null,"Let us imagine a case that ",t.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text">moduleA</code>'}})," and ",t.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text">moduleB</code>'}}

1)," cannot be resolved immediately\n(synchronously, as it is required by CommonJS and AMD). Sometimes you need to\ndo an asynchronous action first. The simpliest example can be ",t.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text">setTimeout</code>'}}),".\nThere is no way to implement it elegantly with CommonJS and AMD.\nBut with ",t.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text">YM</code>'}})," it can be coded as follows:"),"\n",t.createElement(a.p,null,t.createElement(a.em,null,"moduleA.js:")),"\n",t.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<div class="gatsby-highlight" data-language="js"><pre class="language-js"><code class="language-js">modules<span class="token punctuation">.</span><span class="token function">define</span><span class="token punctuation">(</span><span class="token string">"A"</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">provide</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n  <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n    <span class="token function">provide</span><span class="token punctuation">(</span><span class="token string">"A"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div>'}}),"\n",t.createElement(a.p,null,t.createElement(a.em,null,"moduleB.js:")),"\n",t.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<div class="gatsby-highlight" data-language="js"><pre class="language-js"><code class="language-js">modules<span class="token punctuation">.</span><span class="token function">define</span><span class="token punctuation">(</span><span class="token string">"B"</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">provide</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n  <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n    <span class="token function">provide</span><span class="token punctuation">(</span><span class="token string">"B"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div>'}}),"\n",t.createElement(a.p,null,t.createElement(a.em,null,"moduleC.js:")),"\n",t.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<div class="gatsby-highlight" data-language="js"><pre class="language-js"><code class="language-js">modules<span class="token punctuation">.</span><span class="token function">define</span><span class="token punctuation">(</span><span class="token string">"C"</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token string">"A"</span><span class="token punctuation">,</span> <span class="token string">"B"</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">provide<span class="token punctuation">,</span> moduleA<span class="token punctuation">,</span> moduleB</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n  <span class="token function">

1provide</span><span class="token punctuation">(</span>moduleA <span class="token operator">+</span> moduleB <span class="token operator">+</span> <span class="token string">"C"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div>'}}),"\n",t.createElement(a.p,null,"Interestingly ",t.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text">moduleC</code>'}})," does not know anything about asynchronous actions in\nits dependant modules. ",t.createElement(a.em,null,"Win!")),"\n",t.createElement(a.h3,{id:"real-life-example",style:{position:"relative"}},t.createElement(a.a,{href:"#real-life-example","aria-label":"real life example permalink",className:"anchor before"},t.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>'}})),"Real life example"),"\n",t.createElement(a.p,null,"As for real file example, I often use the YandexMaps API\n(",t.createElement(a.a,{href:"http://api.yandex.com/maps/"},"http://api.yandex.com/maps/"),", API of\n",t.createElement(a.a,{href:"http://maps.yandex.com/"},"Yandex.Maps"),"\npublic service). Yandex.Maps API has a complex loading scheme and this cannot be\ndone synchronously. This means that I cannot simply link it to a page\n",t.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text">&lt;script type="text/javascript" src="url-of-ymaps.js">&lt;/script></code>'}})," and be sure that\nall the following scripts will get the API code ready. First I need to wait for\nthe event ",t.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text">ymaps.ready</code>'}})," to fire."),"\n",t.createElement(a.p,null,"The project I am working for is quite complex; we have many classes inherited\nfrom the basic API. For example, we have a ",t.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text">ComplexLayer</code>'}})," class based on ",t.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text">ymaps.Layer</code>'}}),".\nWith YM modules it is simple to implement. We define a ",t.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text">ymaps</code>'}})," module which loads\nthe API code, waits for the ",t.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text">ymaps.ready</code>'}})," event and then provides itself. All\nthe modules which have the ",t.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text">ymaps</code>'}})," module as a dependency only start to resolve\nafter this. As you can see, other modules know nothing about the asynchronicity of the\nYandex.Map API. ",t.createElement(a.em,null,"No hacks in code!")),"\n",t.createElement(a.p,null,t.createElement(a.em,null,"ymaps.js:")),"\n",t.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<div class="gatsby-highlight" data-language="js"><pre class="language-js"><code class="language-js">modules<span class="token punctuation">.</span><span class="token function">define</span><span class="token punctuation">(</span><span class="token string">"ymaps"</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token string">"loader"</span><span class="token punctuation">,</span> <span class="token string">"config"</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span>\n  <span class="token parameter">provide<span class="token punctuation">,</span>\n  loader<span class="token punctuation">,</span>\n  config</span>\n<span class="token punctuation">)</span> <span class="token punctuation">{</span>\n  <span class="token keyword">var</span> url <span class="token operator">=</span>\n    config<span class="token punctuation">.</span>hosts<span class="token punctuation">.</span>ymaps <span class="token operator">+</span>\n    <span class="token string">"/2.1.4/?lang=ru-RU"</span> <span class="token operator">+</span>\n    <span class="token string">"&amp;load=package.full&amp;coordorder=longlat"</span><span class="token punctuation">;</span>\n\n  <span class="token function">loader</span><span class="token punctuation">(</span>url<span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n    ymaps<span class="token punctuation">.</span><span class="token function">ready</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>

1\n      <span class="token function">provide</span><span class="token punctuation">(</span>ymaps<span class="token punctuation">)</span><span class="token punctuation">;</span>\n    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div>'}}),"\n",t.createElement(a.p,null,"There are 2 other modules in use here: ",t.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text">loader</code>'}})," and ",t.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text">config</code>'}}),". I do not show\ntheir code, but the first one loads scripts and the second one is a hash with\nconstant values."),"\n",t.createElement(a.p,null,t.createElement(a.em,null,"ComplexLayer.js:")),"\n",t.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<div class="gatsby-highlight" data-language="js"><pre class="language-js"><code class="language-js">modules<span class="token punctuation">.</span><span class="token function">define</span><span class="token punctuation">(</span><span class="token string">\'ComplexLayer\'</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token string">\'inherit\'</span><span class="token punctuation">,</span> <span class="token string">\'ymaps\'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">provide<span class="token punctuation">,</span> inherit<span class="token punctuation">,</span> ymaps</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n    <span class="token keyword">var</span> ComplexLayer <span class="token operator">=</span> <span class="token function">inherit</span><span class="token punctuation">(</span>ymaps<span class="token punctuation">.</span>Layer<span class="token punctuation">,</span> <span class="token operator">...</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n\n    <span class="token function">provide</span><span class="token punctuation">(</span>ComplexLayer<span class="token punctuation">)</span><span class="token punctuation">;</span>\n<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div>'}}),"\n",t.createElement(a.p,null,"We can do the same if jQuery is needed. There is a module to load jQuery:"),"\n",t.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<div class="gatsby-highlight" data-language="js"><pre class="language-js"><code class="language-js">modules<span class="token punctuation">.</span><span class="token function">define</span><span class="token punctuation">(</span>\n    <span class="token string">\'jquery\'</span><span class="token punctuation">,</span>\n    <span class="token punctuation">[</span><span class="token string">\'loader\'</span><span class="token punctuation">,</span>\n    <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">provide<span class="token punctuation">,</span> loader</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n\n    <span class="token function">loader</span><span class="token punctuation">(</span><span class="token string">\'//yandex.st/jquery/2.1.0/jquery.min.js\'</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n        <span class="token function">provide</span><span class="token punctuation">(</span>jQuery<span class="token punctuation">.</span><span class="token function">noConflict</span><span class="token punctuation">(</span><span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div>'}}),"\n",t.createElement(a.p,null,"Then we make other modules dependent on ",t.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text">jquery</code>'}})," module."),"\n",t.createElement(a.p,null,"Thus, the whole project code is represented with modules. There is no global, no\nneed for agreement on the order of linking the scripts (including third-party ones),\nno dirty hacks for asynchronicity."),"\n",t.createElement(a.p,null,"And to wrap up, let me demonstrate you the YM modular system API (indeed, it has more\nmethods, and these are only the basic ones)."),"\n",t.createElement(a.p,null,t.createElement(a.em,null,"Defining a module:")),"\n",t.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<div class="gatsby-highlight" data-language="js"><pre class="language-js"><code class="language-js"><span class="token keyword">void</span> modules<span class="token punctuation">.</span><span class="token function">define</span><span class="token punctuation">(</span>\n    String moduleName<span class="token punctuation">,</span>\n    <span class="token punctuation">[</span>String<span class="token punctuation">[</span><span class="token punctuation">]</span>

1 dependencies<span class="token punctuation">]</span><span class="token punctuation">,</span>\n    <span class="token function">Function</span><span class="token punctuation">(</span>\n        <span class="token function">Function</span><span class="token punctuation">(</span>Object objectToProvide<span class="token punctuation">)</span> provide<span class="token punctuation">,</span>\n        <span class="token punctuation">[</span>Object resolvedDependency<span class="token punctuation">,</span> <span class="token operator">...</span><span class="token punctuation">]</span><span class="token punctuation">,</span>\n        <span class="token punctuation">[</span>Object previousDeclaration<span class="token punctuation">]</span>\n    <span class="token punctuation">)</span> declarationFunction\n<span class="token punctuation">)</span></code></pre></div>'}}),"\n",t.createElement(a.p,null,t.createElement(a.em,null,"Requiring a module:")),"\n",t.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<div class="gatsby-highlight" data-language="js"><pre class="language-js"><code class="language-js"><span class="token keyword">void</span> modules<span class="token punctuation">.</span><span class="token function">require</span><span class="token punctuation">(</span>\n    String<span class="token punctuation">[</span><span class="token punctuation">]</span> dependencies<span class="token punctuation">,</span>\n    <span class="token function">Function</span><span class="token punctuation">(</span>\n        <span class="token punctuation">[</span>Object resolvedDependency<span class="token punctuation">,</span> <span class="token operator">...</span><span class="token punctuation">]</span>\n    <span class="token punctuation">)</span> callbackFunction\n<span class="token punctuation">)</span></code></pre></div>'}}),"\n",t.createElement(a.p,null,"The project is open source and hosted at GitHub:\n",t.createElement(a.a,{href:"https://github.com/ymaps/modules"},"github.com/ymaps/modules"),"."))}var o=function(n={}){const{wrapper:a}=Object.assign({},(0,e.RP)(),n.components);return a?t.createElement(a,n,t.createElement(p,n)):p(n)},c=s(5556),l=s.n(c),u=s(3433),i=s(9868),r=s(7037),k=s(3928),d=s(4449);const m={Box:u.a,Button:i.$,Text:r.E,Heading:k.DZ,Paragraph:k.fz,PatternJourney:k.Rl,PureHtml:k.Qi,Section:k.wn,Hero:k.lq,Widget:k.x0,PatternJourney:k.Rl,WidgetContainer:k.uM,Workshop:k.cR,ProjectRoles:k.JV,DsAspects:k.nD,Link:k.N_,Image:k._V,ImageBlock:k.Dq,Map:k.T5,YandexImage:k.zX,Instagram:k.pd},g=n=>({children:a})=>t.createElement(k.DZ,{level:n},a),h={h1:g(1),h2:g(2),h3:g(3),h4:g(4),h5:g(5),h6:g(6),p:({children:n})=>t.createElement(k.fz,{standout:!0},n),a:k.N_,ul:k.Ul,ol:k.Ol,div:({"data-excerpt":n,children:a,...s})=>n?t.createElement(k.fz,{as:"div",lead:!0},a):t.createElement("div",s,a)};h.h1.propTypes={children:l().node};const y=({data:{mdx:n,site:{siteMetadata:{siteUrl:a}}},children:s,pageContext:{next:p,prev:o,fileSourceUrl:c}})=>{const{readingTime:l,slug:i,disqusIdentifier:r}=n.fields,{date:g,title:y,subTitle:f,cover:E,tumblr:v}=n.frontmatter,j=n.frontmatter.tags&&n.frontmatter.tags.split(","),b=i.startsWith("blog/");return n?t.createElement(k.PE,null,t.createElement(k.I0,{imageUrl:E&&E.childImageSharp.gatsbyImageData.images.fallback.src,tags:j,date:g,readingTime:b&&parseInt(l.minutes)>0?`${Math.round(l.minutes).toFixed(1)} min read`:null,title:y,subTitle:f}),t.createElement(k.G$,{data:n}),t.createElement(u.a,{flex:"grow",width:"xlarge",margin:{horizontal:"auto"},pad:"medium",direction:"column"},t.createElement(e.xA,{components:{...h,...m}},s),t.createElement(u.a,{direction:"row",fill:"horizontal",justify:"center",margin:{bottom:"auto"},pad:{vertical:"medium"}},j&&j.length>0&&j.map(n=>t.createElement(k.vw,{key:n,name:n.trim(),slug:(0,d.fX)(n),margin:"xsmall"}))),b&&t.createElement(t.Fragment,null,t.createElement(k.WB,{flex:!1,prevSlug:o&&`/${o.fields.slug}`,nextSlug:p&&`/${p.fields.slug}`,prevTitle:o&&o.frontmatter.title,nextTitle:p&&p.frontmatter.title,pad:{vertical:"medium"}}),t.createElement(k.Sn,{link:c}),t.createElement(k.Hw,{slug:i,title:y,disqusIdentifier:r,tumblr:v,siteUrl:a})))):null};function f(n){return t.createElement(y,n,t.createElement(o,n))}},8453:function(n,a,s){s.d(a,{RP:function(){return p},xA:function(){return c}});

1var e=s(6540);const t=e.createContext({});function p(n){const a=e.useContext(t);return e.useMemo(()=>"function"==typeof n?n(a):{...a,...n},[a,n])}const o={};function c({components:n,children:a,disableParentContext:s}){let c;return c=s?"function"==typeof n?n({}):n||o:p(n),e.createElement(t.Provider,{value:c},a)}}}]);
2//# sourceMappingURL=component---src-templates-post-js-content-file-path-content-posts-ym-modular-system-index-en-md-2d9de0eaf0342c269d3e.js.map