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

предисловие

Не знаю, есть ли у вас такой опыт. Когда вы впервые пришли в компанию, руководитель попросил вас поддерживать код, написанный другими ранее. Вы смотрели на код, написанный другими, и глубоко задумывались: «Кто написал код, такой жестокий"

Как говорится "не бойся писать код сам, но бойся менять чужой код", не согласен - кровью блевать, так что на благо других и для себя код спецификация начинается с меня.

Структура каталогов проекта

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

• Папка компонента предназначена для пользовательских компонентов.
• Страница
• общедоступные общедоступные ресурсы, такие как таблицы стилей и общедоступные значки
• юниты помещают различные общедоступные файлы API и некоторые инкапсулированные файлы js
• config.js — это файл конфигурации

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

конфигурационный файл

В моем проекте есть config.js.Этот файл используется для настройки некоторых интерфейсов и других приватных полей,используемых в проекте.Мы знаем,что обычно при разработке бывает тестовая среда и формальная среда,и тестовая среда и формальная среды разные.Домен может быть другим.Если не настроить интерфейс, будет очень хлопотно менять интерфейс один за другим при выходе в интернет.Поэтому необходимо настроить конфигурацию.Файлы примерно так:

Первый — определить доменное имя, затем определить имя интерфейса в объекте конфигурации, getAPI(key) — получить метод интерфейса и, наконец, открыть его через модуль.При ссылке просто введите его на страницеimport domain from '../../config';, а затем способ получить URL-адрес, когда wx.requestdomain.getAPI('')

Надежность кода и отказоустойчивость

пример

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

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

После успешного выполнения запроса апплет вынесет следующие решения:

• Определите, нужно ли возвращать 200, если да, переходите к следующему шагу, иначе выдает ошибку
• Определить, завершена ли структура данных, если да, перейти к следующему шагу, иначе выдать ошибку

Затем вы можете выполнять соответствующие операции на странице в зависимости от ситуации.

пользовательский код ошибки

Видно, что за ошибкой, напечатанной на приведенном выше снимке экрана, будет следовать английский код gde0 или gde1.Для чего используется этот код?На самом деле он используется для сообщения об ошибках.Когда наш апплет подключается к сети, некоторые пользователи могут столкнуться Отправляемый отчет об ошибке обычно отправляется нам через снимки экрана.Если перед этим не было кода подсказки об ошибке, он может быть основан только на подсказке об ошибке, чтобы найти ошибку, но во многих случаях подсказка об ошибке одна и та же, и мы не знать, что не так вообще. Таким образом, ошибка не может быть обнаружена быстро, поэтому добавляется такой код подсказки. Когда пользователь отправляет снимок экрана, мы можем быстро найти ошибку и решить ее в соответствии с этим кодом ошибки. код подсказки Предлагаемое имя выглядит следующим образом:

• Не должно быть слишком длинным, около 3 букв
• уникальность
• Четко

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

модульный

Великий бог в нашей группе сказал:Смысл модульности в том, чтобы разделять и властвовать, а не в повторном использовании. Раньше я думал что модуляризация только для повторного использования.На самом деле это не так.Каким бы малым ни был модуль,его можно модульизовать,даже если это просто простой стиль.Это не для повторного использования,а для удобного управления . Многие студенты часто помещают некоторые общие элементы стиля js в app.wxss и app.js для вызова.На самом деле это имеет недостаток, то есть ремонтопригодность относительно плохая.Если это относительно небольшой проект, то это хорошо, но грядет главная проблема проекта. И проект итеративный, его невозможно всегда разрабатывать одним человеком, и он может быть передан для разработки другим позже, поэтому проблемы, которые будут вызваны:

• Контент в app.wxss и app.js будет только увеличиваться, потому что другие не уверены, какие из них бесполезны, и не решаются их удалить, они могут только добавлять в них что-то, что приводит к раздутым файлам, что не способствует обслуживанию.
• app.wxss и app.js действительны для каждой страницы и менее удобочитаемы с точки зрения удобочитаемости.

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

Модульный стиль

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

Как упоминалось ранее, модульность не в размере.Даже простой стиль может быть модульным.Просто импортируйте его там, где он используется, и вы будете знать,где он полезен,а где нет.Это ясно и понятно.

модульность js

Модульность js делится на две части, одна часть — это модульность общедоступных js, а другая часть — модульность js страниц, то есть разделение бизнеса и данных.

публичная модульность js

Наиболее часто используемые общедоступные js включают в себя вход в WeChat, всплывающее окно, запрос и т. д. Обычно я помещаю его в папку unit.Вот пример API всплывающего окна WeChat:

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

toast() — это инкапсулированный всплывающий API, не правда ли, он выглядит гораздо более освежающим!

Модуляризация бизнеса и данных

Модульность бизнеса и данных означает, что бизнес и данные разделены и не влияют друг на друга.Бизнес отвечает только за бизнес, а данные отвечают только за данные.Вы можете видеть, что на странице будет на один api.js больше, чем на обычных страницах.

Этот файл в основном используется для получения данных, а index.js в основном используется для обработки данных, поэтому разделение труда четкое.По сравнению с прошлым гораздо лучше получать данные и обрабатывать данные на одной странице, и я получать здесь данные, возвращая объект promise. , а также удобно обрабатывать некоторые асинхронные операции.

составной

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

Суммировать

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

• Разделите структуру каталогов проекта
• Подготовьте файл конфигурации интерфейса
• Обеспечение надежности кода и отказоустойчивости
• Настройте код сообщения об ошибке, чтобы облегчить обнаружение ошибок
• модульность стиля и модульность js
• составной

Напоследок выложу фрагмент кода структуры каталогов проекта, можете изучить его, и вместе обсудить, если возникнут вопросы:Developers.WeChat.QQ.com/Yes/1UV HR DMT7…