ES6 modules - garevna/js-course GitHub Wiki

🎓 ES6 модули

🔸 export
🔸 import

Модули - "строительные блоки" приложения

Создаются JS-модули путем экспорта содержимого JS-файла ( 🔸 export )

Директива 🔸 import позволяет вставить модуль, созданный с помощью export, в другой JS-файл

( при использовании webpack для сборки приложения поддержка браузерами ES6 модулей не имеет значения - вебпак сделает все правильно 😉 )

🎓 export

🔘 Именованный экспорт

( несколько экспортов из одного файла )
📝 файл lib.js:
export const sqrt = Math.sqrt

export function buildElement ( tagName ) {
    return document.body.appendChild (
        document.createElement ( tagName )
    ) 
}

export function elemExist ( elemSelector ) {
    return !!document.querySelector ( elemSelector )
}

🔘 Дефолтный экспорт

Экспорт по умолчанию - это экспорт единственного объекта
( один "главный" объект в модуле )
📝 файл Sample.js:
const Sample = function ( tagName ) {
    this.elem = document.body.appendChild (
        document.createElement ( tagName )
    ) 
}
Sample.prototype.getAttrs = function () {
    return Object.getOwnPropertyNames ( this.elem )
}
Sample.prototype.setAttr = function ( attr, val ) {
    this.elem [ attr ] = val
}
Sample.prototype.setStyle = function ( css_attr, val ) {
    this.elem.style [ css_attr ] = val
}

export default Sample

🎓 import

При импорте из js-файлов расширение файла указывать не обязательно

☕ Импорт именованного экспорта

Предположим, нам нужно использовать функции buildElement и elemExist из файла lib.js ( см. выше ) в файл main.js

📝 main.js:
import { buildElement, elemExist } from 'lib'

☑️ Можно импортировать все содержимое файла lib.js:

import * as lib from 'lib'

✍ Теперь можно использовать функции buildElement и elemExist:

var picture = buildElement ( 'img' )
picture.src = 'http://cs5-2.4pda.to/8853638.gif'

console.log ( elemExist ( picture.tagName ) )

☕ Импорт дефолтного экспорта

Теперь импортируем из файла sample.js ( см. выше ) в файл main.js:

import Sample from 'Sample';
let sample = new Sample ()

© Irina H.Fylyppova 2018

⚠️ **GitHub.com Fallback** ⚠️