MrShnaider's questions

我需要从一个抽象类和从它继承的几个类创建一个层次结构。每个类都有自己唯一的名称（field NAME），用于在创建实例时初始化大量参数（为简单起见，我简单地将其替换为method printName）。这个逻辑对所有类都是一样的，所以我需要把它移到抽象类的构造函数中。并且在创建一个新的具体类时，实现一个简单的字段或一个简单的方法就足够了（新的类可以由其他开发人员创建，您需要尽量减少他们的定制）。

abstract class AClass
{
    protected abstract NAME:string;

    constructor() {
        this.printName();
    }

    private printName = () => {
        console.log(this.NAME);
    }
}

class ImpClassOne extends AClass
{
    protected NAME: string = 'name1';
}

class ImpClassTwo extends AClass
{
    protected NAME: string = 'name2';
}

const one = new ImpClassOne();
// Ожидаю в консоли 'name1'

const two = new ImpClassTwo();
// Ожидаю в консоли 'name2'
// В обоих случаях получаю 'undefined'

但新名字并没有被提起。首先处理抽象类的构造函数，它只使用它自己的字段实例NAME（并且它是未定义的），然后才处理新类的构造函数（已经看到正确的名称，但是晚了，因为设置在超类中进行）。

问题是，如何从超类中的子类中获取覆盖的名称？或者，选择所有获得的调用的结构是什么？最主要的是，在创建新类时，应该有最少的设置。在其他语言中，我不记得有这样的问题，似乎超类立即将所有内容都拉了起来。我想到了“模板方法”模式，但你也不能从构造函数中调用抽象方法。提前致谢。

在学习的过程中，我需要优化我的项目的构建过程。预处理器、图像压缩、pugjs 等。我开始寻找 webpack 和 gulp 但遇到了一个问题：可以在它们上编译的任务只能包含已经专门为它们编写的模块。也就是说，您必须使用 gulp-sass 而不是通常的 sass，它的更新频率要低得多，并且某些软件包（例如，squoosh-cli）根本不存在。我想编写一个简单地在控制台中运行类似这样的脚本：

sass --watch app/scss:dist/css
squoosh-cli auto -d dist/img app/img

但是 --watch 将使用控制台，并且没有进程会更进一步。任务运行者使用 node.js 来并行化这些过程。不要为每一行运行自己的控制台。一般来说，是否有任何程序允许您编写此类命令集并根据我的决定并行或顺序执行它们？或者也许还有其他方法可以写出我不知道的东西？我在 Windows 上工作，我通过 npm 加载包。提前致谢

有产品卡（它们看起来像产品卡）。图片，然后是标题和描述。

<section class="projects__section c-container--center-max">
    <h2 class="visually-hidden">Список проектов</h2>
    <ul class="projects__list">
        <li class="projects__item">
            <a href="#">
            <div class="card">
                <picture>
                    <source srcset="img/projects__movie-1@orig-plus.jpg 1000w" media="(min-width: 750px)"/>
                    <source srcset="img/projects__movie-1@900.jpg 900w" media="(max-width: 750px)"/>
                    <img class="card__img" src="img/projects__movie-1@orig-plus.jpg" alt="Movie 1"/>
                </picture>
                <div class="w-card__text">
                    <h3 class="card__title">The Movie</h3>
                    <p class="card__description">Movie in cinema</p>
                </div>
            </div>
            </a>
        </li>
        <li class="projects__item"></li>
        <li class="projects__item"></li>
        <li class="projects__item"></li>
    </ul>
</section>

:root {
    --max-width: 1280px;
}
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
.c-container--center-max {
    margin: 0 auto;
    max-width: var(--max-width);
}
.projects__section {
    padding: 30px 0px;
}
.projects__list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, auto));
    gap: 1rem;
    align-items: stretch;
    list-style: none;
}
.projects__item {
    --transition-time: 0.3s;
    display: grid;
    align-items: stretch;

    box-shadow: 0 0 20px rgb(142 78 199 / 20%);
    border-radius: 5px;
    
    transition: var(--transition-time) ease;
}
.card {
    display: grid;
    grid-template-rows: minmax(450px,75%) repeat(2, auto);
    grid-template-areas:
    'card__img'
    'w-card__text';

    background-color: #fff;
    transition: var(--transition-time) ease;
    overflow: hidden;
}
.card__img {
    width: 100%;
    grid-area: card__img;
    height: 100%;
    object-fit: cover;
    object-position: 50% 0;
    display: block;
    transition: var(--transition-time) ease;
    transform: scale(1);
}
.w-card__text {
    grid-area: w-card__text;
    padding: 20px;
}
.projects__item .card {
    height: 100%;
}
.card:hover .card__img{
    transform: scale(1.01);
    filter: brightness(75%);
    will-change: transform;
    transform-origin: center center;
    backface-visibility: hidden;
}

这些卡片在一个带有属性的网格容器中grid-template-columns: repeat(auto-fill, minmax(300px, auto))，它们分别被拉伸、压缩和根据屏幕改变一行中的数字。为了使图片适合块，我object-fit: cover; overflow: hidden还应用了图片width: 100%。一切正常，但是：当您悬停时，图片应该略微平滑地增加（当您移除悬停时，采用原始大小）。应用transform: scale(1.01); transition: 0.3s. 而现在的问题是：当悬停被移除时，图片恢复到原来的状态，然而，在随机情况下，在变换结束时，它会抽搐，好像重新对齐以适应块。在什么模式我无法追踪。即使它们具有相同的宽度/高度/文本部分，彼此相邻的相同图片的行为也会有所不同。例如，连续 3 张相同的图片（一排卡片），一张向下抽动，另一张向上和向左抽动，第三张根本不抽动。我知道 object-fit 不会动画，但有些图片不会抽搐，这意味着属性“可能”正常工作。这种行为可能是什么原因以及如何正确实施它？甚至在 JS 上也是可能的。提前致谢。