Slimvoice能代替JavaScript？

标签：灰色   渲染   指示器   使用   元素   href   dom节点   选中   资产   

对于Slimvoice（https://slimvoice.co/），我想反对JavaScript的炒作，并对整个应用程序进行服务器端渲染。您可能会说：“用户必须在使用应用程序时重新加载每个页面，这必须很慢！”我鄙视这句话！所有资产文件都经过gzip压缩和缓存，只有在发生交互时才需要加载HTML。我没有使用负载指示器。但它比我使用的许多PWA加载速度更快。如果您不相信，请打开开发人员工具的Web面板，并将Slimvoice与其他一些流行的PWA进行比较。

复选框和标签

当然，对于某些交互，页面无法重新加载。这是我最喜欢的向静态HTML页面添加交互性的特产技巧。我在Slimvoice下拉菜单 模式面板和过滤器UI中使用了这种技术，所有这些都没有JavaScript。

创建＆lt; div id=＆quot; myToggledUI＆quot;＆gt;使用您想要显示或隐藏的一些UI。

创建一个＆lt; input type=＆quot;复选框＆quot; ID=QUOT; myToggle＆QUOT; style=＆quot; display: none;“＆gt;在DOM中创建一个不可见的复选框。

无论您要将哪个DOM节点用作切换控件，请将其放在标签中，其中for属性与复选框的id属性匹配。

添加以下CSS。

#myToggledUI {

显示:无;

}

#myToggle:已选中?＃myToggledUI {

显示:块;

}

此CSS表示显示所选#myToggle元素前面的#myToggledUI元素，否则将隐藏该元素。 ?是一个非常有趣的运营商！这是一个完整的例子（https://jsfiddle.net/winduptoy/8qfvb1az/）。下面是使用＆lt; label＆gt;构建的模态面板。 ＆lt;/label＆gt; ＆lt; div＆gt;和复选框。 “取消”按钮是另一个＆lt; label＆gt;，它对应于相同的复选框，可以单击该复选框以关闭模式面板。模态面板后面的灰色遮罩（位置:固定;）也是＆lt; label＆gt;相同的复选框，所以单击模态面板的外部也关闭它。没有React组件，没有事件侦听器，只有简单的HTML。

Slimvoice能代替JavaScript？

标签：灰色   渲染   指示器   使用   元素   href   dom节点   选中   资产   

原文地址：https://www.cnblogs.com/blogst/p/10869792.html