我想构建一个全新的应用程序，既可以部署为混合移动应用程序，也可以部署为桌面网络应用程序。
这两个应用的逻辑和用户界面大多非常相似。 除了一些差异:
- 针对移动设备的屏幕尺寸优化(例如，移动设备中的隐藏侧边菜单与桌面设备中的展开菜单)
- 移动设备中的触摸手势 (3DTouch) 与桌面设备中的悬停功能
- 移动设备中某些元素的触摸反馈
- 移动设备中的页面导航与桌面设备中的路由导航
我想到了使用 angular-material桌面组件，以及 Ionic用于移动设备的组件和导航，因为两者都构建在 Angular 之上。
当然，我的目标是尽可能多地分享代码，包括逻辑代码和 UI 容器组件。
因此，我在为桌面 UI、移动 UI、共享 UI 和逻辑创建单独的 Angular 模块时，试图想出一种构建项目的好方法:
一种选择是为两个应用程序使用一个核心模块，导入逻辑和共享 UI 模块。然后在为每个平台构建时在特定平台 UI 模块之间切换。在此选项中，特定于平台的 UI 组件将具有相同的 selector 和 @Input，但它们呈现的 UI 会有所不同。
第二种选择是为每个将导入逻辑模块和共享 UI 组件模块的平台应用程序设置单独的核心模块。
也许有人有做过这样的事情的经验，可以分享他对涵盖所有这些的最佳项目结构的想法？
或者我建议的哪个项目结构更好？
最佳答案
根据我的经验，以下是有效的
- 创建 2 个具有独立文件结构的独立“前端”项目 在单独的目录中，使用特定的“命令行工具” 框架(Angular CLI、Ionic CLI、NativeScript CLI)。
- 创建一个包含要共享的公共(public)模块的公共(public)项目 通过“前端”项目
- 从您的代码存储库中将共享模块导入“前端” 结束'项目(例如在名为'shared'的目录下) - 确保 您使前端项目与相同的通用版本保持一致 “共享”项目的
真正的技巧是设置“共享”模块的边界，以便在不增加代码复杂性的情况下最大限度地重用(例如，通过在“共享”代码中检查环境——我避免使用环境变量定义代码是在 Ionic 还是 Angular 中运行，并根据该变量做出决定)。
我的经验法则是“前端”项目定义所有组件(即组件不共享)。
组件的逻辑很浅，通常是这样的
- 他们在
构造函数中定义他们使用的服务 - 在
ngOnInit()方法中他们订阅了 Observables services 方法返回的兴趣 - 订阅逻辑 填充包含 View 中显示的数据的变量 - 在
ngOnDestroy()中取消订阅 - 组件定义了管理前端事件的方法——例如 方法通常调用共享服务上的方法
正确的设计在编码时出现。我的意思是，一旦你建立了基本结构(即“前端”项目和“共享”项目)，你就开始为一个前端(例如浏览器的 Angular)编码。有些决定很容易做出(例如，查询后端的所有逻辑通常是共享的)。其他一些决定更棘手，逻辑越接近前端表面就越真实。一旦您看到组件中的逻辑变得越来越厚，您就会开始怀疑是否有值得分享的东西，因为其他“前端”(比如说 Ionic)也可能是通用的。如果是这种情况，那么您将进行重构，将代码移至“共享”服务。
还请记住通过测试充分保护“共享”服务。
希望对你有帮助
关于angular - 共享混合移动应用程序和桌面 Web 应用程序的代码，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44093799/