Создание одного и того же приложения 5 раз
В некоторых из этих фреймворков я уже создавал подобные приложения раньше, но с другими я либо никогда не делал этого раньше, либо вообще не использовал, так что это будет более сложной задачей.
Создание приложений
Содержание статьи:
jQuery
Я буду использовать jQuery, чтобы упростить свое приложение без фреймворка. Я начал с создания базовой файловой структуры и создал index.html. Файловая структура, если вам интересно, такова: у меня есть таблица стилей SCSS, которую я скомпилирую в CSS, и на этом пока все. На данный момент html выглядит так, но позже я расскажу о нем подробнее:
JavaScript. Быстрый старт
Изучите основы JavaScript на практическом примере по созданию веб-приложения
<!DOCTYPE html> <html lang=”en”> <head> <meta charset=”UTF-8″> <link rel=”stylesheet” href=”./css/styles.css” /> <meta http-equiv=”X-UA-Compatible” content=”IE=edge”> <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> <script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js”></script> <title>Notes App</title> </head> <body> <div class=”container”> <header> <h1>Notes App</h1> </header> <main> <div class=”note”> <form> <input required type=”text” id=”note-title” placeholder=”Note Title” /> <textarea id=”note-body” placeholder=”Note Body”></textarea> <input type=”submit” id=”note-submit” title=”Add Note” /> </form> </div> </main> </div> </body> </html>
| 123456789101112131415161718192021222324252627282930 | <!DOCTYPE html><html lang=”en”> <head> <meta charset=”UTF-8″> <link rel=”stylesheet” href=”./css/styles.css” /> <meta http-equiv=”X-UA-Compatible” content=”IE=edge”> <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> <script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js”></script> <title>Notes App</title></head> <body> <div class=”container”> <header> <h1>Notes App</h1> </header> <main> <div class=”note”> <form> <input required type=”text” id=”note-title” placeholder=”Note Title” /> <textarea id=”note-body” placeholder=”Note Body”></textarea> <input type=”submit” id=”note-submit” title=”Add Note” /> </form> </div> </main> </div></body> </html> |
Таблица стилей выглядит так:
CSS body { height: 100%; width: 100%; margin: 0; } .container { width: 100%; height: auto; margin: 0; display: flex; flex-direction: column; header { display: flex; align-items: center; width: 100%; height: 56px; background-color: #4e78b8; color: white; h1 { margin-left: 6px; } } main { margin: 10px; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); grid-gap: 1rem; align-items: center; .note { display: flex; flex-direction: column; padding: 10px; background-color: #a15fbb; border-radius: 5px; form { display: flex; flex-direction: column; textarea { resize: none; } } } } }
| 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253 | body { height: 100%; width: 100%; margin: 0;} .container { width: 100%; height: auto; margin: 0; display: flex; flex-direction: column; header { display: flex; align-items: center; width: 100%; height: 56px; background-color: #4e78b8; color: white; h1 { margin-left: 6px; } } main { margin: 10px; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); grid-gap: 1rem; align-items: center; .note { display: flex; flex-direction: column; padding: 10px; background-color: #a15fbb; border-radius: 5px; form { display: flex; flex-direction: column; textarea { resize: none; } } } }} |
Затем я компилирую код с помощью sass scss/styles.scss:css/styles.css, и мы готовы приступить к написанию кода JavaScript. По сути, все, что нам нужно сделать, это добавить новый div в DOM с парой дочерних элементов при отправке формы и сохранить его в локальном хранилище. Вот что у меня получилось:
JavaScript let notes = []; $(document).ready(function () { if (localStorage.getItem(“notes”)) notes = JSON.parse(localStorage.getItem(“notes”)); setNotes(); }); $(“#note-submit”).click(function (e) { let noteTitle = $(“#note-title”).val(); let noteDesc = $(“#note-body”).val(); let note = { title: noteTitle, desc: noteDesc } notes.push(note); console.log(notes); localStorage.setItem(“notes”, JSON.stringify(notes)); setNotes(); }); function setNotes() { notes.forEach((note) => { $(“main”).prepend(` <div class=”note”> <h4>${note.title}</h4> <span>${note.desc}</span> </div> `); }); }
| 123456789101112131415161718192021222324252627282930 | let notes = []; $(document).ready(function () { if (localStorage.getItem(“notes”)) notes = JSON.parse(localStorage.getItem(“notes”)); setNotes();}); $(“#note-submit”).click(function (e) { let noteTitle = $(“#note-title”).val(); let noteDesc = $(“#note-body”).val(); let note = { title: noteTitle, desc: noteDesc } notes.push(note); console.log(notes); localStorage.setItem(“notes”, JSON.stringify(notes)); setNotes();}); function setNotes() { notes.forEach((note) => { $(“main”).prepend(` <div class=”note”> <h4>${note.title}</h4> <span>${note.desc}</span> </div> `); });} |
Вероятно, это не лучший код, который мог бы быть, но он имел для меня наибольший смысл, и я решил, что в этом идеальном коде не будет необходимости. Тем не менее, это было намного проще, чем я ожидал, учитывая предыдущий опыт, и мне это действительно нравится. Единственное, что, вероятно, будет отличаться в других приложениях, — это порядок заметок, потому что я просто не мог позаботиться о том, чтобы они всегда добавлялись перед формой, но после других заметок. При этом, наверное, сейчас, когда я думаю об этом, это будет не так уж сложно.
Angular
Это немного глупо, учитывая, как много вы можете сделать с Angular, и как мало мы на самом деле делаем, но вопреки впечатлению, которое я мог создать ранее, мне действительно нравится Angular, мне просто не нравится, каким он может быть не-модульным в сравнении с чем-то вроде React. В любом случае, пора сгенерировать проект:
JavaScript $ ng new angular
| 1 | $ ng new angular |
Это буквально все, что нам нужно сделать для начала, разве не прелесть Angular CLI? В любом случае, я напишу в основном тот же код для базовой структуры приложения:
<div class=”container”> <header> <h1>Notes App</h1> </header> <main> <div class=”note” *ngFor=”let note of [0, 1, 2, 3]”> <h4>Note Title</h4> <span>Note Body</span> </div> <div class=”note”> <form> <input required type=”text” #noteTitle placeholder=”Note Title” ngModel /> <textarea #noteBody placeholder=”Note Body” ngModel></textarea> <input type=”submit” #noteSubmit title=”Add Note” /> </form> </div> </main> </div>
| 123456789101112131415161718 | <div class=”container”> <header> <h1>Notes App</h1> </header> <main> <div class=”note” *ngFor=”let note of [0, 1, 2, 3]”> <h4>Note Title</h4> <span>Note Body</span> </div> <div class=”note”> <form> <input required type=”text” #noteTitle placeholder=”Note Title” ngModel /> <textarea #noteBody placeholder=”Note Body” ngModel></textarea> <input type=”submit” #noteSubmit title=”Add Note” /> </form> </div> </main></div> |
Это может быть спорным моментом, но я собираюсь реализовать всю логику для приложения в самом компоненте приложения, без каких-либо дочерних компонентов. Это просто сделает приложение немного проще в целом. В любом случае, давайте использовать в основном тот же стиль, что и раньше:
CSS .container { width: 100%; height: auto; margin: 0; display: flex; flex-direction: column; header { display: flex; align-items: center; width: 100%; height: 56px; background-color: #4e78b8; color: white; h1 { margin-left: 6px; } } main { margin: 10px; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); grid-gap: 1rem; align-items: center; .note { display: flex; flex-direction: column; padding: 10px; background-color: #a15fbb; border-radius: 5px; form { display: flex; flex-direction: column; textarea { resize: none; } } } } }
| 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647 | .container { width: 100%; height: auto; margin: 0; display: flex; flex-direction: column; header { display: flex; align-items: center; width: 100%; height: 56px; background-color: #4e78b8; color: white; h1 { margin-left: 6px; } } main { margin: 10px; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); grid-gap: 1rem; align-items: center; .note { display: flex; flex-direction: column; padding: 10px; background-color: #a15fbb; border-radius: 5px; form { display: flex; flex-direction: column; textarea { resize: none; } } } }} |
В любом случае, мы можем просто написать код, аналогичный тому, что мы делали раньше:
JavaScript import { Component } from ‘@angular/core’; type Note = { title: string; desc: string; } @Component({ selector: ‘app-root’, templateUrl: ‘./app.component.html’, styleUrls: [‘./app.component.scss’] }) export class AppComponent { notes: Array<Note> = []; title!: string; body?: string; constructor() { const data = localStorage.getItem(“notes”); if (data) this.notes = JSON.parse(data); } submitForm() { let note: Note = { title: this.title, desc: this.body || “” } this.notes.push(note); localStorage.setItem(“notes”, JSON.stringify(this.notes)); } }
| 12345678910111213141516171819202122232425262728293031 | import { Component } from ‘@angular/core’; type Note = { title: string; desc: string;} @Component({ selector: ‘app-root’, templateUrl: ‘./app.component.html’, styleUrls: [‘./app.component.scss’]})export class AppComponent { notes: Array<Note> = []; title!: string; body?: string; constructor() { const data = localStorage.getItem(“notes”); if (data) this.notes = JSON.parse(data); } submitForm() { let note: Note = { title: this.title, desc: this.body || “” } this.notes.push(note); localStorage.setItem(“notes”, JSON.stringify(this.notes)); }} |
После этого мы можем вернуться в шаблон и исправить логику заметок:
<div class=”container”> <header> <h1>Notes App</h1> </header> <main> <div class=”note” *ngFor=”let note of notes”> <h4>{{note.title}}</h4> <span>{{note.desc}}</span> </div> <div class=”note”> <form #addNoteForm=”ngForm”> <input required type=”text” placeholder=”Note Title” [(ngModel)]=”title” name=”Title” /> <textarea placeholder=”Note Body” [(ngModel)]=”body” name=”Body”></textarea> <input type=”submit” #noteSubmit title=”Add Note” (click)=”submitForm()” /> </form> </div> </main> </div>
| 123456789101112131415161718 | <div class=”container”> <header> <h1>Notes App</h1> </header> <main> <div class=”note” *ngFor=”let note of notes”> <h4>{{note.title}}</h4> <span>{{note.desc}}</span> </div> <div class=”note”> <form #addNoteForm=”ngForm”> <input required type=”text” placeholder=”Note Title” [(ngModel)]=”title” name=”Title” /> <textarea placeholder=”Note Body” [(ngModel)]=”body” name=”Body”></textarea> <input type=”submit” #noteSubmit title=”Add Note” (click)=”submitForm()” /> </form> </div> </main></div> |
React
Я думаю, вероятно, это будет более сложной задачей, из-за природы React. React спроектирован так, чтобы быть более модульным и легким, чем другие фреймворки, но в некотором смысле он более сложен для небольших приложений из-за своей структуры. Во всяком случае, я начал с создания своего приложения с помощью собственного шаблона sammy-libraries:
JavaScript $ yarn create react-app react-app –template sammy-libraries
| 1 | $ yarn create react-app react-app –template sammy-libraries |
У меня была ошибка, которая иногда возникает, когда node sass (который я все еще использую в основном потому, что dart sass имеет медленное время компиляции для React, по моему опыту) отказывается компилировать мой код sass, поэтому я просто удалил node_modules и yarn.lock а потом снова запустил yarn. В любом случае вот что я сделал. Я начал с того, что сделал index.scss таким же, как и styles.scss в первом приложении, а затем в своем компоненте приложения я воссоздал базовую структуру приложения:
JavaScript import React, { useEffect, useState } from “react”; import NotesList from “components/NotesList”; import { NoteType } from “components/Note”; //import “scss/App.scss”; function App() { const [notesList, setNotesList] = useState<NoteType[]>([]); const [noteTitle, setNoteTitle] = useState<string>(“”); const [noteDesc, setNoteDesc] = useState<string>(“”); useEffect(() => { const data = localStorage.getItem(“notes”); if (data) { setNotesList(JSON.parse(data)); } }, []); useEffect(() => { localStorage.setItem(“notes”, JSON.stringify(notesList)); }, [notesList]) const addNote = (event: React.FormEvent<HTMLFormElement>) => { let note: NoteType = { title: noteTitle, desc: noteDesc, }; setNotesList([…notesList, note]); event.preventDefault(); }; const changeTitle = (event: React.ChangeEvent<HTMLInputElement>) => { setNoteTitle(event.currentTarget.value); }; const changeDesc = (event: React.ChangeEvent<HTMLTextAreaElement>) => { setNoteDesc(event.currentTarget.value); }; return ( <div className=”container”> <header> <h1>Notes App</h1> </header> <NotesList addNote={addNote} changeTitle={changeTitle} changeDesc={changeDesc} notes={notesList} /> </div> ); } export default App;
| 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950 | import React, { useEffect, useState } from “react”;import NotesList from “components/NotesList”;import { NoteType } from “components/Note”;//import “scss/App.scss”; function App() { const [notesList, setNotesList] = useState<NoteType[]>([]); const [noteTitle, setNoteTitle] = useState<string>(“”); const [noteDesc, setNoteDesc] = useState<string>(“”); useEffect(() => { const data = localStorage.getItem(“notes”); if (data) { setNotesList(JSON.parse(data)); } }, []); useEffect(() => { localStorage.setItem(“notes”, JSON.stringify(notesList)); }, [notesList]) const addNote = (event: React.FormEvent<HTMLFormElement>) => { let note: NoteType = { title: noteTitle, desc: noteDesc, }; setNotesList([…notesList, note]); event.preventDefault(); }; const changeTitle = (event: React.ChangeEvent<HTMLInputElement>) => { setNoteTitle(event.currentTarget.value); }; const changeDesc = (event: React.ChangeEvent<HTMLTextAreaElement>) => { setNoteDesc(event.currentTarget.value); }; return ( <div className=”container”> <header> <h1>Notes App</h1> </header> <NotesList addNote={addNote} changeTitle={changeTitle} changeDesc={changeDesc} notes={notesList} /> </div> );} export default App; |
Наш код пока ничего не делает, поэтому давайте добавим другие компоненты. я сделал 3 компонента в отдельной папке.
NotesList.tsx:
JavaScript. Быстрый старт
Изучите основы JavaScript на практическом примере по созданию веб-приложения
JavaScript import React from “react”; import AddNote from “components/AddNote”; import Note, { NoteType } from “components/Note”; type NotesListProps = { notes: NoteType[]; addNote: (event: React.FormEvent<HTMLFormElement>) => void; changeTitle: (event: React.ChangeEvent<HTMLInputElement>) => void; changeDesc: (event: React.ChangeEvent<HTMLTextAreaElement>) => void; }; function NotesList({ notes, addNote, changeTitle, changeDesc }: NotesListProps) { return ( <main> {notes.map((note) => { return ( <Note note={{ title: note.title, desc: note.desc, }} /> ); })} <AddNote addNote={addNote} changeTitle={changeTitle} changeDesc={changeDesc} /> </main> ); } export default NotesList;
| 123456789101112131415161718192021222324252627282930 | import React from “react”;import AddNote from “components/AddNote”;import Note, { NoteType } from “components/Note”; type NotesListProps = { notes: NoteType[]; addNote: (event: React.FormEvent<HTMLFormElement>) => void; changeTitle: (event: React.ChangeEvent<HTMLInputElement>) => void; changeDesc: (event: React.ChangeEvent<HTMLTextAreaElement>) => void;}; function NotesList({ notes, addNote, changeTitle, changeDesc }: NotesListProps) { return ( <main> {notes.map((note) => { return ( <Note note={{ title: note.title, desc: note.desc, }} /> ); })} <AddNote addNote={addNote} changeTitle={changeTitle} changeDesc={changeDesc} /> </main> );} export default NotesList; |
Note.tsx:
JavaScript import React from “react”; export type NoteType = { title: string; desc: string; } interface NoteProps { note: NoteType; } function Note(props: NoteProps) { return ( <div className=”note”> <h4>{props.note.title}</h4> <span>{props.note.desc}</span> </div> ); } export default Note;
| 123456789101112131415161718192021 | import React from “react”; export type NoteType = { title: string; desc: string;} interface NoteProps { note: NoteType;} function Note(props: NoteProps) { return ( <div className=”note”> <h4>{props.note.title}</h4> <span>{props.note.desc}</span> </div> );} export default Note; |
AddNote.tsx:
JavaScript import React from “react”; interface AddNoteProps { changeTitle: (event: React.ChangeEvent<HTMLInputElement>) => void; changeDesc: (event: React.ChangeEvent<HTMLTextAreaElement>) => void; addNote: (event: React.FormEvent<HTMLFormElement>) => void; } function AddNote(props: AddNoteProps) { return( <div className=”note”> <form onSubmit={props.addNote}> <input type=”text” placeholder=”Note Title” onChange={props.changeTitle} /> <textarea placeholder=”Note Body” onChange={props.changeDesc}></textarea> <input type=”submit” value=”Add Note” /> </form> </div> ); } export default AddNote;
| 123456789101112131415161718192021 | import React from “react”; interface AddNoteProps { changeTitle: (event: React.ChangeEvent<HTMLInputElement>) => void; changeDesc: (event: React.ChangeEvent<HTMLTextAreaElement>) => void; addNote: (event: React.FormEvent<HTMLFormElement>) => void;} function AddNote(props: AddNoteProps) { return( <div className=”note”> <form onSubmit={props.addNote}> <input type=”text” placeholder=”Note Title” onChange={props.changeTitle} /> <textarea placeholder=”Note Body” onChange={props.changeDesc}></textarea> <input type=”submit” value=”Add Note” /> </form> </div> );} export default AddNote; |
Не самая сложная вещь, которую я когда-либо делал, но она определенно кажется намного более сложной, чем просто использование jQuery или Angular, по крайней мере, для меня в любом случае. Мне очень нравится React, я считаю его своим любимым фреймворком, просто не знаю, нравится ли мне его использовать для такого рода вещей. До сих пор, если бы мне пришлось выбирать, я бы сказал, что Angular — самый чистый из группы, JQuery — самый разумный (во всяком случае для этого проекта), а React — неудобный, который кажется действительно приятным в использовании, но в любом случае кажется бессмысленным.
Vue
Это фреймворк, который я использовал однажды, что может быть кощунственным для некоторых людей, но я просто не видел необходимости возиться с ним, если вы можете в это поверить. Я могу использовать как Angular, так и React, и мне кажется, что он охватывает большую часть того, что мне нужно (а остальное обычно заполняется библиотеками), поэтому Vue никогда не казался мне таким полезным. В любом случае, давайте сделаем сам проект Vue.
JavaScript $ vue ui
| 1 | $ vue ui |
Я использовал в основном все значения по умолчанию, но с TypeScript и SCSS (в основном с dart sass, поэтому у меня не было неразрешенных зависимостей), потому что мне просто очень нравится использовать их оба в своих проектах. Единственная реальная причина, по которой я не использовал TypeScript в первом случае, заключалась в том, что я не беспокоился о совместной работе jQuery и TS.
Как я приступил к созданию этого приложения? Ну, сначала я удалил почти все о приложении, которое было автоматически сгенерировано, и заменил код приложения следующим:
<template> <div class=”container”> <header> <h1>Notes App</h1> </header> <main> <Note v-for=”(note, index) in notes” :key=”index” :title=”note.title” :body=”note.body” /> <div class=”note”> <form @submit=”submitForm()”> <input type=”text” placeholder=”Note Title” v-model=”title” /> <textarea placeholder=”Note Body” v-model=”body”></textarea> <input type=”submit” value=”Add Note” /> </form> </div> </main> </div> </template> <script lang=”ts”> import { Component, Vue } from “vue-property-decorator”; import Note from “./components/Note.vue”; type NoteType = { title: string; body: string; }; @Component({ components: { Note, }, }) export default class App extends Vue { notes: Array<NoteType> = []; title!: string; body?: string; constructor() { super(); const data = localStorage.getItem(“notes”); if (data) this.notes = JSON.parse(data); } submitForm(): void { let note: NoteType = { title: this.title, body: this.body || “”, }; this.notes.push(note); localStorage.setItem(“notes”, JSON.stringify(this.notes)); } } </script> <style lang=”scss”> body { height: 100%; width: 100%; margin: 0; } .container { width: 100%; height: auto; margin: 0; display: flex; flex-direction: column; header { display: flex; align-items: center; width: 100%; height: 56px; background-color: #4e78b8; color: white; h1 { margin-left: 6px; } } main { margin: 10px; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); grid-gap: 1rem; align-items: center; .note { display: flex; flex-direction: column; padding: 10px; background-color: #a15fbb; border-radius: 5px; form { display: flex; flex-direction: column; textarea { resize: none; } } } } } </style>
| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114 | <template> <div class=”container”> <header> <h1>Notes App</h1> </header> <main> <Note v-for=”(note, index) in notes” :key=”index” :title=”note.title” :body=”note.body” /> <div class=”note”> <form @submit=”submitForm()”> <input type=”text” placeholder=”Note Title” v-model=”title” /> <textarea placeholder=”Note Body” v-model=”body”></textarea> <input type=”submit” value=”Add Note” /> </form> </div> </main> </div></template> <script lang=”ts”>import { Component, Vue } from “vue-property-decorator”;import Note from “./components/Note.vue”; type NoteType = { title: string; body: string;}; @Component({ components: { Note, },})export default class App extends Vue { notes: Array<NoteType> = []; title!: string; body?: string; constructor() { super(); const data = localStorage.getItem(“notes”); if (data) this.notes = JSON.parse(data); } submitForm(): void { let note: NoteType = { title: this.title, body: this.body || “”, }; this.notes.push(note); localStorage.setItem(“notes”, JSON.stringify(this.notes)); }}</script> <style lang=”scss”>body { height: 100%; width: 100%; margin: 0;} .container { width: 100%; height: auto; margin: 0; display: flex; flex-direction: column; header { display: flex; align-items: center; width: 100%; height: 56px; background-color: #4e78b8; color: white; h1 { margin-left: 6px; } } main { margin: 10px; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); grid-gap: 1rem; align-items: center; .note { display: flex; flex-direction: column; padding: 10px; background-color: #a15fbb; border-radius: 5px; form { display: flex; flex-direction: column; textarea { resize: none; } } } }}</style> |
И тогда компонент Note будет таким:
<template> <div class=”note”> <h4>{{ this.title }}</h4> <span>{{ this.body }}</span> </div> </template> <script lang=”ts”> import { Component, Prop, Vue } from “vue-property-decorator”; @Component({ components: {}, }) export default class App extends Vue { @Prop() title!: string; @Prop() body?: string; } </script>
| 123456789101112131415161718 | <template> <div class=”note”> <h4>{{ this.title }}</h4> <span>{{ this.body }}</span> </div></template> <script lang=”ts”>import { Component, Prop, Vue } from “vue-property-decorator”; @Component({ components: {},})export default class App extends Vue { @Prop() title!: string; @Prop() body?: string;}</script> |
Вот и все.
Svelte
Вот фреймворк, который я хотел изучить, но даже не думал заниматся им, пока не довелось. По сути, я не знал абсолютно ничего, кроме того, что Svelte очень любят веб-разработчики, но я, собираюсь продолжать создавать проекты с Svelte в будущем.
В любом случае, примерно через 10 минут попытки найти yarn create- * CLI для Svelte, которого не существует, я решил просто настроить проект по их шаблоноу, как задумано. Я преобразовал проект в TypeScript, потому что в некотором роде пристрастился к строго типизированным языкам, и начал.
Что касается стиля, я перестал использовать SCSS. Я просто скомпилировал его вручную, потому что это не похоже на то, что я буду редактировать таблицу стилей слишком часто. Это компонент, с которым я работал:
<script lang=”ts”> import Note from “./components/Note.svelte”; type NoteType = { title: string; body: string; }; let notes: Array<NoteType> = []; const data = localStorage.getItem(“notes”); if (data) notes = JSON.parse(data); let title: string = “”; let body: string = “”; function onSubmit() { let note: NoteType = { title: title, body: body }; notes.push(note); localStorage.setItem(“notes”, JSON.stringify(notes)); } </script> <div class=”container”> <header> <h1>Notes App</h1> </header> <main> {#each notes as note} <Note title={note.title} body={note.body} /> {/each} <div class=”note”> <form on:submit={onSubmit}> <input type=”text” placeholder=”Note Title” bind:value={title} /> <textarea placeholder=”Note Body” bind:value={body}></textarea> <input type=”submit” value=”Add Note” /> </form> </div> </main> </div> <style> body { height: 100%; width: 100%; margin: 0; } .container { width: 100%; height: auto; margin: 0; display: flex; flex-direction: column; } .container header { display: flex; align-items: center; width: 100%; height: 56px; background-color: #4e78b8; color: white; } .container header h1 { margin-left: 6px; } .container main { margin: 10px; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); grid-gap: 1rem; align-items: center; } .container main .note { display: flex; flex-direction: column; padding: 10px; background-color: #a15fbb; border-radius: 5px; } .container main .note form { display: flex; flex-direction: column; } .container main .note form textarea { resize: none; } </style>
| 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091 | <script lang=”ts”>import Note from “./components/Note.svelte”; type NoteType = { title: string; body: string;}; let notes: Array<NoteType> = []; const data = localStorage.getItem(“notes”);if (data) notes = JSON.parse(data); let title: string = “”;let body: string = “”; function onSubmit() { let note: NoteType = { title: title, body: body }; notes.push(note); localStorage.setItem(“notes”, JSON.stringify(notes));}</script> <div class=”container”> <header> <h1>Notes App</h1> </header> <main> {#each notes as note} <Note title={note.title} body={note.body} /> {/each} <div class=”note”> <form on:submit={onSubmit}> <input type=”text” placeholder=”Note Title” bind:value={title} /> <textarea placeholder=”Note Body” bind:value={body}></textarea> <input type=”submit” value=”Add Note” /> </form> </div> </main></div> <style>body { height: 100%; width: 100%; margin: 0;} .container { width: 100%; height: auto; margin: 0; display: flex; flex-direction: column;}.container header { display: flex; align-items: center; width: 100%; height: 56px; background-color: #4e78b8; color: white;}.container header h1 { margin-left: 6px;}.container main { margin: 10px; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); grid-gap: 1rem; align-items: center;}.container main .note { display: flex; flex-direction: column; padding: 10px; background-color: #a15fbb; border-radius: 5px;}.container main .note form { display: flex; flex-direction: column;}.container main .note form textarea { resize: none;}</style> |
А вот компонент Note:
<script lang=”ts”> export var title: string; export var body: string; </script> <div class=”note”> <h4>{title}</h4> <span>{body}</span> </div>
| 123456789 | <script lang=”ts”> export var title: string; export var body: string;</script> <div class=”note”> <h4>{title}</h4> <span>{body}</span></div> |
Вот проблема, которую я не знаю, как решить, и на данный момент не хочу решать, стиль работает только в том случае, если вы вставляете стили bundle.css, которые затем сбрасываются при перезагрузке в реальном времени. Это не будет проблемой для полностью созданного приложения, но очень неприятно для тестирования. Я не думаю, что буду исправлять ее в ближайшее время, возможно, когда-нибудь, я исправлю эту проблему.
Заключение
Помните, когда я сказал, что собираюсь написать больше вещей с помощью Svelte? Я не знаю, насколько буду в этом заинтересован, потому что, хотя мне действительно нравились многие аспекты Svelte, было слишком много сбоев, чтобы хотеть использовать его чаще. React был неоправданно сложным для проекта, который я создавал, Angular я по-прежнему считаю самым чистым, Vue, по-моему, самый интересный, а jQuery, вероятно, лучший, что меня очень удивило.
Я думаю, что если бы мне пришлось выбирать фреймворк для будущих проектов, это определенно зависело бы от проекта, но вижу, как снова буду использовать их все, даже с трудностями, которые у меня были со Svelte. При этом я, вероятно, буду делать большую часть своей работы в Angular и React, а следующим моим выбором будут jQuery и Vue. Я, вероятно, дам Svelte еще один шанс. В любом случае, я думаю, что любой из этих фреймворков был бы отличным выбором для множества случаев использования, и понимаю, почему людям нравится Vue сейчас, но не могу сказать, что мое мнение как-то изменились.
Код
Весь код доступен на github по ссылке.
Автор: Sammy Shear
Источник: webformyself.com