Документация по Find

Подключение

Find подключается как модуль (необходимо свойство type="module"). Пример:

 <!--
   index.html
   
   Copyright 2026 Lida <lida@lida-laptol>
   
   This program is free software; you can redistribute it and/or modify
   it under the terms of the GNU General Public License as published by
   the Free Software Foundation; either version 2 of the License, or
   (at your option) any later version.
   
   This program is distributed in the hope that it will be useful,
   but WITHOUT ANY WARRANTY; without even the implied warranty of
   MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
   GNU General Public License for more details.
   
   You should have received a copy of the GNU General Public License
   along with this program; if not, write to the Free Software
   Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston,
   MA 02110-1301, USA.
   
   
-->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
	<title>Find</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	<meta name="generator" content="Geany 2.0" />
</head>

<body>
	<div id="my_app"></div>
	<script type="module" src="my_app.js"></script>
</body>

</html>

В JS подключается директивой import:

import Find from "/home/user/Find_js/Find.js";

Устойство

В Find каждая страница является группой (group) с любым ID. Части, на которые поделен код, называются элементами и нумеруются с нуля. У каждой группы есть мета-свойства, например необходимые библиотеки.

Создание группы

Группу можно создать явно, например:

import Find from "/home/user/Find_js/Find.js";
// Поиск по ID
const root = Find.search("my_app");
const app = new Find(root);
app.group("com.example", []);

Этот код создает пустую группу. Также группа создаётся неявно при добавлении данных или мета-свойств. Имя группы можно передавать первым аргументом в функции, но также можно выбрать одну группу и работать с ней:

import Find from "/home/user/Find_js/Find.js";
const root = Find.search("my_app");
const app = new Find(root);
app.group("com.example", []).select("com.example");
app.имя_функции([имя_группы,] данные);

Мета-свойства

Добавляются функцией meta. Например:

import Find from "/home/user/Find_js/Find.js";
const root = Find.search("my_app");
const app = new Find(root);
app.select("com.example");
app.meta([
    Find.css("bulma.min.css"), 
    '<meta name="viewport" content="width=device-width, initial-scale=1">'
]);

Данные группы

import Find from "/home/user/Find_js/Find.js";
const root = Find.search("my_app");
const app = new Find(root);
app.select("com.example");
// Добавление
app.add(['<button>123</button>']);
// Изменение
app.correct(0, '<input placeholder="123"></input>')
// Удаление
app.delete(0);

Рендер

Для рендера группы используется функция render. Для отрисовки текущей группы - draw:

import Find from "/home/user/Find_js/Find.js";
const root = Find.search("my_app");
const app = new Find(root);
app.select("com.example");
// Добавление
app.add(['<button>123</button>']);
app.render("com.example");
// Эквивалентно
app.draw();

Map

Map - обьект на странице. Использует следующие функции:

import Find from "/home/user/Find_js/Find.js";
const root = Find.search("my_app");
const app = new Find(root);
app.select("com.example");
// Добавление
app.add(['<button>123</button>']);
app.draw();
const map = app.map();
map.root // Доступ к элементу DOM
map.app(); // Исходный элемент Find
map.select(/* CSS-селектор */); // Вернет экземпляр map для выбранного элемента
map.read(); // Прочитать HTML
map.text(/* Текст для textContent */); // Без аргументов вернет текст элемента
map.html(/* html для замены */);  // Без аргументов вернет html элемента
map.value(/* value для замены */);  // Без аргументов вернет значение элемента
map.id(/* ID элемента */); // Вернет экземпляр map для выбранного элемента
map.tag(/* TAG элемента */); // Вернет экземпляр map для выбранного элемента
map.attach(/* событие */, /* функция */); // EventHandler
/*
 * Функция в attach может принимать параметр.
 * Этот параметр - обьект Find, map которого был вызван
 */

5.3 KiB Raw Blame History Unescape Escape