Постоји обиље ЈаваСцрипт оквира, али Алпине-ова једноставност и лакоћа коришћења чине га одличним кандидатом за почетнике.

Свет веб развоја је хаотичан — оквири се појављују и нестају и ствари могу бити неодољиве и за нове и за искусне програмере.

За разлику од већине оквира за веб развој, Алпине.јс има за циљ да буде што једноставнији, али довољно моћан да се бави концептима као што су реактивност и нежељени ефекти.

Почетак рада са Алпине.јс

Инсталирање Алпине.јс је прилично једноставно. Потребно је само да укључите следеће скрипта таг у вашем ХТМЛ-у:

<скриптаодложитисрц=" https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js">скрипта>

Алтернативно, можете инсталирати Алпине.јс у свој пројекат користећи Ноде Пацкаге Манагер:

нпм инсталл алпинејс

Реактивност у Алпине.јс

Направите ан индек.хтм датотеку и додајте следећи шаблонски код:

хтмл>
<хтмлланг="ен">
<глава>
<метацхарсет="УТФ-8">
<метахттп-екуив="Кс-УА-Цомпатибле"садржаја=„ИЕ=ивица“>
<метаиме="виевпорт"садржаја="видтх=девице-видтх, инитиал-сцале=1.0">





instagram viewer



<наслов>Алпине.јснаслов>
глава>
<тело>
<скриптаодложитисрц=" https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js">скрипта>
тело>
хтмл>

Тхе одложити атрибут у скрипта таг говори претраживачу да покрене скрипту тек након што заврши рашчлањивање документа.

Алпине.јс пружа неколико директива као што су к-подаци које користи за складиштење података и к-текст које користи за постављање иннерТект приложене компоненте. Да бисте користили ове директиве, додајте следећи код у свој ХТМЛ.

<дивк-подаци=„{наме:'Давид Узонду', организација:'Маке Усе Оф'}">
 Моје име је <јакак-текст="име">јака>
 и <ик-текст="организација">и> Је супер
див>

Директива к-дата чува објекат са кључевима име и организација. Затим можете проследити те кључеве у директиву к-тект. Када покренете код, Алпине.јс ће попунити вредности:

Како се Алпине.јс пореди са Реацт-ом

Алпине.јс је лагани оквир који га чини погодним за развој малих пројеката и прототипова.

У већим оквирима као што је Реацт, користите куке као усеЕффецт() за руковање нежељеним ефектима у животном циклусу компоненте. Ова кука покреће функцију повратног позива кад год се промени један од елемената низа зависности:

увоз {усеЕффецт} из"реаговати";
функцијаМиЦомпонент() {
 усеЕффецт(() => {
/* Функција повратног позива иде овде */
 }, [ /* Низ зависности је опциони */ ]);
}

За руковање нежељеним ефектима у Алпине.јс, можете да користите к-ефекат директива. На пример, рецимо да желите да гледате променљиву и евидентирате вредност кад год се промени:

<дивк-подаци="{број 1}"к-ефекат="цонсоле.лог (број)">
<х1к-текст="број">х1>
<дугме @кликните="број = број + 1">Додајте нови бројдугме>
див>

Прва ствар коју бисте могли да приметите је да не морате да наводите зависност. Алпине ће једноставно ослушкивати промене у свим варијаблама којима се прослеђује к-ефекат. Тхе @цлицк директива повећава бројну променљиву за 1.

Условно приказивање у Алпине.јс

Условно приказивање елемената је нешто што можете да урадите у оквиру као што је Реацт. Алпине.јс вам такође омогућава да условно рендерујете елементе. Он пружа ан к-иф директива и посебна шаблон елемент који можете користити за условно приказивање елемената.

Направите другу индек.хтм датотеку и додајте исти шаблонски код као и раније. Додајте следећи код у тело ХТМЛ-а.

<дивк-подаци="{приказано: истина}">
<дугме @кликните="приказано=!приказано"к-текст="показано? 'Сакриј елемент': 'Прикажи елемент'">Искључидугме>
<шаблонк-иф="показано">
<див>Брза смеђа лисица је прескочила пса.див>
шаблон>
див>

Тхе к-иф директива се преноси на шаблон елемент. Ово је важно јер омогућава Алпине.јс да прати елемент који се додаје или уклања са странице. Тхе шаблон елемент треба да садржи један елемент основног нивоа; следећи код би прекршио то правило:

<шаблонк-иф="показано">
<див>Овај елемент ће бити добро приказан.див>
<див>Алпине.јс ће игнорисати овај елементдив>
шаблон>

Прављење То-До апликације са Алпине.јс

Време је да комбинујете све што сте до сада научили и направите једноставну апликацију за рад са локалном подршком за складиштење. Прво направите фасциклу и попуните је са индек.хтм фајл и а стиле.цсс фајл. Додајте шаблонски код у датотеку индек.хтм и укључите референцу на стиле.цсс фајл:

<линкрел="стилесхеет"хреф="стиле.цсс">

Не брините за ЦСС овде, само копирајте стиле.цсс фајл из овог ГитХуб спремиште пројекта.

