Пять лет продвинутой фронтенд-разработки, некоторые вещи, на которые я должен пожаловаться

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

Просто начните разглагольствовать

Новичок, который ненавидит железо

Прежде всего, я хочу подчеркнуть, что я также обновился с Xiaobai, чтобы сражаться с монстрами, но я столкнулся со многими Xiaobai на работе, что заставило меня чувствовать себя очень огорченным. Я всегда думал, что мы前端工程师,нет一个画页面的,

Прежде всего, мы должны быть квалифицированным инженером.

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

структура данных
алгоритм
Модель объектной памяти
Механизм событий JavaScript
наследование и инкапсуляция
связь
HTTP-протокол
VCS: SVN или Git (это критиковало Git по имени, около 50% опрошенных сказали, что будут, но после поступления на работу первый уровень извлечения кода не сработал)
Ajax
Синхронное и асинхронное понимание

Но даже на некоторые простые вопросы многие студенты теряются и не могут на них ответить.

Например: 有一个[1,2,3,4,4,5,5,6,6,6,7]Массив, длина массива меньше 100, внутри массива все положительные целые числа, массив упорядочен, и в массиве не будет нулевых значений.如何将数组中重复的元素删除？

С таким простым массивом для дедупликации почти половина студентов не смогла ответить

Например: Ajax和Axios分别是什么，他们有什么关系？

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

Многие студенты определенно скажут в это время,一定是你们公司招聘给的工资低，才会招到这些技术差的

Все верно, правда сейчас у нас зарплата немного ниже (но я с чистой совестью сказал, это средний показатель по развитию в этом городе),

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

Многие студенты, изучающие Java, смеются над собой как над Spring-инженерами (имеется в виду: инженеры, которые могут разрабатывать только под Spring), но еще более трагично то, что есть много студентов, изучающих интерфейс, которые просто не意识不到自己是Vue工程师(без маршрута и планирования)

Различные настройки проекта

Я часто слышу эту фразу:

В этом проекте внутренние интерфейсы такие же, как и в предыдущих, но по причинам клиента XXX нам необходимо перейти на новый интерфейс.

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

Первоначально в функции ПК, теперь вам нужно внедрить общедоступный номер WeChat (посетить один раз)
Пользователи считают, что предыдущий интерфейс слишком уродлив, на этот раз нам нужно перейти на новый интерфейс (переработка)
Функция ХХ перед системой ХХ очень хороша, можно ли ее пересадить?讲真的，我是Java出身，我知道Java移植一个新的微服务到当前的服务集群有多少工作量

Плохой дизайн внутреннего интерфейса

я специально использовал不良好словарный запас, который я подробно опишу позже.

Пример 1:

Внешний интерфейс должен загрузить изображение аватара пользователя.

Нормальная ситуация: При открытии домашней страницы информация о пользователе получена, в возвращенных данных JSON есть узел, хранящий путь статического ресурса к картинке пользователя. Просто загрузите его в соответствующее место.

axios.get("/user/info").then(res=>{
    console.log(res.data.user.logo); 
})

Фактическая ситуация:

Сначала вам нужно вызвать интерфейс A, чтобы получить идентификатор пользователя./system/info.
Вам нужно получить сообщение на основе идентификатора пользователя, возвращаемого интерфейсом A./user/info.
Вам нужно получить путь к изображению пользователя на основе информации/logo.

axios.get("/system/info").then(res=>{
    axios.ge("/user/info").then(res=>{
        axios.get("/logo").then(res=>{
            console.log("终于获取到最终的图片路径");
        })
    })
})

Опытные разработчики, поняли, что тут не так

Интерфейс не соответствует интерфейсу: информация об интерфейсе не должна запрашивать интерфейс для каждой функциональной точки.Хотя это уменьшает связанность, это также приводит к большому количеству запросов Ajax, что, в свою очередь, влияет на производительность. ответственность преследуется до конца)
Если цепочка вызовов интерфейса слишком длинная и количество взаимодействий слишком много, окончательное время станет длинным.Кроме того, если ошибка сети возникает в середине, цепочка вызовов разрывается, и общий SPA во внешнем интерфейсе также принесет скрытую опасность утечки памяти.

所以，正常来说，在一个接口获取到用户信息是最合适的

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

