无框架JavaScript

本文由Stephan Max和Nilson Jacques进行了同行评审。 感谢所有SitePoint的同行评审人员使SitePoint内容达到最佳状态！

JavaScript框架提供了许多功能，并且它们变得越来越流行也就不足为奇了。 他们功能强大，掌握起来并不难。 通常，我们将它们用于大型和复杂的应用程序，但在某些情况下也用于较小的应用程序。 在学习了如何使用框架之后，您很想在要开发的每个应用程序中使用它，但是您忘记了有时仅使用旧的良好JavaScript可能就足够了。

在本文中，我将讨论使用框架的优缺点以及在开始项目之前应考虑的事项。

框架功能强大

框架有其优势。 首先，您不必担心名称空间，跨浏览器兼容性，编写多个实用程序函数等。 您将处理由一些行业内最好的开发人员编写的组织良好的代码。 如果您对框架非常了解，那么您的开发速度将会非常快。 此外，如果您对任何功能都有疑问，可以轻松找到框架文档，大量免费教程以及乐于助人的广大社区。 如果您需要更多的人力怎么办？ 招聘没有麻烦。 如果您知道给定框架的工作原理，那么无论该项目是关于什么的，您都将感到宾至如归。 框架本身的代码每天都在发展，变得更好，更强大，更安全。 因此，您可以专注于重要的事情：您的工作。

总之，框架非常强大，并提供许多功能，例如模板，路由和控制器。 但是问题是：您的项目真的需要它们吗？

通常，框架是一个不错的选择，但这并不是在每种情况下都适用。 框架具有许多有用的功能，这些功能反过来又增加了它的权重。 不幸的是，在某些情况下这种权重是不合理的，因为较小的项目仅使用框架的一小部分。 在这种情况下，原始JavaScript（有时称为Vanilla JavaScript）可以解决所有问题。

通过使用原始JavaScript，您的代码将更轻巧，并且更易于开发和扩展。 您也不必花时间学习使用一个或多个框架。 每个框架都以不同的方式工作，因此，即使您已经知道要创建什么功能（也许是因为您过去已经做过），您也会根据选择使用的框架来实现不同的功能。 的确，您对JavaScript框架越熟悉，学习新框架的速度就越快，但是您始终必须花一些时间来加深该主题（或多或少取决于您的技能）。 而且，您选择的框架总是有可能不会受到欢迎而被抛弃。 相反，使用您自己的代码没有这种可能性，并且您不必担心更新和破坏较新版本的更改。

框架有时是过大的，它们会使小型项目的结构变得过于复杂。 如果只需要它们的一些功能，则可以自己开发。

例如，现代JavaScript框架最流行的功能之一就是双向绑定。 如果需要，可以编写自己实现的代码。 这是仅在100行JavaScript中进行双向绑定的示例 。 一百行，没有复杂性，其效果类似于框架的解决方案，并且最重要的是，缺少不需要的功能。 为了实现此功能，还有一种更现代的方法。 您是否听说过Object.observe（） ？ 这是使用此解决方案的双向绑定功能的示例 。 似乎太过未来了，因为并不是每个浏览器都支持它，但是对其进行浏览仍然很有趣。 如果您想查看其他解决方案， 也可以检查bind.js。 类似的功能，但没有Object.observe() 。

不使用框架的缺点

有时，忽略JavaScript框架可能是一个不错的选择，但是您必须记住这种方法的弊端。

首先，没有框架，您就没有坚实的基本结构。 在真正开始开发产品功能之前，您必须做很多工作。 您要添加的功能越多，所需的时间就越多。 如果您是为客户开发的，那么这可能是一个非常重要的问题，因为截止日期很少友好。

其次，代码质量很重要。 显然，这个因素取决于开发人员的技能。 如果您很有经验，那么质量会很好。 但是并不是每个人都真正掌握JavaScript，并且您不希望项目的源头变得混乱。 写得不好的框架不会生存太久，而写得好的框架则可以为个人和商业项目保持高质量。

既然我们在谈论代码，我们就不会忘记错误。 每个严肃的框架都是由一两个以上的人制定的。 在成千上万的人的贡献下，很难发现bug。 如果您决定避免使用框架，则您和您的团队只会检查您的应用。 如果您继续进行深入测试，那将花费您更多的时间，而您可能没有！

