Скачать bay.js - загрузка исходного кода bay.js

bay.js

Сторонние компоненты

1.0.0

Скачать

Bay.js

Что такое Bay.js?

Bay.js-это библиотека фронта, предназначенная для облегчения создания многоразовых веб-компонентов, а также для добавления состояния и интерактивности в HTML. Чтобы увидеть это в действии, вы можете посетить Bayjs.org и исследовать его примеры.

Ключевые функции

Дополнительный шаг сборки: просто добавьте тег сценария, чтобы начать.
Строгая политика безопасности контента (CSP), даже без этапа сборки.
Универсальный рендеринг: обычные форматы DOM или веб-компонент.
Ноль зависимости для легкой реализации.
Однолетная комплексная способность для упорядоченных компонентов.
Бесплатная интеграция с фреймворками, разработанными для рендеринга веб-компонентов.
Шаблоны на основе URL: включить рендеринг на стороне сервера (SSR) или шаблоны на основе PHP.
Используйте <template> в DOM в качестве источника шаблона.
Создание компонентов из строк JavaScript для динамической настройки.
Удобный синтаксис для легкой разработки.

Установка

Bay.js может использоваться с помощью сценария или импорта в качестве модуля.

Тег скрипта:

 < script src =" //cdn.jsdelivr.net/npm/@dunks1980/bay.js/bay.min.js " > </ script >

Пример тега сценария

ES MODULE:

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

 // In main.js
import bay from '//cdn.jsdelivr.net/npm/@dunks1980/bay.js/bay.min.mjs' ;
bay ( ) ;

Вы можете добавить подобный номер версии, чтобы предотвратить нарушение изменений: '//cdn.jsdelivr.net/npm/@dunks1980/bay.js@ <serse> /bay.min.mjs' Номер версии является необязательным и может быть приобретен на странице пакета NPM. Или, если использует node_modules: './node_modules/@dunks1980/bay.js/bay.min.mjs';
Пример модуля ES

Модуль NPM:

 npm i @ dunks1980 / bay . js
import bay from '@dunks1980/bay.js' ;
bay ( ) ;

Пример NPM

Настройки:

 import bay from ...

bay ( {
  text : `<h1 :style="margin: 1rem;">Settings</h1>` ,
} ) ;

 < template id =" my-template " >
  %{text} <!-- becomes: --> < h1 :style =" margin: 1rem; " > Settings </ h1 > 
</ template >

< my-component bay =" #my-template " message =" Hello world! " > </ my-component >

Настройки могут быть установлены только с модулями ES или NPM, должны быть строками, и их можно установить только один раз перед созданием компонентов. Переменные настройки могут использоваться в любом месте в шаблонах.
Пример настройки

Использование

Есть несколько способов определить компонент в Bay.js:

1. Шаблон с атрибутом Бэй в доме.

В вашем HTML создайте встроенный шаблон и примените атрибут Bay и любые другие реквизиты:

 < template bay =" my-component-name " message >
  < h1 > ${this.message} </ h1 >
</ template >

< my-component-name message =" Hello world! " > </ my-component-name >

2. Шаблон с идентификатором в DOM.

В вашем html создайте встроенный шаблон и бухта.

 < template id =" my-template " >
  < h1 > ${this.message} </ h1 >
</ template >

< my-component bay =" #my-template " message =" Hello world! " > </ my-component >

3. Шаблон в файле.

Создайте файл и снабжение Bay.js URL (не оберните содержимое файла в шаблоне). Расширение файла может быть всем, что вам нравится, пока его содержимое находится в формате HTML:

 < my-component bay =" /url/to/my/components.html " message =" Hello world! " > </ my-component >
<!-- or -->
< my-component bay =" /url/to/my/components.php " message =" Hello world! " > </ my-component >

 <!-- in component file -->
< h1 > ${this.message} </ h1 >

4. Создайте шаблон с JS.

Pass Bay.js Импортированный шаблон:

 import my_component from "./../component_imports/my_component.html?raw" ;
import bay from "@dunks1980/bay.js" ;
bay ( ) ;
bay . create ( "my-component" , my_component , [ "message" ] ) ;

