前端js模板引擎，快速地動態拼接html代碼

量添加數據時，需要動態添加html代碼。例如：添加規格。

本猿新手時期是這么做的：（主要看紅框中代碼）

字符與變量拼接，倒是簡單易行，就是容易出錯（比如：引號不成對），需要反復調試。

拼接字符串要是不講究，那更是不便于我們人類閱讀，所以，要是元素有改變或者新增了元素，維護起來自然不易。

要是像php模板引擎一樣，直接把變量塞進html代碼里面，不但不用糾結引號是否匹配、成對標簽是否缺失閉標簽，而且格式化，那多好-----嗯，這個可以有。

php有模板引擎，咱js也有，不但有，還百家爭鳴。

本猿機緣巧合之下，遇見了art-template.js。

先看一眼官方文檔。

于是，上文的動態添加html代碼需求可以這么實現：

想要查看art-template官方文檔的更多信息，可以這么做：

.說明：

推薦指數：★★★★

通俗易懂。

2.效果圖

3.一個含有內部的css的html，名叫：風車-1.html代碼：

<!--注釋法-->
<!--第1步：聲明：可以大小寫均可以：doctype=DOCTYPE-->
<!--doctype html-->
<!DOCTYPE html>

<!--第2步：html包起來，默認lang=‘en’，所以也可以刪除-->
<!--像這樣：html-->
<html>
<html lang="en"-->
    <!--第2-1步：head部分設置-->
    <head>
        <!--第2-1-1步：固定格式meta和title設置-->
        <meta charset="UTF-8">
        <!--網頁名字自己隨意取-->
        <title>大風車DIY1</title>
        <!--第2-1-2步：css的設置，因為簡單所以直接寫在html的單個文件里-->
        <!--也可以作為外部文件引起css文件-->
        <style>
            #box {
                width: 10px;
                height: 10px;
                margin: 5px auto;
                position: relative;
            }

            #main {
                width: 400px;
                height: 400px;
                animation: dfc 1s linear infinite;
            }

            /*這是css的注釋方法*/
            /*風車的每一扇葉的設置,因為4個扇葉的設置是一樣的，所以用這樣*/
            /*4個扇葉的共性設置*/
            .css1,
            .css2,
            .css3,
            .css4 {
                width: 200px;
                height: 100px;
                border: 1px solid blue;
                border-radius: 100px 100px 0 0;
                position: absolute;
                /*4個扇葉的顏色漸變設置*/
                background-image: linear-gradient(green, yellow);
            }
            /*扇葉1的個性設置*/
            .css1 {
                top: 100px;
            }
            /*扇葉2的個性設置*/
            .css2 {
                top: 50px;
                left: 150px;
                -webkit-transform: rotate(90deg);
                -moz-transform: rotate(90deg);
                -ms-transform: rotate(90deg);
                -o-transform: rotate(90deg);
                transform: rotate(90deg);
            }
            /*扇葉3的個性設置*/
            .css3 {
                top: 200px;
                left: 200px;
                -webkit-transform: rotate(180deg);
                -moz-transform: rotate(180deg);
                -ms-transform: rotate(180deg);
                -o-transform: rotate(180deg);
                transform: rotate(180deg);
            }
            /*扇葉4的個性設置*/
            .css4 {
                top: 250px;
                left: 50px;
                -webkit-transform: rotate(270deg);
                -moz-transform: rotate(270deg);
                -ms-transform: rotate(270deg);
                -o-transform: rotate(270deg);
                transform: rotate(270deg);
            }

            /*中間的圓形的設置*/
            .ssss {
                width: 100px;
                height: 100px;
                border-radius: 100%;
                position: absolute;
                top: 150px;
                left: 150px;
                z-index: 10;
                /*請注意下面css的顏色設置，可以是小寫的英文字母，也可以是大寫的，還可以是十六進制*/
                /*中間圓的漸變顏色設置*/
                background-image: radial-gradient(pink, blue);
            }
            /*風車的豎直桿的設置*/
            .hhh {
                width: 2px;
                height: 250px;
                background-image: radial-gradient(black, RED);
                position: absolute;
                top: 200px;
                left: 199px;
                z-index: -1;
            }
            /*運動的功能定義*/
            @keyframes dfc {
                0% {
                    -webkit-transform: rotate(0deg);
                    -moz-transform: rotate(0deg);
                    -ms-transform: rotate(0deg);
                    -o-transform: rotate(0deg);
                    transform: rotate(0deg);
                }
                25% {
                    -webkit-transform: rotate( 90deg);
                    -moz-transform: rotate( 90deg);
                    -ms-transform: rotate( 90deg);
                    -o-transform: rotate( 90deg);
                    transform: rotate( 90deg);
                }
                50% {
                    -webkit-transform: rotate(180deg);
                    -moz-transform: rotate(180deg);
                    -ms-transform: rotate(180deg);
                    -o-transform: rotate(180deg);
                    transform: rotate(180deg);
                }
                75% {
                    -webkit-transform: rotate(270deg);
                    -moz-transform: rotate(270deg);
                    -ms-transform: rotate(270deg);
                    -o-transform: rotate(270deg);
                    transform: rotate(270deg);
                }
                100% {
                    -webkit-transform: rotate(360deg);
                    -moz-transform: rotate(360deg);
                    -ms-transform: rotate(360deg);
                    -o-transform: rotate(360deg);
                    transform: rotate(360deg);
                }
            }
        </style>
    </head>
    <!--第2-2步：body部分設置-->
    <body>
        <div id="box">
            <!--box的div容器里面有風車桿和main的4個運動的扇葉-->
            <div id="main">
                <!--main里的css是要一起運動的-->
                <div class="css1"></div>
                <div class="css2"></div>
                <div class="css3"></div>
                <div class="css4"></div>
                <div class="ssss"></div>
            </div>
            <!--風車的桿是不動的，所以單獨放在一個div容器中-->
            <div class="hhh"></div>
        </div>

    </body>

