kirilljs

kirilljs

@Jspi Ну вообще согласен полностью, vue по сути просто файлик в котором у тебя все тот же веб просто вместо html у тебя template и те же script, style. Соглы что вуй ближе к интернетам этим вашим. НО реакт - это как младший братик дурачек, а ты его все равно любишь

kirilljs

Vue говно, смысл на нем писать если все бигтехи пишут на Реакт?

kirilljs

Полезные ресурсы:
doka.guide
learn.javascript.ru

kirilljs

Всем привет! И добро пожаловать на наш форум RosDesk!
Ранее я уже писал небольшие статьи о паттернах, типах и прочих сложных штуках. Сейчас же у меня появилась идея написать серию статьей для самых маленьких булочек которые хотят разобраться в языке программирования JavaScript. Постараюсь разжёвывать информацию максимально понятно.
Ну что же, поехали!

Hello, World!

HTML отвечает за структуру, а CSS — за внешний вид веб-страниц. Вместе они позволяют создавать красивые сайты, как, например, наш форум.

Для добавления интерактивности на сайт нужен JavaScript.

Что такое JavaScript?

JavaScript — современный язык программирования, дополняющий HTML и CSS. Он приносит интерактивность в веб-документы. Вот что он может делать:

Обрабатывать события, такие как клик мыши.
Изменять HTML и CSS после загрузки страницы.
Создавать анимации и перемещения объектов.
Разрабатывать браузерные игры.
Обмениваться данными с сервером.
Взаимодействовать с веб-камерой, микрофоном и другими устройствами.
JavaScript прост в написании. Вы используете команды, похожие на английские слова, чтобы управлять браузером.

Пример кода:

let defaultName = "JavaScript";
function sayHello(name) {
  if (name == null) {
    alert("Hello, " + defaultName + "!");
  } else {
    alert("Hello, " + name + "!");
  }
}

Не волнуйтесь, если пока что-то непонятно. Обратите внимание на английские слова: function, if, else, alert, name. Со временем вы разберетесь в их значении.

Теперь, вместо теории, давайте немного попрактикуемся в написании JavaScript-кода и создадим простое приложение, отображающее текст в браузере.

Начало работы с JavaScript

Если вы новичок в программировании, не переживайте. Скоро вы поймёте, что JavaScript не так сложен, как кажется. Давайте начнем.

Для начала вам нужно знать основы создания веб-страниц, использования редактора кода и добавления HTML/CSS. Если вы с этим не знакомы, прочтите статью - https://help.megagroup.ru/chto-takoye-html-i-css.

Создание HTML-документа

Откройте HTML-документ, где будете писать JavaScript-код. Запустите редактор кода, например, Visual Studio Code. Если у вас его нет, установите. Создайте новый файл, перейдя к вкладке Untitled.

Сохраните файл через File > Save, указав имя и расположение. Добавьте следующий HTML-код:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello, RosDesk</title>
</head>
<body>
    
</body>
<script>

</script>
</html>

После добавления HTML-кода сохраните документ. Теперь откройте файл index.html двойным щелчком на рабочем столе. Ваш браузер по умолчанию отобразит содержимое файла.

Если все сделано правильно, вы увидите пустую страницу. Это нормально, так как пока что на странице нет видимого содержимого. Исправим это, вернувшись в редактор кода и добавив JavaScript.

Добавление JavaScript

Найдите тег script в нижней части HTML-документа. Этот тег служит контейнером для JavaScript-кода. Чтобы отобразить сообщение “Hello, RosDesk!” в диалоговом окне при загрузке страницы, добавьте в тег script следующую строку:

alert('Hello, RosDesk!')

Сохраните HTML-файл и снова откройте его в браузере. Вы должны увидеть диалоговое окно с сообщением.

Поздравляю с первой попыткой написания JavaScript-кода! Теперь разберем, как это работает.

Вы только что создали простую JavaScript-инструкцию. Инструкция — это логическая последовательность действий, которые должен выполнить браузер. В обычных приложениях таких инструкций множество, но у нас всего одна:

alert("Hello, RosDesk!");

