Как правильно (?) использовать Vue.mixin(), чтобы быть ленивым

предисловие

Большинство недавно разработанных страниц и функций в основном основаны на таблицах, получаемых из интерфейса.JSONБольшая часть данных должна быть обработана, например, метка времени должна быть преобразована или код состояния экранирован. Для таких проблем основные основные фреймворки предоставляют методы, аналогичные фильтрации.Vue, обычно определяемый на страницеfilterЗатем в файле шаблона используйте|для обработки.

Этот метод гораздо удобнее для обхода массива и промывки данных раньше, но когда я обнаружил, что многие страницы имеют одинаковыеfilterКогда мне приходилось копировать каждую страницу, это было очень больно, поэтому я решил использоватьVue.mixin()выполнитьОдин код, бесконечное повторное использование.

Наконец, всеfilterупакован вvueПлагин вызывается при использованииVue.use()можно, даже загрузитьnpmПакет, разработка различных проектов, когда вы можете напрямуюinstallиспользовать. (Учитывая, что последнее обновление относительно быстрое, этап упаковки и загрузки сначала будет медленным и будет завершен после того, как версия станет немного стабильной)

текст

Хватит болтовни, приступим к делу.

Что такое Vue.mixin

изучить новый фреймворк илиAPI, лучше всего зайти на официальный сайт, вот вложениеVue.mixin()[Нажмите на меня для просмотра]Официальное описание.

объяснить одним предложением,Vue.mixin()Вы можете смешивать пользовательские методы, которые вы создаетевсе Vueпример.

образец кода

Vue.mixin({
  created: function(){
    console.log("success")
  }
})

Запустите свой проект, вы обнаружите, что он выводится в консоль.success.

Когда эффект выходит, смысл выходит, всеVueпримерcreatedметодыизменить нанаш пользовательский метод.

Использование Vue.mixin()

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

Прерывание перед кодом, код очень простой, но мы можем написать более стандартизированно о том, как это сделать, вVueНа официальном сайте есть более подробнаяРуководство по стилю [Нажмите, чтобы посмотреть]можно обратиться.

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

Создаватьconfig.jsФайл, используемый для сохранения значения, соответствующего коду состояния, и раскрытия его

export const typeConfig = {
  1: "type one",
  2: "type two",
  3: "type three"
}

создать еще одинfilters.jsфайл для хранения всех пользовательских функций

import { typeConfig } from "./config"
export default {
  filters: {
    $_filterType: (value) => {
      return typeConfig[value] || "type undefined"
    }
  }
}

Наконец, вmain.jsимпортировать нашиfiltersНабор методов

import filter from "./filters"
Vue.mixin(filter)

Далее мы можем.vueНе стесняйтесь использовать пользовательские функции в файле шаблона

<template>
  <div>{{typeStatus | $_filterType}}<div>
</template>

плагин упаковки

Тогда просто применитеVueКак сделать плагин. После создания плагина вы можетеVue.use(myPlugin)приходи в употребление.

Сначала добавьте плагинОфициальный документ[Нажмите на меня для просмотра].

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

оVue.use()исходный код

function initUse (Vue) {
  Vue.use = function (plugin) {
    var installedPlugins = (this._installedPlugins || (this._installedPlugins = []));
    if (installedPlugins.indexOf(plugin) > -1) {
      return this
    }

    // additional parameters
    var args = toArray(arguments, 1);
    args.unshift(this);
    if (typeof plugin.install === 'function') {
      plugin.install.apply(plugin, args);
    } else if (typeof plugin === 'function') {
      plugin.apply(null, args);
    }
    installedPlugins.push(plugin);
    return this
  };
}

Очень интуитивно видеть его в финальном звонке.plugin.installметод, все, что нам нужно сделать, это справиться с этимinstallфункция.

код выше

config.jsФайл по-прежнему нужен, и здесь сохранен escape-текст, соответствующий всем кодам состояния.

СоздаватьmyPlugin.jsфайл, это плагин, который мы написали

import { typeConfig } from "./config"

myPlugin.install = (Vue) => {
  Vue.mixin({
    filters: {
      $_filterType: (value) => {
        return typeConfig[value] || "type undefined"
      }
    }
  })
}
export default myPlugin

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

существуетmain.jsфайл, мы неVue.mixin()использовать вместо этогоVue.use()чтобы завершить загрузку плагина.

import myPlugin from "./myPlugin"
Vue.use(myPlugin)

На данный момент мы завершили небольшой плагин и поместили наш экранирующий фильтр кода состояния во все экземпляры Vue, в.vueВ файле шаблона мы можем использовать {{ typeStatus | $_filterType }}, чтобы экранировать код состояния.

Эпилог

Vue.mixin()Вы можете смешивать пользовательские методывсе Vueв экземпляре.

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

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

Если вы считаете, что мой пост в блоге полезен для вас, пожалуйста, не стесняйтесь оценить его.Нравится также средство, чтобы сделать меня мотивированным =3=.

быть улучшенным

Опубликовать пакет npm

новый предмет

Использование фильтра в v-html (28 мая 2018 г.)

Недавно я столкнулся с проблемой, которая также связана с фильтрацией кодов состояния, но достигнутый эффект заключается в отображении разных кодов состояния через разные коды состояния.iconзначок, он отличается от приведенного выше текстового фильтра, который использовался выше{{ styleStatus | $_filterStyleStatus }}это использоватьv-textРендеринг, если вам нужно рендеритьhtmlЭтикетки — головная боль.

По практике предшественников он такой, добавлю кусок кода по желанию.

...
<span v-if="item.iconType === 1" class="icon icon-up"></span>
<span v-if="item.iconType === 2" class="icon icon-down"></span>
<span v-if="item.iconType === 3" class="icon icon-left"></span>
<span v-if="item.iconType === 4" class="icon icon-right"></span>
...

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

смотреть вVueдокументация, одна изAPI $options Официальный документ[Нажмите на меня для просмотра]Это привлекло мое внимание, мне просто нужен способ получить доступ к текущемуVueпримерAPI, погладив по головке, план выполнен.

Во-первых, ещеconfig.jsКод состояния, соответствующий объекту, определен в файле, здесь мы устанавливаем его соответствующее содержимое какhtmlпункт.

export const iconStatus = {
  1: "<span class='icon icon-up'></span>",
  2: "<span class='icon icon-down'></span>",
  3: "<span class='icon icon-left'></span>",
  4: "<span class='icon icon-right'></span>"
}

Далее мыfilters.jsВнесите его в файл, написание остается таким же, как и раньшеfiltersТакой же.

import { iconStatus } from "./config"
export default {
  $_filterIcon: (value) => {
      return iconStatus[value] || "icon undefined"
  }
}

Изюминка здесь, где нам нужно отрендерить в файле шаблона, использоватьv-htmlрендерить.

<span v-html="$options.filters.$_filterIcon(item.iconType)"></span>

Все готово, вам нужно отрендерить в соответствии с кодом состояния позжеiconВезде можно сделать так.

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