动态创建页面的四种方式

作者: 范小饭_ | 来源:发表于2017-02-08 23:19 被阅读1927次

现在的页面，已经不仅仅是只有观赏功能，需要连接后台的接口，甚至根据后台信息实时更改展示在页面上的信息。所以，我们需要动态的创建我们的页面。

今天，推荐大家几种，简单又实用的动态创建页面的方式。

1.节点操作
2.字符串拼接
3.ES6
4.百度模板

一、节点操作

节点操作，即根据文档的DOM结构，利用原生js或者jq来动态改变我们的页面。这需要我们熟练获取DOM上的节点并熟练的操作他们。这里复习一下关于获取节点和操作节点的常用命令。

JavaScript节点的获取和操作常用命令

1.jpg

二、jQuery节点的获取和操作常用命令

2.jpg

这里给大家举个之前文章中写过的例子，基本是上的功能都是节点操作。

对话效果图.gif

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">  
    <title>Title</title>
</head>
<body>

<div class="list-wrap">
    <div class="header t-cent">
        <span> </span>
    </div>
<ul id="list">


    <li class="user1">
        <div class="cont">
            <img src="1.jpg">
            <p  class="text">hi！史塔克</p>
        </div>
    </li>



    <li class="user2">
        <div class="cont">
            <img src="2.jpg">
            <p  class="text">hi！莉莉妮特</p>
        </div>
    </li>

   
</ul>

<div class="box">
    <div class="user">
        <div class="name" id="name"  data-id="1">莉莉妮特</div>
        <ul class="name-list" id="name-list">
            <li data-id="1">莉莉妮特</li>
            <li data-id="2">史塔克</li>
        </ul>
    </div>
    <input type="text" id="text" value="">
    <input type="button" type="button" id="send" value="发送">
</div>
</div>

<script type="text/javascript" src="jquery/jquery-3.0.0.min.js"></script>
<script type="text/javascript">
var yuan;//定义全局变量，用来标记选择的名字
    $("#name").on("click",function(){
        //点击时显示出名字列表
        $("#name-list").css("display","block");
        //当点击时选择其中一个名字
        $("#name-list li").click(function(){
            yuan = $(this).html();//记录下选择的名字，用于后面判断
            $("#name").html($(this).html());//将选择的名字显示在列表里
            $("#name-list").css("display","none");//名字列表消失
        })
    })  
//输入文字,点击发送   
    // <li class="user2">
    //     <div class="cont">
    //         <img src="2.jpg">
    //         <p  class="text">hi！莉莉妮特</p>
    //     </div>
    // </li>  
    //此刻先分析页面结构
    //1.每一句话的显示都是一个li标签
    //2.里面有一个div都有一个img标签（用来放置头像）和一个p标签（用来存将要发送的文字）
    //3.所以，每创建一句话，都要创建这些标签，才能保证页面不会错乱
    $("#send").on("click",function(){
        //得到文字$("#text").val()
        var $language=$("<p  class='text'></p>");//创建一个p标签
        var $cont = $("<div class='cont'></div>");//创建一个div
        $language.html($("#text").val());//得到即将发送的文字
        //进行判断，当时选择的是莉莉妮特
        if(yuan=="莉莉妮特") {
            //创建莉莉妮特的头像
            var $img=$("<img src='1.jpg'>");
            //将头像添加到div里
            $cont.append($img);
            //将即将发送的文字添加到div里
            $cont.append($language);
            //创建一个li用来
            var $li = $("<li class='user1'></li>");
            //将div添加到li标签里
            $li.append($cont);
            //将li标签显示在页面上
            $("#list").append($li)
         }else{
            //创建史塔克的头像
            var $img=$("<img src='2.jpg'>");
            //将头像添加到div里
            $cont.append($img);
            //将即将发送的文字添加到div里
            $cont.append($language);
            //创建一个li用来
            var $li = $("<li class='user2'></li>");
            //将div添加到li标签里
            $li.append($cont);
            //将li标签显示在页面上
            $("#list").append($li)      
         }
    })
</script>


</body>
</html>

从上述例子大家可以看到，当我们用操作节点的方式去修改我们的页面的时候，需要的代码较多，并且比较繁琐，容易出错，所以在小部分需要修改页面的时候，可以采取这种方式，而且对于大规模的修改页面就不适合了。

介绍下一种方式之前，我们先看一下正常我们不请求数据的时候，搭建的静态页面是这样的

00.jpg

而我们需要书写的代码如下

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <link rel="stylesheet" href="css/index.css" />
    </head>
    <body>          
        <div id="home">
            <div class="container" id="hot">
                <div id="hot_content" class="content_container">
                    <a href="###" class="hot_content_item">
                        <img src="./img/home/home51.jpg" alt="" />
                        <p class="title">音苏提有机酸奶酪</p>
                        <p>
                            <span class="best">精选</span>
                            <span class="maizeng">买一赠一</span>
                        </p>
                        <p class="weight">140g</p>
                        <p class="price_container">
                            <span class="now_price">￥7.9</span>
                            <span class="original_price">￥12</span>
                        </p>
                        <span class="add">+</span>
                    </a>
                    <a href="###" class="hot_content_item">
                        <img src="./img/home/home51.jpg" alt="" />
                        <p class="title">音苏提有机酸奶酪</p>
                        <p>
                            <span class="best">精选</span>
                            <span class="maizeng">买一赠一</span>
                        </p>
                        <p class="weight">140g</p>
                        <p class="price_container">
                            <span class="now_price">￥7.9</span>
                            <span class="original_price">￥12</span>
                        </p>
                        <span class="add">+</span>
                    </a>
                    <a href="###" class="hot_content_item">
                        <img src="./img/home/home51.jpg" alt="" />
                        <p class="title">音苏提有机酸奶酪</p>
                        <p>
                            <span class="best">精选</span>
                            <span class="maizeng">买一赠一</span>
                        </p>
                        <p class="weight">140g</p>
                        <p class="price_container">
                            <span class="now_price">￥7.9</span>
                            <span class="original_price">￥12</span>
                        </p>
                        <span class="add">+</span>
                    </a>
                    <a href="###" class="hot_content_item">
                        <img src="./img/home/home51.jpg" alt="" />
                        <p class="title">音苏提有机酸奶酪</p>
                        <p>
                            <span class="best">精选</span>
                            <span class="maizeng">买一赠一</span>
                        </p>
                        <p class="weight">140g</p>
                        <p class="price_container">
                            <span class="now_price">￥7.9</span>
                            <span class="original_price">￥12</span>
                        </p>
                        <span class="add">+</span>
                    </a>                        
                </div>
                <a href="###" id="hot_last">点击查看全部商品></a>
            </div>
        </main>
    </div>
        <script type="text/javascript" src="js/jquery-3.0.0.min.js" ></script>
        <script type="text/javascript" src="js/index.js" ></script>
    </body>
</html>

这样一小部分页面，还是静态页面，不算书写的css，就需要写这么多代码，那我们前端工作人员的头发还留住么，毕竟很多前端还是妹纸呢？所以，根据以上例子，推荐大家动态创建页面

二、字符串拼接

其实，我们上面的代码还是有用的，起码帮助我们梳理了页面需要的效果，因为都是相同的结果，用字符串拼接的结构，首先我们需要的，是我们需要动态创建那些内容。从上述栗子不难看出，当然是那些重复的代码，如下所示

<a href="###" class="hot_content_item">
    <img src="./img/home/home51.jpg" alt="" />
    <p class="title">音苏提有机酸奶酪</p>
    <p>
        <span class="best">精选</span>
        <span class="maizeng">买一赠一</span>
    </p>
    <p class="weight">140g</p>
    <p class="price_container">
        <span class="now_price">￥7.9</span>
        <span class="original_price">￥12</span>
    </p>
    <span class="add">+</span>
</a>

这一小段代码，我们需要重复写n遍，而且不便于维护，那么我们可以运用字符串拼接的方式，实现动态创建我们的代码，如下