Инструкции обычно заканчиваются точкой с запятой (;). Внутри инструкции используется JavaScript-синтаксис. Наш код, хотя и короткий, содержит элемент alert, который отвечает за отображение сообщения. Это слово похоже на английское и означает то же самое в JavaScript: привлечение внимания.

Alert — это функция, часто используемая в JavaScript. Функции — это фрагменты кода, которые выполняют определенные действия. Они могут быть определены вами, библиотеками или фреймворками. В данном случае функция alert встроена в браузер и отображает диалоговое окно с переданным сообщением. Чтобы использовать функцию alert, достаточно вызвать её с нужным текстом:

alert("Эй, Привет!");

Текст (или строка) всегда заключен в одинарные или двойные кавычки. Это одна из особенностей JavaScript. Мы рассмотрим строки более подробно позже, а пока замените “hello, world!” на своё имя:

alert("Ваше имя");

Запустите приложение и увидите своё имя в диалоговом окне.

Проще простого, правда? Вы можете вписать в строку что угодно: имя питомца, название любимого сериала и т.д., а JavaScript все это отобразит.

Коротко о главном

В этой главе вы узнали основы написания JavaScript-кода. Мы рассмотрели базовые принципы и термины. Не переживайте, если не запомнили все сразу. В следующих уроках мы детально разберем наиболее интересные части. В конечном итоге, JavaScript позволяет создавать гораздо более сложные и интересные вещи, чем простые диалоговые окна.

В конце каждой главы вы найдете ссылки на дополнительные ресурсы, созданные мной или другими разработчиками (в комментариях). Они помогут углубить знания, взглянуть на материал с другой стороны и попрактиковаться на сложных примерах. Рассматривайте эту статью как стартовую площадку для освоения более продвинутых тем.

Если у вас есть вопросы по этой главе, оставляйте сообщения на нашем форуме https://forum.rosdesk.ru.
И конечно же жду Вас мои маленькие булочки в комментарии

kirilljs

@Hater НИПОНЯЛ

kirilljs

Вот вечер да, казалось - чем бы мне таким заняться.
Может покачать скил? Почитать классные статьи ?
Нет, мне приходит в голову пизданутая идея спросить гугл - Славянский язык программирование, и вот что я получаю: https://github.com/ReaskyDev/DrevneScript

Гойда пацаны чи нет ?

kirilljs

Это я замудачил, забыл в шаблоне указать setup в script

kirilljs

Блять, получаю эту ошибку, вроде все окей делаю.
Что он сука от меня хочет ?

[nuxt] A composable that requires access to the Nuxt instance was called outside of a plugin, Nuxt hook, Nuxt middleware, or Vue setup function. This is probably not a Nuxt bug. Find out more at https://nuxt.com/docs/guide/concepts/auto-imports#vue-and-nuxt-composables.

<script setup lang="ts">
import { ref } from 'vue';

const active = ref(false);

function setActive(val: boolean) {
    active.value = val
}
</script>

<li
class="header-nav-item"
@mouseover="setActive(true)"
@mouseout="setActive(false)">
<a href="/" class="header-nav-link">Каталог</a>
<div class="header-nav-dropmenu" :class="{ active }">
<a href="">Подкатегория</a>
<a href="">Подкатегория</a>
<a href="">Подкатегория</a>
<a href="">Подкатегория</a>
</div>
</li>

kirilljs

Всем здрасьте!
Сегодня хочу разобрать две важные темы, которые тесно пересекаются между собой, а именно - Полиморфизм и Дженерики (обобщенные типы).

Поехалииииииии

Дженерики и полиморфизм являются связанными концепциями в программировании, особенно в контексте объектно-ориентированного программирования (ООП) и языков, поддерживающих статическую типизацию, таких как TypeScript. Однако они не являются одним и тем же понятием; каждый из них имеет свои особенности и применения.

Дженерики

Дженерики — это механизм, позволяющий писать код, который может работать с различными типами данных без потери типовой безопасности. Они используются для создания универсальных компонентов, таких как коллекции, функции и классы, которые могут работать с любыми типами данных, сохраняя при этом строгую проверку типов.

function identity<T>(arg: T): T {
    return arg;
}

Здесь T является переменной типа параметра, которая позволяет функции identity принимать аргументы любого типа и возвращать значение того же типа.

