I started programming in js, but I have little experience. I would like to have an analogy with classes on php. To write a module to one file and then connect it if necessary in a file. + It would be an advantage if it could then be compiled into 1 js file. Please tell me what framework or library to use for these needs? Or maybe some kind of article covering this topic will not be superfluous. thank

  • Here is a link to Habr - Peter Slusar
  • Here is an excellent article about modularity in ES - 2015 referring to - Artsiom

1 answer 1

In the modern JavaScript ecosystem, there are several approaches to splitting code into modules:

  1. AMD is a module description format used in Require.js . In my (very subjective) view, the description of the modules is somewhat redundant. One of the main "chips" - asynchronous dynamic loading of modules on demand. Although, if memory serves, there is also the opportunity to collect all the code in one package . Example description of AMD module:

    // ОписаниС зависимостСй define(['jquery', 'foo', 'bar'], function (jquery, foo, bar) { // ΠžΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½ΠΈΠ΅ самого модуля return function () {}; });

  2. Common.js is an approach used, for example, in the Node.js ecosystem. A typical module is:

     // Π˜ΠΌΠΏΠΎΡ€Ρ‚ΠΈΡ€ΡƒΠ΅ΠΌ зависимости var jquery = require('jquery'), foo = require('foo'), bar = require('bar'); // ЭкспортируСм Ρ‚Π΅Π»ΠΎ модуля module.exports = function() {};

  3. UMD is a combined approach that allows you to describe modules that work in both AMD infrastructure and Common.js. It is nothing but a means of compatibility.

  4. Modules ES2015 is a special syntax introduced in the ES2015 standard that allows code breaking into modules. Module example:

     // Π˜ΠΌΠΏΠΎΡ€Ρ‚ΠΈΡ€ΡƒΠ΅ΠΌ зависимости import 'jquery' as $; import foo from 'foo'; import bar from 'bar'; // ЭкспортируСм Ρ‚Π΅Π»ΠΎ модуля export default function() {};

The bad news is that none of the approaches to the description of the modules can work directly in the browser. In any case, you will have to connect some kind of third-party library to manage modules. For AMD, it's Require.js ; for Common.js - Browserify , Webpack and others; for ES2015 - it could be a Browserify + Babel bundle or something else.

For new projects, I would recommend that you pay attention to the ES2015 modules and Common.js modules. There are several reasons for this:

  • The Node.js Ecosystem uses Common.js modules. Using a build system like Browserify, you can use npm modules. This will allow you to write code that will be executed both on the server and on the client.
  • With modern build systems, you can combine ES2015 and Common.js modules with almost no problems.
  • Although today browsers do not have built-in tools for loading ES2015 modules, everything goes to the fact that sooner or later they will appear.

What to read: