整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线：

前端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小时内与您取得联系。

推荐阅读
友情链接 鹤山区 裕安区 布尔津县 市北区 隆子县 江阳区 网站制作
Copyright © 2002-2019 雨点网络设计有限公司 版权所有   冀ICP备11025394号
联系电话：   E-mail：279303980@qq.com  
主营业务：技术文章网站建设、网站定制、技术文章营销型网站建设、技术文章网站优化、技术文章微商城制作、三级分销系统开发
电话沟通
在线客服