Или создать шаблон и передать его: ($ и `В пределах строки потребуются сбежать, если строка буквально)

 import bay from "@dunks1980/bay.js" ;
bay ( ) ;
bay . create ( "my-component" , `<h1>${this.message}</h1>` , [ "message" ] ) ;

 <!-- Anywhere in the HTML including other components -->
< my-component message =" Hello world! " > </ my-component >

5. Использование залива-гидрата.

В вашем HTML создайте встроенный элемент с шаблоном внутри, затем добавьте HAY-Hydrate в содержащий элемент:

 < div bay-hydrate >
  < h1 > This will be replaced once bay creates the component. </ h1 >
  < template >
    < h1 > ${this.message} </ h1 >
    < script > this . message = 'Hello World!' </ script >
  </ template >
</ div >

Реквизит не будет доступен с использованием этого метода, но вы можете использовать настройки. Контент приведен к основному DOM, поэтому стили не будут инкапсулированы, а теги <style> , определенные в шаблоне, не будут иметь никакого эффекта.

6. Использование DSD (декларативный тень Dom).

В вашем HTML создайте встроенный элемент с шаблоном внутри, затем добавьте Bay = "dsd" в элемент и ShadowRootMode = "Open" в элемент шаблона:

 < my-component bay =" dsd " >
  < template shadowrootmode =" open " >
    < dsd >
      < h1 id =" title " > loading... </ h1 >
    </ dsd >
    < noscript >
      < h1 id =" title " > ${this.header_text} </ h1 >
    </ noscript >
    < script mounted >
      this . header_text = "Hello World" ;
    </ script >
  </ template >
</ my-component >

Элементы будут видны во время загрузки Бэй, но не в том случае, если они обернуты в теги Noscript. Элементы DSD и их дети будут удалены после создания компонента, а элементы NOSCRICT будут удалены, но их содержание останется, и их содержание будет анализироваться и разнообразовать. Реквизит не будет доступен с использованием этого метода, но вы можете использовать настройки. Контент приведен к основному DOM, поэтому стили не будут инкапсулированы.

Компонент может использоваться в любом месте HTML, но встроенные шаблоны должны быть в теле документа. «Мой компонент» может быть всем, что вам нравится, но он должен иметь черту в имени в соответствии с спецификацией пользовательского элемента.

Теги в компонентах:

Синтаксис	Описание	Пример
`<if this="this.xxx">...</if>`	Если оператор, отображает только содержание между `<if>` , если это атрибут верно.	Условия
`<else-if this="this.xxx">...</else-if>`	Иначе, если, отображает только содержание между `<else-if>` , если его этот атрибут верно, а предыдущий `<if> <else-if>` является ложным.	Условия
`<else>...</else>`	Иначе, отображает только контент между `<else>` тегами, если все предыдущие `<if> <else-if>` теги являются ложными.	Условия
`<show this="this.xxx">...</show>`	Покажите, когда вам нужно сохранить код в DOM и переключить его дисплей. Добавить продолжительность `<show this="this.xxx" duration=".5s">` для затухания.	Показывать
`<switch this="this.xxx"> <case this="xxx" break>...</case> <default>...</default> </switch>`	Оператор переключения, для более сложных условий.	Выключатель
`<map array="this.arr">...</map>`	Карта, чтобы итерация над массивом `<map params="item, i, array" array="this.arr" join="<hr>">` params и jonk необязательны, параметры по умолчанию: `element, index, array` .	Итерации
`<for array="this.arr">...</for>`	Foreach Loop, чтобы итерация над массивом `<for params="item, i, array" array="this.arr">` параметры необязательны, параметры по умолчанию: `element, index, array` .	Итерации
`<for this="let i = 0; i < this.arr.length; i++">...</for>`	Для петли, чтобы итерация с условиями.	Итерации
`<inner-html>...</inner-html>`	Чтобы представить в свете DOM. Если на компоненте присутствует атрибут `inner-html` он будет отображать внутри этого элемента: `<my-comp bay="..." inner-html="#render-target">` . Если атрибут Inner-HTML не присутствует на компоненте, вы можете использовать слот, чтобы увидеть содержание внутреннего HTML.	Внутренний HTML
`<slot name="slot1">...</slot>`	Используется для определения слота в соответствии с стандартным веб-компонентом.	Слоты
`<route href="/xxx/var">...</route>`	Маршрут создает маршрут для тега маршрутизатора, предназначен для одной страницы (SPA).	Маршрут
`<router this="/xxx/:xxx">...</router>`	Маршрутизатор соответствует текущему URL -адресу `:xxx` используется для переменных.	Маршрут
`<define this="myEl">...</define> <myEl></myEl>`	Определите блок кода, который будет использоваться повторно.	Определять
`<include this="https://..."></include>`	Включите код в шаблон из URL.	Включать

Внутренние переменные:

Синтаксис	Описание	Пример
`this.xxx = 'xxx';`	Присвоение `this.xxx` Значение запустит рендеринг компонента бухты. Чтобы получить/установить это значение извне компонента: `document.getElementById('my-el').shadowRoot.proxy.xxx = 'xxx';`	Местный
`$global = 'xxx';`	Присвоение `$global.xxx` `$global` Чтобы получить/установить это значение извне компонентов: `bay.global.xxx = 'hello'; console.log(bay.global);`	Глобальный
`$bay.querySelector('xxx');`	Используйте `$bay` , чтобы нацелиться на тень Dom. Shadow Dom vs. Light Dom	Переменные
`$el.querySelector('xxx');`	Используйте `$el` , чтобы ориентироваться на свет. Shadow Dom vs. Light Dom	Переменные
`$parent.xxx = 'xxx';`	Присвоение `$parent.xxx` Значение обновит `this.xxx` у родителя, если родителем является еще один компонент Bay, а Inturn запускает рендеринг.	Родительский
`$details.changed;` `$details.element;`	Подробности из атрибута сценария Slotchange о том, что изменилось.	Слоты
`$route`	Подробности из местоположения окна.	Маршрутизатор
`$path`	: переменные из пути поиска `:xxx/:xxx` .	Маршрутизатор

Атрибуты на компоненте:

Синтаксис	Описание	Пример
`bay="#my-template"` `bay="/my-template.html"` `bay="dsd"`	При определении на теге `<custom-element bay="...">` это будет шаблон для использования, может быть идентификатор шаблонов или путь к файлу, DSD является экспериментальным.	Использование ID Использование файла DSD
`bay="my-template-name"`	При определении на `<template bay="custom-element">` это будет имя тега `<custom-element>` .	Использование имени
`fouc`	Используется для скрытия света в компоненте, пока он не будет полностью загружен.	Фук
`inner-html="#render-target"`	Используется для того, чтобы сообщить компоненту, где он должен отображать `<inner-html>...</inner-html>` контент.	Внутренний HTML
`xxx="value"`	Любые другие атрибуты передаются в компонент и становятся реквизитами, к которым можно получить доступ через `this.xxx` , xxx является именем атрибута.	Реквизит

Внутренние атрибуты:

Синтаксис	Описание	Пример
`:style="color: red; display: ${this.display}"`	Применить вставленные стили, управляемые данными.	Стили
`:click="console.log('clicked')"`	Любое событие JavaScript, которое начинается с ON (OnClick в этом примере), просто замените на: ( `oninput="xxx"` -> `:input="xxx"` ).	События
`:my-event="console.log('my custom event')"`	Слушает любое пользовательское событие и запускает код, когда он обнаруживает, что это событие было запускается из любого места.	Пользовательское событие
`bind="this.xxx"`	Используется для двухстороннего привязки данных на `<inputs>` , `<selects>` и `<textareas>` .	Связывать
`slot="slot-name"`	Используется для определения слота в соответствии с стандартным веб-компонентом.	Слоты
`ref="xxx"`	`$ref('xxx').onclick = (e) => {...` См. Внутренние функции ниже для использования.	Рефери
`this-attribute="xxx"`	Заменит этот attribute = "xxx" на то, что возвращается из его значения атрибута.	Этот атрибут
`:click.prevent="xxx"`	Модификаторы события.	Модификаторы события

Жизненный цикл сценария:

Синтаксис	Описание	Пример
`<script imports>...</script>`	Определить сценарии импорта модуля.	Импорт
`<script mounted>...</script>`	Сценарий запускается после того, как шаблон установлен в Dom.	Монтируется
`<script props>...</script>`	Сценарий, который работает, когда реквизит меняется.	Реквизит
`<script render>...</script>`	Сценарий, который делает свою обратную стоимость на месте.	Оказывать
`<script slotchange>...</script>`	Скрипт, который работает на изменении содержания слота.	Изменение слота
`<script update>...</script>`	Скрипт, который работает на каждом обновлении.	Обновлять

Внешние функции:

Синтаксис	Описание	Пример
`bay();`	Используется для инициализации Bay.js, если импортированный модуль.	Установка
`bay.create('component-name', '<h1>test</h1>', ["prop-1", "prop-2"]);`	Создать компонент.	Создавать
`bay.refresh();`	Обновить бухту после того, как новый пользовательский элемент динамически применяется к DOM.	Обновлять

Внутренние функции:

Синтаксис	Описание	Пример
`$bay.encode('string');`	Кодировать/избежать строки.	Кодировать
`$bay.decode('string');`	Декодировать/не-эскапа a String.	Декодировать
`$bay.emit('custom-event', {key: value});`	Выпустить пользовательское событие. (во всех компонентах)	Излучать
`$bay.on('custom-event', (e) => {console.log(e.detail);});`	Слушайте пользовательское мероприятие. (во всех компонентах)	Излучать
`$ref('xxx').onclick = (e) => {...` `$ref('xxx').forEach((el) => {...`	Получает элементы с атрибутом ref = "xxx". Может использоваться только в монтированном сценарии.	Рефери