</html>

4.如何將css拆開，單獨呢？大型項目都是css單獨一個文件夾，里面一大堆css文件。

4.1 建一個fengche.css文件，將下面代碼復制進去，和風車-2.html放在同一個文件夾中。

fengche.css的代碼：

#box {
width: 10px;
height: 10px;
margin: 5px auto;
position: relative;
}

#main {
width: 400px;
height: 400px;
animation: dfc 1s linear infinite;
}

/*這是css的注釋方法*/
/*風車的每一扇葉的設置,因為4個扇葉的設置是一樣的，所以用這樣*/
/*4個扇葉的共性設置*/
.css1,
.css2,
.css3,
.css4 {
width: 200px;
height: 100px;
border: 1px solid blue;
border-radius: 100px 100px 0 0;
position: absolute;
/*4個扇葉的顏色漸變設置*/
background-image: linear-gradient(green, yellow);
}
/*扇葉1的個性設置*/
.css1 {
top: 100px;
}
/*扇葉2的個性設置*/
.css2 {
top: 50px;
left: 150px;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}
/*扇葉3的個性設置*/
.css3 {
top: 200px;
left: 200px;
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
/*扇葉4的個性設置*/
.css4 {
top: 250px;
left: 50px;
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-ms-transform: rotate(270deg);
-o-transform: rotate(270deg);
transform: rotate(270deg);
}

/*中間的圓形的設置*/
.ssss {
width: 100px;
height: 100px;
border-radius: 100%;
position: absolute;
top: 150px;
left: 150px;
z-index: 10;
/*請注意下面css的顏色設置，可以是小寫的英文字母，也可以是大寫的，還可以是十六進制*/
/*中間圓的漸變顏色設置*/
background-image: radial-gradient(pink, blue);
}
/*風車的豎直桿的設置*/
.hhh {
width: 2px;
height: 250px;
background-image: radial-gradient(black, RED);
position: absolute;
top: 200px;
left: 199px;
z-index: -1;
}
/*運動的功能定義*/
@keyframes dfc {
0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
}
25% {
    -webkit-transform: rotate( 90deg);
    -moz-transform: rotate( 90deg);
    -ms-transform: rotate( 90deg);
    -o-transform: rotate( 90deg);
    transform: rotate( 90deg);
}
50% {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
}
75% {
    -webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    transform: rotate(270deg);
}
100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
}
}

