幾種web數據渲染模板對比

時間  2019-11-08
標籤 幾種 web 數據 渲染 模板 對比 欄目 HTML 简体版
原文   原文鏈接

在web開發，實現視圖、數據的分離，由前端工程師專門負責編寫html頁面，有php後臺工程師寫php接口返回json數字，那麼中間如何將json數據綁定到html頁面上有幾種方法呢。基於這種需求大致上嘗試了幾種方法：javascript

1）用jQuery加載json數據，操做DOM：php

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>一、測試傳統的數據綁定</title>
    <!--引入jquery.js-->
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            alert("點擊以後，修改p1");
            document.getElementById("p1").innerHTML="修改了p1：javascript的DOM操做";
            $("#btn").click(function(){
                showMessage("信息提示：正在請求網絡");
                getJSON2();
            });
        });

        function showMessage(msg){
            alert(msg)
        }

        function getJSON2() {
            //jQuery.post()方法
            $.post("http://192.168.1.122/yne_siteM/index.php/Home/Interface/mess2","username=188888",
                    function(data,status) {
                        alert("status="+status);
                        try{
                            /*測試解析json
                            var jsontext = '{"firstname":"Jesper","surname":"Aaberg","phone":["555-0100","555-0120"]}';
                            var data0 = JSON.parse(jsontext);
                            alert(data0.surname);*/
                            //若是取到的已是json對象，再JSON.parse就可能出錯
                           // var data = JSON.parse(json);
                        }catch (e){
                            alert(e.message);
                        }

                        document.getElementById("p1").innerHTML=data.status;  //Y
                        var dataArray = data.data;   //data包含的json數組
                        var contents;
                        for(var i=0 ; i<dataArray.length ; i++) {
                            var jsonObject = dataArray[i];      //這裏能夠直接取數組下索引
                            var id = jsonObject.id;
                            var title = jsonObject.title;
                            var content = jsonObject.content;
                            contents = "<li>"+title+" "+title+" "+content+"</li>";
                            $("#ol").append(contents);
                        }
                    },
                    "json"
            );
        }

    </script>
</head>
<body>
<h2>This is a heading</h2>
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.3333</p>
<div id="newDiv">
    <ol id="ol">
    </ol>
</div>
<button type="button" id="btn">Click me</button>
</body>
</html>

 

2）用jsRender/jsView操做DOM，綁定數據：css

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>二、測試jsView的數據綁定</title>

</head>

<body>
<h2>This is a heading</h2>
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.3333</p>
<div id="newDiv">

</div>
<div id="newDiv2">
</div>
<button type="button" id="btn">Click me</button>

<!--官方demo-->
<script id="theTmpl" type="text/x-jsrender">
        <b>{{:title}}</b>
        <ul>
          {{for members}}
              <li >{{:name}} lives in <b>{{:address.city}}</b></li>
          {{/for}}
        </ul>
</script>

<script>
    var data = {
        "title": "The A team",
        "members": [
            {
                "name": "Pete",
                "address": {
                    "city": "Seattle"
                }
            },
            {
                "name": "Heidi",
                "address": {
                    "city": "Sidney"
                }
            }
        ]
    };
    var template = $.templates("#theTmpl");
    var htmlOutput = template.render(data);
    $("#newDiv").html(htmlOutput);
</script>

<script id="theTmpl2" type="text/x-jsrender">
    <b>status={{:status}}</b>
    <b>msg={{:msg}}}</b>
    <ul id="ul1">
        {{for data}}
        <a href="/id={{:id}}">
        <li id="{{:id}}">id={{:id}} title={{:title}} content={{:content}}</li>
        </a>
        {{/for}}
    </ul>

    <ul id="ul2">
        {{for data}}
        <li class="xx.css" id="{{:id}}">id={{:id}} title={{:title}} content={{:content}}</li>
        {{/for}}
    </ul>
</script>

