如何安装svelte_svelte拒绝的流行功能如何在malina js中上线

最新推荐文章于 2020-10-12 01:59:39 发布

weixin_26755331

最新推荐文章于 2020-10-12 01:59:39 发布

阅读量96

点赞数

文章标签： python linux

原文链接：https://medium.com/better-programming/how-a-popular-feature-declined-by-svelte-went-live-in-malina-js-1a08fdb9dbc4

版权

如何安装svelte

I found that developers in the Svelte community very often talk about passing a class to a child component, how a parent can impact the styles of a child component, and changing margins, colors and other styles. Besides this, Svelte has a collection of issues that relate to this:

我发现Svelte社区中的开发人员经常谈论将类传递给子组件，父组件如何影响子组件的样式以及更改边距，颜色和其他样式。除此之外，Svelte还有一系列与此相关的问题：

Using :global can solve some cases, but it’s not a very convenient way and can have unwanted effects on other components.

使用:global可以解决某些情况，但这不是一种很方便的方法，并且会对其他组件产生不良影响。

So we in the Malina.js community (yes, we have a small one) experimented with some things and decided to try passing a class to a component.

因此，我们在Malina.js社区(是的，我们有一小部分)进行了一些尝试，并决定尝试将类传递给组件。

物业$ class (Property $class)

So the first approach that we thought about is to create some $class-object/string that contains transferred classes with a CSS-hash of the parent component. But using a parent hash can give unwanted effects and CSS classes can be flowed out. To make these classes isolated, they should have their own CSS-hash. So besides parent and child components having their own CSS-hashes, transferred classes also have to have their own CSS-hash to become isolated from the parent and impact only certain components.

因此，我们考虑的第一种方法是创建一些$class -object / string，其中包含带有父组件CSS哈希的已传输类。但是使用父哈希可能会产生不良影响，并且CSS类可能会流出。为了使这些类隔离，它们应该具有自己CSS哈希。因此，除了父组件和子组件具有自己CSS哈希值之外，转移的类还必须具有自己CSS哈希值才能与父组件隔离并仅影响某些组件。

As a result, a parent component collects all classes and transfers them to a child component in a $class with a transfer hash.

结果，父组件收集了所有类，并将它们转移到$class带有转移哈希值的子组件中。

Image for post — Pass classes to $class of child component.

Live example
现场例子

命名为$ class (Named $class)

But having only one $class may be not enough. What if a component has a header and body? In this case, I want to pass 2 class properties. For this, you can use $class.header and $class.body in the child component. For a parent component, it should be possible to specify a child class name and parent class name, but we have not found a good syntax for this. <Child class.header:parentclass={cond} /> looks ugly, so we just cut it to <Child .header="parent" />. For a class directive:

但是仅拥有一个$ class可能是不够的。如果组件具有标题和正文怎么办？在这种情况下，我想传递2个类属性。为此，您可以在子组件中使用$class.header和$class.body 。对于父组件，应该可以指定子类名称和父类名称，但是我们没有找到很好的语法。 <Child class.header:parentclass={cond} />看起来很丑，所以我们将其剪切为<Child .header="parent" /> 。对于类指令：

<Child .header:parent={cond} />

Live example
现场例子

If you have any ideas for what syntax fits better, please leave them in the comments.

如果您对哪种语法更合适有任何想法，请留在注释中。

导出或导入类 (Export or Import a Class)

Using $class in a template does not look very natural, so we made it possible to adopt a class from a parent to be able to use it as a usual class and use a class directive.

在模板中使用$class看起来并不自然，因此我们可以采用父级的类，从而能够将其用作常规类并使用class指令。

In Svelte, we have the keyword export to be able to accept attributes/props from a parent component and the specific CSS syntax :global. So we made a similar syntax to accept a CSS-class from the parent:

在Svelte中，我们使用关键字export可以接受来自父组件的属性/属性以及特定CSS语法:global 。因此，我们做了类似的语法来接受来自父级CSS类：

:export(.class-name) {…default-style…}

There is probably a better keyword for this. You also can suggest it in comments.

可能有一个更好的关键字。您也可以在评论中提出建议。

Example: We have a button in a child component. It has a .btn class, so in styles, I can split .btn into two rules:

示例：我们在子组件中有一个按钮。它有一个.btn类，因此在样式上，我可以将.btn分为两个规则：

.btn {font-style: italic}
:export(.btn) {color: deepskyblue}

In this case, the first rule (with font-style) is always applied to the button, but the second rule (with color) is applied only if the parent doesn’t pass the btn class. Otherwise, the class from the parent will be applied to the button.

在这种情况下，第一个规则(带有font-style )始终应用于按钮，但是第二个规则(带有color )仅在父级未通过btn类的情况下才应用。否则，来自父级的类将应用于按钮。

Live example
现场例子

The hashes in the example (css-1, css2…) were set by an option cssGenId to look simpler. You can specify any style for a hash through this issue.

示例中的哈希值( css-1, css2… )由选项cssGenId设置，看起来更简单。您可以通过此问题为哈希指定任何样式。

If you want to use classes with another name in a parent component, it’s easy to remap it. In the example below, I forward the classes red + bold to one button and purple to another button.

如果要在父组件中使用其他名称的类，则很容易重新映射它。在下面的示例中，我将类red + bold转发到一个按钮，将purple类转发到另一个按钮。

Live example
现场例子

Also, you can use a class directive.

另外，您可以使用类指令。

隔离 (Isolation)

Malina.js creates an extra CSS-hash for transferring classes. It lets you isolate such classes to not affect other components, as it can be with :global.Also, it doesn’t mean a parent can forward any class to your component. By using the keyword :export, you specify which classes you want to accept, so it’s like a contract between the parent and child components. It’s similar to what export does for properties.

Malina.js创建了一个额外CSS哈希来传输类。它可以让您隔离此类而不影响其他组件，就像:global 。此外，这并不意味着父级可以将任何类转发到您的组件。通过使用关键字:export ，您可以指定要接受的类，因此就像父组件和子组件之间的协定一样。这类似于export对属性所做的操作。

结论 (Conclusion)

This solution doesn’t create new styles (rules). It just appends new selectors to existing styles, so CSS doesn’t grow rapidly.
此解决方案不会创建新样式(规则)。它只是将新的选择器添加到现有样式中，因此CSS不会快速增长。
Almost all the work is done in compile time. It’s quite lighter in runtime.
几乎所有工作都是在编译时完成的。在运行时要轻得多。
Transfer-hash ensures classes will not be flowed out.
Transfer-hash确保类不会流出。
The :export keyword lets you accept only expected classes, so you still have a control in a child component.
:export关键字仅允许您接受预期的类，因此子组件中仍具有控件。

These points show that passing classes to components can be safe, lightweight, and give some flexibility to design reusable components.

这些要点表明，将类传递给组件可以安全，轻便，并为设计可重用组件提供了一定的灵活性。

All the examples in this article can be found on GitHub.

可以在GitHub上找到本文中的所有示例。

Also, you can read an article about fragments — one more interesting feature Svelte could have.

另外，您可以阅读有关片段的文章 -Svelte可能具有的另一项有趣功能。

What’s the next feature we should experiment with? Thanks for reading.

我们应该尝试的下一个功能是什么？谢谢阅读。