ES6 exports / imports use case compared to traditional namespace

Question

I do not understand WHY and in what scenario this will be used.

My current web setup consists of many components, which are simply functions or factory functions, each in its own file, and each function "conducts" the application namespace, for example: app.component.breadcrumbs = function(){...etc.

Then GULP simply combines all the files, and I end up in one file, so the page controller (each "page" is the controller, which downloads the components needed for a page) can simply download the components, for example: app.component.breadcrumbs(data).

All components can be easily accessed upon request, and one javascript file is well cached and that’s it. This way of working seems very good, I have never seen a problem with this way of working. Of course, this can (and) be easily scaled.

So, how does ES6 import for functions better than what I described?

what's the deal with importing functions instead of just attaching them to the application namespace? for them there is much more sense to "become attached."

File structure

/dist/app.js                     // web app namespace and so on
/dist/components/breadcrumbs.js  // some component
/dist/components/header.js       // some component
/dist/components/sidemenu.js     // some component
/dist/pages/homepage.js          // home page controller

// GULP concat all above to
/js/app.js // this file is what is downloaded

Then inside homepage.jsit might look like this:

app.routes.homepage = function(){
    "use strict";
    var DOM = { page : $('#page') };

    // append whatever components I want to this page
    DOM.page.append(
        app.component.header(),
        app.component.sidemenu(),
        app.component.breadcrumbs({a:1, b:2, c:3})
    )
};

This is a very simplified code example, but you get the point

Answer 1

The answers to this are probably a bit subjective, but I will do my best.

, . , , , , ES6 , .

" ", , . components/header.js components/breadcrumbs.js, . JS ? . :

• -, , .

, , . , , , .

, , , /.

, ? , , , 5 , , . JS . №1, .

, ? , JS ? , ?

, , , - ? , ?

100% , , . , .

- . header.js, app.component.header() app.routes.homepage(), DOMContentLoaded. . , . , - app.component.blueHeader(), .

, , , . , AJAX - , , - ?

# 1 ( ), . , .

, ?

, , , , , .

Scoping

script . , , , , . , (function(){ ... })(); , , , , , .

app.component.* - , , , . , , , Github, ? ?

, ? , , , . , , , API, jQuery noConflict. , ? ?

, , , . , , , . "utils", , , .

, , , , , . 100 , , - - , , . , - .

. JavaScript . , , , , . , , , - AMD, CommonJS, System.register . , .

, , .

, , - , 100% - , . , .

JavaScript . - , , . , , .