<!--引入jquery.js-->
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jsviews.js"></script>
<script type="text/javascript">
    var dataArray;
    $(document).ready(function(){
        alert("點擊以後，修改p1");
        document.getElementById("p1").innerHTML="修改了p1：javascript的DOM操做";
        $("#btn").click(function(){
            showMessage("信息提示：正在請求網絡");
            getJSON2();
        });
    });

    function showMessage(msg){
        alert(msg)
    }


    function getJSON2() {
        //jQuery.post()方法
        $.post("http://192.168.1.122/yne_siteM/index.php/Home/Interface/mess2","username=1888888",
                function(data,status) {
                    alert("status="+status);
                    //綁定UI
                    var template = $.templates("#theTmpl2");
                    var htmlOutput = template.render(data);
                    $("#newDiv2").html(htmlOutput);

                    //監聽UI
                    //選取id=ul2 的ul組件下的全部li
                    $("ul#ul2 li").click(function() {
                        alert("id="+$(this).attr("id"));
                    });

                    //監聽全部id以a開頭的li
//                        $("li[id^='a']").click(function() {
//                            alert("id="+$(this).attr("id"));
//                        })

                },
                "json"
        );
    }

</script>

</body>
</html>

3）用angularJS綁定數據：html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="angular.js"></script>
    <script src="jquery.js"></script>
</head>
<body>

<body>

<div ng-app="app1">
    <div id="A1">
        <input ng-model="name" type="text" placeholder="請輸入姓名">
        <p>個人姓名： {{name}}</p>
    </div>

    <div id="A2">
        <input ng-model="age" type="number" placeholder="請輸入年齡">
        <p>個人年齡: {{age}}</p>
    </div>

    <div id="A3" ng-init="names=['Jani','Hege','Kai']">
        <p>使用 ng-repeat 來循環數組</p>
        <ul>
            <li ng-repeat="x in names">
                {{ x }}
            </li>
        </ul>
    </div>

    <div id="A4" ng-init="names=[
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}]">

        <p>循環對象：</p>
        <ul>
            <li ng-repeat="x in names">
                {{ x.name + ', ' + x.country }}
            </li>
        </ul>

    </div>

    <div id="A5" ng-controller="myCtrl1">
        名字: <input ng-model="name">
        <h1>你輸入了: {{name}}</h1>
    </div>

    <!--get方法-->
    <div id="A6" ng-controller="myCtrl2">
        <p>ssss {{msg}}</p>
        <ul>
            <li ng-repeat="x in data">id={{x.id}},picurl={{x.picurl}}</li>
        </ul>
    </div>

    <!--post方法-->
    <div id="A7" ng-controller="myCtrl3">
        <p>ssss {{msg}}</p>
        <ul>
            <li ng-repeat="x in data">id={{x.id}},picurl={{x.picurl}}</li>
        </ul>
    </div>
</div>

<!--儘可能一個html裏面只聲明一個ng-app-->
<div id="div2" ng-app="app2" ng-init="points=[1,15,19,2,40]">
    <p>第三個值爲 {{ points[2] }}</p>
    <button type="button" id="btn">Click me</button>
</div>


<script> <!--這裏不能引入jQuery,會衝突-->
    var app1 = angular.module("app1",[]);
    var app2 = angular.module("app2",[]);
    angular.bootstrap(document.getElementById("div2"),['app2']);

    app1.controller("myCtrl1",function($scope){
        $scope.name = "Joker";
    });

    //get方法
    app1.controller('myCtrl2', function($scope, $http) {
        $http.get("http://192.168.1.122/yne_siteM/index.php/Home/Interface/GetBanner")
            .success(function(response) {
                    $scope.status = response.status;
                    $scope.msg = response.msg;
                    $scope.data = response.data;
                });
    });

//    $.get("http://192.168.1.122/yne_siteM/index.php/Home/Interface/GetBanner")
//            .success(function(){
////                app1.controller("myCtrl2",function($scope){
////                    $scope.msg = "jQuery Get";
////                });
//                alert("ok");
//            });

</script>


</body>


</body>
</html>

 

4）用vue.js綁定數據：前端