同一点对安全性也有效。 由于前面提到的相同原因，它可能比框架中的要差得多。 如果有几个人在同一个项目上工作，则更有可能发现安全问题。 我们可以说开发应用程序并不难，而困难的部分是使其变得良好和安全。 如果您不喜欢专家，或者担心安全性，那么框架或库将对您有很大帮助。

还有跨浏览器的兼容性问题。 有了一个好的框架，您就可以忽略这一点。 如果使用原始JavaScript，则必须自己处理它或忽略它（不建议这样做）。

我还想提到雇用开发人员的问题。 这可能是一个实际的问题，尤其是如果您想在以后的开发阶段中这样做。 除非他们有良好的经验，否则您必须先详细解释项目源，然后他们才能开始工作，这又要花费时间。 即使您教了他们所有他们需要知道的知识，通常也没有项目代码的技术文档。 如果您的新员工有问题，则有责任提供帮助。 当然，您可以自己编写文档，但这会花费时间和精力。

使用还是不使用框架？ 这是问题。

根据到目前为止讨论的观点，您什么时候应该使用框架？ 您必须考虑几个方面。

让我们从最重要的时间开始：时间。 如果您的客户给您紧迫的最后期限，则不选择不使用框架。 在这种情况下，您必须开始快速发展，并要有坚实的基础。 如果您有经验，带有其现成解决方案的框架非常适合该工作。

另一个有趣的案例是大型应用程序。 如果您要构建很大的东西，那么使用一个好的框架是您的最佳选择。 它们具有您可能需要的所有功能，并且提供了开箱即用的安全且高性能的代码。 自己编写所有内容就像重新发明大多数功能的转轮一样，这也很耗时。

如果您在没有框架的情况下构建复杂的应用程序，则可能会遇到无框架JavaScript的所有弊端。 其中之一是可能的错误。 如果您的应用程序必须可靠并且您不是专家，那么框架是一个不错的选择。 即使您是专家，对复杂应用程序进行深入测试也可能会花费您很多时间。 如果您有，但客户不介意，请继续编写自己的代码。 但是通常没有这种安慰。

在某些情况下，官方文档非常有限，但是如果给定的框架足够流行，您将轻松找到所需的答案。 对于初学者来说，使用框架进行开发似乎更简单，因为他们不必处理要自行开发的结构，而他们只需“遵循框架的规则”即可。

最后，如果您并不孤单，并且拥有一支庞大且不断变化的团队，那么框架就像天赐之物。 例如，如果您的应用是使用AngularJS编写的，并且您聘请了一位了解该应用的开发人员，那么他/她将为您的项目提供出色的支持。 如果您使用my-company-framework.js ，事情可能会困难得多。

如果您不太了解JavaScript，那么独自编写代码只会带来危害。 您的代码可能有错误，不安全且效率不足。 但是，如果您知道自己在做什么，则为特定应用程序编写的代码会更好地工作。 对于您来说，扩展起来可能更简单，并且可以避免加载大量未使用的功能。 因此，如果您有时间和经验，那么不采用框架可能是一个不错的选择。

对于具有很多定制功能的大型应用程序，情况更是如此。 您的应用程序以大量用户为目标这一事实并不意味着来源必须非常复杂。 如果您的应用程序很大但很简单，那么使用大型框架不需要的功能可能会花费您很多钱。 在大型应用程序中，您可能会碰壁框架并不得不开始使用效率低下的解决方法。 如果您的应用程序非常具体，则应首选其他方法。 框架非常灵活，但是不能预测所有情况。 您是唯一知道需要什么的人。

有时是否使用框架的决定全取决于个人喜好。 如果您的应用程序不是很复杂，则可以设置自己的工作区。 最好为每个项目创建一个特定的工作区，但这并不总是可能的。 您需要高超的技巧来做到这一点。

让我们在路中间相遇

现在，我已经讨论了框架的利弊，让我们谈谈另一种可能性。 假设您有一个小型项目，不想使用大型框架，但截止日期很紧。 你是做什么？

