WEB:不用任何框架开发 Web 应用程序：可能吗

过去流行的是Angular，然后是React，现在是Vue

</ul>。

中国信通院何宝宏：阿里的区块链专利数量不算多，不用担心巨头垄断:近日，中国信息通信研究院云计算与大数据研究所所长何宝宏接受采访时表示，从生态和历史的角度看，阿里的专利数量并不算多，即便目前是全球第一位，也才不过几十个。未来区块链行业的专利数量会很大，阿里的专利数量在整个行业中的占比会非常小，完全不用担心巨头通过专利等垄断市场的情况出现。[2018/6/11]

模板中的条件或循环语句该怎么办？且不说这可能从来都不是一个好主意，你可以只用JS来实现逻辑，然后使用上面的技术将结果插入到模板中。

事件

现在，我们有了基本的模板，那么该如何将事件绑定到DOM节点呢？这里也有几种选择：

HTML事件处理器代码可以被插入到HTML源代码中，但这并非最好的办法，因为指定的处理器只在指定的范围内可用。

事件处理器API可用于所有通过DOMAPI或HTML标记模板字面量函数创建的节点。

那么定制或业务事件该怎么办？如果我需要对应用程序的某个组件触发的一些事件作出反应该怎么办？这里也有多种处理方式：

自定义事件：你可以通过扩展EventTarget来创建自己的事件类，并派发或监听它们，就像“标准”事件一样。

理论上说，使用EventEmitter也是一种办法，但它很少被使用。

观察者模式：你可以构建自己的观察者，也可以考虑使用RxJs，它是这方面的标准。你只需要构建一个Subject，并在发生事件时通知所有订阅者，让订阅者对事件做出反应。

组件

虽说开发普通的应用程序不同于开发复杂的基础设施，但如果一些东西在系统中会多次出现，那么将它们设计成可重用组件仍然是一个好主意。无论你使用何种技术，也无论是业务还是技术，一定程度粒度的抽象仍然是有用的：将与同一业务概念相关的数据和规则封装成一个可重用的对象，或者构建可以在应用程序多个地方进行实例化的小部件，总归是个好主意。

创建组件的方法有很多，具体视自己的需求而定。早在2017年，Mev-Rael就提出了很多技巧，用于处理JavaScript组件的状态、自定义属性和视图。当然，我们不要拘囿于别人推荐的技术，而是要先考虑自己的需求，然后再选择合适的技术。

除了标准的小部件组件，任何一个组件都应该能够：

将逻辑和视图拆分开。把它们混合在一起通常会导致代码不易于维护，还会降低灵活性。

参数化组件的行为或视图。

通过触发事件的形式通知订阅者组件中发生了某些事件。

同步：如果发生一些事件，组件应该能够进行重绘。这个使用反应式开发库可以很容易实现。

在任何情况下，无论你选择了什么样的设计策略，你的组件都必须能够提供一些HTML渲染结果。你可以使用包含HTML代码的字符串，但HTMLElement通常是更好的选择，而且性能更好。

此外，你可能希望使用来自第三方的外部组件。由于专有框架的流行程度较高，它们可以更大程度地利用社区开发的库和组。它们中的大多数实际上与纯JS实现的特性并没有太大不同，但问题是，它们缺乏互操作性，所以到最后你会发现自己需要的其实是纯JS或Web组件。

所幸的是，这样的库确实存在，比如VanillaJSToolkit，尽管可能不太常见。在Web组件方面，webcomponents.org列出了2000多个元素。甚至还有普通的Web组件，只是它们与我们要讨论的不太相关。

路由

在SPA中管理路由需要使用WebHistoryAPI。虽然这并不复杂，但你仍然可能希望将其委托给简单的路由器库，如Navigo。

你所要做的就是在路由时用一个DOM元素替换另一个DOM元素。

延迟加载

按需加载JavaScript代码是任何一个Web应用程序都需要考虑的问题。你一定不希望为了显示一个登录界面而加载全部的应用程序代码。

早在2009年，在Web框架出现之前，JamesBurke就发布了RequireJS来解决这个问题。从那时起，随着模块化的出现，出现了更多的技术。从ES6开始，我们可以动态加载代码。在Node中可以，在浏览器中也可以：

