与 React/Angular 的跨浏览器兼容性答案

【问题标题】：Crossbrowser compatibility with React/Angular与 React/Angular 的跨浏览器兼容性
【发布时间】：2018-07-21 01:18:48
【问题描述】：

由于我是 Web 开发新手，我想要求澄清以下问题：

1) 避免跨浏览器问题的最佳做法是什么（我发现了很多关于此的不同信息）。我需要清晰、简单的“食谱”——我应该先做什么，接下来做什么。

2) 与第 1 点相关，当我们想要保持跨浏览器兼容性并从我们的项目中摆脱 JQuery 时，我们应该怎么做？

3) 如果我们可以使用带有预处理器 (SASS) 的 React/Angular 和 Flexbox/Bootstrap 等框架，我们还可以或应该做些什么来创建具有跨浏览器兼容性的专业网站？

【问题讨论】：

“跨浏览器问题”没有特定含义。现代网站在 IE8 中无法运行的事实是否可以被视为跨浏览器问题？ 避免跨浏览器问题的最佳做法是什么（我发现了很多关于此的不同信息）。我需要清晰、简单的“配方” - 检查您在 MDN 文档和 caniuse.com 中使用的每一个功能，并检查它是否可以填充以及填充到何种程度。这可以被认为足够简单吗？没有捷径。

标签： angular reactjs css cross-browser

【解决方案1】：

我可以从 Angular 的角度说话

1.) 我不会说有一个独特的配方，因为在开发过程中需要记住一些指导方针。需要注意的最重要的事情之一是代码中直接引用 DOM 的任何内容。通常不鼓励直接引用 DOM，因为当您引用 DOM 中的元素时，不同的浏览器会返回不同的对象。如果您使用 Angular，请确保使用 "@angular/platform-browser": "<ANGULAR_VERSION>", "@angular/platform-browser-dynamic": "<ANGULAR_VERSION>"，并且一如既往地确保这些依赖项的版本与您的其余 @angular 依赖项的版本相匹配。 Angular Polyfills 也值得研究，因为它们可以帮助您支持一些比其他浏览器更棘手的浏览器。永远记得经常在不同的浏览器上测试你的代码。

2.) 这实际上取决于您如何使用 jquery。有很多方法可以用 *ngFor 或 *ngIf 等 Angular 的一部分替换 jquery。 Angular 组件的模板非常灵活，您可以通过使用 Angular 函数和使用引用变量的 interpolation 让页面动态更新自己，您可以使用组件中的函数动态更新这些变量。

3.) 如果您使用 NPM，我会考虑使用 scss-bundle 依赖项。如果您也在使用 webpack，您还应该能够轻松地从 bootstrap 等框架导入样式，即@import "~bootstrap/scss/bootstrap";。您需要做的就是确保在 NPM 中安装了引导程序依赖项。一般来说，框架在生成样式时已经考虑了跨浏览器支持（以及其他方面，例如可访问性和响应性）。

【讨论】：

【解决方案2】：

这实际上取决于您所针对的浏览器。跨浏览器兼容性没有灵丹妙药。您可以使用 browserstack 查看您的网站在许多不同浏览器中的外观。您还可以使用 Chrome 开发工具并选择仿真来查看它在某些手机上的外观。请记住，React 通常是用 ES6 语法编写的，并使用 Babel 将其转换为 ES5 代码，这允许现代浏览器进行解释。 SASS 将代码转换为纯 css，因此您的浏览器兼容性取决于所使用的属性。为此，您可以使用caniuse.com

【讨论】：