<!DOCTYPE html>
<html xmlns:v-on="http://www.w3.org/1999/xhtml">
<head lang="en">
    <meta charset="UTF-8">
    <title>測試vue.js</title>
</head>
<body>
    <div id="app">
        {{message}}
    </div>

    <!--雙向綁定-->
    <div id="app2">
        <p>{{message}}</p>
        <input v-model="message">
    </div>

    <!--渲染列表-->
    <div id="app3">
        <ul>
            <li v-for="todo in todos">
                {{ todo.text }}
            </li>
        </ul>
    </div>

    <!--處理用戶輸入-->
    <div id="app4">
        <p>{{ message }}</p>
        <button v-on:click="reverseMessage">Reverse Message</button>
    </div>

    <div id="app5">
        <input v-model="newTodo" v-on:keyup.enter="addTodo">
        <ul>
            <li v-for="todo in todos">
                <span>{{ todo.text }}</span>
                <button v-on:click="removeTodo($index)">X</button>
            </li>
        </ul>
    </div>

    <div id="app6">
        <ul>
            <li v-for="todo in todos">
                {{ todo.id }}  {{ todo.title }}
            </li>
        </ul>
    </div>

<!--引入vue.js框架-->
<script type="text/javascript" src="vue.js"></script>
<!--引入jQuery框架-->
<script type="text/javascript" src="jquery.js"></script>

<script>
    new Vue({
        el:"#app",
        data:{
            message: 'Hello Vue.js!'
        }
    });

    new Vue({
        el:"#app2",
        data:{
            message: 'Hello Vue.js!'
        }
    });

    new Vue({
        el:"#app3",
        data:{
            todos:[
                {
                    text: 'Learn JavaScript',
                    title:"111"

                },
                {
                    text: 'Learn Vue.js',
                    title:"222"
                },
                {
                    text: 'Build Something Awesome',
                    title:"333"
                }
            ]
        }
    });

    new Vue({
        el:"#app4",
        data:{
            message: 'Hello Vue.js'
        },
        methods:{
            reverseMessage: function(){
                this.message = this.message.split('').reverse().join('')
            }
        }
    });

    new Vue({
        el:'#app5',
        data:{
            newTodo:'',
            todos:[
                { text:'Add some todos'}
            ]
        },
        methods:{
            addTodo:function() {
                var text = this.newTodo.trim();
                if(text) {
                    this.todos.push({text:text});
                    this.newTodo = ''
                }
            },
            removeTodo: function (index) {
                this.todos.splice(index,1)
            }

        }
    });

     //使用jQuery的post方法獲取數據
    $(document).ready(
            function getJSON(){
        $.post('http://192.168.1.122/yne_siteM/index.php/Home/Interface/mess2','username=1888888',function(data,status){
            var todos = data.data;
            //綁定數據
            new Vue({
                el: "#app6",
                data: {
                    todos: todos
                }
            });
        },'json');
    }
    );

</script>
</body>
</html>

 

 

總結一下幾種方法的體驗:vue

方法一，jQuery直接操做DOM，會使原來HTML內容不完整，而且數據綁定以後用到大量的字符拼接，在可讀性和可維護性上較差；java

方法二，必定程度上改善了HTML的可讀性，可是也是將一整塊html標籤抽離了放到<script id="theTmpl2" type="text/x-jsrender"></script>裏面，也不夠直觀。jquery

方法三，angularJS擴展了html，在兼容原來html的基礎上經過模型綁定、控制器回調等方法，能夠實現不破壞原來html內容的基礎上實現數據綁定。可是，測試demo過程當中，以爲寫起來不夠天然和有必定複雜性，並且框架比較大，和jQuery混用的效果也很差，會有必定衝突，在移動端性能可能不太好。git

方法四，vue.js必定程度上融合了angularJS的一些優勢，如不破壞html結果的前提綁定數據，更加輕量，能夠同時用在移動端上，我的以爲比較合適快速開發使用。github

 

具體項目demo已上傳至github:

https://github.com/chq3272991/testJS.git

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程