那么如何将模块分拆到单独的文件中？打包器可以为你做这些工作。

需要注意的是，在导入路径里你应该只使用常量，否则打包器就无法猜到你想要加载什么，就会将所有可能的文件都打包在一个文件中。例如，awaitimport(./welcome/${moduleName})将把所有东西都打包到指定的目录中，因为打包器不知道变量moduleName在运行时会是什么。

原生应用程序

越来越多的框架为原生平台提供了运行、迁移或编译应用程序的方法，以便将它们作为独立应用程序部署到Android或iOS移动系统上。

除了考虑开发真正的原生应用程序之外，更普遍的解决方案是将Web应用程序嵌入到原生容器中，比如之前的PhoneGap或ApacheCordova，现在的NativeScript，或者像Electron这样的原生Web应用程序包装器，或者Electron的轻量级后继者Tauri。

服务器端渲染

很多框架在前端和后端运行的代码是相似的，这样更容易实现对SEO友好的服务器端渲染。

这可能是一个又酷又便利的特性，但需要注意的是，它也可能导致服务器锁定。因此，在向应用程序引入框架锁定之前，你需要考虑它对项目、基础设施、客户端技术等方面的影响。

所幸的是，你也可以在不使用框架的情况下实现这个特性。

从服务器端渲染

采用普通的实现方案在一开始看起来很简单：不就是返回HTML吗？是的，你已经有现成的组件了，但是：

你还需要一个服务器端DOMAPI，因为默认情况下，服务器端不提供DOMAPI。

你的渲染组件不能假设是DOM是在客户端或服务器端，也就是说，不要使用全局DOM，因为在服务器端，每个请求都需要一个DOM。要做到这一点，你需要从应用程序上下文中选择DOM对象，而不是直接获取。

在客户端和服务器应用程序之间共享渲染组件有多种办法，比如将其发布在包存储库中，但最灵活的应该是让应用程序包引用monorepo中的模块。

添加交互性

然而，一旦HTML元素被转换成字符串，在这些元素上设置的所有事件处理器都丢失了。为了恢复交互性，你需要一些“补水”步骤，也就是注入脚本，让它们在客户端执行。框架因其普适性很难做到这一点。就拿影子DOM来说，它们不断尝试改进算法，希望能够以最聪明的方式做到这一点，但如果我们把问题缩小到应用程序层面，就会变得简单很多。

当然，在普通的服务器应用程序中做到这一点也意味着需要将JS脚本注入到响应消息中。

普通的解决方案让你可以控制在哪里、什么时候以及附加哪些东西：你可以先只发送HTML，再加载基本的交互性JavaScript，然后加载更多，等等。

这比本文中提到的任何一个东西都简单，因为它们是应用程序代码，而不是通用的框架代码。

国际化

多年来，国际化问题都是通过库来处理的。要自己集成这些库也很容易，但你也可以选择自己实现一个，因为与通用库相比，自己的实现可以支持更简单、更有效的消息类型。

这里为你提供了：

类型检查：每个消息都有一个静态类型，所以IDE可以检查你是否使用了有效的消息属性，并为你提供自动补全功能。

翻译完整性检查：在为所有消息键提供所有语言的翻译之前，无法通过编译。

你所需要做的就是实例化与用户语言环境相关的消息类。通用库不会提供这种特定于业务的消息类型。

工具

如果你想要摆脱对强约束性软件技术栈的依赖，那你很可能也想摆脱对工具的依赖：你不希望只有靠着它们才能向前走。你不希望被一个你无法解决的构建问题所困扰。

话虽如此，你仍然很难避免使用这些工具。大多数情况下，你的产品代码必须以某种方式打成包，包括缩小体积、混淆、代码拆分、摇树优化、延迟加载、包含样式等。毫无疑问，现有的打包工具如Webpack、Parcel、ESBuild或Vite会做得比你更好。

你所能做的是：

尽可能少用转译。例如，使用TypeScript可能是件好事，但它会带来额外的复杂性，你的工具链中必须有相应的工具来处理这种复杂性。CSS也一样，特别是最新版本，不值得你用预处理器来处理它们。