Полиморфизм

Полиморфизм — это способность системы использовать объекты разных типов, но с похожими интерфейсами, так, чтобы эти объекты могли взаимодействовать друг с другом без необходимости изменения их внутренней реализации. Полиморфизм позволяет программисту писать более гибкий и модульный код, поскольку различные классы могут реализовывать один и тот же интерфейс по-разному.

class Animal {
    speak() {
        console.log('Это животинка');
    }
}

class Pig extends Animal {
    speak() {
        console.log('Хрюшка делает: хрю хрю');
    }
}

Здесь Animal является базовым классом с методом speak, а Pig является подклассом, который переопределяет этот метод, предоставляя свою уникальную реализацию.

Ну а теперь о главном

Что такое конкретные типы в TypeScript - это:

// Пример если что
boolean;
string;
Date[];
{a: number} | {b: string};
(number: number[]) => number;

Конкретные типы полезны, но полезны когда Вы точно знаете какой ожидается тип и хотите сверить его с переданным типом. Но иногда это нецелесообразно ограничивать поведение функций конкретным типом.

Давай представим с Вами функцию filter для итерации по массиву и его очистки.
В JS она может выглядеть примерно так:

function filter(array, f) {
  let result = []
  for (let i = 0; i < array.length; i++) {
    let item = array[i]
    if(f(item)) {
      result.push(item)
    }
  }
}

filter([1, 2, 3, 4], _ => _ <= 3) // вычисляется как [1, 2]

А теперь давайте приступим с извлечения сигнатуры типа filter и добавления временных заместителей unknown для типов:

type Filter = {
  (array: unknown, f: unknown) => unknown[]
}

Далее попробуем заполнить типы, к примеру возьмем number:

type Filter = {
  (array: number[], f: (item: number) => boolean): number[]
}

Такая сигнатура будет работать для массива чисел, но не как не строк и уже тем более не объектов и других массивов. Давайте теперь попробуем использовать перегрузку для ее расширения:

type Filter = {
  (array: number[], f: (item: number) => boolean): number[]
  (array: string[], f: (item: string) => boolean): string[]
}

Пока вроде все отлично, но прописывать перегрузку для каждого типа - такая себе идея.
А может еще жахнем массив объектов ?

type Filter = {
  (array: number[], f: (item: number) => boolean): number[]
  (array: string[], f: (item: string) => boolean): string[]
  (array: object[], f: (item: object) => boolean): object[]
}

В принципе выглядит неплохо, но если реализовать функцию filter с сигнатурой filter: Filter и ее использовать, то получим следующее:

let names = [
  {firstName: 'Lox'},
  {firstName: 'Debik'},
  {firstName: 'Dodik'},
]

let result = filter(
  names,
  _ => _.firstName.startsWith('L')
) // Ошибка TS2339: свойство 'firstName' не существует в типе 'object'.

result[0].firstName // Ошибка TS2339: свойство 'firstName'
                    //не существует в типе 'object'.

В этом месте должно стать понятно, почему TypeScript выдает ошибку.
Мы сообщили ему, что можем передать массив чисел, строк или объектов в filter, и передали массив объектов. Но как Вы уже должны знать, object ничего не сообщает TypeScript о конкретной форме самого объекта.

И что же делать спросите вы?

Если ранее вы писали на языке, который поддерживает обобщенные типы, то наверняка хрюкните “ХОЧУ ОБОБЩЕННЫЕ ТИПЫ”!
Замечательная новость в том, что вы правы, а вот плохая - вы только что разбудили @Jspi

Для несведущих начну с определения обобщенных типов, а затем приведу пример с нашей функцией.

ПАРАМЕТР ОБОБЩЕННОГО ТИПА

Замещающий тип, используемый для применения ограничений на уровне типов в нескольких местах. Также известен как параметр полиморфного типа.

Едем дальше. Вот как будет выглядеть тип filter, если мы перепишем его с параметром обобщенного типа T:

type Filter = {
  <T>(array: T[], f: (item: T) => boolean): T[]
}

