? ? ? ? ESP32由于其具備WIFI還有可以使用http協(xié)議，所以很多配置還有控制功能都可以通過(guò)網(wǎng)頁(yè)來(lái)實(shí)現(xiàn)的，例如直接控制ESP32的PWM輸出或GPIO電平。

????? ? 上述情況通常都會(huì)應(yīng)用到很多個(gè)HTML元素組件在網(wǎng)頁(yè)之中，如果通過(guò)在代碼中使用HTML字符串加C混編的方式參考以下示例。

????????首先每一次訪問(wèn)都需要去重復(fù)生成字符串操作浪費(fèi)時(shí)鐘周期，同時(shí)每一次的生成都會(huì)攜帶大量重復(fù)數(shù)據(jù)給瀏覽器增加傳輸時(shí)間，如何優(yōu)化這一部分代碼減少傳輸?shù)臄?shù)據(jù)量就非常重要。

????????JavaScript就能夠?qū)崿F(xiàn)對(duì)網(wǎng)頁(yè)的動(dòng)態(tài)刷新，并且現(xiàn)在的主流瀏覽器都采用Chrome內(nèi)核幾乎不需要考慮JS代碼的匹配問(wèn)題。下面一段代碼就是通過(guò)JS實(shí)現(xiàn)對(duì)HTMl元素的動(dòng)態(tài)生成示例。

????????

??????上述示例代碼由三部分構(gòu)成CSS樣式、Body中的HTML元素、JS代碼，下面著重針對(duì)JS代碼部分進(jìn)行講解。

????????上述代碼的核心思想就是將常用到的代碼編寫(xiě)成簡(jiǎn)短的方法便于調(diào)用和節(jié)省代碼中的字符數(shù)量。

?

????????上述代碼定義了頁(yè)面中包含元素所屬的名字以及所用到的變量以及顏色，便于JS循環(huán)。

????????? ? 上述代碼則在頁(yè)面加載時(shí)是動(dòng)態(tài)生成18個(gè)通道顯示條實(shí)現(xiàn)對(duì)通道數(shù)據(jù)的顯示并且對(duì)每一個(gè)通道條的ID進(jìn)行命名方便后期通過(guò)Ajax修改顯示數(shù)據(jù)。

?????????????最終效果展示。

????下一篇介紹如何使用AJAX實(shí)現(xiàn)數(shù)據(jù)的刷新和獲取。