zoukankan      html  css  js  c++  java
  • 《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部分,依次做了几件事:

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

    9 小结

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

  • 相关阅读:
    mysql(一) 关联查询的方式
    SpringBoot2.0(五) CORS跨域
    SpringBoot2.0(四) 远程调试
    SpringBoot2.0(三) 文件上传
    SpringBoot2.0(二) 配置文件多环境
    SpringBoot2.0(一) mybatis
    Java InputStream转File
    git 命令学习
    reids 中出现 (error) MOVED 原因和解决方案
    ibm 的 heapanalyzer 分析器
  • 原文地址:https://www.cnblogs.com/herzog/p/6393333.html
Copyright © 2011-2022 走看看