bellord/kit
1
0
Fork 0
mirror of https://bitbucket.org/bellord13/kit.git synced 2026-11-13 19:06:11 +03:00
Code Issues Packages Projects Releases Wiki Activity

fix

Browse Source
This commit is contained in:
Bellord
2026-05-31 13:36:28 +03:00
parent f98cfc62a7
commit 1c882ba7f3
27 changed files with 349 additions and 364 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.md
+196 -73
View File
@@ -1,5 +1,10 @@
# wt.core assets source [![Build Status](https://travis-ci.org/joemccann/dillinger.svg?branch=master)](https://bitbucket.org/bellord13/kit/)
## is a dependency wt.core [![Build Status](https://travis-ci.org/joemccann/dillinger.svg?branch=master)](https://bitbucket.org/andreyleoua/wt.core/)
# wt.core assets source
Источник: https://bitbucket.org/bellord13/kit/
## is a dependency wt.core
Репозиторий wt.core: https://bitbucket.org/andreyleoua/wt.core/
Предназначен для асинхронной работы с ресурсами на веб-проектах.
@@ -20,6 +25,8 @@ git clone https://bellord@bitbucket.org/bellord13/kit.git ./
`PluginManager` - класс для работы с плагинами
`window.kit` - объект, который изолирует все плагины
## Базовые принципы
✨ Инициализация
@@ -27,84 +34,200 @@ git clone https://bellord@bitbucket.org/bellord13/kit.git ./
Выдержка из плагина `core`:
```js
manager = new PluginManager(global, plugins = {});
manager = new PluginManager(global);
manager.register('PluginManager', {
alias: 'pm',
type: moduleTypeList.loader,
loader: function(module, exports, require, global) {
// return определяет, что выкинуть в global
return module.exports = manager;
alias: 'pm',
type: MD_TYPE.HMD,
handler: function(require, exports, module, global) {
return module.exports = manager;
}
});
manager.register('config', {
type: MD_TYPE.HMD,
handler: function(require, exports, module, global) {
global.config = Object.assign({}, defaultConfig, config);
}
});
manager.install('PluginManager');
```
Создается экземпляр класса PluginManager и регистрирует сам себя.
Переменная `global` выполняем роль фасада для все установленных плагинов с допустимостью использования `alias`. Это позволит использовать функционал вне ядра. В качестве глобальной переменной используется `window.kit`.
Создается экземпляр класса `PluginManager` и регистрирует сам себя.
Переменная `global` выполняем роль фасада для всех установленных плагинов. В качестве глобальной переменной используется `window.kit`. В паре с менеджером сразу инициализируется `config` доступный из `window.kit.config`.
Пример вызова
```js
kit.$
kit.jquery
```
✨ Основные этапы работы с плагином:
| этап | метод |
| ------ | ------ |
| этап | метод |
|-------------|--------------------------------------------------------------|
| Регистрация | register(`pluginId`, `config`) или registerPlugins(`object`) |
| Загрузка | load(`pluginId`, `callback`) |
| Установка | install(`pluginId`, `callback`) |
| Запрос | require(`pluginId`, `callback`) |
| Загрузка | load(`pluginId`, `callback`) |
| Установка | install(`pluginId`, `callback`) |
| Запрос | require(`pluginId`, `callback`) |
## Пример конфигурации
## Примеры регистрации
### Пример регистрации Стандартного плагина (Тип default)
```js
__PluginManager__.register('menu', {
path: kit.config.assetsPath + '/menu',
module: '/menu.js',
type: 'loader',
css: [
'/menu.css'
],
deps: ['lib', 'align', 'utils']
}
);
path: kit.config.assetsPath + '/menu',
module: '/menu.js',
type: 'loader',
css: [
'/menu.css'
],
deps: ['lib', 'align', 'utils']
});
kit.pm.register('UserCart', {
path: '/assets/plugins/cart/',
module: 'main.js',
js: ['jquery.min.js', ['utils.js', 'api.js']], // jquery -> (utils + api вместе)
css: ['style.css'],
autoRequire: true
});
```
### Пример регистрации HMD-плагина
```js
kit.pm.register('Logger', {
type: 'HMD',
alias: ['AltLogger'],
handler: function(require, module, exports, global) {
var object = {
log: function(msg) { console.log('[Logger]: ' + msg); }
};
// kit.require('Logger') вернет module
module.exports = object;
// return задает, что определить в global.Logger и global.AltLogger
return object.log;
},
onInstall: function(p) {
console.log('Logger готов!');
}
});
```
### Пример регистрации UMD-плагина
```js
kit.pm.register('MyUmdModule', {
type: 'UMD',
path: '/js/plugins/',
module: 'my-plugin.umd.js', // Файл с UMD-оберткой
deps: ['jquery'], // Если плагину нужен jQuery
autoRequire: true,
onInstall: function(plugin) {
console.log('UMD модуль успешно инициализирован');
}
});
```
### Пример регистрации ES-плагина
```js
kit.pm.register('UserDashboard', {
type: 'ES', // Указываем тип ES (ECMAScript)
path: '/assets/modules/', // Базовый путь
module: 'dashboard.js', // Файл, содержащий "export default"
autoRequire: true, // Начать загрузку сразу
onInstall: function(plugin) {
// В plugin.module.exports попадет то, что экспортировано из файла
console.log('ES-модуль загружен:', plugin.module.exports);
}
});
```
> Особенности работы с типом ES в твоем скрипте:
- Нативная загрузка: Вместо создания обычного тега `<script>`, менеджер использует динамический импорт `import(url)`.
- Строгий режим: Все ES-модули по умолчанию работают в use strict.
- CORS: Если модули загружаются с другого домена, сервер обязательно должен отдавать заголовок `Access-Control-Allow-Origin`, иначе браузер заблокирует загрузку.
## Описание параметров конфига для плагина
| name | value | description |
| --- | --- | --- |
| type | import | Значение по умолчанию. Нативный загрузчик модулей. Файл модуля содержит ключевые фразы "export" и "export default" |
| * | loader | Файл модуля содержит функцию kit.PluginManager.register(pluginId, function(module, exports, require, global){}) |
| alias | Array string | Список ключей, которые могут быть использованы вместо pluginId, как и в require() так и в global |
| import | string | Ссылка на файл с модулем |
| loader | callback | Используется для загрузки модулей типа loader |
| deps | Array string | Зависимости, Id плагинов |
| css | Array string | Массив путей к стилям. Стили грузятся синхронно при загрузке плагина. Без событий |
| js | Array string | Массив путей к скриптам. Загрузка идет по цепочке. Для синхронной загрузки скрипты ложатся в массив. пр: [1.js, [1.1.js, 1.2.js]] |
| loadJsAfterModule | bool | default: false. Определяет порядок загрузки скриптов и модуля |
| onRegister | callback | функция выполняемая после регистрации плагина (однократно) |
| onLoad | callback | функция выполняемая после загрузки плагина (однократно) |
| onInstall | callback | функция выполняемая после установки плагина (однократно) |
| path | string | префикс пути для модуля, скриптов и стилей |
| modulePath | string | префикс пути для модуля. если не указан, то берется config.path |
| Параметр | Тип | По умолчанию | Описание |
|:----------------------|:----------------|:------------:|:----------------------------------------------------------------------------------------------|
| **type** | `string` | `default` | Тип плагина. |
| **handler** | `callback` | — | Используется в связке с типом `HMD`. Имеет вид `function(r, m, e, g){m.e = {}; return {};}`. |
| **path** | `string` | `""` | Базовый префикс пути для модуля, скриптов и стилей. |
| **alias** | `Array string` | `[]` | Псевдонимы для `pluginId`, доступные в `require()` и `global`. |
| **module** | `string` | — | Прямая ссылка на файл с основным модулем. |
| **deps** | `Array string` | `[]` | Список ID плагинов-зависимостей, которые должны быть загружены ранее. |
| **css** | `Array string` | `[]` | Массив путей к стилям. Загружаются параллельно. |
| **js** | `Array string` | `[]` | Цепочка скриптов. Массив в массиве (напр. `[1.js, [2.1, 2.2]]`) задает параллельную загрузку. |
| **loadJsAfterModule** | `bool` | `false` | Если `true`, то внешние JS-скрипты загрузятся строго после основного модуля. |
| **isSetTimestamp** | `bool` | `true` | Добавит к загружаемым файлам параметр __pm который позволит установить кеш на 1 час. |
| **onRegister** | `callback` | — | Функция, выполняемая однократно сразу после регистрации плагина. |
| **onLoad** | `callback` | — | Функция, выполняемая однократно после завершения загрузки всех ресурсов. |
| **onInstall** | `callback` | — | Функция, выполняемая однократно после финальной установки (выполнения handler). |
## Использование
### Методы управления модулями
| Метод | Аргументы | Вернет | Описание |
|:------------|:--------------------------------|:-------:|:--------------------------------------------------------------------------------------------------------------------------------------|
| **require** | `pluginId, callback` | * | Вызывает метод `callback` после установки `pluginId`. Возвращает модуль, если плагин установлен. |
| **get** | `pluginId, callback` | * | Вызывает метод `callback` после установки `pluginId`. Возвращает модуль, если плагин установлен. |
| **define** | `deps, callback` | Promise | Организаует вызов метода в стиле https://requirejs.org/. В качестве аргументов в метод `callback` будут проброшены экспорты плагинов. |
| **require** | `deps, callback` | Promise | Организаует вызов метода в стиле https://requirejs.org/. В качестве аргументов в метод `callback` будут проброшены экспорты плагинов. |
| **ready** | `deps, callback` | Promise | Вызывает метод `callback` после установки зависимостей `deps` и отработки события `document.DOMContentLoaded`. |
| **exec** | `deps, callback, args, context` | Promise | Вызывает метод `callback` после установки зависимостей `deps`. |
| **loaded** | `deps, callback` | Promise | Вызывает метод `callback` после установки зависимостей `deps` и отработки события `window.load`. |
---
Запуск исполняемого кода после установки зависимостей:
```js
PluginManager.exec(deps, callback, argArr, context)
kit.exec(deps, callback, argArr, context)
```
```js
kit.define(['UserAPI', 'Logger'], function(api, log) {
log.info('Start');
});
```
Запуск исполняемого кода после установки зависимостей и при загруженной странице:
```js
PluginManager.ready(deps, callback)
kit.ready(['UserAPI', 'Logger'], function() {
kit.logger.info('Start');
kit.require('UserAPI').do();
});
```
> `kit.config.requiredDependencies` определяет зависимости (deps) по умолчанию
```js
kit.exec(['UserAPI', 'Logger'], function() {
kit.logger.info('Start');
});
```
```js
kit.require('Product').then(function(){
kit.Product.make(productId).then(function(product){
product.setXData('.catalog-page');
kit.require('alpine');
})
})
```
# State list
| Значение | Состояние | Описание |
|:---------|:---------------|:-------------------------------------------------------------------------|
| `0` | `undefined` | Начальное состояние, плагин только что создан. |
| `1` | `registered` | Плагин зарегистрирован в системе, конфиг проверен. |
| `3` | `loading` | Идет активная загрузка файлов (JS, CSS, зависимости). |
| `4` | `loaded` | Все внешние ресурсы успешно загружены. |
| `5` | `installing` | Выполняется основной код плагина (`handler`). |
| `6` | `installed` | Плагин полностью готов к работе, экспорт завершен. |
## Глобальный конфиг
@@ -112,12 +235,12 @@ PluginManager.ready(deps, callback)
> Параметры допустимо определять до загрузки `PluginManager`
| name | default | description |
| --- | --- | --- |
| assetsPath | /local/templater.dev/kit/assets | |
| requiredDependencies | ['bsCore', 'toolkit'] | дополнительно определяет список зависимостей для любого колбека вызванного функциями `exec` и `ready` |
| autoloadPluginList | ['tooltip'] | Автоматически загрузит ресурсы указанных плагинов. В случае модуля с типом `loader` код не будет исполнен сразу после загрузки. Исполнение бдует определятся функций `install` |
| debug | false | Расширит список выводимой в консоль информации |
| name | default | description |
|----------------------|---------------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| assetsPath | /local/templater.dev/kit/assets | Если не указывать, то определится автоматически при инициализации PluginManager |
| requiredDependencies | ['bsCore', 'toolkit'] | дополнительно определяет список зависимостей для любого колбека вызванного функциями `exec` и `ready` |
| autoloadPluginList | ['tooltip'] | Автоматически загрузит ресурсы указанных плагинов. В случае модуля с типом `HMD` код не будет исполнен сразу после загрузки. Исполнение бдует определятся функций `install` |
| debug | false | Расширит список выводимой в консоль информации |
@@ -125,26 +248,26 @@ PluginManager.ready(deps, callback)
переменная kit может быть задана любой, поэтому в некоторых местах корректно будет использовать универсальные глобальные переменные
| name | link | description |
| --- | --- | --- |
| `__pmGlobal__` | аналог window.kit | |
| `__PluginManager__` |аналог window.kit.PluginManager | |
| `__pmConfig__` | аналог window.kit.config | |
| name | link | description |
|---------------------|---------------------------------|---------------|
| `__pmGlobal__` | аналог window.kit | |
| `__PluginManager__` | аналог window.kit.PluginManager | |
| `__pmConfig__` | аналог window.kit.config | |
## z-index map
| z-index | plugin | selector |
| --- | --- | --- |
| 100 | flex-kit | .flex-card:hover .flex-card__content |
| 1000 | bs | dropdown |
| 1020 | bs | sticky |
| 1030 | bs | fixed |
| 1040 | bs | modal-backdrop |
| 1050 | bs | offcanvas |
| 1060 | bs | modal |
| 1070 | bs | popover |
| 1080 | bs | tooltip |
| z-index | plugin | selector |
|-----------|----------|--------------------------------------|
| 100 | flex-kit | .flex-card:hover .flex-card__content |
| 1000 | bs | dropdown |
| 1020 | bs | sticky |
| 1030 | bs | fixed |
| 1040 | bs | modal-backdrop |
| 1050 | bs | offcanvas |
| 1060 | bs | modal |
| 1070 | bs | popover |
| 1080 | bs | tooltip |