Форум программистов, компьютерный форум, киберфорум
JavaScript
Войти
Регистрация
Восстановить пароль
 
185 / 122 / 24
Регистрация: 16.03.2017
Сообщений: 1,413
1

Фреймворк динамической подгрузки JS

04.03.2020, 19:09. Показов 369. Ответов 5
Метки нет (Все метки)

Добрый день, подскажите плиииз....

Кто-нибудь из вас про такое вообще слышал?

У гугл встречал что-то похожее. При подключении API подключаем один js-модуль, а потом чуть-ли не выбираем каким из десятков видов API будем пользоваться. Например JS для гугл карт. ...а потом заглядываешь в исходники HTML и обнаруживаешь что там десяток js-файлов подгружено...
0
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
04.03.2020, 19:09
Ответы с готовыми решениями:

Выполнение скрипта после подгрузки
Привет! Получаю через AJAX часть страницы с кнопкой и скрипт обработки этой кнопки в котором...

Скрипт подгрузки страницы при скролинге
Необходимо организовать рабочий скрипт для подгрузке страницы при скроллинге. Я очень плохо...

Просадки fps и подгрузки
Привет форумчане. Играя в игры не важно в какие тяжелые (современные) или простые (старые) есть...

Переменная для подгрузки
Здравствуйте. У меня есть страница статей определенной рубрики (rubrics.php). Я вывожу материалы:...

__________________

Записывайтесь на профессиональные курсы Fullstack-разработчиков на JavaScript‌
Обучение в Java Mentor с оплатой после трудоустройства
5
Эксперт JS
5417 / 3129 / 1513
Регистрация: 14.06.2018
Сообщений: 5,900
04.03.2020, 19:28 2
Здравствуйте.
Сейчас уже по стандарту можно использовать динамический импорт.
https://developer.mozilla.org/... nts/import
https://learn.javascript.ru/mo... ic-imports

Все современные браузеры поддерживают.
Самый последний держался MS Edge, пока в январе этого года не превратился в хромонога.

Если нужно поддерживать браузеры старше двух лет, то уже надо транспилить.

Добавлено через 8 минут
----
Если прям нужно поддерживать старый MS Edge, то на SO пишут:
Сам webpack понимает синтаксис динамическогого import() и ему не нужны дополнительные инструменты/трансформеры.
Все динамическая загрузка модулей в webpack доступна из коробки.
1
185 / 122 / 24
Регистрация: 16.03.2017
Сообщений: 1,413
04.03.2020, 19:31  [ТС] 3
Цитата Сообщение от amr-now Посмотреть сообщение
Сейчас уже по стандарту можно использовать динамический импорт.
А чего-нибудь более... "гибкого" нет?
0
Эксперт JS
5417 / 3129 / 1513
Регистрация: 14.06.2018
Сообщений: 5,900
04.03.2020, 20:12 4
andyj, а с модулями всегда эротика была.
webpack в тонкостях изучайте, чтобы вот для старых чтоб всё как часы. Местами.

Добавлено через 35 минут
-----
Вот полностью исправный переключающийся динамический импорт для старых браузеров.
index.html
PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<!DOCTYPE html>
<head>
    <meta charset="utf-8" />
    <title>Модули в TypeScript</title>
</head>
<body>
    <h1>Модули CommonJS</h1>
 
    <div id="content"></div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.21.0/system.js"></script>
    <script>
        SystemJS.config({
            paths: {
                // paths serve as alias
                "npm:": "node_modules/"
            },
            // map tells the System loader where to look for things
            map: {
                // our app is within the app folder
                app: "scripts",
                // other libraries
                // "color-name": 'npm:color-name',
            },
            // packages tells the System loader how to load when no filename and/or no extension
            packages: {
                app: {
                    main: 'app.js',
                    defaultExtension: 'js'
                } //,
                // "color-name": {
                //     main: 'index.js',
                //     defaultExtension: 'js'
                // }
            }
        });
        System.import("app");
    </script>
