DZone>Web开发区>动态渲染如何使用HTML和CSS？
动态渲染是如何使用HTML和CSS工作的？
我们将看到动态渲染是如何使用HTML和CSS在移动和桌面上工作的。用户可能同时在两种设备上操作，但他们的期望值变化很大。
通过
-
May.09, 22 - Web Dev Zone -教程
喜欢 (2)
评论
保存
鸣叫
1.78K浏览次数
加入DZone社区，获得完整的会员体验。
一个用户可能在移动屏幕和桌面屏幕前操作，但他们在这两种设备上的期望值变化很大。在移动设备前的用户，与在桌面前的用户相比，他们的耐心要差一些，因为他们大多是 "在路上"。移动设备已经改变了整体的用户体验，也改变了现在用户对网站的看法。简而言之，我们需要我们的内容在移动和桌面屏幕上动态地呈现，遵守他们的要求。如果我们能做到这一点，我们就可以创建一个具有特定于设备用户的内容的响应式设计。
例如，你不能把 "登录 "按钮隐藏在角落的下拉或汉堡包菜单上。虽然你可以在桌面屏幕上这样做（尽管这是一个糟糕的设计！），用户会发现它。考虑到移动设备所负责的流量大小和数据生成，开发者不能把移动设计搞乱。另外，我们在开发者端有很多东西要与用户分享，希望有一个大的屏幕空间来容纳一切。
Lorraine Patterson写了一篇题为 "移动用户研究方法"的文章。她解释了移动用户的情境是如何随着他们手中的设备而改变的，以及这种情境的改变是如何有利于和促进许多类型的研究的。不同设备上的不同模板的过程不应该与开发移动网站相混淆。在其他设备上的动态HTML和CSS渲染来自同一个源文件（和服务器！），但模板是在通过JavaScript检查设备后选择的。在这篇文章的最后，我们将能够开发这样的代码并在我们的应用程序中实现它们。但要理解动态CSS渲染的工作原理，简单介绍一下动态渲染和Lightning Web组件是必不可少的。
了解动态渲染的工作原理
动态渲染是一种有用的技术，可以优化内容的交付。在动态渲染方法中，内容可以从UCD服务或你的Web服务中提供。使用网络服务器提供内容的好处是，由于冗余路由提供了更高的可用性，它将倾向于更可靠。
在上图中，请求从爬虫被路由到Renderer，而用户请求通常是被送达。然而，当需要时，内容版本由适合爬虫的动态渲染器提供，例如，提供HTML的静态版本。你可以通过允许每个页面启用所有页面的动态渲染器。
动态渲染适合于使用爬虫不支持的JavaScript功能的内容，或可索引的、由公共JavaScript生成的、快速变化的内容。
什么是闪电网络组件？
闪电网络组件（LWC）是一个网络框架，它利用了网络组件的力量，并使它们变得非常快（因此有闪电这个词！）。LWC是轻量级的，并且不提供响应性问题，因为它提供所有代码在浏览器中原生运行。原生代码也有助于提高执行速度，因为代码是内置在浏览器中的，并以最佳算法进行了优化。幸运的是，LWC利用了这个优势。
LWC有内置的库和方法，将帮助我们在桌面和移动端呈现动态HTML和CSS。在处理动态页面时，这些方法将作为我们整体算法的核心。除了这些方法之外，LWC还提供了用于快速实现的装饰器，比如@api。如果你曾经使用过Django，装饰器可能对你来说非常熟悉。最后，在使用闪电网络组件时，你不需要学习任何新的语言。这些组件与最标准、最流行、最简单的网络语言一起工作，比如HTML、 CSS和 JavaScript。
尽管我们可以不停地谈论LWC，因为它是一个非常深刻的话题，但我们会在丛林中走得很远，没有最终的目的地。如果你渴望了解更多关于它的信息，Salesforce Diaries上有关于Lightning Web Component可用的最好的文档。要实现动态页面，上述信息就足够了。
connectedCallback() - 依赖的钩子
connectedCallback方法是LWC内部的一个特殊方法，当一个元素进入文档对象模型时被触发。这个方法属于生命周期钩子，这意味着该方法在组件实例的生命周期的特定阶段被触发。
对于下面给出的代码，connectedCallback方法将定时器的值改为true，并启动一个3秒的定时器。这段代码可以相应地实现。
connectedCallback() {
setTimeout(() => {
this.ready = true;
}, 3000);
}
connectedCallback方法将帮助我们识别我们的网站是在什么类型的屏幕上呈现的。识别之后，唯一的步骤是根据通过connectedCallback检测到的设备来渲染HTML模板。
**注意：**connectedCallback方法的流程是从父代到子代，也就是说，父代的connectedCallback首先被触发，然后是子代的connectedCallback被触发。
用connectedCallback和LWC对模板进行动态渲染
现在我们对LWC和connectedCallback方法有了一些了解，我们需要写一个JS文件，向LWC提供逻辑。
首先，我们需要有两个模板。这些模板将用于两个不同的设备；移动和桌面。它们可以是完全不同的，如果你的目标是两个以上的设备，你需要准备好这么多的模板。
创建模板
模板是一个普通的HTML网页，它将CSS文件作为输入并构建一个网页。你可以把这些代码放在模板标签下。
<template>
//HTML code
</template>
或者，如果代码太大，你也可以创建多个HTML文件。如果你使用的是后一种方法，记得要把这些文件导入到代码中，具体方法如下。
import { LightningElement } from 'lwc';
import MobileTemplate from './MobileTemplate.html';
import WebTemplate from './WebTemplate.html';
上述导入在Salesforce扩展包被下载并添加到你的IDE中后才起作用。请确保你这样做是为了让所有的库都在你身边。
随着模板的设计，我们需要编写一个JavaScript文件，使其了解在哪个设备上渲染哪个模板。
导出类
在使用LWC的时候，类的名字必须与应用程序的名字相同。再次，请参考官方文档以了解更多相关信息。
export default class DynamicRendering extends LightningElement
实现 "render "函数，该函数返回要在屏幕上渲染的模板。
render() {
return window.screen.width < 640 ? MobileTemplate : WebTemplate;
}
上面使用的三元操作符，当屏幕尺寸小于640宽度时，会返回 "MobileTemplate.html"，否则会返回 "WebTemplate.html"。例如，这种现象可以在下面的图片中看到。
网页模板
而在移动屏幕上，会呈现出不同的模板。
Mobile Template
通过这种方法，我们可以很容易地在我们的Web应用程序上实现动态渲染，一个让桌面用户和移动用户都满意的网站。但仅仅实现代码是不够的!下一个合乎逻辑的步骤是测试网站的移动设备和响应性，以保证网站在不同的移动设备上不会崩溃。
浏览器对动态渲染的支持
Lightning网络组件通过Salesforce开发的一个库来工作。该库使用JavaScript功能，并在此基础上实现自己的功能。因此，浏览器支持非常好，可以在所有的移动和桌面浏览器上运行。
浏览器支持
在使用动态CSS渲染时，不需要考虑跨浏览器的兼容性问题。
总结
对于我所有了解移动用户的重要性和今天从他们那里产生的数据的朋友来说，LWC是一个额外的积极的技能，需要获得。虽然唯一的目标是实现响应性，但在开发响应性网站时，还有许多其他经过测试并证明有效的方法。当你想为移动用户和桌面用户呈现不同的模板时，实施LWC代码。
由于它包含额外的配置和学习颠簸，在开始之前最好确定一下。如果你这样做了，请放心，你的网站将快如闪电，帮助你通过JavaScript实现动态逻辑，并提供额外的方法和功能，很好用。我们很想听到你说说你是如何利用LWC并实现一个帮助你在不同数据处注入不同数据的逻辑。在那之前，祝你有一个充满发展的一天！!
CSS 动态基础设施 HTML JavaScript 移动Web服务器 移动浏览器 闪电（软件）
经Harish Rajora许可发表于DZone。请看原文。
DZone贡献者所表达的观点属于他们自己。
DZone上的热门文章
评论
