Index.html之禅

＆＃34;它可能适用于较小的事物，但我不会将其用于较大的事物。 这些已经相当不错了，但是在简单的index.html允许执行的操作中还可以找到许多其他优点，例如： 在脚本上使用Web API（导航，Web组件，3d，音频，网络访问等） 实际上，任何现代复杂的Web应用程序所做的一切都可以放入单个index.html文件中。 这主要是管理文件，资产，组件等的复杂性和增长问题。 我们已经开发了各种非常复杂的工具来帮助我们。 前端开发已经变得如此复杂，以至于任何人都很难掌握它。 如果使用单个index.html而不是所有那些Create-React-App / Babel / WebPack / npm / yarn / d / sass / styled-components / optimizers来驱动所有开发，那么生活会困难多少？

我不知道该如何回答，但会尝试为更简单，更裸的裸体提供一些启发。应用开发方法。

首先，使用单个index.html作为应用程序的唯一管理文件至少存在两个问题：

这两个将是我下一篇文章的主题。现在，我将为仅使用index.html的简单方法奠定基础。

＆lt;头＆gt; ＆lt;！-页面meta-＆gt;＆lt;！-＆lt; link＆gt;＆＃39;在meta内容之后转到--＆gt;＆lt;！-＆lt; script type =＆＃34; module＆ ＃34;＆gt; s go here-＆gt; ＆lt; /头＆lt;＆lt;身体＆gt; ＆lt;！-功能标记为正文中的类字符串-＆gt; ＆lt;！-模态到这里-＆gt; ＆lt;主要＆gt; ＆lt;！-显示的内容在这里-＆gt; ＆lt; /主要＆gt; ＆lt;！-＆lt; template＆gt;＆＃39;转到此处-＆gt; ＆lt;！-＆lt; script＆gt;＆＃39;最后到这里-＆gt; ＆lt; /身体＆gt;

这种结构做出了一些折衷，但对于大多数复杂的应用程序而言，总体而言已足够。它与普通的HTML页面not没什么不同。

JavaScript模块正在＆lt; head>加载，这是可以的，因为默认情况下会延迟模块脚本，并且不会阻止文档其余部分的解析。他们可以去任何地方，我更喜欢将＆lt; body＆gt;主要逻辑和更直接的脚本。

牢记这一点，这是Web应用程序的三件事，可以通过这种简单结构轻松完成这些工作：

大多数Web应用程序都有一个充满整个屏幕的加载页面，有些甚至在加载时会以炫酷的动画分散我们的注意力。

在以上结构中，加载页面进入模式区域。就在＆lt; main＆gt;之前内容。这允许大量内容，例如＆lt; canvas＆gt ;、＆lt; img＆gt;。放置为＆lt; main＆gt;子对象，并在其后面完全加载（着色器，图像数据等），然后清除加载状态并将其显示给我们的朋友。

整个可见空间都被该＆lt; div＆gt;当应用程序良好运行所需的所有东西都准备好时，然后将其删除。

在index.html上预先加载而不需要任何JS来首先显示它，这也有助于我们在bots＆amp; spiders炼狱中的业力得分，将我们都喜欢的Web净化成有用的煤渣块。

没有lib将用于路由。路由将由使用popstate和pushstate的浏览器历史记录的简单操作组成。基本方法是：

在其内部调整相关的＆a＆＃39; s和其他链接导航标签以执行pushState而不是其默认行为。可以将过滤器应用于仅考虑具有相对路径的＆lt; a＆gt;＆s;没有rel = nofollow属性的

这仅适用于Web应用程序，以减少JS数量并利用现有功能。对于类似于常规页面的任何东西，浏览器的行为已经足够好了，那里不需要JS。

如果网络应用使用少于20或15种可能的路由模式，则此方法应能很好地工作。大多数Web应用程序的平均数量可能不到10个。这种简单的方法应该绰绰有余。在我可以预见的用例中，无需使用诸如DOM或任何大型库之类的更复杂的东西来管理路由。

我将把它发展成为一个非常简单的路由/模板库，即将发布。作为参考，这是我在许多Grid迭代之一中为模板引擎执行的一些代码：旧的路由代码。

我赞赏浏览器将页面状态与历史记录相关联的方法，但是，对于Web应用程序，我发现将这两件事分开存放更简单，更易管理：

大多数Web应用程序经常在几个地方标记并重复一个通用HTML结构。它可以用于菜单项，列表项，甚至是整个部分，如侧栏或模式和吐司元素。一种通用的做法是找到一个通用的HTML结构，并在需要时进行细微调整以重复该结构。

HTML模板具有许多技术性和可能性。大多数JS框架通常以不同程度的合理复杂性以自己的方式解决它。

Web浏览器已经提供了一种非常灵活和复杂的方式来通过Web Components技术套件进行模板制作。在我的大多数情况下，将首选纯HTML并直接在该index.html上编写。对于DRY大声说话的其他情况，请使用简单的静态＆＃34;复制/粘贴＆＃34;标签就足够了，一个小的原型可能是这样的：

customElements。定义（＆＃34;模板内容＆＃34 ;，类扩展HTMLElement {构造函数（）{超级（）;此.attachShadow（{模式：＆＃34;打开＆＃34;}）。appendChild（document。getElementById （this。getAttribute（＆＃39; from-id＆＃39;））.content。cloneNode（true））}}）;

此小代码定义了一个新的WebComponent标签＆lt; template-content＆gt ;，该标签从其from-id属性读取元素ID，然后在DOM上获取该ID的对应元素，将其克隆并替换为它。

这很有用，因为它提供了一种在文档上标记HTML / SVG内容的快速方法。有助于在客户端复制SVG元素，列表和节点子树。

＆lt;导航＆lt;按钮onclick =＆＃34;工具（＆＃39;撤消＆＃39;）＆＃34;＆gt; ＆lt; template-content from-id =＆＃34;工具按钮内容＆＃34; /＆gt; ＆lt; template-content from-id =＆＃34;工具-撤消＆＃34; /＆gt; ＆lt; /按钮＆gt; ＆lt;按钮onclick =＆＃34;工具（＆＃39;绘制＆＃39;）＆＃34;＆gt; ＆lt; template-content from-id =＆＃34;工具按钮内容＆＃34; /＆gt; ＆lt; template-content from-id =＆＃34;工具绘图/＆gt; ＆lt; /按钮＆gt;＆lt; /导航＆gt;＆lt;模板ID =＆＃34;工具按钮内容＆＃34;＆gt; ＆lt;！-这里有些复杂的内容-＆gt; ＆lt; /模板＆gt;＆lt;模板ID =＆＃34;工具图＆＃34;＆gt; ＆lt;！-这里还有一些其他复杂的内容-＆gt; ＆lt; /模板＆gt;

保持单个index.html可能足以满足更简单的裸露应用开发方法。如果不需要大的依赖关系，跟踪文件的版本控制，编译器等等，这可能就足够了。它直接在浏览器已经提供的功能之上工作，并暗示了一种更简单，更精简的开发风格。

它不支持TypeScript，也不会自动解决依赖关系并将其捆绑在一起。

这是使用此方法的两个未解决的问题，我计划展示一种可能的解决方案，该解决方案与此简单性相当。这将是我的下一个技术职位（可能在下周发布）的主题。敬请关注。