</body>
</html>
scripts/app.js
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
"use strict";
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
    return new (P || (P = Promise))(function (resolve, reject) {
        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
        step((generator = generator.apply(thisArg, _arguments || [])).next());
    });
};
(function main() {
    return __awaiter(this, void 0, void 0, function* () {
        let trigger = 1;
        let module = trigger === 2 ? yield Promise.resolve().then(() => require("./lib1")) : yield Promise.resolve().then(() => require("./lib2"));
        let obj = new module.A(5);
        document.getElementById("content").textContent = obj.field.toString();
    });
})();
scripts/lib1.js
Javascript
1
2
3
4
5
6
7
8
9
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
class A {
    constructor(value) {
        this.field = value;
        console.log("constructor lib1");
    }
}
exports.A = A;
scripts/lib2.js
Javascript
1
2
3
4
5
6
7
8
9
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
class A {
    constructor(value) {
        this.field = value;
        console.log("constructor lib2");
    }
}
exports.A = A;
Исходные файлы Typescript компилируются в модули CommonJS:
source/app.ts
Javascript
1
2
3
4
5
6
(async function main() {
    let trigger = 1;
    let module = trigger === 2 ? await import("./lib1") : await import("./lib2");
    let obj = new module.A(5);
    document.getElementById("content").textContent = obj.field.toString(); 
})();
source/lib1.ts
Javascript
1
2
3
4
5
6
7
export class A {
    field: number;
    constructor(value: number) {
        this.field = value;
        console.log("constructor lib1"); 
    }
}
source/lib2.ts
Javascript
1
2
3
4
5
6
7
export class A {
    field: number;
    constructor(value: number) {
        this.field = value;
        console.log("constructor lib2"); 
    }
}
Добавлено через 2 минуты
----
Настройки tsconfig.json
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
{
  "compilerOptions": {
    /* Basic Options */
    // "incremental": true,                   /* Enable incremental compilation */
    "target": "ES2015",                       /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */
    "module": "commonjs",                       /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */
    "lib": ["DOM", "ES2020"],                             /* Specify library files to be included in the compilation. */
    "allowJs": false,                       /* Allow javascript files to be compiled. */
    // "checkJs": true,                       /* Report errors in .js files. */
    // "jsx": "preserve",                     /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */
    // "declaration": true,                   /* Generates corresponding '.d.ts' file. */
    // "declarationMap": true,                /* Generates a sourcemap for each corresponding '.d.ts' file. */
    // "sourceMap": true,                     /* Generates corresponding '.map' file. */
    // "outFile": "./",                       /* Concatenate and emit output to single file. */
    "outDir": "scripts",                      /* Redirect output structure to the directory. */
    "rootDir": "source",                      /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
1
185 / 122 / 24
Регистрация: 16.03.2017
Сообщений: 1,413
04.03.2020, 22:25  [ТС] 5
Цитата Сообщение от amr-now Посмотреть сообщение
Вот полностью исправный переключающийся динамический импорт для старых браузеров
Спасибо. Попробую.

Но у меня немного все проще... (до ts еще "не дорос")
Есть таблица из 10-15 строк с URL для модулей.
Небольшой функцией я эту таблицу перебираю и последовательно (или параллельно) загружаю через создание (из js) HTML-элементов <script src=...> и обработкой loaded/error. По окончанию получаю глобальный колбэк который означает что "загрузка закончена и можно работать со страницей". Или "все загрузить не получилось и надо перегрузить страницу или догрузить ибо будут ошибки".
...Целых микро-фреймворк получается...

...просто подумал что может что-нибудь более... "продвинутое" есть? Не мой "самопал".
0
Эксперт JS
5417 / 3129 / 1513
Регистрация: 14.06.2018
Сообщений: 5,900
05.03.2020, 05:35 6
Цитата Сообщение от andyj Посмотреть сообщение
По окончанию получаю глобальный колбэк который означает что "загрузка закончена и можно работать со страницей". Или "все загрузить не получилось и надо перегрузить страницу или догрузить ибо будут ошибки".
Вот эквивалент:
source/app.ts
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
(async function main() {
    let trigger = 1;
    try {
        let module = trigger === 2 ? await import("./lib1") : await import("./lib2");
        let obj = new module.A(5);
        document.getElementById("content").textContent = obj.field.toString();
        console.log("Загрузка закончена и можно работать со страницей.");
    }
    catch (error) {
        console.log("Все загрузить не получилось, и надо перегрузить страницу или догрузить, ибо будут ошибки!");
    }
})();
scripts/app.js
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
"use strict";
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
    return new (P || (P = Promise))(function (resolve, reject) {
        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
        step((generator = generator.apply(thisArg, _arguments || [])).next());
    });
};
(function main() {
    return __awaiter(this, void 0, void 0, function* () {
        let trigger = 1;
        try {
            let module = trigger === 2 ? yield Promise.resolve().then(() => require("./lib1")) : yield Promise.resolve().then(() => require("./lib2"));
            let obj = new module.A(5);
            document.getElementById("content").textContent = obj.field.toString();
            console.log("Загрузка закончена и можно работать со страницей.");
        }
        catch (error) {
            console.log("Все загрузить не получилось, и надо перегрузить страницу или догрузить, ибо будут ошибки!");
        }
    });
})();
Здесь происходит транспиляция из синтаксиса ES2020 в синтаксис ES2015 для браузеров, которые не понимают async/await.
1
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
05.03.2020, 05:35

Заказываю контрольные, курсовые, дипломные работы и диссертации здесь.

Пути для подгрузки шаблонов
Symfony2 Framework Помогите разобраться. Стандарными средствами шаблоны ищутся в 2-х местах: ...

Пример подгрузки данных в таблицу
Добрый день. С Angular не знаком (только базовые вещи, поиск по строкам...). Есть таблица в ней...

Парсер после подгрузки js контента
Доброго времени суток. Хотел спросить, кто может подскажет. Вообщем нужно спарсить страничку, а на...

Организация подгрузки данных в DBGrid
Всем привет, ребята. Delphi 7, MySQL - localhost. Сабж: - есть форма; - на ней 5 кнопок;...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
6
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2021, vBulletin Solutions, Inc.