本文共 15688 字，大约阅读时间需要 52 分钟。
前端框架浏览器兼容解决方案
The dilemma over “custom versus ready-to-use” is pretty common in the Web world. Whether we talk about CSS, JavaScript, PHP, or a framework in any other programming language, the question of whether to use a prebuilt codebase versus using your own code arises often. This is especially important for front-end frameworks, because they’re directly responsible for the look and feel of a website.
在Web世界中，“定制与即用即用”的困境非常普遍。 无论我们是谈论CSS，JavaScript，PHP还是任何其他编程语言的框架，是否使用预构建代码库还是使用自己的代码的问题经常出现。 这对于前端框架尤其重要，因为它们直接负责网站的外观。
Front-end frameworks like and have changed the way people build websites. These tools make it a lot easier, even for non-programmers, to create complete websites with minimal effort and time investment. But such “automated” website building can have some serious drawbacks.
诸如和类的前端框架已经改变了人们构建网站的方式。 这些工具使非程序员甚至更容易地以最少的精力和时间来创建完整的网站。 但是，这种“自动”网站建设可能会存在一些严重的缺陷。
So the question remains: is the easier solution the better one?
因此问题仍然存在：越简单的解决方案越好？
Although most people tend to choose the tool that gives them the fastest and the easiest results, this, as we’ll see later, is not always the best possible option. Also, it seems that many people are more or less confused when they need to choose between custom and ready-to-use variants. That’s why, in the next part of this article, we’re going to examine the problem in more detail by exploring the advantages and downsides of each choice, which I hope will help you make the right decision when you’re faced with this question.
尽管大多数人倾向于选择能够为他们提供最快，最简单结果的工具，但正如我们稍后将看到的那样，这并不总是最好的选择。 同样，当许多人需要在自定义变体和即用变体之间进行选择时，似乎多少有些困惑。 因此，在本文的下一部分中，我们将通过探讨每种选择的优点和缺点来更详细地研究该问题，希望当您面对这个问题时，它可以帮助您做出正确的决定。 。
The reason most people prefer ready-to-use front-end frameworks is that they offer great advantages. Let’s look at the most important of them.
大多数人喜欢现成的前端框架的原因是它们具有很大的优势。 让我们看看其中最重要的。
You don’t have to be a programmer. Decent knowledge of HTML and CSS is enough, in most cases, to build a good-looking and functioning website. All the prior programming has already been done by skilled developers.
您不必是程序员 。 在大多数情况下，对HTML和CSS都具有足够的知识就足以建立一个美观和有效的网站。 所有先前的编程已由熟练的开发人员完成。
As already mentioned, a framework solution seriously minimizes the time and efforts involved in the website building process.
如前所述，框架解决方案可以最大程度地减少网站建设过程中的时间和精力 。
The plug-and-play functionality. We need only to type some markup to get a fully functional piece of code (a well-cooked HTML, CSS, and JavaScript soup) without worrying about styling, dynamic behavior, and so on.
即插即用功能 。 我们只需要键入一些标记即可获得功能齐全的代码段(精心编写HTML，CSS和JavaScript汤)，而无需担心样式，动态行为等。
When we download a framework’s package, we can be sure that we have stable and well-tested code. This means that your website will look and behave properly on all browsers that the framework supports.
当我们下载框架的软件包时，可以确定我们有稳定且经过测试的代码 。 这意味着您的网站将在框架支持的所有浏览器上正常运行。
We get regular updates with bug fixes and new features for the framework.
我们会定期更新错误修复和框架的新功能 。
Because of the popularity that ready-to-use front-end frameworks have, you can rely on help from the community in the form of articles, tutorials (for the framework learning process), and framework add-ons and extensions (for the website building process).
由于即用型前端框架非常受欢迎，因此您可以依靠社区的帮助，包括文章，教程(用于框架学习过程)以及框架附加组件和扩展(用于网站)的形式。构建过程)。
As you can see, there are so many advantages to using a framework. But if you rethink it well, you’ll see that most of these refer to the time and efforts you save during the learning and/or building process. These advantages are not strictly related to the quality of the final product. In short, they concern you and your time and efforts, but not necessarily your product.
如您所见，使用框架有很多优点。 但是，如果您重新考虑一下，您会发现其中大部分是指您在学习和/或构建过程中节省的时间和精力。 这些优势与最终产品的质量并不严格相关。 简而言之，它们关系到您以及您的时间和精力 ，但不一定涉及您 的产品 。
This is the exact opposite to our users’ and clients’ interests. They care about how good your product is, and not how much time and effort you’ve invested to learn the framework and build the website.
这与我们用户和客户的利益完全相反。 他们关心的是您的产品的质量，而不是您花费了多少时间和精力来学习框架和构建网站。
So, the easy is good, but …
所以，容易是好的，但是…
Everything comes with a price. Despite the many advantages that a ready-to-use framework offers, there are also some serious drawbacks. For an average user, or for one with modest requirements, the downsides listed below can seem insignificant, but for one looking for the best possible quality, these downsides are of highest importance.
一切都有代价。 尽管现成的框架提供了许多优点，但也存在一些严重的缺点。 对于普通用户或要求不高的用户而言，以下所列缺点似乎微不足道，但对于寻求最佳质量的用户而言，这些缺点至关重要。
Although the plug-and-play functionality sounds great, before you take advantage of using it you’ll need to invest time to learn how to use it.
尽管即插即用功能听起来不错，但是在充分利用它之前，您需要花费时间来学习如何使用它。
Because “ready-to-use” often means “one-for-all”, such a framework attempts to solve every single problem for every single situation that a front-end developer could encounter, which leads to a lot of unnecessary code.
因为“即用型”通常意味着“一劳永逸”，所以这样的框架试图针对前端开发人员可能遇到的每种情况来解决每个问题，这导致了很多不必要的代码 。
As it’s made for mass consumption, you can be almost certain that you’ll need to tweak a ready-to-use framework to meet your requirements, which will take additional time.
由于它是为大量消费而设计的，因此几乎可以肯定， 您需要调整一个即用型框架来满足您的要求 ，这将花费更多时间 。
If you don’t make any customizations your website will look like all the rest, which can damage your product’s image or at the very least do nothing to improve it.
如果您不进行任何自定义，则您的网站看起来将与其余所有网站一样 ，这可能会损害您产品的图像，或者至少不做任何改进。
In many cases, the framework you’ve chosen won’t have all the components you need, which can lead to an additional third party integration step (possibly in the form of bloated jQuery plugins or similar).
在许多情况下，您选择的框架不会拥有所需的所有组件，这可能会导致额外的第三方集成步骤 (可能是膨胀的jQuery插件或类似形式)。
You have no control over the code. If the development team decides to remove some component from the framework, you’re forced to accept that change. If you don’t want it, you have to use the a modified or older version of their product.
您无法控制代码 。 如果开发团队决定从框架中删除某些组件，那么您将不得不接受该更改。 如果您不想要它，则必须使用其产品的修改版本或较旧版本。
For the above reasons, you’re unable to achieve some of the most important goals in website building such as uniqueness, high performance, strong compatibility and usability, and a compact and unified codebase and appearance. This is very important, because in web development, especially for mobile, every small improvement can cause great impact. So, “being average” is not a smart decision.
由于上述原因，您无法实现网站建设中的一些最重要的目标，例如唯一性，高性能，强大的兼容性和可用性以及紧凑统一的代码库和外观。 这非常重要，因为在Web开发中，尤其是对于移动设备而言，每一个小的改进都会带来巨大的影响。 因此，“平均”不是一个明智的决定。
If you’re looking for the best results, then a custom framework can provide some strong advantages.
如果您正在寻找最佳结果，那么自定义框架可以提供一些强大的优势。
Once built, a custom solution will save you time and effort in the future because it was built precisely to your long-term needs.
定制解决方案一旦构建，便是为满足您的长期需求而专门构建的，它将在将来节省您的时间和精力 。
You or your team will not need to learn how to use or customize it because you’ll know your framework inside out (although new team members will need to learn it).
您或您的团队将不需要学习如何使用或自定义它，因为您将完全了解框架(尽管新团队成员将需要学习它)。
It’s optimized to satisfy only your needs, not everyone’s. This way, it’s far easier to achieve high performance.
经过优化，它只能满足您的需求，而不能满足所有人的需求 。 这样，实现高性能要容易得多。
You include only what you need and in the way you need it. No unnecessary stuff, no bloated code.
您仅包括所需的内容和所需的方式 。 没有多余的东西，没有肿的代码。
You have full control over the code and its design implementation. You can be sure that some really great feature won’t be removed or deprecated in future releases unless it aligns with your agenda.
您可以完全控制代码及其设计实现 。 您可以确定，除非符合您的日程安排，否则将来发行版中不会删除或弃用某些非常重要的功能。
Complete modularity. The flexibility of your framework depends only on you. You can use only those parts of your framework that you need for a particular project.
完全的模块化 。 框架的灵活性仅取决于您。 您只能使用特定项目所需的框架部分。
A unified code base. You can minimize the need for third-party components, which means less mix-and-match work.
统一的代码库 。 您可以最大程度地减少对第三方组件的需求，这意味着减少了混合搭配工作。
Uniqueness of your website is 100% guaranteed. Default themes in most front-end frameworks are pretty much the same, so you still need to create your own. But for your framework you can create unique themes from the very beginning.
您网站的唯一性得到100％保证 。 大多数前端框架中的默认主题几乎相同，因此您仍然需要创建自己的主题。 但是对于您的框架，您可以从一开始就创建独特的主题。
These advantages may also impact in a positive way your time and efforts, but in this case they’re addressed much more to the quality of the final product, thus giving you the ability to achieve the best performance, functionality, and appearance.
这些优势也可能以积极的方式影响您的时间和精力，但是在这种情况下，它们将更多地涉及最终产品的质量，从而使您能够获得最佳的性能，功能和外观。
The most significant downsides to a custom-made framework are the time and effort needed when building, testing, maintaining, and improving it. But the downsides can be seen as benefits. Let’s see what I mean.
定制框架最重要的缺点是在构建，测试，维护和改进框架时需要花费时间和精力。 但是不利之处可以看作是好处。 让我们看看我的意思。
It takes more time and effort. This is true for the early stages, but in the long run this work will save you time and effort.
这需要更多的时间和精力 。 早期阶段确实如此，但从长远来看，这项工作将节省您的时间和精力。
You need to test and maintain the code. But only for the browsers you’re targeting.
您需要测试和维护代码 。 但仅适用于您定位的浏览器。
The bug fixes, updates, and new features are built by you. This takes time, but you update only what you need, and implement only those features that are required for your projects. Nothing superfluous.
该错误修复，更新和新功能由您构建 。 这需要时间，但是您仅更新所需的内容，并仅实现项目所需的那些功能。 没有多余的。
I don’t know to what extent people realize it, but besides the custom and ready-to-use options there is actually a third solution, which I call a semi-custom solution. We use a semi-custom solution any time we take a ready-to-use framework such as Bootstrap and perform hard customizations on it.
我不知道人们在多大程度上意识到了这一点，但是除了自定义和即用型选项之外，实际上还有第三种解决方案，我称之为半定制解决方案。 每当我们采用现成的框架(如Bootstrap)并对其进行硬自定义时，我们都会使用半定制解决方案。
In fact, a ready-to-use framework is such only if we use it as is, or with minor cosmetic touches (soft customization). But when we do that the net result is a recognizable website with pretty much the same look and feel as many others using the same framework. On the other hand, if you need to customize deeply a particular framework before using it, then we can’t say that the framework is truly a ready-to-use solution.
实际上，仅当我们按原样使用或具有轻微修饰效果(软定制)时，即可使用的框架才是这样。 但是，当我们这样做时，最终结果是一个可识别的网站，其外观和感觉与使用相同框架的其他网站几乎相同。 另一方面，如果您需要在使用某个特定框架之前先对其进行深度自定义，那么我们不能说该框架是真正的即用型解决方案。
In forums, blogs, and similar resources, one of the main arguments against custom-made front-end frameworks centers on one question: why reinvent the wheel?
在论坛，博客和类似资源中，反对定制前端框架的主要论据之一围绕一个问题：为什么要重新发明轮子？
At first glance, such an argument sounds reasonable, but honestly, I can’t agree with such thinking. So, let’s consider the problem a bit more deeply.
乍一看，这样的说法听起来很合理，但老实说，我不同意这种想法。 因此，让我们更深入地考虑问题。
If people hadn’t reinvented the wheel over and over again throughout history, today we’d still be using primitive carts. Reinventing the wheel can be a real problem only if you replicate the wheel in the exact same manner — that is, being a copycat. But if you make it more useful, valuable, and better suited to your needs, then there’s no problem.
如果人们在整个历史中没有一次又一次地重新发明轮子，那么今天我们仍然会使用原始推车。 仅当您以完全相同的方式复制轮子(即成为模仿者)时，重新发明轮子才是真正的问题。 但是，如果您使它更有用，更有价值并且更适合您的需求，那就没有问题了。
If you take it even more deeply, you’ll see that the whole evolution process is based on the “reinventing the wheel” paradigm. Every new phase is a replication of the previous one, but with improvements (sometimes significant, sometimes not).
如果您更深入地了解它，您会发现整个进化过程都基于“重新发明轮子”范式。 每个新阶段都是上一个阶段的复制，但是有所改进(有时很重要，有时没有)。
Let’s now consider the word “develop”. This word “bring to a more advanced or effective state”, “to cause to grow or expand”, “to elaborate or expand in detail”. In other words, we’re not creating something from nothing; we’re improving what we already have. So, for a web developer this means writing better and more effective code, and expanding that code in detail — that is, adding additional functionality on top of the existing one.
现在让我们考虑“ 发展 ”这个词。 这个词的 “达到更高级或更有效的状态”，“促使其成长或扩展”，“详尽地阐述或扩展”。 换句话说，我们不是从无到有地创造东西； 我们正在改善已有的东西。 因此，对于Web开发人员而言，这意味着编写更好，更有效的代码，并详细扩展该代码-也就是说，在现有代码的基础上添加其他功能。
As you can see, reinventing the wheel is not something you need to avoid. It’s a natural process and it occurs very often. So don’t be afraid to reinvent the wheel.
如您所见，无需重新设计轮子。 这是一个自然过程，并且经常发生。 因此，不要害怕重新发明轮子。
One more thing I want to point out is that making your own custom framework has nothing to do with . Building a custom framework can’t “lead to confusion and frustration”, and you don’t need “to manually evaluate 300 different options in order to select something maintainable.” You make the framework for yourself, not for the mass. You know exactly what you need, and implement it in the exact manner you want and consider best practice. So, there’s no confusion, no frustration, and no .
我还要指出的一件事是，创建自己的自定义框架与“ 。 建立自定义框架不会 “导致混乱和沮丧”，并且您不需要 “手动评估300个不同选项以选择可维护的选项”。 您为自己而不是为大众创建框架。 您确切地知道您需要什么，并以所需的确切方式实施它并考虑最佳实践。 因此，没有混乱，没有挫败感，没有 。
Finally, here’s a to meditate on: why are people “reinventing the wheel” by having their own children, when they can instead adopt the children of others?! :)
最后，这是一个 ：为什么人们可以通过拥有自己的孩子来“重塑轮子”，而他们却可以收养他人的孩子？ :)
To make the right decision, you need to ask the right question. The right question isn’t “What’s the proper decision?” The right question is “What’s the proper decision for me?”
要做出正确的决定，您需要提出正确的问题。 正确的问题不是“什么是正确的决定？” 正确的问题是“ 对我来说正确的决定是什么 ？”
The above means that, before you make the right decision, you need a clear vision about your needs, capabilities, and resources.
以上意味着在做出正确的决定之前，您需要对自己的需求，功能和资源有清晰的认识。
As you may have already guessed, I personally prefer a custom solution any time when I’m capable of building it. But this is the proper decision for me (of course, not in every situation). To find out whether it’s a proper decision for you too, you need to answer the following questions:
您可能已经猜到了，只要有能力，我个人都会更喜欢自定义解决方案。 但这对我来说是正确的决定(当然，并非在每种情况下)。 为了找出对您来说是否也是一个正确的决定，您需要回答以下问题：
(Note: You may be completely capable of doing it and you may have plenty of free time, but if it doesn’t make sense, you should not. If some small adjustments of an existing framework will do the job, then the time and effort to build a completely new product may not be justified.)
(注意：您可能完全有能力这样做，并且您可能有大量的空闲时间，但是如果这样做没有意义，则您不应该这样做。如果对现有框架进行一些小的调整就可以完成工作，那么时间和努力开发全新产品可能是不合理的。)
If the answers of the above questions are all positive, then the custom solution is definitely the proper decision for you.
如果以上问题的答案都是肯定的，那么定制解决方案绝对是您的正确选择。
I hope this article has solved the dilemma “custom versus ready-to-use”, and from now on you’ll be able to make the right decision easier and with more confidence.
我希望本文解决了“定制与即用即用”的难题，从现在开始，您将能够更轻松，更自信地做出正确的决定。
If you’ve heard about Bootstrap but have been putting off learning it because it seems too complicated, then play through our course for a quick and fun introduction to the power of Bootstrap.
如果您听说过Bootstrap但由于似乎过于复杂而推迟学习它，请浏览我们的课程，快速而有趣地介绍Bootstrap的功能。
翻译自:
前端框架浏览器兼容解决方案
转载地址：http://hoegb.baihongyu.com/