ремонт доки
This commit is contained in:
@ -4,7 +4,7 @@
|
|||||||
"browser": true,
|
"browser": true,
|
||||||
"es2020": true
|
"es2020": true
|
||||||
},
|
},
|
||||||
"extends": "eslint:recommended",
|
"extends": ["eslint:recommended"],
|
||||||
"parserOptions": {
|
"parserOptions": {
|
||||||
"ecmaVersion": 11,
|
"ecmaVersion": 11,
|
||||||
"sourceType": "module"
|
"sourceType": "module"
|
||||||
|
|||||||
1
.gitignore
vendored
1
.gitignore
vendored
@ -5,3 +5,4 @@
|
|||||||
/out
|
/out
|
||||||
|
|
||||||
**.DS_Store
|
**.DS_Store
|
||||||
|
package-lock.json
|
||||||
|
|||||||
12056
package-lock.json
generated
12056
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -7,7 +7,7 @@
|
|||||||
"build": "webpack --mode=production",
|
"build": "webpack --mode=production",
|
||||||
"start": "webpack-dev-server --open",
|
"start": "webpack-dev-server --open",
|
||||||
"dev": "webpack-dev-server",
|
"dev": "webpack-dev-server",
|
||||||
"docs": "jsdoc -r ./src",
|
"docs": "rm -rf out && documentation build src/** -f html -o out",
|
||||||
"show:docs": "lite-server --baseDir=\"out\"",
|
"show:docs": "lite-server --baseDir=\"out\"",
|
||||||
"lint": "eslint -c .eslintrc.json src --fix"
|
"lint": "eslint -c .eslintrc.json src --fix"
|
||||||
},
|
},
|
||||||
@ -32,13 +32,13 @@
|
|||||||
"clean-webpack-plugin": "^3.0.0",
|
"clean-webpack-plugin": "^3.0.0",
|
||||||
"css-loader": "^3.6.0",
|
"css-loader": "^3.6.0",
|
||||||
"cssnano": "^4.1.10",
|
"cssnano": "^4.1.10",
|
||||||
|
"documentation": "^13.0.2",
|
||||||
"eslint": "^7.4.0",
|
"eslint": "^7.4.0",
|
||||||
"eslint-loader": "^4.0.2",
|
"eslint-loader": "^4.0.2",
|
||||||
"file-loader": "^6.0.0",
|
"file-loader": "^6.0.0",
|
||||||
"html-loader": "^1.1.0",
|
"html-loader": "^1.1.0",
|
||||||
"html-webpack-plugin": "^4.3.0",
|
"html-webpack-plugin": "^4.3.0",
|
||||||
"image-webpack-loader": "^6.0.0",
|
"image-webpack-loader": "^6.0.0",
|
||||||
"jsdoc": "^3.6.4",
|
|
||||||
"mini-css-extract-plugin": "^0.9.0",
|
"mini-css-extract-plugin": "^0.9.0",
|
||||||
"postcss-import": "^12.0.1",
|
"postcss-import": "^12.0.1",
|
||||||
"postcss-loader": "^3.0.0",
|
"postcss-loader": "^3.0.0",
|
||||||
|
|||||||
@ -2,31 +2,21 @@ import {v4 as uuidv4} from 'uuid';
|
|||||||
|
|
||||||
import StorageServiceApi from './StorageServiceAPI';
|
import StorageServiceApi from './StorageServiceAPI';
|
||||||
|
|
||||||
/**
|
|
||||||
* @typedef Element
|
|
||||||
* @type {object}
|
|
||||||
* @property {string} _id - уникальный id элемента
|
|
||||||
*/
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Класс создания api для списков данных
|
* Класс создания api для списков данных
|
||||||
* @class
|
*
|
||||||
*/
|
* @class StorageListApi
|
||||||
class StorageListApi {
|
|
||||||
/**
|
|
||||||
* @param {string} key - уникальный ключ для api, который будет записан в сервисе
|
* @param {string} key - уникальный ключ для api, который будет записан в сервисе
|
||||||
*/
|
*/
|
||||||
|
class StorageListApi {
|
||||||
constructor (key) {
|
constructor (key) {
|
||||||
this.key = key;
|
this.key = key;
|
||||||
this.api = new StorageServiceApi();
|
this.api = new StorageServiceApi();
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @private
|
* @param {Array<{_id: string}>} list - список элементов по которым осуществялется поиск
|
||||||
*
|
|
||||||
* @param {Array.<Element>} list - список элементов по которым осуществялется поиск
|
|
||||||
* @param {string} _id - _id искомого элемента
|
* @param {string} _id - _id искомого элемента
|
||||||
*
|
|
||||||
* @returns {number} - Возвращает индекс искомого эллемента по _id
|
* @returns {number} - Возвращает индекс искомого эллемента по _id
|
||||||
*/
|
*/
|
||||||
_findIndex = (list, _id) => {
|
_findIndex = (list, _id) => {
|
||||||
@ -34,20 +24,15 @@ class StorageListApi {
|
|||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @private
|
* @param {Array<{_id: string}>} list - новый список элементов
|
||||||
*
|
* @returns {Promise<Array<{_id: string}>>} - возвращает обновленный список элементов
|
||||||
* @param {Array<Element>} list - новый список элементов
|
|
||||||
*
|
|
||||||
* @returns {Promise<Array<Element>>} - возвращает обновленный список элементов
|
|
||||||
*/
|
*/
|
||||||
_updateList = async (list) => {
|
_updateList = async (list) => {
|
||||||
return await this.api.createOrUpdate(this.key, list);
|
return await this.api.createOrUpdate(this.key, list);
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @public
|
* @returns {Promise<Array<{_id: string}>>} - возвращает все элементы списка
|
||||||
*
|
|
||||||
* @returns {Promise<Array<Element>>} - возвращает все элементы списка
|
|
||||||
*/
|
*/
|
||||||
request = async () => {
|
request = async () => {
|
||||||
const data = await this.api.find(this.key);
|
const data = await this.api.find(this.key);
|
||||||
@ -55,11 +40,8 @@ class StorageListApi {
|
|||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @public
|
|
||||||
*
|
|
||||||
* @param {string} _id - _id искомого элемента списка
|
* @param {string} _id - _id искомого элемента списка
|
||||||
*
|
* @returns {Promise<{_id: string}>} - возвращает элемент списка или генерит ошибку
|
||||||
* @returns {Promise<Element>} - возвращает элемент списка или генерит ошибку
|
|
||||||
*/
|
*/
|
||||||
find = async (_id) => {
|
find = async (_id) => {
|
||||||
const list = await this.request();
|
const list = await this.request();
|
||||||
@ -71,11 +53,8 @@ class StorageListApi {
|
|||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @public
|
* @param {object} data - элемент списка
|
||||||
*
|
* @returns {Promise<{_id: string}>} - Возвращает вновь созданный элемент с уникальным полем _id
|
||||||
* @param {Object} data - элемент списка
|
|
||||||
*
|
|
||||||
* @returns {Promise<Element>} - Возвращает вновь созданный элемент с уникальным полем _id
|
|
||||||
*/
|
*/
|
||||||
create = async (data) => {
|
create = async (data) => {
|
||||||
const list = await this.request();
|
const list = await this.request();
|
||||||
@ -89,11 +68,8 @@ class StorageListApi {
|
|||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @public
|
* @param {{_id: string}} data - элемент списка
|
||||||
*
|
* @returns {Promise<{_id: string}>} - Возвращает обновленный элемент списка
|
||||||
* @param {Element} data - элемент списка
|
|
||||||
*
|
|
||||||
* @returns {Promise<Element>} - Возвращает обновленный элемент списка
|
|
||||||
*/
|
*/
|
||||||
update = async (data) => {
|
update = async (data) => {
|
||||||
const list = await this.request();
|
const list = await this.request();
|
||||||
@ -107,10 +83,7 @@ class StorageListApi {
|
|||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @public
|
|
||||||
*
|
|
||||||
* @param {string} _id - _id удаляемого элемента
|
* @param {string} _id - _id удаляемого элемента
|
||||||
*
|
|
||||||
* @returns {Promise<string>} - Возвращает _id удаленного элемента или ошибку
|
* @returns {Promise<string>} - Возвращает _id удаленного элемента или ошибку
|
||||||
*/
|
*/
|
||||||
remove = async (_id) => {
|
remove = async (_id) => {
|
||||||
|
|||||||
@ -2,13 +2,6 @@ import axios from 'axios';
|
|||||||
|
|
||||||
import {API_URL, ENDPOINT} from './consts';
|
import {API_URL, ENDPOINT} from './consts';
|
||||||
|
|
||||||
/**
|
|
||||||
* @typedef Store
|
|
||||||
* @type {object}
|
|
||||||
* @property {string} key
|
|
||||||
* @property {unknown} value
|
|
||||||
*/
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Класс для работы с store-service api
|
* Класс для работы с store-service api
|
||||||
* @class
|
* @class
|
||||||
@ -17,9 +10,8 @@ class StorageServiceApi {
|
|||||||
URL = `${API_URL}${ENDPOINT}`;
|
URL = `${API_URL}${ENDPOINT}`;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @public
|
* Запрос полного списка всех пар ключ-значение
|
||||||
*
|
* @returns {Promise<Array<{key: string, value: unknown}>>} - Возвращает список всех пар ключ-значение
|
||||||
* @returns {Promise<Array<Store>>} - Возвращает список всех пар ключ-значение
|
|
||||||
*/
|
*/
|
||||||
request = async () => {
|
request = async () => {
|
||||||
const {data} = await axios.get(this.URL);
|
const {data} = await axios.get(this.URL);
|
||||||
@ -27,10 +19,8 @@ class StorageServiceApi {
|
|||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @public
|
* Запрос одной пары ключ-значение
|
||||||
*
|
|
||||||
* @param {string} key - ключ хранилища в api
|
* @param {string} key - ключ хранилища в api
|
||||||
*
|
|
||||||
* @returns {Promise<unknown>} - Возвращает значение по указанному ключу
|
* @returns {Promise<unknown>} - Возвращает значение по указанному ключу
|
||||||
*/
|
*/
|
||||||
find = async (key) => {
|
find = async (key) => {
|
||||||
@ -39,11 +29,9 @@ class StorageServiceApi {
|
|||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @public
|
* Создание или обновление пары ключ-значение
|
||||||
*
|
|
||||||
* @param {string} key - ключ хранилища в api
|
* @param {string} key - ключ хранилища в api
|
||||||
* @param {unknown} value - значение, которое будет хранится под указанным ключом
|
* @param {unknown} value - значение, которое будет хранится под указанным ключом
|
||||||
*
|
|
||||||
* @returns {Promise<unknown>} - возвращает вновь созданный элемент
|
* @returns {Promise<unknown>} - возвращает вновь созданный элемент
|
||||||
*/
|
*/
|
||||||
createOrUpdate = async (key, value) => {
|
createOrUpdate = async (key, value) => {
|
||||||
@ -52,10 +40,8 @@ class StorageServiceApi {
|
|||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @public
|
* Удаление пары ключ-значение
|
||||||
*
|
|
||||||
* @param {string} key - ключ хранилища api
|
* @param {string} key - ключ хранилища api
|
||||||
*
|
|
||||||
* @returns {Promise<string>} - возвращает 'ok', если удаление было выполнено
|
* @returns {Promise<string>} - возвращает 'ok', если удаление было выполнено
|
||||||
*/
|
*/
|
||||||
remove = async (key) => {
|
remove = async (key) => {
|
||||||
|
|||||||
@ -1,15 +1,7 @@
|
|||||||
/**
|
|
||||||
* @type {string}
|
|
||||||
*/
|
|
||||||
export const API_URL = 'http://vigdorov.ru:4001';
|
export const API_URL = 'http://vigdorov.ru:4001';
|
||||||
|
|
||||||
/**
|
|
||||||
* @type {string}
|
|
||||||
*/
|
|
||||||
export const ENDPOINT = '/store';
|
export const ENDPOINT = '/store';
|
||||||
|
|
||||||
/**
|
|
||||||
* @type {Object<string, string>}
|
|
||||||
*/
|
|
||||||
export const API_KEYS = {
|
export const API_KEYS = {
|
||||||
};
|
};
|
||||||
|
|||||||
@ -1,58 +1,28 @@
|
|||||||
/**
|
/**
|
||||||
* @typedef Listener
|
* Класс для создания компонентов приложения. Необходим для наследования.
|
||||||
* @type {Object}
|
* @param {string} mainNodeSelector - селектор, с помощью которого извлекается шаблон компонента
|
||||||
* @property {Node} element
|
* @param {Node} parentNode - родительский Node, в который следует положить созданный элемент
|
||||||
* @property {string} eventName
|
|
||||||
* @property {function} listener
|
|
||||||
*/
|
|
||||||
|
|
||||||
/**
|
|
||||||
* @function EventListener
|
|
||||||
* @param {unknown[]} args - аргументы функции
|
|
||||||
*/
|
|
||||||
|
|
||||||
/**
|
|
||||||
* @typedef Events
|
|
||||||
* @type {Object<string, EventListener[]>}
|
|
||||||
*/
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Класс для создания компонентов приложения. Необходим для нследования.
|
|
||||||
* @class
|
|
||||||
*/
|
*/
|
||||||
class Component {
|
class Component {
|
||||||
/**
|
/**
|
||||||
* @private
|
* Список слушателей компонента
|
||||||
*
|
* @type {{element: Node, eventName: string, listener: Function}[]}
|
||||||
* @type {Listener[]}
|
|
||||||
*/
|
*/
|
||||||
_listeners;
|
_listeners;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* События компонента
|
* События компонента
|
||||||
* @private
|
* @type {Object<string, Function[]>}
|
||||||
*
|
|
||||||
* @type {Events}
|
|
||||||
*/
|
*/
|
||||||
_events;
|
_events;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Корневой элемент компонента
|
* Корневой элемент компонента
|
||||||
* @public
|
|
||||||
*
|
|
||||||
* @type {Node} - корневой элемент компонента
|
* @type {Node} - корневой элемент компонента
|
||||||
*/
|
*/
|
||||||
mainNode;
|
mainNode;
|
||||||
|
|
||||||
/**
|
|
||||||
* @param {string} mainNodeSelector - селектор, с помощью которого извлекается шаблон компонента
|
|
||||||
* @param {Node} parentNode - родительский Node, в который следует положить созданный элемент
|
|
||||||
* @constructor
|
|
||||||
*/
|
|
||||||
constructor (mainNodeSelector, parentNode) {
|
constructor (mainNodeSelector, parentNode) {
|
||||||
/**
|
|
||||||
* @type {DocumentFragment}
|
|
||||||
*/
|
|
||||||
const content = document.querySelector(mainNodeSelector).content;
|
const content = document.querySelector(mainNodeSelector).content;
|
||||||
if (content.children.length > 1) {
|
if (content.children.length > 1) {
|
||||||
const message = '<template> должен содержать только один элемент children';
|
const message = '<template> должен содержать только один элемент children';
|
||||||
@ -66,11 +36,9 @@ class Component {
|
|||||||
|
|
||||||
/**
|
/**
|
||||||
* Метод добавления обработчиков события на Node'ы компонента
|
* Метод добавления обработчиков события на Node'ы компонента
|
||||||
* @public
|
|
||||||
*
|
|
||||||
* @param {Node} element - элемент, на который будет навешен обработчик
|
* @param {Node} element - элемент, на который будет навешен обработчик
|
||||||
* @param {string} eventName - событие, на которое будет реагировать обработчик
|
* @param {string} eventName - событие, на которое будет реагировать обработчик
|
||||||
* @param {function} listener - обработчик события
|
* @param {Function} listener - обработчик события
|
||||||
*/
|
*/
|
||||||
addEventListener = (element, eventName, listener) => {
|
addEventListener = (element, eventName, listener) => {
|
||||||
element.addEventListener(eventName, listener);
|
element.addEventListener(eventName, listener);
|
||||||
@ -79,10 +47,8 @@ class Component {
|
|||||||
|
|
||||||
/**
|
/**
|
||||||
* Метод подписки на события компонента
|
* Метод подписки на события компонента
|
||||||
* @public
|
|
||||||
*
|
|
||||||
* @param {string} eventName - событие компонента, на которое будет реагировать обработчик
|
* @param {string} eventName - событие компонента, на которое будет реагировать обработчик
|
||||||
* @param {EventListener} listener - обработчик события
|
* @param {Function} listener - обработчик события
|
||||||
*/
|
*/
|
||||||
subscribe = (eventName, listener) => {
|
subscribe = (eventName, listener) => {
|
||||||
const listeners = this._events[eventName] || [];
|
const listeners = this._events[eventName] || [];
|
||||||
@ -94,8 +60,6 @@ class Component {
|
|||||||
|
|
||||||
/**
|
/**
|
||||||
* Метод генерирует событие
|
* Метод генерирует событие
|
||||||
* @public
|
|
||||||
*
|
|
||||||
* @param {string} eventName - событие, которое необходимо сгенерировать
|
* @param {string} eventName - событие, которое необходимо сгенерировать
|
||||||
* @param {unknown[]} args - аругемнты, который необходимо передать обработчикам события
|
* @param {unknown[]} args - аругемнты, который необходимо передать обработчикам события
|
||||||
*/
|
*/
|
||||||
@ -108,7 +72,6 @@ class Component {
|
|||||||
|
|
||||||
/**
|
/**
|
||||||
* Метод уничтожения компонента. Удаляет элемент из верстки, снимает обработчики и очищает подписки
|
* Метод уничтожения компонента. Удаляет элемент из верстки, снимает обработчики и очищает подписки
|
||||||
* @public
|
|
||||||
*/
|
*/
|
||||||
destroy = () => {
|
destroy = () => {
|
||||||
this._listeners.forEach(({element, eventName, listener}) => {
|
this._listeners.forEach(({element, eventName, listener}) => {
|
||||||
|
|||||||
Reference in New Issue
Block a user