Таким образом мы сообщили: “Функция filter использует параметр обобщенного типа T. Мы заранее не знаем, каким будет тот или ной тип в дальнейшем, поэтому, TypeScript, если ты сможешь сделать его вывод при каждом вызове filter, то было бы замечательно”.
TypeScript выводит тип T на основе типа, который мы передаем для array. Как только TypeScript делает вывод, чем является T для вызова filter, он подставляет этот тип для каждого видимого T.
T выступает в роли замещающего типа, который заполняется модулем проверки на основе контекста. Он параметризует тип Filter, поэтому мы и зовем его параметром обобщенного типа.

“Фраза параметр обобщенного типа часто заменяется на обобщенный тип или обобщение.”

Вообще для объявления обобщенных типов используются угловые скобки (<>) А еще их называют ДЖЕНЕРИКАМИ (Generics), воспринимайте их как ключевое слово type.
Место размещения скобок определяет диапазон охватываемых типов (да, кстати есть всего несколько мест где вы можете их использовать). TypeScript в свою очередь убеждается, что внутри этого диапазона все экземпляры параметров обобщенных типов привязаны к одному реальному типу. В текущем примере при вызове filter TypeScript привяжет конкретные типы к обобщенному типу T в зависимости от обозначенного скобками диапазона. Какой именно тип привязывать к T, он решит исходя из того, с каким типом мы вызовем filter. Между угловых скобок мы можем объявить столько обобщений, сколько пожелаем, разделив их точкой с запятой.

T - это просто имя типа, такое же как А, LOX, baloven, 2k24. Но в мире TS принято использовать имена состоящие из одной заглавной буквы, так что всего скорее в чужом коде вы встретите такие имена типов как T, U, V, W и т.п.

Если конечно вы используете множество типов или какие-то сложные образы то конечно лучше стоит рассмотреть вариант вроде Value или WidgetType.

А еще некоторые программисты предпочитают начинать с А вместо Т. Это зависит от сообщества пользователей разных языков программирования которые делают выбор согласно устоявшейся традиции. Например функциональщики предпочитают A, B, C. Разработчики ООП склонны использовать Т или type. TypeScript поддерживает любой стиль, но предпочтительнее используется последний

ПРОДОЛЖАЕМ!
Подобно тому как параметр функции повторно привязывается при каждому вызове функции, также и каждый вызов filter получает свою привязку для T:

type Filter = {
  <T>(array: T[], f: (item: T) => boolean): T[]
}

let filter: Filter = (array, f) => // ...

// (a) T привязан к number
filter([1,2,3], _=>_>2)

// (b) T привязан к строке
filter(['a', 'b'], _=>_!=='b')

// (c) T привязан к {firstName: string}
let names = [
  {firstName: 'lox'},
  {firstName: 'baloven'},
  {firstName: 'kapysha'}
]
filter(names, _=>_.firstName.startsWith('b'))

TypeScript делает вывод привязок обобщенных типов на основе типов переданных аргументов. Глянем, как привязывает T для (a):

Исходя из сигнатуры filter TypeScript знает, что array - это массив элементов некоего типа Т.
TypeScript замечает, что мы передали в массив [1, 2, 3], а значит Т должен быть number
Везде, где TypeScript видит Т, он заменяет его на number. Следовательно параметр f: (item: T) => boolean становится f: (item: number) => boolean, а возвращаемый тип T[] становится number[].
TypeScript проверяет типы на совместимость и убеждается, что функция, которую мы передали как f, совместима со своей только что выведенной сигнатуры.

Обобщенные типы - это эффективный способ выразить более обширное действие функции, чем это позволяет конкретный тип. Воспринимать же их стоит в виде ограничений. Как аннотирование параметра функции в виде n: number ограничивает значение параметра n типом number, так и использование обобщенного типа Т ограничивает тип любого привязываемого к Т условием типа быть одинаковым в каждом Т.

Обобщенные типы также могут применяться в псевдонимах типов, классах и интерфейсах.

Ну а на этом я предлагаю завершить данную статью и ознакомление с так называемыми Дженериками.

P.S. В последующих статьях я хочу более подробно рассмотреть как привязывать конкретные типы к обобщенным, а также где можно их объявлять.

kirilljs

@Hater В смысле нахуй