您不必卷起袖子每天工作12个小时即可满足要求。 当考虑框架时 ，您可能会想到大量功能，但并不总是这样。 对于要求不高的应用程序，有许多小型轻巧的框架和库。 有时它们可​​能是最佳选择。

您可以采用许多简约的JavaScript框架。 例如，您可以给Sammy一个只有16kB和5.2K压缩和gzip压缩的机会。 Sammy基于插件和适配器的系统构建，仅包含您需要的代码。 将您自己的代码提取到可重用的插件中也很容易。 对于小型项目来说，这是一个很棒的资源。

或者，您可以使用超小型Min.js ，这是一个JavaScript库，可用于执行简单的DOM查询和挂钩事件监听器。 由于其类似jQuery的样式，因此感觉非常直观且易于使用。 其目标是返回原始DOM节点，然后可以使用element.classList ， element.innerHTML和其他方法进行操作。 以下是如何使用它的一个小示例：

$('p:first-child a').on('click', function (event) {
  event.preventDefault();
  // do something else
});

显然，它有一些限制。 例如，您不能关闭事件。

您是否需要另一种选择？ 在这种情况下，我可以建议您Riot.js （1 kB）。 Riot.js是一个具有很多创新思想的库，其中一些取自React 。 但是，它试图变得很小并且更紧凑。

例如，获取“ 自定义”标签 。 如果使用Polymer，则可以在React中使用它。 它允许您编写人类可读的代码，然后将其转换为JavaScript。 在Riot.js中 ，无需任何外部库就可以拥有它。

以下是官方网站上的示例，该示例显示了代码在转换之前的外观：

<body>

  <h1>Acme community</h1>

  <forum-header/>

  <forum-content>
    <forum-threads/>
    <forum-sidebar/>
  </forum-content>

  <forum-footer/>

  <script>riot.mount('*', { api: forum_api })</script>
</body>

这只是框架引以为傲的所有功能之一。 您可以检查网站以了解有关此项目的更多信息 。

我也很喜欢Microjs 。 它是“微框架的微站点”，为您提供了一组精简而快速的JavaScript框架和库。 他们每个人都做一件事并且做得很好。 您可以根据需要选择任意多个框架。 有大量的模板，Ajax，HTML5功能可供选择。 Microjs可帮助您摆脱所有未使用功能的框架，并具有另一个优点。 提供的框架和库确实非常小而简单。 即使找到大于3-4Kb的文件，也很少！

回到前面提到的没有大型框架的双向绑定示例，为了在Microjs中使用此功能，您认为我们需要做什么？ 我们将不得不访问其网站并搜索准备集成的解决方案。 你猜怎么着？ 在那里！ 这些解决方案之一是一个称为双发射器的微库，其大小仅为3.7kB。

现在，我们要一个简单的模板系统。 在搜索框中输入“模板” ，您会发现一长串列表，您可以在其中选择所需的内容。 您还可以将一个微型库与其他微型库结合使用，从而为您的特定项目创建一个特定的工作区。 您不必自己准备，也不必处理不需要的功能。

有很多可能性可供选择，有些比其他更好。 您必须仔细选择它们，然后选择最合适的一个。

最后，我想提到另一个伟大的项目TodoMVC 。 如果您感到困惑并且不知道在项目中使用什么，那么这就是适合您的工具。 精巧的JavaScript框架列表每天都在增长，并且很难检查每个框架的功能。 TodoMVC为您完成这项工作。 这是一个项目，提供与当今大多数流行的JavaScript MV *框架中使用MV *概念实现的相同Todo应用程序。

结论

总之，您是否应该使用框架？ 该决定由您决定。 在开始开发之前，您必须考虑自己的真正需求，然后衡量每种方法的所有优缺点。

如果选择一种框架，请搜索最适合您的框架。 如果不是，请搜索隐藏在微框架或微库中的现成解决方案。 如果没有什么对您有好处，而您想自己开发。 没有现成的食谱。 您是知道您的需求和技能的人。 只有一个建议：专注于您的目标，您将找到正确的解决方案。

你呢？ 您是否尝试过这些解决方案之一？ 哪一个？ 请在下面的部分中随意分享您的评论。

From: https://www.sitepoint.com/frameworkless-javascript/