且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

在组件中切换CSS框架

更新时间:2023-12-06 17:06:34

您可以这样做,但是我认为您正在浪费时间.过去有多少次您退出设计框架?可能永远不会.

You could do that, but in my opinion you're wasting your time. How many times in the past have you switched out the design framework? Probably never.

一个组件的视图远不包括诸如按钮和输入之类的低级组件.布局和响应能力全都影响视图的组成.例如,假设您进行了材料设计,并将md-button包裹在my-custom-button中.随着应用程序的成熟,毫无疑问,您将在容器周围添加填充或边距,以容纳这些控件,使它的外观和材质更具实质性.是时候切换到新的设计模式了,您猜怎么着?即使您可以快速将这些按钮换成新外观,您仍将要编辑所有视图以遵循新外观.也就是说,视图远不只是构成视图的低级组件,因此不值得用您自己的组件来包装每个组件.

The view of a component is comprised much more than the low level components, like buttons and inputs. There's layout and responsiveness that all play into the composition of the view. For example, lets say you went with material design and wrapped the md-button in my-custom-button. As the application matures you undoubtedly will being adding padding or margin around containers the hold these controls that makes it look and feel more Material. The day comes to switch to the new design pattern on the block, and guess what? Even though you can quickly swap out those buttons for a new look, you're still going to be editing all your views to follow the new look. That said, views are much more than the low level components that make up them, and it's not worth the overhead of wrapping each component with your own.

更有意义的是为每个组件创建单独的模板.

What makes more sense is to create separate templates for each component.

假设您在Material中完成了整个应用程序,现在您想切换到New Hotness.首先,您需要仔细检查并重命名所有模板:

Lets say you did you entire application in Material, and now you want to switch to New Hotness. You first would go through and rename all your templates:

login.component.html> login.component.material.html

然后创建专门针对新框架的新模板:

And then create new templates specifically targeting the new framework:

login.component.newhotness.html

接下来,创建一个构建过程,该构建过程将基于某些配置在构建时交换templateUrl.使用此策略,您将能够轻松集成 Ionic

Next, create a build process that would swap the templateUrl at build time based on some configuration. Using this strategy, you will be able to easily integrate technologies like Ionic or NativeScript which do not use HTML for their views, but a completely different XML based syntax.

要点:

  • 不要用您自己的变体包装现有的库组件
  • 在单独的文件中创建组件模板
  • 当有一天要切换到新框架时,请为每个组件创建新模板,并使用描述组成该框架的框架的名称定义较旧的模板
  • 获得报酬! :)