尽可能少用工具。你用的工具越多，就越有可能出问题或无法满足你的需求。

如果确实需要使用工具，请选择最流行的工具，因为它们经过实战测试，更有可能满足你的需求。过早使用最新的打包工具可能会为你节省几秒钟的构建时间，但这些时间很可能都不够用来理解工具文档、处理bug或处理因缺乏支持而导致的问题。

最大的挑战

说到底，最大的挑战不是技术上的，而是关于人的：

你要走出舒适区。希望你终将能够明白，使用普通的解决方案并不是那么困难，框架的复杂性比它们带来的好处要大得多。此外，你可能会看到更多新的API，而且Web比你想象的更现代、更强大。

至于其他人，你可以尝试说服他们。他们可能不愿意这么做，因为任何人都不愿意开启自己从未尝试过的旅程。

其他人可能会跟你说：

“你要开发自己的框架”：不，我们要开发的是应用程序，而不是框架。

“你要写更多的代码”：也许，但也许不会太多，因为这需要与框架的样板代码进行比较。但不管怎样，需要加载的代码都会更少。

“你将不断地重新发明轮子”：当然不是。不使用框架是为了不遵循它们预定义的规则，但我们并没有忘记DRY原则，我们仍然可以使用经过实战测试的第三方库。

“你需要为每一个功能写更多的代码”：不，你可以遵循自己的规则，而不是使用框架样板代码。

“没有文档可看”：肯定不会有框架文档，但你仍然需要写应用程序文档。值得一提的是，使用模式有助于你自动文档化你的软件设计。你只需要关心应用程序的代码文档，而如果你多使用一个框架，就需要多看一份文档。

“不会有约束或模式来指导开发人员”：不，如果你确实需要约束，没有什么能阻止你。

“你会错过性能提升”，比如曾经被大肆炒作的虚拟Dom：不，因为需要这些“性能提升”的是框架本身，而不是应用程序。相反，通用框架更有可能错过一些可以通过自定义代码实现的性能提升。

你遇到这个问题是因为你没有使用框架。每一个问题都会被归咎于因为没有使用框架。因为大多数开发人员的经验是，所有正常运行的东西都使用了框架，默认情况下，不使用它们将被认为是有风险的。一旦出现问题，无论是否与不使用框架有关，这个假设都会被认为是正确的。他们忘记了在使用框架时也会遇到类似的问题。

“我们找不到开发者”：他们会说很难找到能够写纯JS代码的开发者。这句话是对的，也是错的。因为很多开发者会发现自己更习惯于使用框架。如果他们从来没有使用过或不了解基本的WebAPI，那么他们可能会对从零开始构建一个Web应用程序感到害怕。但是，如果你想要开发高质量的应用程序，就不应该去找这种类型的开发者。当然，现在找React开发者很容易，但你需要的不只是React开发者，而是优秀的开发者。

“你无法获得与框架相同的代码质量”。当然，框架或开发库通常是由行业里有经验的开发者编写的。但是，框架的代码主要与框架特定的活动相关，与你的应用程序无关。此外，即使使用了框架，你仍然可能做出糟糕的设计，写出糟糕的代码。应用程序的质量总是更多地取决于团队的质量，而不是因为缺少框架。

“你无法获得与框架相同的性能”：不，我们可以获得更好的性能。行业里关于框架采用了可以“提升性能”的复杂技术的说法就不在这里讨论了，因为它们可能主要被用来解决框架通用解决方案的性能缺陷。

毫无疑问，性能最好的框架是那些在普通代码之上添加层数较少的框架。框架的“优化”更多的是为了弥补框架本身的开销。

结??论

不使用框架构建Web应用程序并非意味着要自己构建框架，它是关于在不使用通用引擎的情况下开发应用程序，目的是：

避免散失控制和被隐含约束；

可以进行优化。

也就是只编写特定于应用程序的代码，包括使用开发库。你真正应该关注的框架是你自己的框架，也就是那个特定于应用程序的框架。这是真正的“专注于业务”，也是最有效的。

这并没有你想象的那么难，特别是有了现代标准的加持。

标签：WEBAPIDOMHTMLWeBlockAPIXGoodomyHTML币

币安币热门资讯