今天給大家講述的是我個人前段時間的一個真實經歷，如何將html代碼封裝（轉換）成JS實現調用？
將html代碼封裝成js幹嘛呢？直接寫在html頁面不好嗎？首先我來為大家解答這個疑惑，也許有一天會有小夥伴和我遇到同樣的問題。
我管理的網站是用織夢搭建的後台，但是我需要在全站（包含所有文章頁和列表頁、欄目頁）添加一張banner圖（此處知識舉個栗子），如果我直接寫在模板裡面，必然要更新所有欄目及其子頁面模板，想一想一個網站有多少欄目，多少模板？是不是我每次更新banner圖都需要去每一個模板修改呢？這樣的話會大大降低我們的效率，所以將此處banner圖的html代碼封裝成JS就很有必要了，以後修改banner圖，僅需修改封裝了banner圖html代碼的JS文件即可！
是吧，看到這裡是不是已經明白了為什麼要將將html代碼封裝成js了，下面颯颯來具體講解一下將html代碼封裝（轉換）成JS的具體步驟：
步驟一：打開Dreamweaver或者類似軟件，事先寫好需要封裝的HTML代碼。
步驟二：打開站長工具裡面的HTML/JS轉換頁面，將需要封裝的HTML代碼轉換成JS代碼，如下圖：
步驟三：在Dreamweaver中新建一個JS文件，將轉換後的JS代碼複製粘貼進去，保存為banner.js文件。
步驟四：在網站服務器中上載banner.js文件，記住上傳的路徑。
步驟五：進入網站後台，在需要添加banner圖的模板中適當位置加入JS封裝代碼。代碼如下：
<script src=”banner.js” type=”text/javascript”></script>
完成以上步驟，刷新後台欄目，即可實現banner圖的調用，是不是完美解決了banner圖的調用問題呢？以後修改banner圖的時候，只需要修改banner.js文件即可。
原創文章，作者：投稿專員，如若轉載，請註明出處：https://www.506064.com/zh-hant/n/268736.html
微信掃一掃 
支付寶掃一掃 