Подробный разбор исходного кода Vue.js: функция конструктора объектов

Подробный разбор исходного кода Vue.js: функция конструктора объектов

От автора: эта серия представляет подробный разбор исходного кода Vue.js, чтобы проиллюстрировать основные концепции JavaScript. Мы постараемся рассмотреть концепции настолько детально, что бы их смогли понять даже новички в JavaScript. Начнем с того, что представляет собой конструктор объекта.

Функция конструктора объектов Vue

Экземпляр Vue является наиболее логичной темой для начала рассмотрения исходного кода Vue.js. Как поясняет руководство Vue.js: «Каждое приложение Vue начинается с создания нового экземпляра Vue с помощью функции Vue». В исходном коде Vue.js новые экземпляры Vue создаются с использованием функции конструктора объектов Vue:

function Vue (options) {
  if (process.env.NODE_ENV !== 'production' &&
 !(this instanceof Vue)
  ) {
 warn('Vue is a constructor and should be called with the `new` keyword');
  }
  this._init(options);
}

Функция конструктора объектов является образцом для создания других объектов. Согласно конвенции функции конструктора объектов обычно начинаются с заглавной буквы:

function Vue (options) {
[. . . .]
}

Мы вызываете функцию конструктора объектов с ключевым словом new. Например, вы можете вызвать функцию конструктора Vue следующим образом:

var vm = new Vue({
  // параметры
})

Вызов функции конструктора объектов возвращает новый объект и устанавливает ключевое слово this для возвращаемого объекта. Функция конструктора объектов Vue принимает один параметр: options.

Фреймворк VUE JS: быстрый старт, первые результаты

Получите бесплатный курс и создайте веб-приложение на трендовой Frontend-технологии VUE JS с полного нуля

Узнать подробнее
function Vue (options) {
[. . . .]
}

Функция конструктора объектов Vue проверяет, является ли текущая среда не производственной средой с использованием оператора if:

[....]
  if (process.env.NODE_ENV !== 'production' &&
 !(this instanceof Vue)
  ) {
 warn('Vue is a constructor and should be called with the `new` keyword');
  }
[....]

Если текущая среда является производственной средой, короткая схема && дает false, а остальная часть выражения не оценивается. Если вы находитесь в среде разработки, функция конструктора объекта проверяет, не является ли this instanceof Vue.

[....]
  if (process.env.NODE_ENV !== ‘production’ &&
 !(this instanceof Vue)
  ) {
 warn(‘Vue is a constructor and should be called with the `new` keyword’);
  }
[....]

Если вы находитесь в среде разработки, и this не instanceof Vue, функция конструктора объектов вызывает функцию warn и передает строку в качестве параметра, информирующего разработчика о том, что Vue следует вызывать как конструктор функции с ключевым словом new:

[....]
  if (process.env.NODE_ENV !== ‘production’ &&
 !(this instanceof Vue)
  ) {
 warn(‘Vue is a constructor and should be called with the `new` keyword’);
  }
[....]

Мы рассмотрим детали реализации функции warn в другой статье. Если вы были внимательны, то должны были заметить использование одинарных кавычек и тиковых кавычек, передаваемых функции warn:

warn('Vue is a constructor and should be called with the `new` keyword');

Использование тиковых кавычек внутри одиночных кавычек имеет очевидную выгоду предотвращения преждевременного закрытия кавычек. Наконец, конструктор функции Vue вызывает метод this._init и передает любые параметры, переданные в качестве параметров во время вызова функции конструктора объекта:

function Vue (options) {
  [....]
  this._init(options);
}

Но подождите секунду. Где находится метод ._init, определенный для объект this? Как мы видели, он не определен в вызове функции конструктора объекта. Быстрый поиск по исходному кода показывает, что метод ._init добавлен в Vue.prototype в отдельной функции с именем initMixin.

Мы рассмотрим initMixin в следующий раз. Если вам нравится серия и вы хотите мотивировать меня продолжать работать, хлопайте, следите, комментируйте или делитесь ссылками на статьи.

Источник: https://medium.com/

Редакция: Команда webformyself.

Фреймворк VUE JS: быстрый старт, первые результаты

Получите бесплатный курс и создайте веб-приложение на трендовой Frontend-технологии VUE JS с полного нуля

Узнать подробнее

VUE JS. Быстрый старт

Практический курс по созданию веб-приложения на VUE JS с полного нуля

Получить

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree