jQuery 转 ES6，以及如果你不需要 JS 框架该怎么办……

结果

我们的学习

最后的一些想法、感受和情绪

本文最初发表于Medium。

几年前，如果你需要为网站添加一些交互式功能，你很可能会选择使用 jQuery 的 DOM 选择器，因为它界面简洁美观。然而，如今随着“现代 JavaScript 框架”的兴起，越来越多的开发者开始使用这些工具（这当然是有原因的）。但是，如果你的网站不需要状态管理，也不需要声明式 UI 呢？我们是否还应该继续使用 jQuery？或者是否存在其他更好的方法，例如ES6 方法？

我想声明（workInProgress: true），这仍然是一个正在进行中的项目，更像是对我们构建流程的一个高层次概述。它满足我们公司的特定需求，但可能并不适合你们。

前体

在迁移到 ES6 之前，我们的静态网站会使用 Bootstrap 等库，并根据需要进行定制，使用 jQuery 实现更复杂的交互功能。然而，一段时间后，我们发现 JavaScript 代码很快变得臃肿、结构混乱、难以维护，而且在开发人员之间难以交接。虽然这些问题不能完全归咎于我们使用 jQuery，但 BEM、SASS 和 Twig 等技术确实有助于提高代码库的模块化、结构化和可维护性，而 jQuery 则不然。作为一家不断发展的公司，我们希望改变这种状况。

计划

我们对从 jQuery 过渡到 ES6 的目标有清晰的认识，因此我们列出了一些关键特性：

• 模块化
  我们希望将 JS 文件结构拆分，使其更类似于我们的 SASS 设置，将函数分离到单独的文件中，并使用 ES6 import 来仅提取每个项目所需的内容。

• 为了提高跨项目知识和开发人员之间的项目交接
  ，我们希望鼓励功能结构的统一，至少在项目开始时如此。

• 适应性：
  有时我们会将构建好的代码交付给客户，客户会将其集成到自己的技术栈中，以添加更多数据驱动的内容。因此，无论客户的技术栈如何，我们的 JavaScript 代码都必须能够被“钩入”（没错，就是这么个流行词）并进行相应的更新。

• 在 Inktrap，我们也开发更多数据驱动型 Web 应用程序，
  这些应用程序需要使用 React 或 Vue.js 等框架，并大量使用 ES6。我们希望确保构建静态网站时，即使不使用框架，也能采用与我们更复杂的构建项目相同或类似的方法和思路。

结果

我们决定首先创建一个文件夹结构，并将我们的功能拆分成文件——具体如下：

我们在其中globals.js创建了两个全局对象，FUNCTIONS我INSTANCES现在将简要介绍一下：

FUNCTIONS：
正如你所料，这是一个包含网站中所有函数处理程序的对象，可以随时从前端调用这些处理程序来初始化任何 DOM 元素的交互性。

INSTANCES：一个由任何已初始化的类实例（我们称之为“模块
”） 组成的对象，其中包含可被任何其他 JS 函数访问的方法和回调。

然后我们为函数处理程序制定了一个通用结构，以下是一个使用示例dropdownsHandler.js：

如您所见，在函数处理程序中，我们正在初始化dropdown模块的一个新实例。为了让您快速了解其作用，以下是该模块提供的初始化方法和公共方法的示例。

现在——上述步骤可能看起来有点小题大做，仅仅是为了初始化一个简单的下拉菜单。但是，使用这种方法可以让我们在将前端系统“接入”（我知道这听起来有点奇怪）到其他客户端环境时，获得两项重要的功能。

不过在此之前，先快速看一下我们的load.js文件，该文件负责在页面加载时初始化所有函数处理程序：

使用上述初始化方法后，我们现在可以从窗口对象访问全局FUNCTIONS对象INSTANCES，并且可以在控制台中看到它们的内容：

以上可视化了我之前提到的两个重要功能——第一个功能是我们现在有了一个自定义函数处理程序列表，可以在任何时候使用以下方式调用：
window.FUNCTIONS.dropdownHandler(‘.myPassedElement’);
这对于初始化页面加载后渲染的动态内容特别有用。

其次，我们现在还有一份已初始化实例的列表，每个实例都有自己的方法和回调函数，可以在 JS 代码的其他地方使用，例如：
window.INSTANCES.dropdowns.helloImADropdown.showDropdown();

这两种能力对于使我们的前端模板更适应任何客户端环境至关重要，因为它们现在可以“挂钩”（我保证这是最后一次）到我们 JS 的几乎任何方面。

我们的学习

我们在几个生产项目中实施了这种方法后，除了前面提到的好处之外，还学到了以下几点：

• 模块化
  带来的可维护性提升。换句话说，通过将所有功能拆分到单独的文件中，每当我们添加新功能或修复错误时，都可以轻松地将其移植到使用同一系统的其他项目中，而无需过多担心合并冲突。

• 提高跨项目知识
  如果每个函数都使用通用初始化结构构建，那么开发人员之间就更容易进行沟通，因为他们已经知道自己在寻找什么以及在做什么。

• 通过移除
  bootstrap 和 jQuery 等库，我们不再严重依赖第三方工具，并完全控制了我们的客户可以访问和使用我们前端 JS 的内容。

• 由于我们不使用依赖 JavaScript 的视图（本质上我们使用的是 HTML、CSS 和 JS 的基础技术栈），因此
  ，如果由于某种原因我们的 JS 代码无法加载，用户仍然会看到一个包含 HTML 和 CSS 的网站。实际上，我们将 JS 作为额外的交互层添加进来，并由我们的标记进行初始化。

最后的一些想法、感受和情绪

以上许多做法以前都用过，但通常是在框架而非静态网站的背景下，这正是我想到写这篇文章的原因。我认为静态网站和功能齐全的JS单页应用（SPA）之间存在一个需要关注的领域，虽然我不认为这是完美的解决方案，但我觉得这是一个好的开始。

正如我在文章开头提到的，本文主要概述了我们的构建流程，重点关注我们从 jQuery 过渡到 ES6 的过程及其带来的好处。还有很多内容我想深入探讨，例如我们如何以一致的方式从标记初始化 JS、我们的 SASS/BEM 设置，甚至可能还会开源我们的样板代码库，但考虑到时间限制，我希望这篇文章能够（相对）简洁。

不过，我计划继续汇报我们在不断变化的 JS 时代中不断学习和成长的经验。

如果您有任何反馈意见，欢迎随时联系我们——请在此留言，或在 Twitter 上给我们发消息，我们的账号是 @InktrapDesign 。