我正在使用Angular开发一个UI应用程序,我可以选择以下一个或多个CSS框架:
Bootstrap 4 Foundation Angular Material ng-bootstrap或ngx-bootstrap . 我可以购买的预制模板 . 许多其他人或新人......
是否有最佳实践来设计Angular应用程序,以便更容易切换到另一个不同的CSS框架?
我认为,一个选项是定义一个新的Feature模块,它将导入特定CSS Framework的所有控件,然后,我在其上编写一个包装器并在我的应用程序中使用它 .
例如,我可以将 md-button
与我的 custom-button
包装在模块的组件模板中,并在我的应用程序中使用它 .
这种方法是否有效或者我应遵循标准设计实践吗?
1 回答
你可以这样做,但在我看来,你在浪费你的时间 . 过去有多少次你改变了设计框架?可能永远不会 .
组件的视图比低级组件(如按钮和输入)要多得多 . 所有的布局和响应都会影响视图的构成 . 例如,假设您使用了材料设计并将
md-button
包装在my-custom-button
中 . 随着应用程序的成熟,您无疑将在容器周围添加填充或边距,保持这些控件使其外观和感觉更具实质性 . 这一天是在块上切换到新的设计模式,猜猜是什么?即使您可以快速更换这些按钮以获得新外观,但是您不需要使用自己的组件包装每个组件的开销 .更有意义的是为每个组件创建单独的模板 .
假设您在Material中完成了整个应用程序,现在您想切换到New Hotness . 您首先会完成并重命名所有模板:
login.component.html
>login.component.material.html
然后创建专门针对新框架的新模板:
login.component.newhotness.html
接下来,创建一个构建过程,该过程将根据某些配置在构建时交换
templateUrl
. 使用此策略,您将能够轻松集成Ionic或NativeScript等技术,这些技术不会将HTML用于其视图,而是基于XML的完全不同的语法 .Key takeaways:
不要使用您自己的变体包装现有库组件
在单独的文件中创建组件模板
当一天切换到新框架时,为每个组件创建新模板,并使用描述包含它的框架的名称定义旧模板
获得报酬! :)