История самообучения JL № 26

Серия [История самообучения JL]

[Net Ninja] JS Regular Expressions
[Net Ninja] Vue JS2 (Part1, Part2, Part3)
[Net Ninja] Vuex
[Net Ninja] Python3 (Part1, Part2, Part3)
[Net Ninja] Django (Part1, Part2, Part3)
[Net Ninja] Sass (Part1, Part2)
[Sean Larkin] Webpack4 (Part1, Part2, Part3, Part4)
[Sarah Drasner] VueJS (Part1, Part2, Part3, Part4, 
                       Part5, Part6, Part7)
[Evan You] Advanced VueJS (Part1, Part2(current), Part3,
                           Part4, Part5, Part6, Part7)

🌲 Это вторая часть моего резюме Эвана Ю «Расширенные возможности Vue.js с нуля» на FrontendMasters.

[2. Writing Plugins]
    2-1. Introducing Writing Plugins
    2-2. Challenge 4: Writing a Simple Plugin

[ 2–1. Представляем плагины для написания ]

function (Vue, options) {
  // … plugin code
}

Некоторые из часто используемых методов при написании подключаемого модуля Vue включают API Vue.mixin.

Миксины — это гибкий способ распространения повторно используемых функций для компонентов Vue. Объект миксина может содержать любые параметры компонента. Когда компонент использует миксин, все параметры в миксине будут «смешаны с собственными параметрами компонента. ("Официальный документ")"

Vue.mixin(options)

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

$options
  • Он существует для каждого компонента и содержит объединенный, нормализованный объект опций этого конкретного экземпляра. Причина в том, что мы знаем, что параметры компонента Vue могут поступать из многих мест, включая глобальные миксины, собственное определение компонента и параметры, которые вы передаете ему при создании экземпляра. Все эти параметры необходимо объединить и нормализовать в этот окончательный объект параметров для этого экземпляра, а это $options для каждого экземпляра.
  • Кроме того, он также содержит любые пользовательские параметры, которые вы добавили к этому компоненту. Таким образом, это не обязательно должна быть встроенная опция. Итак, мы просто объединим все здесь.

[ 2–2. Задача 4: Написание простого плагина]

ИНСТРУКЦИЯ:

Создайте подключаемый модуль, который обучает компоненты Vue обрабатывать пользовательскую опцию rules. Параметр rules предполагает наличие объекта, определяющего правила проверки данных в компоненте.

› Функция validate будет выполняться при каждом изменении foo. Если проверка не пройдена, мы запишем в консоль следующее сообщение: «foo должно быть больше единицы».

ОЖИДАЛ:

const vm = new Vue({
  data: { foo: 10 },
  rules: {
    foo: {
      validate: value => value > 1,
      message: 'foo must be greater than one' 
    }
  }
})
vm.foo = 0 // should log: "foo must be greater than one"

› Эта опция rules отсутствует в собственном API Vue. Это совершенно нестандартно. Если вы просто добавите это в ванильный компонент Vue, он ничего не сделает. Vue просто проигнорирует это.

const vm = new Vue({
  data: { foo: 10 },
  created(){
    this.$options.rules
  },
  rules: {
    foo: {
      validate: value => value > 1,
      message: 'foo must be greater than one' 
    }
  }
})
vm.foo = 0 // should log: "foo must be greater than one"

› Добавление created(){ this.$options.rules } позволяет использовать опцию rules. Кстати, мы не хотим, чтобы пользователям нашего плагина всегда приходилось вручную создавать этот хук, чтобы получить доступ к опции rules. Итак, давайте абстрагируем это внутри mixin.

const myPlugin = {
  install(Vue){
    Vue.mixin({
      created(){
        if(this.$options.rules){
          // we can do something
        }
      }
    })
  }
}
const vm = new Vue({
  data: { foo: 10 },
  created(){
    this.$options.rules
  },
  rules: {
    foo: {
      validate: value => value > 1,
      message: 'foo must be greater than one' 
    }
  }
})
vm.foo = 0 // should log: "foo must be greater than one"

› Это основа для создания плагина. Он применит этот глобальный mixin, который будет обучать каждый экземпляр Vue, созданный после этой точки. Они будут вызывать хук created при создании, а затем мы выполним наш код проверки этой пользовательской опции rules.

СОВЕТЫ:

1. Плагин должен установить глобальный примесь

2. Глобальный mixin содержит хук «created».

3. В хуке проверьте наличие this.$options.rules

ШАБЛОН:

<script src="../node_modules/vue/dist/vue.js"></script>
<script>
const RulesPlugin = {
  // Implement this!
}
Vue.use(RulesPlugin)
</script>

РЕШЕНИЕ:

› $watch позволяет нам вызывать обратный вызов всякий раз, когда это свойство наблюдения изменяется.

Преподаватель класса Эван Ю является создателем и руководителем проекта Vue.js.

Его можно найти на его личном сайте, GitHub, LinkedIn, Twitter, Medium(Evan You) и Frontend Masters.

Спасибо за чтение! 💕 Если вам понравилась эта запись в блоге, похлопайте👏