Расширяемый узел Класс ошибок vs нормальный класс, синтаксис ES6 [дубликат]

Редактировать: в этом примере не применяется ни один символ.

@keyframes hide {
  0% {
    display: block;
    opacity: 1;
  }
  99% {
    display: block;
  }
  100% {
    display: none;
    opacity: 0;
  }
}

Что происходит выше, так это то, что через 99% экрана анимации будет заблокировано, а непрозрачность исчезнет. В последний момент для свойства display установлено значение none.

И самый важный бит - сохранить последний кадр после окончания анимации с использованием режима анимации-заливки: вперед

.hide {
   animation: hide 1s linear;
   animation-fill-mode: forwards;
}

Вот два примера: https://jsfiddle.net/qwnz9tqg/3/

67
задан aknuds1 23 November 2015 в 14:24
поделиться

1 ответ

tl; dr Если вы находитесь на Babel 6, вы можете использовать https://www.npmjs.com/package/babel-plugin-transform-builtin-extend

Расширение встроенных типов, таких как Array и Error, и таких никогда не поддерживалось в Babel. Это совершенно справедливо в реальной среде ES6, но есть требования, чтобы заставить его работать, что очень сложно перевести таким образом, который совместим со старыми браузерами. Он «работал» в Babel 5 в том смысле, что он не выдавал ошибку, но объекты, созданные из расширенного подкласса, не работали, как предполагалось, например:

class MyError extends Error {}

var e1 = new MyError();
var e2 = new Error();

console.log('e1', 'stack' in e1);
console.log('e2', 'stack' in e2);

приводит к

e1 false
e2 true

Пока он не выходил из строя, подкласс не получает должным образом «стек», как предполагается. Аналогично, если бы вы расширили Array, он мог бы вести себя как массив и иметь методы массива, но он не вел себя полностью как массив.

Документация Babel 5 специально называла это как

В Babel 6 классы были изменены, чтобы быть более spec-compliant в том, как обрабатывается подклассы, а побочным эффектом является то, что теперь вышеупомянутый код будет все еще не работает, но он не будет работать иначе, чем раньше. Это описано в https://phabricator.babeljs.io/T3083 , но я расскажу здесь о потенциальном решении.

Чтобы вернуть поведение подкласса Babel 5 (что помните, что все еще не правильно или рекомендуется), вы можете обернуть встроенный конструктор в свой собственный временный класс, например

function ExtendableBuiltin(cls){
    function ExtendableBuiltin(){
        cls.apply(this, arguments);
    }
    ExtendableBuiltin.prototype = Object.create(cls.prototype);
    Object.setPrototypeOf(ExtendableBuiltin, cls);

    return ExtendableBuiltin;
}

С помощью этого помощника вместо выполнения

class MyError extends Error {}

do

class MyError extends ExtendableBuiltin(Error) {}

В вашем конкретном случае, однако, вы сказали, что находитесь на узле 5.x. Узел 5 поддерживает собственные классы ES6 без пересылки. Я бы рекомендовал вам использовать их, отбросив пресет es2015 и вместо этого используя node5 , вы получите, среди прочего, родные классы. В этом контексте

class MyError extends Error {}

будет работать так, как вы ожидаете.

Для людей, не находящихся в узле 4/5 или только в Chrome, вы можете захотеть использовать что-то вроде https://www.npmjs.com/package/error . Вы также можете изучить https://www.npmjs.com/package/babel-plugin-transform-builtin-extend . Параметр approximate от этого является тем же самым поведением из Babel 5. Остерегайтесь того, что поведение не approximate определенно кратно-казенное и может не работать в 100% случаев.

86
ответ дан loganfsmyth 26 August 2018 в 07:02
поделиться
Другие вопросы по тегам:

Похожие вопросы: