Примите эту волну навыков Vue, чтобы удвоить эффективность разработки

Vue.js

За последние два месяца я использовал vue для работы с большими данными и накопил большой опыт. Наконец-то сегодня появилась возможность поделиться.

Использование компонентов

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

Введение в использование компонентов

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

  • ссылка на локальный компонент
import A from '@/component/A'
export default {
    data () {},
    components: { A }
}
  • Глобальный эталонный метод компонента
// index.js 文件
import A from '@/component/A'
A.install = function (Vue) {
  Vue.component(A.name, A)
}
export {
    A
}
// main.js 文件
import { A } from './components/index'
Vue.use(A)

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

// index.js 文件
import A from '@/component/A'
A.install = function (Vue) {
  Vue.component(A.name, A)
}
function InstallAll(Vue) {
    Vue.use(A)
}
export {
    A,
    InstallAll
}
// main.js 文件
import { InstallAll } from './components/index'
InstallAll(Vue)

Повторное использование компонентов кода подтверждения

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

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

// 最后每个页面调用的时候大概长这个样子
<auth-code :phone="phone" type="1"></auth-code>

Повторное использование любимых компонентов

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

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

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

// 最后每个页面调用的时候大概长这个样子
<collection :id="id" :status="status" @complete="complete"></collection>

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

// 最后每个页面调用的时候大概长这个样子
<collection :id="id" :status="status" type="video" @complete="complete"></collection>

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

Суммировать

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

Упомянутые выше проверочный код и функции сбора часто используются, и я обычно отношусь к ним как к глобальным компонентам (лично компоненты с количеством использований > 1 считаются глобальными компонентами), но некоторые страницы чрезвычайно сложны и содержат тысячи строк. кода на странице позже.Поиск Barra's определенно проблема. Также не забудьте разделить его и не писать один компонент в конец. В этом случае я обычно использую локальные компоненты для поддержания и улучшения простоты интерфейса.

Советы по использованию фильтров

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

Введение в использование фильтров

Как и компонент, фильтр также делится на глобальный фильтр и локальный фильтр.

  • глобальный фильтр
vue.filter('date', function (value1, value2, ...) {
    return '处理之后的结果'
})
  • локальный фильтр
export default {
    filters: {
        date (value1, value2, ...) {
            return '处理之后的结果'
        }
    }
}
  • Как использовать (глобально или локально):
// 不带参数
{{value1 | date}}
// 带参数
{{value1 | date(value2, ...)}}
// 多个过滤器
{{value1 | filter1 | filter2}}

Примечание. Первый параметр — это значение, предшествующее вертикальной черте (|).

Распространенные сценарии использования

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

  • обработка даты. Данные, передаваемые серверной частью, имеют строковый тип 2019-03-14 09:00:00. Либо это тип временной метки, но интерфейс обычно отображает только ее часть, например, только год, месяц и день, либо месяц и день. Так что есть глобальный фильтр даты, счастливы плакать. Этот фильтр предпочтительно поддерживает оба формата.
  • цифровая обработка. Очень часто оставляют несколько знаков после запятой, заменяют более одного числа буквой w или китайским иероглифом «миллиард».

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

Суммировать

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

сценарии использования примесей

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

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

Некоторые приемы, используемые в сторонних библиотеках

Некоторые приемы, используемые в роутере

  1. Хук-функция перед каждым При выполнении перехода по маршруту он будет выполняться сначала перед каждым 。 Таким образом, вы можете определить, можете ли вы переходить при переходе маршрута.Общий сценарий заключается в том, чтобы определить, вошел ли пользователь в систему и есть ли у него разрешение на определенную страницу.
// to: Route: 即将要进入的目标 路由对象

// from: Route: 当前导航正要离开的路由

// next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。

next(): 进行管道中的下一个钩子。如果全部钩子执行完了，则导航的状态就是 confirmed (确认的)。
router.beforeEach((to, form, next) => {})

Некоторые приемы, используемые в vuex

  1. навыки действия Действия могут выполнять методы асинхронно. Я обычно сталкиваюсь с такой ситуацией в своем бизнесе: получить какую-то информацию, но этот информационный интерфейс используется несколькими страницами, и очень хлопотно иметь дело с этим интерфейсом на каждой странице. Так что очень рад поделиться этой частью информации в vuex. Действие используется, потому что оно асинхронно. Укажите код ссылки:
actions: {
    getMemberShip ({ state, commit }) {
      return new Promise((resolve, reject) => {
        if (!state.memberShip) {
          // memberShip 为 ajax 请求方法
          memberShip(state.userInfo).then(res => {
            commit('setMemberShip', res)
            resolve(res)
          }).catch(err => {
            reject(err)
          })
        } else {
          resolve(state.memberShip)
        }
      })
    },
}

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

echarts

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

  1. Быстро найти элементы конфигурации

echarts содержит элементы управления, такие как заголовки, легенды, окна подсказок, метки, маркировки и т. д. Очень сложно найти стиль для настройки. Но теперь у официала добавился новый краткий справочник по терминологии.Я раньше ходил к старому официалу, чтобы проверить его.Сейчас у нового официала есть эта штука, но это благо. Мне нужно настроить эффект этого элемента управления в приведенном выше пункте, и это приведет меня к соответствующему API, с которым действительно легко летать.

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

axios

axios — это сторонний элемент управления, похожий на ajax. Так что у меня есть много идей, чтобы поделиться с вами.

  1. Столкнулся с ямой в разработке.В официальном документе сказано, что IE поддерживается, а IE вообще не поддерживает. Это связано с тем, что базовый уровень axios написан с обещаниями, а IE вообще не поддерживает это свойство, поэтому необходимо ввести profill. Решение состоит в том, чтобы ввести babel-polyfill
// 步骤1 
npm install --save babel-polyfill
// 步骤2 在 vue.config.js 文件中加入以下内容
module.exports = {
    configureWebpack: config => {
        return {
            entry: {
                app:['babel-polyfill', './src/main.js']
            }
        }
    }
}
  1. Иметь собственную конфигурацию axios по умолчанию Этот код слишком длинный, поэтому я не буду им делиться. При желании вы можете подписаться на публичный аккаунт и войти в групповое общение (QR-код находится внизу)

Суммировать

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

Категории