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

复选框和标签

SRE实战 互联网时代守护先锋,助力企业售后服务体系运筹帷幄!一键直达领取阿里云限量特价优惠。

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

创建< div id=" myToggledUI">使用您想要显示或隐藏的一些UI。

创建一个< input type="复选框" ID=QUOT; myToggle" style=" display: none;“>在DOM中创建一个不可见的复选框。

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

添加以下CSS。

#myToggledUI {

显示:无;

}

#myToggle:已选中〜#myToggledUI {

显示:块;

}

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

扫码关注我们
微信号:SRE实战
拒绝背锅 运筹帷幄