Вглубь по кроличьей норе

Author: vvscode

02-dig-into-the-core.md

@@ -1,177 +1,174 @@
-# Dig into the Core
+# Глубже в ядро
 
-This article belongs to the series [Read Vue Source Code](https://github.com/numbbbbb/read-vue-source-code).
+Эта статья - часть серии [Читая исходный код Vue](https://github.com/vvscode/tr--read-vue-source-code).
 
-In this article, we will:
+В этой статье мы:
 
-- Find the real Vue implementation
+- найдем, где реализована библиотека Vue
 
+## Ищем реализацию Vue
 
-## Find the Real Vue Code
+В [прошлой части](https://github.com/vvscode/tr--read-vue-source-code/blob/master/01-find-the-entry.md) мы нашли точку входа с упоминанимем `import Vue from './runtime/index'`. Продолжим.
 
-We have found the entry at [previous article](https://github.com/numbbbbb/read-vue-source-code/blob/master/01-find-the-entry.md) with the clue `import Vue from './runtime/index'`, let's go along that.
-
-Open `./runtime/index`.
+Откроем `./runtime/index`.
 
 ```javascript
 /* @flow */
 
-import Vue from 'core/index'
-import config from 'core/config'
-import { extend, noop } from 'shared/util'
-import { mountComponent } from 'core/instance/lifecycle'
-import { devtools, inBrowser, isChrome } from 'core/util/index'
+import Vue from 'core/index';
+import config from 'core/config';
+import { extend, noop } from 'shared/util';
+import { mountComponent } from 'core/instance/lifecycle';
+import { devtools, inBrowser, isChrome } from 'core/util/index';
 
 import {
   query,
   mustUseProp,
   isReservedTag,
   isReservedAttr,
   getTagNamespace,
-  isUnknownElement
-} from 'web/util/index'
+  isUnknownElement,
+} from 'web/util/index';
 
-import { patch } from './patch'
-import platformDirectives from './directives/index'
-import platformComponents from './components/index'
+import { patch } from './patch';
+import platformDirectives from './directives/index';
+import platformComponents from './components/index';
 
 // install platform specific utils
-Vue.config.mustUseProp = mustUseProp
-Vue.config.isReservedTag = isReservedTag
-Vue.config.isReservedAttr = isReservedAttr
-Vue.config.getTagNamespace = getTagNamespace
-Vue.config.isUnknownElement = isUnknownElement
+Vue.config.mustUseProp = mustUseProp;
+Vue.config.isReservedTag = isReservedTag;
+Vue.config.isReservedAttr = isReservedAttr;
+Vue.config.getTagNamespace = getTagNamespace;
+Vue.config.isUnknownElement = isUnknownElement;
 
 // install platform runtime directives & components
-extend(Vue.options.directives, platformDirectives)
-extend(Vue.options.components, platformComponents)
+extend(Vue.options.directives, platformDirectives);
+extend(Vue.options.components, platformComponents);
 
 // install platform patch function
-Vue.prototype.__patch__ = inBrowser ? patch : noop
+Vue.prototype.__patch__ = inBrowser ? patch : noop;
 
 // public mount method
-Vue.prototype.$mount = function (
+Vue.prototype.$mount = function(
   el?: string | Element,
-  hydrating?: boolean
+  hydrating?: boolean,
 ): Component {
-  el = el && inBrowser ? query(el) : undefined
-  return mountComponent(this, el, hydrating)
-}
+  el = el && inBrowser ? query(el) : undefined;
+  return mountComponent(this, el, hydrating);
+};
 
 // devtools global hook
 /* istanbul ignore next */
 setTimeout(() => {
   if (config.devtools) {
     if (devtools) {
-      devtools.emit('init', Vue)
+      devtools.emit('init', Vue);
     } else if (process.env.NODE_ENV !== 'production' && isChrome) {
       console[console.info ? 'info' : 'log'](
         'Download the Vue Devtools extension for a better development experience:\n' +
-        'https://github.com/vuejs/vue-devtools'
-      )
+          'https://github.com/vuejs/vue-devtools',
+      );
     }
   }
-  if (process.env.NODE_ENV !== 'production' &&
+  if (
+    process.env.NODE_ENV !== 'production' &&
     config.productionTip !== false &&
-    inBrowser && typeof console !== 'undefined'
+    inBrowser &&
+    typeof console !== 'undefined'
   ) {
     console[console.info ? 'info' : 'log'](
       `You are running Vue in development mode.\n` +
-      `Make sure to turn on production mode when deploying for production.\n` +
-      `See more tips at https://vuejs.org/guide/deployment.html`
-    )
+        `Make sure to turn on production mode when deploying for production.\n` +
+        `See more tips at https://vuejs.org/guide/deployment.html`,
+    );
   }
-}, 0)
+}, 0);
 
