Index.html之禅

2020-12-16 02:00: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的简单方法奠定基础。

<头> <!-页面meta-><!-< link>'在meta内容之后转到--><!-< script type =" module& #34;> s go here-> < /头<<身体> <!-功能标记为正文中的类字符串-> <!-模态到这里-> <主要> <!-显示的内容在这里-> < /主要> <!-< template>'转到此处-> <!-< script>'最后到这里-> < /身体>

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

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

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

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

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

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

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

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

在其内部调整相关的&a' s和其他链接导航标签以执行pushState而不是其默认行为。可以将过滤器应用于仅考虑具有相对路径的< a>&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大声说话的其他情况,请使用简单的静态"复制/粘贴"标签就足够了,一个小的原型可能是这样的:

customElements。定义("模板内容&#34 ;,类扩展HTMLElement {构造函数(){超级();此.attachShadow({模式:"打开"})。appendChild(document。getElementById (this。getAttribute(' from-id')).content。cloneNode(true))}});

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

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

<导航<按钮onclick ="工具('撤消')"> < template-content from-id ="工具按钮内容" /> < template-content from-id ="工具-撤消" /> < /按钮> <按钮onclick ="工具('绘制')"> < template-content from-id ="工具按钮内容" /> < template-content from-id ="工具绘图/> < /按钮>< /导航><模板ID ="工具按钮内容"> <!-这里有些复杂的内容-> < /模板><模板ID ="工具图"> <!-这里还有一些其他复杂的内容-> < /模板>

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

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

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