Разработка Java обычно реагирует:不做修改, менять не надо, причина: интерфейс уже написан, зачем писать новый интерфейс, поддерживать будет очень хлопотно.
Интерфейсный ответ: ? ? ? , почему лидер гонится за этой мелочью, у нас есть промис, достаточно написать еще несколько колбэков我知道你们不怕累orz...但是意识不到问题才是最大的问题

Приведенный выше пример можно понимать как дизайн不合理, следующий пример верен: непонимание проблемы — самая большая проблема.

Пример 2:

Есть замечательный back-end интерфейс.Интерфейс отвечает за загрузку excel.В целях экономии нагрузки Java-разработчики сделали такой интерфейс:

@Controller
public class DownloadController {
    // 下载接口
    @RequestMapping("/downloadExcel")
    public MultiFile downloadExcel(XXXX){
        return XXX;
    }
}

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

Это,你需要下载的文件的内容，你要先准备好一个JSON，传给后端，他才能在接收到JSON的数据之后，转换成一个Excel下载给你...

Проблемы здесь:

Как только объем загруженных данных станет очень большим, он будет очень медленным, очень зависшим, и даже клиент выйдет из строя.
Сами данные запрашиваются из серверной части, и при загрузке в серверную часть они потребляют много пропускной способности сети и памяти сервера.
Большой объем данных передается внешним миром и будет злонамеренно атакован (конкретных методов атаки много, и я не буду их здесь повторять)

Некоторые учащиеся могут спросить, передняя часть постраничная, так что же делать, если вы хотите загрузить их все?

На самом деле, когда я был пойман и увидел этот интерфейс, это было изначально потому, что было сообщено об ошибке: пользователь щелкнулскачать всекнопка (生产环境，列表数据近百万级别), что напрямую приводит к зависанию интерфейса, а пейджинг на самом деле является пейджингом на стороне клиента, выполняемым внешним интерфейсом, который напрямую возвращает все данные.

Когда я увидел этот дизайн интерфейса, я подбежал к разработчику, чтобы спросить, почему он так спроектировал его, и он действительно сказал мне:我们本地环境测试是好的呀！测试哪里也是好的！功能都做完了，当时也没测试出问题，一定是现场实施没部署好，让他重启一下就好了

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

серверная часть`风险嫁接`

风险嫁接Это слово я придумал сам.

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

Бэкэнд-разработка Java всегда была очень осторожной при работе со сторонними данными.MongoDB, структура данных интенсивно используетсяList<map>, и каждый разGetXX()CheckUtil будет использоваться для нулевой оценки и необязательных операций. Это достойно похвалы!

Однако, когда серверная часть не выполняет проверку данных, данные сохраняются в базе данных.灾难.

Поля данных иногда отсутствуют
Иногда несоответствие типов данных
Данные иногда пусты

Внешний интерфейс возвращается в интерфейсlist<user>В интерфейсе данные, которые вы видите, часто выглядят так:

[
{name:"jack",age:10,address:""},
{name:"jack"},
{name:"jack",age:null,address:null},
{name:"jack",age:18,address:["A","B"]}
]

Выше это просто каштан, количество полей больше десятка может быть 30+ или даже 50+,

Эта структура данных дляVue工程师Это катастрофа, по крайней мере, на мой взгляд сейчас, Любой v-for взорвется, и при его зацикливании появится исключение Null.

Конечно, я знаю, что все вышеперечисленные жалобы имеют решения, будь то проверка данных, проверка входных параметров или значения по умолчанию, все они могут быть обработаны.
Но: помните, какое было название?风险嫁接, ослабление структуры данных бэкендом приводит к прямому хранению грязных данных, что напрямую влияет на массу бессмысленной работы.或者说这工作前端后端都可以做的，现在不得不前端来做

Глубина фронтенда и непонятные требования

Интерфейс немного неприятен, но на самом деле это интерфейс для рисования, и всегда есть люди, поднимающие планку:

Редактор vscode сделан фронтендом, он совсем не простой
Платформа с низким кодом обеспечивает реализацию, и ее нелегко перетаскивать напрямую.
Фронтенд-фреймворки, Vue/react/angular и т.д., эти колеса не простые

Я согласен с этой точкой зрения, неважно, передняя или задняя часть, пока вы продолжаете подниматься в гору, в конце вы будете на вершине. Но сколько людей осталось у подножия горы и на склоне горы... Разве не стоит упомянуть их просьбы и боли?

Проблема многих интерфейсов заключается в том, что你可以成为一个技术专家,но你永远无法成为一个团队的核心骨干，永远在外面打酱油.