Jak vygenerovat náhodný řetězec názvu projektu s pomlčkou ze seznamu příslovcí a zvířat pro použití s obsahem generovaným uživateli.
Pro tento tutoriál použijeme full-stack JavaScriptový framework CheatCode, Joystick. Joystick spojuje rozhraní front-end UI s back-endem Node.js pro vytváření aplikací.
Pro začátek budeme chtít nainstalovat Joystick přes NPM. Před instalací se ujistěte, že používáte Node.js 16+, abyste zajistili kompatibilitu (pokud se potřebujete naučit, jak nainstalovat Node.js nebo spustit více verzí na vašem počítači, přečtěte si nejprve tento tutoriál):
Terminál
npm i -g @joystick.js/cli
Tím se Joystick nainstaluje globálně do vašeho počítače. Po instalaci vytvořte nový projekt:
Terminál
joystick create app
Po několika sekundách se zobrazí zpráva o odhlášení na cd do nového projektu a spusťte joystick start :
Terminál
cd app && joystick start
Poté by vaše aplikace měla být spuštěna a my jsme připraveni začít.
Shromažďování zdrojových dat
Abychom vygenerovali náhodný název projektu, budeme potřebovat nějaká náhodná data, která použijeme jako zdroj jmen. I když můžete použít jakékoli jméno, které chcete, pro tento tutoriál použijeme dva seznamy z tohoto užitečného úložiště na Github:seznam příslovcí a seznam zvířat. V tomto repozitáři jsou také některé další seznamy, takže neváhejte experimentovat nebo si vytvořte vlastní.
Jakmile si vyberete seznamy, které chcete použít – za předpokladu, že používáte seznamy z výše uvedeného odkazu – budeme je chtít stáhnout do našeho projektu a naformátovat je pro použití v našem kódu. V projektu jsme právě vytvořili s joystick app , chceme vytvořit dva soubory v /lib složka:/lib/adverbs.js a /lib/animals.js :
/lib/adverbs.js
export default [
'abnormally',
'absentmindedly',
'accidentally',
'acidly',
'actually',
...
];
/lib/animals.js
export default [
'Aardvark',
'African Elephant',
'African Tree Pangolin',
'Albatross',
'Alligator',
...
];
Zde jsme seznamy zkrátili kvůli jejich délce, ale budete chtít zadat úplné seznamy pro vaše soubory. Dva výše uvedené soubory lze nalézt ve formátu jako bloky kódu výše zde.
Jakmile budete mít tyto soubory ve svém /lib složku, můžeme přejít ke generátoru jmen.
Zápis funkce generátoru jmen
Naše funkce generátoru jmen bude mít tři kroky:
- Výběr náhodného příslovce a názvu zvířete z našich seznamů.
- Formátování obou názvů, jejich posunutí na malá písmena a nahrazení všech mezer znakem
-pomlčky. - Zřetězení nebo spojení verzí s malými písmeny a pomlčkami do jednoho názvu.
Pojďme se podívat na celou funkci a projít si ji (bude to snazší pochopit, když budeme společně skládat volání funkcí).
/lib/generateProjectName.js
import adverbs from "./adverbs";
import animals from "./animals";
const lowercaseAndSlugify = (string = '') => {
return string.toLowerCase().replace(/ /g, '-').replace('--', '-').trim();
};
const getRandomArrayItem = (array = []) => {
return array[Math.floor(Math.random() * (array.length - 1))];
};
export default () => {
const adverb = lowercaseAndSlugify(getRandomArrayItem(adverbs));
const animal = lowercaseAndSlugify(getRandomArrayItem(animals));
return `${adverb}-${animal}`;
};
Začneme od začátku a do našeho souboru přidáme dva importy:jeden pro náš adverbs.js a jeden pro naše animals.js soubor ve stejné složce. Dole na konec našeho souboru přidáme výchozí export naší funkce.
Uvnitř, počínaje naším adverb , skládáme dohromady dvě volání funkce definovaná výše naší hlavní funkce. V JavaScriptu fungují volání funkcí podobně jako matematický problém, vyhodnocení zevnitř jako první na konec.
Zde je naším nejniternějším voláním funkce getRandomArrayItem() , který, jak název napovídá, je navržen tak, aby získal náhodnou položku z nějakého pole, které mu předáme. V tomto případě předáváme adverbs seznam, který jsme importovali nahoru. Při pohledu na to getRandomArrayItem() převezmeme naši funkci array a vrátí řádek, který říká „vyberte položku v předaném array na tomto náhodném indexu array[someRandomIndex] ."
Abychom získali tento náhodný index, zavoláme Math.random() což nám dává náhodné číslo mezi 0 a 1 a pak to vynásobte délkou našeho array , odečtením 1. Děláme to, protože dostaneme číslo jako 0.5121 z Math.random() což po vynásobení délkou našeho pole nám dá číslo mezi 0 a délku našeho pole (tj. náhodný index položky v tomto poli). Například pokud naše array délka byla 25 a dostali jsme zpět 0.5121 z Math.random() , naše konečné číslo bude 12.2904 (24 * 0.5121 ).
Protože chceme ploché celé číslo a ne desetinné nebo "float" číslo, vezmeme výsledek tohoto násobení a předáme ho Math.floor() což zaokrouhlí výsledné číslo dolů na nejbližší celé číslo, nebo ve výše uvedeném příkladu 12 . Toto předáte jako array[12] , očekáváme, že získáme zpět hodnotu na indexu 12 v předaném poli.
Jakmile získáme zpět naši náhodnou hodnotu, další kus práce, který musíme udělat, aby byla hodnota použitelná v názvu našeho projektu (budeme mít název jako advantageous-advark ), chceme jej zmenšit malými písmeny a případné mezery pak nahradit - .
Výše v lowercaseAndSlugify funkce, dosáhneme toho tím, že vezmeme předaný string jako argument a poté okamžitě zavolejte .toLowerCase() na něm zřetězení volání na .replace(/ /g, '-') říct „globálně v tomto řetězci nahraďte všechny mezery - znak" následovaný bezprostředně .replace() pro jakékoli náhodné -- dvojité pomlčky vytvořené z dvojitých mezer v názvech s jedním - pomlčka. Nakonec zřetězujeme jeden poslední hovor na konci na .trim() abychom se ujistili, že jsme odstranili všechny zbytečné mezery.
To je k formátování vše. Zpět v naší exportované funkci opakujeme tento řetězec událostí, abychom získali naše animal , předáním animals pole, abyste získali náhodnou hodnotu a naformátovali ji. S oběma našimi náhodnými adverb a animal , vrátíme zřetězený řetězec z naší funkce, který spojí dvě proměnné dohromady pomocí - pomlčka pomocí interpolace řetězců JavaScript.
To je vše pro vytvoření našeho jména! Nyní jej propojíme s naším uživatelským rozhraním a použijeme jej.
Uvedení generátoru do provozu
Tato část je docela jednoduchá. Abychom otestovali naši funkci, zapojíme komponentu joysticku. Abychom to mohli udělat, nahradíme stávající kód v /ui/pages/index/index.js (tento soubor byl automaticky vygenerován při spuštění joystick create app dříve) s následujícím:
/ui/pages/index/index.js
import ui from '@joystick.js/ui';
import generateProjectName from '../../../lib/generateProjectName';
const Index = ui.component({
state: {
projectName: null,
},
events: {
'click button': (event, component) => {
component.setState({ projectName: generateProjectName() });
},
},
render: ({ when, state }) => {
return `
<div>
<button>Generate a Project Name</button>
${when(state.projectName, `
<h1>${state.projectName}</h1>
`)}
</div>
`;
},
});
export default Index;
Nahoře importujeme ui objekt z @joystick.js/ui což nám dává přístup k ui.component() metoda pro vytvoření naší komponenty spolu s naším generateProjectName funkce z našeho /lib složku. Pod tím vytvoříme naši komponentu a uložíme ji do proměnné Index který je exportován z našeho souboru ve spodní části (tento soubor je již připojen k routeru v naší aplikaci, takže pro jeho fungování nemusíme dělat nic jiného).
Zaměření na samotnou komponentu, dole v render() vrátíme řetězec HTML k vykreslení pro naši komponentu. Uvnitř vrátíme <div></div> tag s <button></button> a speciální volání na when() funkce předaná do render() funkce komponent joysticku (známá jako when "funkce vykreslení").
Tato funkce je navržena tak, aby vykreslila nějaké HTML when je splněna nějaká podmínka. Zde zkontrolujeme, zda state.projectName hodnota je definována. Zde state je stažen z instance komponenty předané do render() komponenty funkce (stejné místo, kde jsme vybrali when() z). Tento stav lze standardně nastavit na naší komponentě pomocí state vlastnost nastavená na objektu předaná na ui.component() .
Výše uvedené provádíme ve výchozím nastavení projectName ve stavu na null . Jinými slovy, když se naše komponenta poprvé načte state.projectName se rovná null , takže naše volání na číslo when() níže v našem render() function wont' vykreslí HTML předaný jako druhý argument (náš state.projectName hodnota zabalená do <h1></h1> tag).
Abychom tuto hodnotu změnili, musíme zavolat na .setState() naší komponenty metoda. Zde to děláme jako odpověď na click událost na button uvnitř naší součásti. Nahoře v events objekt předán volbám pro ui.component() , definovali jsme posluchač událostí pro click událost na všech button prvky v naší komponentě (v tomto případě pouze jeden).
Uvnitř funkce předaná definice posluchače click button , očekáváme, že dostaneme DOM event jako první argument a poté component instance jako druhý argument. Na tom component například získáme přístup k funkci .setState() který můžeme volat k aktualizaci hodnot na state naší komponenty objekt. Na .setState() předáme objekt se všemi hodnotami, které chceme aktualizovat, jako vlastnosti. Zde chceme nastavit projectName rovná se náhodnému názvu projektu, takže jej nastavíme na hodnotu generateProjectName() .
Konečným výsledkem je, že nyní pokaždé, když klikneme na naše tlačítko, nastavíme projectName na nové náhodné jméno a naše when() vykreslí toto jméno na obrazovku. To je ono!
Zabalení
V tomto tutoriálu jsme se naučili, jak vygenerovat náhodný název projektu v JavaScriptu. Naučili jsme se, jak napsat funkci, která dokáže vybrat náhodné hodnoty z pole, a také funkci pro formátování vybrané náhodné hodnoty tak, aby byla všechna malá a složená. Dále jsme se naučili, jak zřetězit naše náhodné hodnoty do jednoho řetězce a vrátit je z funkce. Nakonec jsme se naučili volat naši funkci a používat její hodnotu k zobrazení uvnitř komponenty joysticku.