$.getJSON("http://www.vrserver.applinzi.com/aixianfeng/apihomehot.php", 
                null, function (result) {
                    var dataArr = result.data;
                    var str = "";
                    for (var tempHotObj of dataArr) {
                        str += '<a href="###" class="hot_content_item">';
                        str += '<img src="' + tempHotObj.img + '" alt="" />';
                        str += '<p class="title">' + tempHotObj.name + '</p>';
                        str += '<p>';
                        str += '<span class="best">精选</span>';
                        str += '<span class="maizeng">' + tempHotObj.pm_desc + '</span>';
                        str += '</p>';
                        str += '<p class="weight">' + tempHotObj.specifics + '</p>';
                        str += '<p class="price_container">';
                        str += '<span class="now_price">￥' + tempHotObj.price + '</span>';
                        str += '<span class="original_price">￥' + tempHotObj.market_price + '</span>';
                        str += '</p>';
                        str += '<span class="add">+</span>';
                        str += '</a>';
                    }
                    //添加页面
                    $("#hot_content").html(str);
            });

从上段代码，可以看出，我们只要按照上面代码的结构，一句一句的按照字符串方式拼接起来，而用“+变量+”的方式动态改变灵活的数据，那请求到多少数据，就显示在页面上多少数据，而页面上的如上的代码块，我们都可以删掉了，但是为了后期维护数据和查看页面结构，注释即可。
如下所示

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <link rel="stylesheet" href="css/index.css" />
    </head>
    <body>          
        <div id="home">
                <div class="container" id="hot">
                    <div id="hot_content" class="content_container">
                    <!--  开始注释     注释掉页面上动态创建的代码                
                    <a href="###" class="hot_content_item">
                            <img src="./img/home/home51.jpg" alt="" />
                            <p class="title">音苏提有机酸奶酪</p>
                            <p>
                                <span class="best">精选</span>
                                <span class="maizeng">买一赠一</span>
                            </p>
                            <p class="weight">140g</p>
                            <p class="price_container">
                                <span class="now_price">￥7.9</span>
                                <span class="original_price">￥12</span>
                            </p>
                            <span class="add">+</span>
                        </a>    
                   注释结束 --> 
                    </div>                  
                    <a href="###" id="hot_last">点击查看全部商品></a>
                </div>
            </main>         
    </div>
        <script type="text/javascript" src="js/jquery-3.0.0.min.js" ></script>
        <script type="text/javascript" src="js/index.js" ></script>
    </body>
</html>

那最后我们得到的效果图如下

GIF.gif

三、ES6 模板字符串

还是沿用上栗。但是ES6方式代码如下

$.getJSON("http://www.vrserver.applinzi.com/aixianfeng/apihomehot.php", 
                null, function (result) {
                    var dataArr = result.data;
                    var str = "";
                    for (var tempHotObj of dataArr) {
                        str += `<a href="###" class="hot_content_item">
                                    <img src="${tempHotObj.img}" alt="" />
                                    <p class="title">${tempHotObj.name}</p>
                                    <p>
                                        <span class="best">精选</span>
                                        <span class="maizeng">${tempHotObj.pm_desc}</span>
                                    </p>
                                    <p class="weight">${tempHotObj.specifics}</p>
                                    <p class="price_container">
                                        <span class="now_price">￥${tempHotObj.price}</span>
                                        <span class="original_price">￥${tempHotObj.market_price}</span>
                                    </p>
                                    <span class="add">+</span>
                                </a>`;
                    }
                    //添加页面
                    $("#hot_content").html(str);
            });

从上段代码可以看出，这次我们不需要一句一句的拼接整个代码段，而是直接粘贴过来，用反撇号（）**，反撇号就是数字键盘1前面看上去不太起眼的那位（现在人家咸鱼翻身了，作用大着呢），接着说，用**反撇号（）将粘贴过来的代码段包裹起来就可以了。

对于代码段中的变量部分，需要大括号{ }将变量包裹起来就可以了。运行效果和字符串拼接方式实现的效果是一样的，如下所示

GIF.gif

四、百度模板

百度模板也是常用之一。
还是启用上述栗子，代码如下

