1 Тема від vitek Востаннє редагувалося vitek (24.11.2024 16:04:01)

  • vitek
  • Користувач
  • Поза форумом
  • Дата реєстрації: 13.06.2023
  • Повідомлень: 97
    • Репутація: 41

Тема: import/export js, або розбиття js файлу на декілька

Всім привіт,
JavaScript не мій профіль (і взагалі я не в ІТ) так що мої знання відповідні.
Прошу ради/допомоги в наступному питанні.
Хочу розбити свій login.js на 2 файли - винести щось в інший файл, наприклад в dom.js
Вони в одній папці /js
Так виглядить мій dom.js

const dom = {   
    btnProfile : document.querySelector('#btnGetProfile'),
    outProfile : document.querySelector('#myProfile')
};
export default dom;

В свій login.js я зверху добавляв

import dom from "./js/dom.js";

пробував і

import dom from "./dom.js";

але результат один -помилка

Uncaught SyntaxError: import declarations may only appear at top level of a module

Щоб уникнути помилки я закоментував імпорт в файлі і додав його в html

<script src="js/login.js" type="application/javascript" defer>
    import dom from "js/dom.js";</script>
<script src="js/dom.js" type="module" defer></script>

пробував в html і ось так 

import dom from "./js/dom.js";

(типу може я неправильно вказав шлях)
Результат один - варнінг(жовтим) при загрузці сторінки

Layout was forced before the page was fully loaded. If stylesheets are not yet loaded this may cause a flash of unstyled content.

і мої імпортовані обєкти невидно.
в login.js тестив -

function testImport() {
    console.log('dom is - ',dom);
    let showMe = dom.btnProfile;
    let callback = showMe.innerHTML = 
            `<h3> I\`m from import file </h3>`;
}

і в консолі метод запускав але його невидно - помилка

Uncaught ReferenceError: dom is not defined

Як правильно розділити файл і застосувати import/export ?
Дякую за відповідь.

Подякували: leofun011

2 Відповідь від leofun01

  • leofun01
  • leofun01
  • Replace Team
  • Поза форумом
  • Дата реєстрації: 15.03.2014
  • Повідомлень: 3 295
    • Репутація: 2723

Re: import/export js, або розбиття js файлу на декілька

import/export можна робити в середовищі для програміста [, або в сервері для node.js]. А для клійента їх (import/export) треба видаляти і перетворяти окремі *.js файли на 1 файл поки вони (*.js файли) в спільному домені. Тільки не намагайтесь обфускувати код, сервер зтискайе HTTP-відповідь окремим алґоритмом (див.Content-Encoding: gzip, deflate).

vitek написав:

Як правильно розділити файл і застосувати import/export ?

Для програміста можна робити importmap

<script type="importmap">
  {
    "imports": {
      "dom": "./js/dom.js",
      "login": "./js/login.js"
    }
  }
</script>

, або звичайний module

<script type="module" src="./js/dom.js"></script>

або

<script type="module">
  /* JavaScript module код */
</script>

, і не 2 в 1-ому

vitek написав:
<script src="js/login.js" type="application/javascript" defer>
    import dom from "js/dom.js";</script>

так не пройде. Треба вибрати: src xor InnerText.

Крім того, не можна import'увати обйекти, які ше не були в export, доводиться export/import'увати послідовно.

Подякували: vitek1

leofun01 вебсайт

3 Відповідь від vitek

  • vitek
  • Користувач
  • Поза форумом
  • Дата реєстрації: 13.06.2023
  • Повідомлень: 97
    • Репутація: 41

Re: import/export js, або розбиття js файлу на декілька

leofun01 написав:

...

Ще раз дякую за відповідь, нарешті я дібрався до коду (трошки тестував раніше але невідписував бо не був впевнений).
Моя помилка - вважав що module кріпиться до application/javascript файлу, а воно - головний module а інше імпортується головним.
А так щоб не засмічувати файл зробив додатковий якимось таким :

▼Прихований текст
const dom = {
    btn : {
        back : document.querySelector('#btnBack'),
        create : document.querySelector('#btnCreate'),
        registration : document.querySelector('#btnRegistration'),
        login : document.querySelector('#btnLogin'),
        logOut : document.querySelector('#btnLogOut'),
        logAdmin : document.querySelector('#btnLogAdmin'),
        getProfile : document.querySelector('#btnGetProfile'),
        backToUser : document.querySelector('#btnBackToUser'),
        contAdmin : document.querySelector('#btnContAdmin')
    },
    input : {
        logName : document.querySelector('#logName'),
        logEmail : document.querySelector('#logEmail'),
        logFullName : document.querySelector('#logFullName'),
        logPass : document.querySelector('#logPass'),
        logRepeatPass : document.querySelector('#logRepeatPass')
    },
    output : {
        helloUser : document.querySelector('#helloUser'),
        myProfile : document.querySelector('#myProfile')
    }, 
    block : {
        anonimLog : document.querySelector('#anonimLog'),
        userLog : document.querySelector('#userLog')
    }
    //    ------- LOGIN SELECTORS --------------    
    //   --------- USER SELECTORS ---------------    
    //   --------- ADMIN SELECTORS ---------------
//    const adminLog = document.querySelector('#adminLog');
//    const userPass = document.querySelector('#userPass');
//    const adminPass = document.querySelector('#adminPass');

};
export default dom;

Не знаю наскільки це нормальна практика, але вроді працює і здаються простішим використання головного файлу.
Спершу розбивав по секторам, тепер перерозбив по типу (input ітд..). Апі адмін не реалізовував і здається вже не буду.

Подякували: leofun011