[Перевод] 5 интересных JavaScript-находок, сделанных в исходном коде Vue
Чтение исходного кода известных фреймворков может хорошо помочь программисту в улучшении его профессиональных навыков. Автор статьи, перевод которой мы сегодня публикуем, недавно анализировал код vue2.x. Он нашёл в этом коде некоторые интересные JavaScript-идеи, которыми решил поделиться со всеми желающими.
1. Определение точного типа любого объекта
Как все мы знаем, в JavaScript существует шесть примитивных типов данных (Boolean, Number, String, Null, Undefined, Symbol) и один объектный тип — Object. А вам известно о том, как различать типы различных объектных значений? Объект может быть массивом или функцией, он может представлять собой коллекцию значений Map или что-то ещё. Что нужно сделать для того чтобы узнать точный тип объекта?
Прежде чем искать ответ на этот вопрос — подумаем о разнице между Object.prototype.toString.call(arg) и String(arg).
Использование этих выражений направлено на преобразование переданного им параметра в строку. Но работают они по-разному.
При вызове String(arg) система попытается вызвать arg.toString() или arg.valueOf(). В результате, если в arg или в прототипе arg будут перезаписаны эти методы, вызовы Object.prototype.toString.call(arg) и String(arg) дадут разные результаты.
Рассмотрим пример.
const _toString = Object.prototype.toString
var obj = {}
obj.toString() // [object Object]
_toString.call(obj) // [object Object]
Выполним этот код в консоли инструментов разработчика браузера.
В данном случае вызовы obj.toString() и Object.prototype.toString.call(obj) приводят к одним и тем же результатам.
Вот ещё пример.
const _toString = Object.prototype.toString
var obj = {}
obj.toString = () => '111'
obj.toString() // 111
_toString.call(obj) // [object Object]
/hello/.toString() // /hello/
_toString.call(/hello/) // [object RegExp]
Выполним код в консоли.
А теперь вызов метода объекта .toString() и использование конструкции Object.prototype.toString.call(obj) дают разные результаты.
Вот какие правила описывают в стандарте ECMAScript поведение метода Object.prototype.toString().
Описание метода Object.prototype.toString() в стандарте ECMAScript
Взглянув на документацию, можно сделать вывод о том, что при вызове Object.prototype.toString() для разных объектов будут возвращаться различные результаты.
Исследуем эту идею в консоли.
Кроме того, значение, возвращаемое Object.prototype.toString(), всегда представлено в следующем формате:
‘[object ’ + ‘tag’ +‘] ’
Если нам нужно извлечь из этой конструкции только часть tag, добраться до этой части можно, удалив ненужные символы из начала и конца строки с помощью регулярного выражения или метода String.prototype.slice().
function toRawType (value) {
const _toString = Object.prototype.toString
return _toString.call(value).slice(8, -1)
}
toRawType(null) // "Null"
toRawType(/sdfsd/) //"RegExp"
Исследуем эту функцию в консоли.
Как видите, с помощью вышеприведённой функции можно узнать точный тип объектной переменной.
→ Здесь, в репозитории Vue, можно найти код подобной функции.
2. Кеширование результатов работы функции
Предположим, имеется функция, подобная следующей, выполняющая длительные вычисления:
function computed(str) {
console.log('2000s have passed')
return 'a result'
}
Создавая такую функцию, мы намерены кешировать возвращаемые ей результаты. Когда эту функцию вызовут в следующий раз, передав ей те же параметры, что и ранее, «тяжёлый» код функции выполняться не будет. Вместо этого будет, без лишних затрат времени, возвращён кешированный результат. Как это сделать?
Можно, например, написать функцию-обёртку для целевой функции. Такой функции можно дать имя cached. Эта функция принимает, в виде аргумента, целевую функцию, и возвращает новую функцию, оснащённую возможностями кеширования. В функции cached можно кешировать результаты предыдущих вызовов целевой функции, воспользовавшись сущностью Object или Map. Вот код этой функции:
function cached(fn){
// Создаём объект для хранения результатов, возвращаемых целевой функцией после её выполнения
const cache = Object.create(null);
// Возвращаем целевую функцию в соответствующей обёртке
return function cachedFn (str) {
// Если в кеше нет подходящих результатов - функция будет выполнена
if ( !cache[str] ) {
let result = fn(str);
// Сохраняем результат выполнения функции в кеше
cache[str] = result;
}
return cache[str]
}
}
Вот пример использования вышеописанной функции.
→ Вот код подобной функции, который имеется в кодовой базе Vue.
3. Преобразование строки вида hello-world к строке вида helloWorld
Когда над одним и тем же проектом совместно работает несколько программистов, им очень важно заботиться о единообразии стиля кода. Кто-то, например, может записывать некие составные идентификаторы в формате helloWorld, а кто-то — в формате hello-world. Для того чтобы навести в этой области порядок, можно создать функцию, которая преобразует строки вида hello-world к строкам вида helloWorld.
const camelizeRE = /-(\w)/g
const camelize = cached((str) => {
return str.replace(camelizeRE, (_, c) => c ? c.toUpperCase() : '')
})
camelize('hello-world')
// "helloWorld"
→ Вот то место кода Vue, откуда взят этот пример.
4. Определение того, в каком именно окружении выполняется JavaScript-код
В наши дни, учитывая быстрое развитие браузеров, JavaScript-код может выполняться в различных окружениях. Для того чтобы лучше адаптировать проекты к различным средам, нужно уметь определять то, где именно выполняются программы:
const inBrowser = typeof window !== 'undefined'
const inWeex = typeof WXEnvironment !== 'undefined' && !!WXEnvironment.platform
const weexPlatform = inWeex && WXEnvironment.platform.toLowerCase()
const UA = inBrowser && window.navigator.userAgent.toLowerCase()
const isIE = UA && /msie|trident/.test(UA)
const isIE9 = UA && UA.indexOf('msie 9.0') > 0
const isEdge = UA && UA.indexOf('edge/') > 0
const isAndroid = (UA && UA.indexOf('android') > 0) || (weexPlatform === 'android')
const isIOS = (UA && /iphone|ipad|ipod|ios/.test(UA)) || (weexPlatform === 'ios')
const isChrome = UA && /chrome\/\d+/.test(UA) && !isEdge
const isPhantomJS = UA && /phantomjs/.test(UA)
const isFF = UA && UA.match(/firefox\/(\d+)/)
→ Вот где я нашёл этот код.
5. Различение встроенных и пользовательских функций
Известно, что в JavaScript существует два вида функций. Первый вид — это встроенные, или, как их ещё называют, «нативные» функции. Такие функции даёт нам среда, в которой выполняется код. Второй вид — это так называемые «пользовательские функции», то есть те, которые программисты пишут сами. Различить эти функции можно, учтя тот факт, что, при преобразовании их в строки, возвращаются различные результаты.
Array.isArray.toString() // "function isArray() { [native code] }"
function fn(){}
fn.toString() // "function fn(){}"
Поэкспериментируем с этим кодом в консоли.
Метод toString() нативной функции всегда возвращает конструкцию следующего вида:
function fnName() { [native code] }
Зная это, можно написать функцию, позволяющую различать нативные и пользовательские функции:
function isNative (Ctor){
return typeof Ctor === 'function' && /native code/.test(Ctor.toString())
}
→ Вот то место в кодовой базе Vue, где есть такая функция.
А вам удавалось находить что-то интересное, исследуя код в репозиториях известных JavaScript-проектов?