4.2 風車-2.html的代碼：注意修改部分。


<!DOCTYPE html>
<html>
<html lang="en"-->
    <head>
        <meta charset="UTF-8">
        <title>大風車DIY2</title>
        <!--注意放在同一個文件夾下，本機是deepin的linux系統，win可能不同-->
        <link rel="stylesheet" href="./fengche.css" />
    </head>
    <body>
        <div id="box">
            <div id="main">
                <div class="css1"></div>
                <div class="css2"></div>
                <div class="css3"></div>
                <div class="css4"></div>
                <div class="ssss"></div>
            </div>
            <div class="hhh"></div>
        </div>

    </body>
</html>

怎么樣？通俗易懂吧，看了后，立馬入門。

際應用中，目標字符串的生成可能需要多個數據的拼接。

　　由于應用頻繁，幾乎是所有編程語言都必須掌握的操作，當然每種語言具有各自特點。

　　本文將通過代碼實例詳細介紹一下JavaScript如何實現字符串拼接操作。

一.使用加號()拼接:

　　加號不但可以實現算數運算，也可以實現字符串拼接操作。

　　代碼實例如下:

　　console.log(``"愛前端"````"專注全棧大前端"``);

　　上述代碼使用加號()實現兩個字符串的拼接操作。

　　目的是演示加號拼接功能，實際項目中根本沒可能這么用。

　　letwebName=``"愛前端"``;

　　letaddress=``"專注全棧大前端"``;

　　letstr=webName"位于"address;

　　console.log(str);

　　代碼實現了字符串拼接效果，webName與address是變量，不能將它們直接包裹于引號之中。

　　否則，webName與address就不是變量了，變量名稱直接就成為字符串的一部分。

二.字符串與非字符串數據拼接:

　　前面代碼都是字符串之間的拼接操作，其實字符串數據也可以與非字符串數據進行拼接。

　　首先看一段代碼實例:

　　console.log(5``"5"``);

　　可數字5與字符串"5"進行拼接，首先會將數字轉換為字符串，然后再進行拼接操作。

　　當然字符串不止可以和數字進行拼接，也可以與其他數據類型進行拼接操作，本文不再演示。

　　內在原理是，不同數據類型進行拼接操作的時候，首先會進行隱式數據類型轉換。

三.模板字符串實現拼接:

　　ES2015之前只能通過加號實現字符串拼接，如果數據量較大，那么代碼看起來比較繁瑣。

　　現在新增了更為簡單的字符串拼接方式，使用模板字符串與占位符可以實現更為簡潔直觀的拼接操作。

　　我自己是一名從事了多年開發的web前端老程序員，目前辭職在做自己的web前端私人定制課程，今年年初我花了一個月整理了一份最適合2019年學習的web前端學習干貨，各種框架都有整理，送給每一位前端小伙伴，想要獲取的可以關注我的頭條號并在后臺私信我：前端，即可免費獲取。

原文鏈接：https://www.xuebuyuan.com/3270648.html

在線咨詢

上一篇：多客技巧分享 - 如何選擇TikTok標簽以及使用的六大建議？
下一篇：限塑令，還須硬碰硬

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

前端js模板引擎，快速地動態拼接html代碼

一.使用加號()拼接:

二.字符串與非字符串數據拼接:

三.模板字符串實現拼接:

您的項目需求