$.getJSON("http://www.vrserver.applinzi.com/aixianfeng/apihomehot.php", 
        null, function (result) {
            var dataArr = result.data;
            var str = "";               
            str = baidu.template('hotTemplate', result);
            //添加页面
            $("#hot_content").html(str);
            //设置懒加载
            $("#hot_content img").lazyload({
                effect : 'fadeIn'
            })
    });

是不是看不懂？因为代码不全呀~因为，此时页面的代码是这样的。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <link rel="stylesheet" href="css/index.css" />
    </head>
    <body>          
        <div id="home">
                <div class="container" id="hot">
                    <div id="hot_content" class="content_container">
                    <!--开始注释
                    <a href="###" class="hot_content_item">
                            <img src="./img/home/home51.jpg" alt="" />
                            <p class="title">音苏提有机酸奶酪</p>
                            <p>
                                <span class="best">精选</span>
                                <span class="maizeng">买一赠一</span>
                            </p>
                            <p class="weight">140g</p>
                            <p class="price_container">
                                <span class="now_price">￥7.9</span>
                                <span class="original_price">￥12</span>
                            </p>
                            <span class="add">+</span>
                        </a>
                    结束注释-->                     
                    </div> 
                    <a href="###" id="hot_last">点击查看全部商品></a>
                </div>
            </main>     
    </div>
    <script type="text/javascript" src="js/jquery-3.0.0.min.js" ></script>
    <script type="text/javascript" src="js/index.js" ></script>
    <script type="text/javascript" src="js/jquery.lazyload.min.js" ></script>
    <script type="text/javascript" src="js/baiduTemplate.js" ></script>
    <script type="text/template" id="hotTemplate">
        <% for (var tempObj of data) { %>
            <a href="###" class="hot_content_item">
                <!-- 懒加载 -->
                <img data-original=" <%= tempObj.img %> " alt="" />
                <p class="title">音苏提有机酸奶酪</p>
                <p>
                    <span class="best">精选</span>
                    <span class="maizeng">买一赠一</span>
                </p>
                <p class="weight">140g</p>
                <p class="price_container">
                    <span class="now_price">￥7.9</span>
                    <span class="original_price">￥12</span>
                </p>
                <span class="add">+</span>
            </a>
        <% } %>
    </script>
    </body>
</html>

还是没看懂吧？下面解释一下

1.引入文件------运用百度模板，首先，我们需要先导入baiduTemplate.js文件。

01.jpg
2.放置代码段------页面中，模板块放在 <script> 中，设置type属性为text/template或text/html，用id标识

02.png

3.调用代码段------index.js文件中，第一个参数是模板script标签的id值，第二个参数是传给模板的数据(这里传的是最后想要数据的上一层)

03.jpg
4.调用代码段------插入到页面的指定容器中

04.jpg
05.模板使用语法
默认分隔符为<% %>，在<script>标签的开始和结束为止要使用<% %>。在变量部分要使用<%=变量 %>方式告知，这是一个变量。

05.jpg

这种方式也可以实现动态加载我们的页面，与上述效果一致。

GIF.gif

如果还是有点模糊，可以点击这个链接看一下，对百度模板介绍的比较详细http://baidufe.github.io/BaiduTemplate/

网友评论

井中月_09f7:加油＾０＾~
范小饭_:@井中月_09f7 好感动，谢谢啦，你也加油
Alpha丶:煞笔标题；这尼玛是动态创建页面？这特么是动态创建节点! 不懂瞎起标题.
久久_533f:上来就骂人的技术也高不到哪里去
井中月_09f7: @Alpha丶请走
范小饭_:@Alpha丶欢迎讨论问题，但如果骂人请走远点，你不喜欢可以不看，也没人逼着你看，有点素质
9b24e0b9c463:很不错，百度模块暂时还没了解学习，后期应该会讲到，谢谢大佬整合的资料
circleee:高产呀，学习
谁曾遇见风:先收藏，慢慢学习
北京大数据苏焕之:加油！
范小饭_:最近真的学得有点累，感谢鼓励~~好开心
hanhui_zhu:组件化或者MVVM框架，很棒。
寂寞开成海:棒棒棒
FromThenOn:不错