Как измерить уровень JavaScript человека?

Автор: Чен Даютоу

гитхаб:KRISACHAN

предисловие

Когда раньше чистил Жиху, то увидел такой вопрос: "Как измерить уровень JavaScript человека?И тогда ответил на вопрос бесстыдно. Вот мой ответ:

Оригинальный текст выглядит следующим образом:

A: Это зависит от того, есть ли у человека стандарт написания кода, является ли код надежным, масштабируемым ли он, является ли он читабельным и является ли дизайн API разумным.

Они накапливаются годами и не зависят от языка программирования.

Это намного ценнее, чем запоминание любого написанного от руки связывания, цепочки прототипов и закрытия.

Это ключ к подтверждению вашего уровня кода.

В: Как быстро судить во время собеседования?

A: Попросите интервьюера разработать компонент, не нужно писать, просто ответьте. Ответ от разработки API, написания документации, структуры проекта, модульного тестирования, написания шаблонов, оптимизации производительности и т. д.

Люди с опытом работы могут написать базовую бизнес-логику, но независимо от того, хорошо они пишут или нет, это воплощение опыта, способностей и способности к обучению.

личное заявление

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

Когда во время собеседования меня спрашивают, как быстро определить, является ли другая сторона продвинутым пользователем интерфейса, почему я говорю «компоненты дизайна»?

Потому что я думаю, что в передней части есть определенная сила»,компоненты«Эту концепцию нельзя обойти, либо вы видели исходный код компонентов с открытым исходным кодом, либо сами писали компоненты.

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

Ниже мы разрабатываем "кнопка (<Button>) компонент"Например, изучить этот вопрос.

Во-первых"кнопка (<Button>)«Роль этого, мы ясны? Это декоративный компонент или функциональный компонент?

Проблема проста, "Кнопка (<Button>)» — это функциональный компонент, который позволяет пользователям выполнять действия и делать выбор, щелкая или касаясь их.

Сцены

Затем "кнопка (<Button>)"? Опытный разработчик может подумать о следующих сценариях:

диалог
модальное окно
форма
карта
панель инструментов

Представительский статус может быть следующим:

состояние по умолчанию
начальное состояние
статус информации
статус предупреждения
опасное состояние

Формы могут быть следующими:

сплошная кнопка
текстовая кнопка
Кнопка штриха
кнопка со значком
Круглая кнопка
кнопка под прямым углом

Размеры могут быть следующими:

small
medium
large

Работоспособность может быть следующей:

Введите нажатие клавиши
Щелчок мышью
сенсорный щелчок
Отключить клики

Переносимые события могут быть следующих двух типов:

событие щелчка
Введите событие нажатия клавиши
коснитесь события

Хотя вышеприведенный стиль является неполным, как разработчику компонентов, это то, что мы должны учитывать каждый день.

API

В процессе разработки API мы можем предоставлять следующие API в описанных выше сценариях.

тип: состояние кнопки
размер: размер кнопки
цвет: цвет кнопки
text: текст внутри кнопки
icon: значок внутри кнопки
htmlType: атрибут типа, поддерживаемый нативными кнопками.
attrs: другие нативные атрибуты
вариант: форма пуговицы
click: событие щелчка мыши
tap: событие нажатия на сенсорный экран
keydown: ввести событие нажатия клавиши

написать основную логику

После того, как наш API разработан, мы можем приступить к разработке.В это время, в зависимости от типа нашего проекта, инструменты разработки и выбранные режимы могут быть разными.

Пишем ли мы самостоятельно или прямо в проекте, если пишем самостоятельно, какой инструмент для упаковки выбрать, даgulpвсе ещеwebpackИли что-то другое, почему вы выбрали это?

Например, если мы пишем в TS, нам может понадобиться написатьButton.d.ts, если это компонент vue, мы должны учитыватьVue.useВнедрено в Vue, т.е.Button.install(vue), если это реакция, мы должны рассмотреть, использовать лиReact.forwardRefдля переадресации реф.

Затем идет спецификация нашего кода: следует ли использовать функцию или класс, как абстрагировать общие блоки кода, как и каковы соглашения об именах, какие атрибуты требуются, какие атрибуты являются необязательными и каковы значения по умолчанию? Как мы думали об этом?

Таким образом, окончательное использование компонента может выглядеть так:

import Button from './componenet/Button'

<Button htmlType="submit" aria-label="add" variant="contained" color="rgba(17, 82, 147, 1)" click="clickHandler" />添加</Button>

модульный тест

В процессе нашей разработки хлопотным, но важным процессом является юнит-тестирование, как мы сейчас выбираем библиотеку для юнит-тестирования? использоватьJestвсе ещеMocha? Как писать тест-кейсы? Как имитировать щелчок или асинхронный ответ? Вам нужны снимки? Это также находится в поле нашего зрения.

Таким образом, наш тестовый сценарий может выглядеть так:

import Button from './componenet/Button'
import { shallow } from 'enzyme'

describe('<Button />', () => {
  it('render success', () => {
    const wrapper = shallow((
      <Button htmlType="submit" aria-label="add" variant="contained" color="rgba(17, 82, 147, 1)" click="clickHandler" />添加</Button>
    ))
    expect(wrapper.text('添加')).to.equal(true)
  })
})

разное

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

Суммировать

Вышесказанное заключается в том, что мы разрабатываем "кнопка (<Button>) компонент», которые можно учитывать, могут быть несовершенства, но я хочу сказать, что это на самом деле может быть хорошей мерой уровня JavaScript человека. Например, вы будете писать схемы цепочек прототипов, замыкания, предотвращение. Основные понятия, такие как тряска, троттлинг и т.д., но если их не использовать в проекте, то это все равно будет на бумаге, и техническому уровню это мало поможет.Конечно, нельзя сказать, что освоение этого содержания нехорошо, но по сравнению с реальным боем все же неудовлетворительно.

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

Эта статья кажется немного не по теме, изначально речь шла о "Как измерить свой уровень JavaScript", результат много выходит за рамки. Но таким образом, действительно можно судить об уровне кода человека, конечно, это не только JS, это также применимо к Android и IOS.

постскриптум

Если вам нравится обсуждать технологии или у вас есть какие-либо комментарии или предложения по этой статье, вы можете добавить друзей Yutou в WeChat для совместного обсуждения.Конечно, Yutou также надеется поговорить с вами о жизни, хобби и поболтать. WeChat ID Fish Head: krisChans95 Вы также можете отсканировать код, чтобы подписаться на официальный аккаунт и подписаться на более интересный контент.

https://fish-pond-1253945200.cos.ap-guangzhou.myqcloud.com/img/base/qrcode-all.png