el.js
1.0.0
Разумная структура микроприложений с практичной возможностью повторного использования.
el.js — это платформа, созданная на основе шаблонов Riot.js для создания микроприложений.
Веб-фреймворки требуют, чтобы разработчики создавали большую часть, если не все, своих веб-страниц в виде динамических веб-приложений. Это позволяет разработчикам убедиться, что все на их веб-странице подчиняется единому последовательному, предсказуемому потоку рендеринга, о котором они могут рассуждать. Однако есть и много недостатков по сравнению с традиционными статическими веб-сайтами, включая более сложные схемы кэширования, более длительное время загрузки и проблемы с SEO. Микроприложения предлагают мощное решение этих недостатков. Вместо создания гигантских монолитных веб-приложений создавайте небольшие приложения и встраивайте их в свои статические страницы.
Микроприложение выполняет небольшую и очень ограниченную часть функций, которую можно использовать снова и снова. Микроприложения мало чем отличаются от идеи встраиваемых виджетов до того, как фреймворки стали стандартом, но они отличаются по исполнению, делая упор на разумные фреймворки и практическую возможность повторного использования.
HTML: index.html
< html >
< head >
<!-- Head Content -->
< link rel =" stylesheet " src =" https://cdn.jsdelivr.net/gh/hanzo-io/el-controls/theme.css " />
</ head >
< body >
< my-form >
< div >
< label > Type Your Name </ label >
<!-- bind my-input to parent(my-form).data.name, parent.data is implicit for what is supplied to bind attribute -->
< my-input bind =' name ' />
</ div >
< div >
< span > Your Name Is </ span >
< span > { data.name } </ span >
</ div
</ my-form >
<!-- el.js Library -->
< script src =" https://cdn.jsdelivr.net/gh/hanzo-io/el.js/el.min.js " > </ script >
< script src =" my-script.js " > </ script >
</ body >
</ html >JS: мой-script.js
// window.El is the global value
// El.Form extends El.View and validates bound El.Inputs
class Form extends El . Form {
constuctor ( ) {
// data contains your state
this . data = {
name : '?' ,
}
// your custom tag name
this . tag = 'my-form'
super ( )
}
}
Form . register ( )
// El.Input extends El.View and binds to updating El.Form values
class Input extends El . Input {
constructor ( ) {
// your custom tag name
this . tag = 'my-input'
// the default this.change function works with all basic html inputs(<input>, <textarea>, ...).
this . html = '<input onkeydown="{ change }" />'
super ( )
}
}
Input . register ( )
El . mount ( '*' ) Добавьте этот тег внизу перед вашими пользовательскими скриптами, описаниями и справочным окном.El.
< script src =" https://cdn.jsdelivr.net/gh/hanzo-io/el.js/el.min.js " > </ script >Установить через НПМ
npm install el . js -- saveПоддерживает CommonJS
var El = require ' el.js 'или импорт ES6
import El from ' el.js 'На этот тип ссылается El.Form для хранения информации, используемой для проверки поля, связанного с name .
| Имя | Тип | По умолчанию | Описание |
|---|---|---|---|
| конфигурация | MiddlewareFunction или [ MiddlewareFunction ] | неопределенный | Этот тип хранит исходную функцию MiddlewareFunction или MiddlewareFunctions, использованную для создания метода validate(). |
| имя | нить | '' | Это имя поля в свойстве данных El.Form , на которое ссылается остальная часть этого типа. |
| ссылка | Референтное дерево | неопределенный | Это ссылка на изменяемое дерево данных, которое может получить значение name , вызвав this.ref.get( name ). |
| Имя | Тип | Описание |
|---|---|---|
| подтвердить | (Дерево ссылок, строка) => Обещание | Этот метод вызывает все MiddlwareFunctions последовательно, используя обещания. |
Этот тип используется для определения промежуточного программного обеспечения для El.Form . Выполняйте проверку и очистку ввода с помощью таких функций, как:
function isRequired ( value ) {
value = value . trim ( )
if ( value && value != '' ) {
return value
}
throw new Error ( 'Required' )
} Этот тип используется внутри страны для облегчения возврата обещаний по ссылке.
Это базовый класс для всех классов El. Каждому El.View соответствует собственный тег. Расширьте этот класс, чтобы создавать свои собственные теги.
| Имя | Тип | По умолчанию | Описание |
|---|---|---|---|
| CSS | нить | '' | Это строка, представляющая CSS тега. Он вводится один раз для каждого класса в нижней части тега при монтировании. |
| данные | Референтное дерево | неопределенный | Это свойство сохраняет состояние тега. |
| HTML | нить | '' | Это строка, представляющая внутренний HTML-код тега. |
| корень | HTMLЭлемент | неопределенный | В этом свойстве хранится ссылка на тег на вашей веб-странице, к которому привязано подключенное представление. |
| ярлык | нить | '' | Это имя пользовательского тега. |
| Имя | Тип | Описание |
|---|---|---|
| до инициализации | () => | Код здесь выполняется до инициализации тега. |
| инициализация | () => | Код здесь выполняется при инициализации тега, но до его монтирования. Рекомендуется . Если вам нужно привязать жизненный цикл тега, сделайте это здесь. |
| расписаниеОбновление | () => Обещание | Этот метод планирует асинхронный вызов обновления. Он группирует вызовы обновления в самом верхнем представлении, если есть вложенные представления. Он возвращает обещание, когда обновление будет выполнено. |
| обновлять | () => | Этот метод обновляет тег. Это вызывается неявно после событий, вызванных веб-страницей. Для такого случая см. onkeydown в «Примере простой формы». Вручную вызовите этот метод, чтобы обновить тег. Рекомендуется . Вместо этого рекомендуется вручную вызывать ScheduleUpdate(), чтобы предотвратить синхронные каскадные обновления. |
Каждый El.View является источником событий. Дополнительную документацию см. на riot.observable: http://riotjs.com/api/observable/.
| Имя | Тип | Описание |
|---|---|---|
| Эл.View.регистр | () => | При этом текущий пользовательский тег регистрируется в механизме рендеринга. Вызовите его после того, как вы определили тег |
Этот класс используется для представления форм, а также более сложных микроприложений, управляемых вводом-выводом. Этот класс предоставляет общую логику проверки формы и отправки формы.
| Имя | Тип | По умолчанию | Описание |
|---|---|---|---|
| конфиги | Объект | неопределенный | Предоставьте карту имен MiddlewareFunction или массиву MiddlewareFunctions . Дополнительную информацию см. в разделе MiddlewareFunction . |
| входы | Объект | нулевой | Каждый элемент в конфигах преобразуется в элемент во входах . Непосредственное изменение этого параметра не рекомендуется. |
| Имя | Тип | Описание |
|---|---|---|
| инициализация | () => | Код здесь выполняется, когда тег инициализируется, но до его монтирования. Вызывает initInputs(), поэтому вызывайте его вручную или вызывайте super() в ES6. Рекомендуется . Если вам нужно привязать жизненный цикл тега, сделайте это здесь. |
| initInputs | () => | Скомпилируйте конфиги и назначьте созданную структуру входам . входные данные, такие как конфигурации, содержат ссылки на именованное поле в data . |
| представлять на рассмотрение | (Событие) => Обещание | Этот метод запускает проверку каждого поля данных , как определено в configs . Этот метод следует вызывать как обработчик/прослушиватель событий. Он вызывает submit(), если проверка прошла успешно, возвращает обещание, когда проверка успешна/неудачна. |
| _представлять на рассмотрение | () => | Код здесь выполняется, когда форма проверяется во время вызова submit(). |
Это базовый класс для создания входных данных формы и элементов управления вводом-выводом.
| Имя | Тип | По умолчанию | Описание |
|---|---|---|---|
| связывать | нить | '' | Это свойство определяет, к какому полю в данных родительской формы оно привязывается. |
| искать | нить | '' | То же, что и привязка , устарела . |
| сообщение об ошибке | нить | '' | Это свойство установлено на первое сообщение об ошибке, которое перехватывает возвращаемое обещание this.input.validate. |
| вход | Тип ввода | нулевой | Это свойство берется из свойства inputs родительской формы на основе того, что указывает привязка поля родительских данных . |
| действительный | логическое значение | ЛОЖЬ | Это свойство используется для определения состояния проверки, в котором находится ввод. Оно устанавливается при вызове this.input.validate и устанавливается в значение true только в том случае, если возвращенное обещание this.input.validate выполняется полностью. |
| Имя | Тип | Описание |
|---|---|---|
| изменять | (Событие) => | Этот метод обновляет входные данные, а затем проверяет их. Этот метод должен вызываться обработчиком/прослушивателем событий. |
| измененный | () => | Этот метод вызывается, когда возвращенное обещание this.input.validate выполняется полностью. |
| ClearError | () => | Этот метод устанавливает для errorMessage значение '' и вызывается перед проверкой. |
| ошибка | (Ошибка) => | Этот метод устанавливает errorMessage и вызывается, когда проверка не удалась. |
| получить значение | (Событие) => любое | Этот метод получает значение из входных данных. По умолчанию этот метод возвращает target.value события . |
| подтвердить | (PromiseReference?) => Обещание | Этот метод проверяет входные данные и возвращает обещание, представляющее успех и неудачу проверки как по ссылке (необходимо внутри), так и по значению. |
| Имя | Тип | Описание |
|---|---|---|
| Эл.расписаниеОбновление | () => | Запланируйте обновление для всех микроприложений на странице. |
Функции жизненного цикла el.js унаследованы от Riot.js.
el.js использует ссылочные деревья для хранения данных формы.
Реализуйте методы get, set, on, Once, Off из референции вокруг вашей собственной структуры данных и добавьте их в качестве свойства данных.
Контейнер — это пользовательский тег, который предоставляет методы для использования в своем внутреннем шаблоне и чье содержимое может быть полностью перезаписано (содержит содержимое только в одном или нескольких тегах). Элемент управления — это компонент, который взаимодействует с пользователем с целью отображения информации интересным образом или получения вводимых данных, таких как ввод, выбор или встраивание GoogleMaps.
Вместо создания тесно связанных виджетов разложите виджет на контейнеры и элементы управления, чтобы максимизировать возможность повторного использования. Структурируйте внутренний HTML-код любым удобным для вас способом. Затем предоставьте готовый виджет, контейнер и элементы управления своим пользователям, чтобы они могли настроить виджет в соответствии со своими различными требованиями.
Абстрагируя таким образом элементы пользовательского интерфейса, кому-то другому будет намного проще повторно использовать и настраивать ваш код. См. реализацию в shop.js.
Лучше всего использовать одно хранилище состояний высокого уровня, чтобы упростить сохранение и восстановление состояния вашей веб-страницы или всего веб-сайта.
Этого можно добиться, предоставив всем контейнерам верхнего уровня на странице одно и то же поле данных . через первоначальный вызов монтирования
var data = {
state0 : 0 ,
state1 : 1 ,
}
El . mount ( '*' , { data : data } )В отличие от обычного рендеринга Riot, el.js допускает неявный доступ к значениям this.parent и this.parent...parent посредством прототипного наследования контекста рендеринга. Это сделано для того, чтобы избежать повторной передачи одних и тех же данных через вложенные контейнеры, поскольку это чревато ошибками и слишком многословно. Это также упрощает создание контейнеров и элементов управления.
Явная передача переменной данных:
< my-container-1 >
< my-container-2 data =' { data } ' >
< my-container-3 data =' { data } ' >
value: { data.value1 }
</ my-container-3 >
< my-container-3 data =' { data } ' >
value: { data.value2 }
</ my-container-3 >
</ my-container-2 >
< my-container-2 data =' { data } ' >
< my-container-3 data =' { data } ' >
value: { data.value3 }
</ my-container-3 >
< my-container-3 data =' { data } ' >
value: { data.value4 }
</ my-container-3 >
</ my-container-2 >
</ my-container-1 > // El.mount passes data to the top level container of each micro-app
El . mount ( '*' , data : { value1 : 1 , value2 : 2 , value3 : 3 , value4 : 4 } )Эквивалентно неявной ссылке на переменную данных.
< my-container-1 >
< my-container-2 >
< my-container-3 >
value: { data.value1 }
</ my-container-3 >
< my-container-3 >
value: { data.value2 }
</ my-container-3 >
</ my-container-2 >
< my-container-2 >
< my-container-3 >
value: { data.value3 }
</ my-container-3 >
< my-container-3 >
value: { data.value4 }
</ my-container-3 >
</ my-container-2 >
</ my-container-1 > // El.mount passes data to the top level container of each micro-app
El . mount ( '*' , data : { value1 : 1 , value2 : 2 , value3 : 3 , value4 : 4 } ) БСД