kirilljs

@Jspi Ну вообще согласен полностью, vue по сути просто файлик в котором у тебя все тот же веб просто вместо html у тебя template и те же script, style. Соглы что вуй ближе к интернетам этим вашим. НО реакт - это как младший братик дурачек, а ты его все равно любишь

kirilljs

Здравствуйте, уважаемые читатели!

Сегодняшний вечер я посвящу повествованию о моих новых приключениях в мире веб-разработки, а именно моем знакомстве с Nuxt.js. В моей практике я часто отдаю предпочтение React для создания веб-компонентов и небольших приложений, а когда дело доходит до разработки более масштабных проектов с серверным рендерингом и множеством страниц, мой выбор обычно падает на Next.js.

Впечатления от экосистемы Vue

Итак, первое, что бросилось в глаза, - это масштаб и разнообразие экосистемы Vue. Здесь есть всё: от готовых шаблонов до библиотек на любой вкус. Особое внимание я хочу уделить NuxtUi, которое, на мой взгляд, удвоит скорость моей работы над проектами.

Испытание NuxtUi

Погрузившись в NuxtUi, я обнаружил, что это просто сокровищница удобных инструментов. Возьмем, к примеру, автоматическое создание “хлебных крошек” - это действительно восхитительная функция. В целом, экосистема Nuxt заслуживает самых теплых слов - разработчики, безусловно, проделали большую работу.

Знакомство с Vue (или Nuxt?)

Моё погружение в мир Vue началось с необходимости разработать привлекательный и масштабируемый лендинг. Несмотря на мою привязанность к React, я решил отложить его в сторону, чтобы избежать рутины настройки и ожидания выхода новой версии.

Импорты в Nuxt

Одним из приятных открытий стала система импортов в Nuxt. Создание компонентов стало изящным процессом, ведь теперь нет необходимости вручную прописывать каждый импорт. Все компоненты автоматически регистрируются системой, что значительно упрощает работу, хотя и требует некоторых дополнительных настроек в nuxt.config для более гибкой структуризации проекта.

Синтаксис Vue

Синтаксис Vue может вызвать удивление у привыкших к JSX, и, хотя он может быть не по душе каждому, он имеет свои преимущества и особенности, которые ценятся в сообществе Vue.

Шаблонизация и документация

Система шаблонов в Nuxt действительно удобна. Вам всего лишь нужно создать файл с названием default.vue, и система всё сделает за вас. Это намного удобнее, чем в Next.js, где требуется более сложная структура файлов.

Что касается документации, то я ещё не до конца разобрался с созданием отдельных CSS-файлов для каждого компонента, но это скорее вопрос времени и глубины погружения. Стоит отметить, что информации по Nuxt в интернете предостаточно, и она хорошо структурирована, хотя в некоторых местах можно было бы пожелать большей детализации. В будущем я планирую поделиться своими заметками и статьями о настройке Nuxt, чтобы помочь другим разработчикам углубить свои знания.

Гибкость сборки проекта с Nuxt

Отдельного упоминания заслуживает вариативность сборок в Nuxt. Вы хотите разместить свой проект на хостинге? Nuxt предлагает готовый билд с папкой public и HTML-файлами. Или, может быть, вы предпочитаете развертывание через Node и pm2? И здесь Nuxt не подведет - все настроено для легкого перехода в продакшен. Правда, столкнулся я с некоторыми трудностями при деплое, но это тема для отдельного разговора.

Вы, возможно, ожидали в этой статье подробных примеров и разбора сложных вопросов, но позвольте мне быть кратким: Nuxt предлагает великолепные возможности, несмотря на некоторые синтаксические особенности, которые могут показаться необычными на первый взгляд. В конечном итоге, это вопрос привычки и вкуса, и я уверен, что каждый разработчик найдет в Nuxt что-то ценное для своих проектов.

Спасибо за внимание, и пусть ваш код будет чистым, а проекты - успешными!

Если у вас есть вопросы или пожелания, не стесняйтесь оставлять комментарии. Ваши отзывы помогают мне делать контент еще лучше. И не забывайте подписаться, чтобы не пропустить следующие статьи об увлекательном мире веб-разработки.