-export default Vue
+export default Vue;
 ```
 
-`import Vue` again! Let's look through this file step-by-step:
+И снова`import Vue` ! Разберем файл по пунктам:
 
-- import config
-- import util funcions
-- import patch, mountComponent
-- import directives and components
-- install platform specific utils
-- install platform runtime directives & components
-- install platform patch function
-- define public mount method
-- console log the message of Vue Devtools and development mode warning(now you know the origin of your console logs)
+- импортировать конфиг
+- импортировать вспомогательные функции
+- импортировать `patch`, `mountComponent`
+- импортировать директивы и компоненты
+- установим утилиты, специфичные для окружения
+- установим динамические директивы и компоненты
+- установим патчи для окружения
+- определим интерфейсный метод `mount`
+- выведем в консоль сообщение для панели разработчика Vue и предупреждение о дев-режиме (теперь вы знаете источних этих сообщений)
 
-As you can see, this file just adds some platform specific things to Vue.
+Как видите, этот файл просто добавляет несколько специфичных штук в окружение для Vue.
 
-Two important points here:
+Здесь два важных момента:
 
-1. `Vue.prototype.__patch__ = inBrowser ? patch : noop`, we will talk about patch in later articles, it's responsibility is updating the webpage, which means it will manipulate the DOM
-2. `mount` again, so the core implementation of `mountComponent` is encapsulated twice
+1. `Vue.prototype.__patch__ = inBrowser ? patch : noop`, мы поговорим про патч в следующих частых - он отвечает за обновление страницы, т.е. за манипуляции с DOM
+1. и снова `mount`, так что оригинальная реализация `mountComponent` имеет две обертки
 
-After checking the Vue directory, we can find there is another platform `weex`. It's a framework similar to ReactNative and it's maintained by Alibaba.
+Заглянув в директорию Vue, мы можем найти там еще одну платформу - `weex`. Этот фреймворк похож на ReactNative и он поддеживается Alibaba.
 
-Go on with our new clue `import Vue from 'core/index'`, again it `import Vue from './instance/index'`, open `./instance/index`.
+Потянем за нашу новую ниточку `import Vue from 'core/index'`, и снова `import Vue from './instance/index'`, откроем `./instance/index`.
 
 ```javascript
-import { initMixin } from './init'
-import { stateMixin } from './state'
-import { renderMixin } from './render'
-import { eventsMixin } from './events'
-import { lifecycleMixin } from './lifecycle'
-import { warn } from '../util/index'
-
-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')
+import { initMixin } from './init';
+import { stateMixin } from './state';
+import { renderMixin } from './render';
+import { eventsMixin } from './events';
+import { lifecycleMixin } from './lifecycle';
+import { warn } from '../util/index';
+
+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)
+  this._init(options);
 }
 
-initMixin(Vue)
-stateMixin(Vue)
-eventsMixin(Vue)
-lifecycleMixin(Vue)
-renderMixin(Vue)
+initMixin(Vue);
+stateMixin(Vue);
+eventsMixin(Vue);
+lifecycleMixin(Vue);
+renderMixin(Vue);
 
-export default Vue
+export default Vue;
 ```
 
-`function Vue (options) {`! We made it! This is the core Vue implementation.
+`function Vue (options) {`! Мы это сделали. Мы нашли реализацию ядра Vue.
 
-Below are five mixins, their names imply what they are.
+Ниже мы видим 5 миксин с говорящими именамию
 
-But why the core Vue function is such short? Only a `this._init`?
+Но почему основная функция Vue такая короткая? Только `this._init` ?
 
-Init process will be introduced in next article, now let's talk about how Vue is designed.
+Процесс инициализации будет описан в следующей части. Сейчас давайте немного поговорим о том как Vue устроен.
 
-Vue is a big open source project, which means it must be divided into many layers and parts. Let's start from the core and reverse the path to see how Vue is organized:
+Vue - это большой проект с открытым исходным кодом, что означает, что он должен быть разбит на множество слоев и частей. Давайте начнем с ядра и в обратном порядке посмотрим как организован Vue:
 
-- Core: the origin Vue function, calls `this._init()`
-- Mixins: five mixins, add init, state, events, lifecycle and render functions to core
-- Platform: add platform specific things to core, add patch and public mount functions
-- Entry: add configs and outmost $mount function to core
+- Ядро: собственно фукнция Vue, которая вызывает `this._init()`
+- Примеси (Миксины) - 5 миксин, добавляющие функции инициализации, управления состоянием, события, жизненнего цикла и функции отрисовки к ядру
+- Платфома - добавляет специфичные для окружения вещи к ядру, добавляет функции обновления и монтирования
+- Точка входа - добавляет к ядру конфигурции и внешнюю функцию `$mount`
 
-The entire Vue function is composited after four steps.
+Вся функция Vue состоит из 4х шагов.
 
 ![](http://i.imgur.com/cpz3Izw.jpg)
 
-This multiple layers pattern has many advantages:
-
-1. Decouple. Different layers focus on **different** things
-2. Encapsulate. Each layer **only** focus on itself
-2. Reuse. Closer to core, more **generic**. This makes Vue easy to compatible with different platforms and easy to build for different environment
-
-This layer pattern reminds me of OSI layer model, maybe Vue's author is inspired by that?
+Использование множествнных слоев имеет много преимуществ:
 
-## Next Step
+1. Развязка кода. Разные части отвечают за **разные** вещи.
+1. Инкапсуляция. Каждый слой сфокусирован только на себе
+1. Переиспользование. Чем ближе к ядру, тем больше обобщенного кода. Это делает Vue легко адаптируемым под разные платформы и разные окружения.
 
-Vue's core function just calls `this._init()`. What does it do? We will reveal it in next article.
+Этот подход со слоями напоминает модель OSI, может автор Vue вдохновлялся именно ей?
 
-Read next chapter: [Initialization](https://github.com/numbbbbb/read-vue-source-code/blob/master/03-init-introduction.md).
+## Следующий шаг
 
-## Practice
+Главная фукнция Vue просто вызывает `this._init()`. Что происходит дальше? Мы рассмотри это в следующей части.
 
-Find a friend and try to explain Vue's layer pattern to him/her.
+Следующая часть: [Инициализация](https://github.com/vvscode/tr--read-vue-source-code/blob/master/03-init-introduction.md).
 
-Nothing is perfect. Can you tell some disadvantages of this pattern?
+## Практика
 
+Возьмите приятеля и попробуйте объяснить ему/ей подход со слоями, который использован во Vue.
 
+Ничто не совершенно. Можете рассказать о недостатках такого подхода?