《Web开发的基础原理》(4)

8. 丰富的组件和框架

自打有了Javascript和AJAX以后，前端的能力越来越强大，使用Javascript脚本，可以随心所欲的修改网页元素的样式、内容；可以灵活地与用户进行交互，并随时发起异步请求。web2.0时代就此开启。

8.1 jQuery

然而，用Javascript改变网页元素不太方便，发起AJAX的代码也比较长。因此就出现了各种Javascript库，可以简化Javascript编程。最著名的、使用最广泛的就是jQuery。

jQuery本质上是一个Javascript函数库，它将常用的Javascript封装成更简洁易用的形似。

选取网页元素时，借鉴了CSS选择器的方式，可以方便地选取一个或多个网页元素。
提供简洁、高效的遍历元素方法。
将AJAX请求封装到只用一条语句。

看个例子：

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("li").each(function(){
      alert($(this).text())
    });
  });
});
</script>
</head>
<body>
<button>输出每个列表项的值</button>
<ul>
<li>Coffee</li>
<li>Milk</li>
<li>Soda</li>
</ul>
</body>
</html>

本例中，HTML部分是一个按钮，加上一组列表。在这里并未事先定义按钮的onclick事件，一切均由Javascript(jQuery)负责。
JS部分，直接就定义了button按钮的onclick事件的方法。此处方法是一个嵌套的方法。
$("li")选择了所有的列表元素(li标签)，.each实现遍历，遍历的具体操作又是一个嵌套方法，方法的内容是弹出一个alert窗口。$(this)表示循环中的变量。

此案例运行后会依次弹出3个消息窗。初学者需要习惯JS方法层层嵌套的风格。

案例：

<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js">
</script>
<script>
$(document).ready(function(){
  $("#btn1").click(function(){
    $('#test').load('/example/jquery/demo_test.txt');
  })
})
</script>
</head>
<body>
<h3 id="test">请点击下面的按钮，通过 jQuery AJAX 改变这段文本。</h3>
<button id="btn1" type="button">获得外部的内容</button>
</body>
</html>

这个案例简单的说，就是在名叫btn1的按钮的onclick方法中，让名为test的h3标题异步加载服务器端的demo_test.txt文件的内容。整个的发起请求、等待响应、回调函数的过程用一句load就完成了。当然本例的回调函数没有执行额外的内容。

8.2 Canvas

以前我们知道，HTML文件是描述超文本的协议，即文本和样式，而多媒体文件：如图片、音频、视频是另外传送并嵌入页面的。为了实现动画效果，可以使用GIF、Flash或视频等多媒体文件文件。这些多媒体文件都是服务器端实现准备好的。浏览器端不能凭空生成一个新的图片。

而现在有了Javascript，既然浏览器可以运行代码，那么是否可以让浏览器在页面上画画呢？答案也是肯定的。W3C在设计HTML5时，提出了Canvas技术。Canvas意指画布，就是使用Javascript语言在网页上绘制图像的技术。

如果你接触过AutoCad，或者是小时候的海龟作图，就很容易理解Canvas技术。实际上就是使用了类似Autocad的方式，用语法告诉浏览器，怎样把图形画出来。

看个例子：

<!DOCTYPE HTML>
<html>
<body>

<canvas id="myCanvas" width="200" height="200" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>

<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.strokeStyle = "blue";
cxt.moveTo(100+80*Math.cos(72*0*Math.PI/180),100+80*Math.sin(72*0*Math.PI/180));
cxt.lineTo(100+80*Math.cos(72*2*Math.PI/180),100+80*Math.sin(72*2*Math.PI/180));
cxt.lineTo(100+80*Math.cos(72*4*Math.PI/180),100+80*Math.sin(72*4*Math.PI/180));
cxt.lineTo(100+80*Math.cos(72*1*Math.PI/180),100+80*Math.sin(72*1*Math.PI/180));
cxt.lineTo(100+80*Math.cos(72*3*Math.PI/180),100+80*Math.sin(72*3*Math.PI/180));
cxt.lineTo(100+80*Math.cos(72*0*Math.PI/180),100+80*Math.sin(72*0*Math.PI/180));
cxt.stroke();
</script>
</body>
</html>

本例中，网页上设置了一个200*200的画布。Javascript部分，首先，获取到myCanvas，定义上下文Context，设置画笔颜色，然后就按部就班地、像海龟一样画出了一个五角星。

自从Canvas技术诞生后，就像打开了网页作图艺术的潘多拉魔盒，理论上，可以让浏览器绘制出非常精美的画作，也可以利用重绘来实现动画效果。不过对于初学者，只要稍作了解即可，我们暂时不需要自己来绘制复杂的图案，因为基于Canvas技术，已经衍生出很多成熟的Javascript库。

8.3 Echarts

我们学习Web开发，一个主要的目的是数据可视化，将统计数据或分析报表已直观的图表形式展现出来。这就需要在网页上绘制Office图表。

我们已经知道可以利用Canvas技术在网页上绘图，但是我们不需要从零开始，图表的每一根曲线、每一个柱子，每个坐标轴以及数字，不需要我们一个一个画出来。有很多数据可视化JS库封装了这些工作，我们只需要准备好数据，调用JS函数，然后设置一些图表参数，就可以在网页上呈现一幅颇为美观的图表了。著名JS数据可视化库有D3、Highcharts等，目前在我们的工作环境中，一般使用Echarts，是百度前端团队开发的一个开源JS库。从Echarts的官网上，可以看到他支持的图表类型非常多（比Office多），默认样式美观，互动功能完善，支持各种自定义设置，使用也十分方便。

举个官网的例子

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="height:400px"></div>
    <!-- ECharts单文件引入 -->
    <script src="http://echarts.baidu.com/build/dist/echarts-all.js"></script>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts图表
        var myChart = echarts.init(document.getElementById('main')); 
        var option = {
            tooltip: {
                show: true
            },
            legend: {
                data:['销量']
            },
            xAxis : [
                {
                    type : 'category',
                    data : ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
                }
            ],
            yAxis : [
                {
                    type : 'value'
                }
            ],
            series : [
                {
                    "name":"销量",
                    "type":"bar",
                    "data":[5, 20, 40, 10, 10, 20]
                }
            ]
        };
        // 为echarts对象加载数据 
        myChart.setOption(option); 
    </script>
</body>

在本例中，HTML页面部分只需准备一个图表容器，即一个指定了大小的div。JS部分，依次做了几件事：

引入Echarts JS库文件；
初始化echarts对象，绑定容器
设定图表参数，包括：图表类型、坐标轴、标题、数据系列等。图表的组成元素与Office图表基本相同的，Option基于JSON格式。
设置生效，加载图表。

9 小结

写到这里，基础Web开发用到的概念和工具都介绍完了，可能读者对于这么多概念又有些混淆，我们还是以一张图来总结一下。
enter image description here

posted @ 2017-02-13 13:13 公爵阅读(171) 评论(0) 编辑收藏举报

刷新页面返回顶部

载欣载瞩

Herzog的自营地