Да бисте сачували податке након поновног учитавања странице, потребан вам је Алпине.јс упорно повезати. Додајте ЦДН верзију овог додатка као а скрипта таг, одмах изнад језгре Алпине.јс ЦДН буилд-а:

<скриптаодложитисрц=" https://cdn.jsdelivr.net/npm/@alpinejs/persist@3.x.x/dist/cdn.min.js">скрипта>

У тело дефинише а див елемент са ан к-подаци директива. Ова директива треба да садржи низ тзв аллТаскс. Затим додајте ан х1 елемент са текстом „То-До Апплицатион“.

<дивк-подаци=„{аллТаскс:$персист([])}“>
<х1>То-до Апплицатионх1>
див>

Тхе $персист додатак је омот за ЈаваСцрипт лоцалСтораге АПИ. Он говори претраживачу да складишти низ у локалну меморију, тако да подаци остају нетакнути чак и након поновног учитавања странице. Додајте а форму са прихвати директива која такође спречава подразумевану радњу слања.

<форму @поднети.спречити="
 ($рефс.таск.валуе.трим().ленгтх && !аллТаскс.мап (к=>к.таск).инцлудес($рефс.таск.валуе.трим()))
? аллТаскс = [{таск: $рефс.таск.валуе.трим(), ид: Дате.нов(), доне: фалсе}].цонцат (аллТаскс)
: $рефс.таск.валуе.трим() '' 
? алерт('Унета вредност не може бити празна')
: алерт('Задатак је већ додат.');
 $рефс.таск.валуе=''
">
форму>

Тхе $рефс клаузула омогућава приступ ДОМ елементу са "задатак" к-реф директива. Код такође обрађује неке провере ваљаности и осигурава да не додаје празне стрингове или дуплиране задатке на листу. Пре него што завршите образац, додајте ан улазни елемент са ан к-реф од „задатка“ и чувара места. Затим додајте дугме и подесите његов тип на „пошаљи“.

<улазнитип="текст"к-реф="задатак">
<дугметип="прихвати">Додај задатакдугме>

Затим дефинишите див са класом "итемс". Овај див треба да садржи још два дива: један са к-подаци постављен на "недовршен" низ, а други на "завршен" низ. Оба дива треба да имају к-ефекат директиву и низ треба умотати у $персист клаузула као што је раније приказано.

<дивкласа="предмети">
<дивк-подаци=„{недовршено:$персист([])}“к-ефекат="недовршено = аллТаскс.филтер (к=>к.донефалсе)">
див>

<дивк-подаци=„{цомплетед:$персист([])}“к-ефекат="цомплетед=аллТаскс.филтер (и=>и.донетруе).реверсе()">
див>
див>

У првом див, додајте ан х3 таг са текстом „Недовршено“. Затим за сваки елемент у недовршен низ, рендер а див који држи "контроле" и сам задатак.

Контроле омогућавају кориснику да избрише ставку или је означи као завршену:

<х3>Недовршенох3>
<шаблонк-фор="елемент у недовршеном":кеи="елемент.ид">
<дивк-подаци=„{сховЦонтролс: фалсе}“ @Миша преко="сховЦонтролс = труе" @моусеоут="сховЦонтролс = фалсе"
 цласс="задатак"
 >


<дивкласа="контроле">
<дивк-схов="сховЦонтролс" @кликните="елемент.доне=труе">[М]див>
<дивк-схов="сховЦонтролс" @кликните="аллТаскс=аллТаскс.филтер (к=>к.ид!==елемент.ид)">[Р]див>
див>
<дивк-текст="елемент.задатак" >див>
див>
шаблон>

Можете користити к-фор директива за понављање низа и рендеровање елемената. Слично је са в-за у Вуе и тхе Арраи.мап() метода низа у Реацт-у. Див "цонтролс" садржи два дива са стрингом "[М]" и "[Р]". Ови низови означавају "Означи као готово" и "Уклони". Можете их заменити одговарајућим иконама ако желите.

Тхе к-схов директива поставља елемент приказ ЦСС својство за ниједан ако је вредност која указује на директиву нетачна. Други див у див "итемс" је сличан првом са неколико значајних изузетака: Тхе х3 текст је постављен на „Завршено“, прво дете „контролног“ дива има текст „[У]“ уместо „[М]“ и у овом див-у @цлицк директива, елемент.готово је подешен на лажно.

<дивк-схов="сховЦонтролс" @кликните="елемент.доне=фалсе">[У]див>

И то је то, прошли сте основе Алпине.јс и искористили оно што сте научили да направите основну апликацију за обавезе.

Олакшавање писања кода Алпине.јс

Када почнете да пишете код код Алпине.јс, може бити тешко да се замислите. Срећом, уређивачи кода као што је Висуал Студио Цоде пружају широк спектар проширења која олакшавају развој.

На Ектенсионс Маркетплаце-у можете добити екстензију Алпине.јс ИнтеллиСенсе која олакшава рад са директивама. Ово може помоћи да побољшате вашу продуктивност када користите Алпине.јс у својим пројектима.