Python自动化开发学习18-Web前端补充内容

发布时间：2020-07-31 04:44:23 作者：骑士救兵
来源：网络阅读：3650

JavaScript-补充

js正则表达式

在使用之前，首先要创建正则表达式对象，创建对象有两种方式：
/pattern/attributes ：这个简单，推荐用这个。而且不用写引号
new RegExp(pattern, attributes); ：和上面的效果一样，这里是通过参数把值传入的，所以必须写上引号。另外还要注意转义字符。
参数 pattern 是一个字符串，就是正则表达式。
参数 attributes 是一个可选的字符串，包含属性 "g"（全局匹配）、"i"（对大小写不敏感）和 "m"（多行匹配模式）。
分别用上面2中方法创建正则表达式对象，忽略可选的 attributes 参数，两种方法创建出的结果完全一样：

> reg1 = /^\d$/;
< [regex] /^\d$/: 
> reg2 = new RegExp("^\\d$");  // 注意字符串了的\要转义
< [regex] /^\d$/:

然后就是用正则表达式对象匹配我们的字符串，这里也学习2个方法：
RegExpObject.test(string) ：检索字符串是否匹配，返回布尔值（true 或 false）
RegExpObject.exec(string) ：获取匹配的结果，匹配不到则返回 null。返回一个数组，可以对返回的结果再次匹配。这个方法比较复杂，后面一步一步展开。

> reg1 = /^\d+$/;  // 匹配纯数字字符串
< [regex] /^\d+$/: 
> reg1.test('123')
< true
> reg1.test('1a23')
< false
> reg2 = /\bJava\w*\b/;  // 匹配以Java开头的单词
< [regex] /\bJava\w*\b/: 
> text = "JavaScript is more fun than Java or JavaBeans!"
< "JavaScript is more fun than Java or JavaBeans!"
> reg2.exec(text);  // 只匹配到了第一个，而且返回的是数组
< [object Array]: ["JavaScript"]

如果在正则表达式中使用()把表达式分组，那么返回的数组会有第2个元素。紧接上面的例子：

> reg3 = /\b(Ja(va))(\w*)\b/;  // 匹配以Java开头的单词，这里用括号加了3个分组
< [regex] /\b(Ja(va))(\w*)\b/: 
> reg3.exec(text);
< [object Array]: ["JavaScript", "Java", "va", "Script"]

如果要匹配所有，那么就需要加上 attributes 参数 g ，但是一次只返回一个结果。再次执行，会返回下一个结果。匹配完了返回 null 。然后可以继续再次执行，又从头开始。还是紧接上面的例子：

> reg4 = /\bJava\w*\b/g;  // 匹配以Java开头的单词，最后加了g全局匹配
< [regex] /\bJava\w*\b/g: 
> reg4.exec(text)
< [object Array]: ["JavaScript"]
> reg4.exec(text)
< [object Array]: ["Java"]
> reg4.exec(text)
< [object Array]: ["JavaBeans"]
> reg4.exec(text)
< null
> reg4.exec(text)
< [object Array]: ["JavaScript"]

阻止事件发生2

自定义事件先执行
上节课讲过 a 标签默认有个事件，我们可以再绑定一个自定义事件，并且会先执行自定义事件。然后如果事件返回 false，将中断操作（阻止后面的事件）。submit 是提交表单，也是一样的，同样可以通过 return false 来阻止提交表单。大多数情况都是这种自定义事件先执行。
默认事件先执行
这种情况比较少，比如复选框（checkbox），测试一下：

<body>
<label id="l1" for="i1">测试复选框</label>
<input id="i1" type="checkbox">
<script>
    document.getElementById('l1').onclick = function () {
        alert("我是label")
    };
    document.getElementById('i1').onclick = function () {
        alert("我是input");
    };
</script>
</body>

之前a标签测试的时候，是先弹出alert，点掉之后才会页面跳转。而这里是弹出alert的时候页面里的复选框已经变化好了。所以是先执行默认的事件。顺便看到 label 也是一般的情况，先执行自定义事件。

表单验证

结合上面的正则表达式来判断进行验证。然后结合上面的阻止事件发生，在验证不通过的时候，中断操作。
为什么要进行表单验证？可以减少服务器收到的请求。通过客户端上的验证，拦截掉一部分不合规的请求。不过服务器端不能完全依赖客户端的验证，因为客户端可以禁用js，或者修改客户端，甚至直接通过其他方式把请求发送到服务器端，服务端还是必须有一套完整的验证。这里先学习客户端通过js实现的验证。
老师的做法：循环的时候通过自定义属性来判断哪些标签需要验证。还是通过自定义属性来判断这个标签具体要验证什么。并不是写死的方法。比如
require = true ：判断这个标签是否需要做验证
field = ‘string’ ：这个标签需要填入的是字符串
mobile = tue ：这个标签需要验证是否是电话号码
min-len = 6 ：这个标签里的内容的最小长度是6
name = ‘pwd’ confirm-to = 'pwd' ：前一个是注册密码标签里的属性。后一个是确认密码标签里的自定义属性，去找 name 属性值和它一样的标签验证内容是否一致。
验证的触发写在 submit 标签的 onclick 事件里。如果验证失败，返回 false，阻止提交表单。
另外还可以做的更加高级，为每个需要验证的标签（require = true）添加一个失去焦点的事件（onblur），触发当前标签的验证。这里仅需要显示验证错误的提示信息即可。
记个思路，没有示例。

响应式布局

针对不同的媒体类型定义不同的样式。把你的css样式连同选择器一起，外面再包一层@media，写上条件。比如在宽度变化的时候来改变一下背景色：

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            height: 80px;
            background-color: red;
        }
        /*下面的样式生效的要求是，宽度最小是800px*/
        @media (min-width: 800px){
            .c1{
                background-color: yellow;
            }
        }
    </style>
</head>
<body>
<div class="c1"></div>
</body>

应用场景，比如顶部的菜单一字排开，当页面宽度变小导致宽度不够的时候，我们当然可以选择设置一个最小宽度，让底部出现滚动条。或者也可以通过响应式布局，让这部分的样式变成另外一种。比如原来是一字排开的菜单，现在全部收到一个下拉列表里，点击之后可以竖着展开。不够仅仅只是css样式的改变貌似实现不了。其实就是把两种菜单都写好，同时只显示其中一个。设置另一个的display的值为none就可以隐藏掉了。

样式优先级2

css样式的优先级，已经学习过了，一般都是后加载的生效。另外还可以在样式后面加上 !important ，保证这个样式一定生效：

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            background-color: red !important;  /*这个样式下面改不掉*/
            height: 80px;
            border: 1px solid green;  /*这个样式会被覆盖*/
        }
    </style>
</head>
<body>
<div class="c1" ></div>
</body>

下面就要讲插件，在使用别人的组件的时候，就有可能需要用到。因为你可能无法保证你的样式一定是写在最后的，比如你的插件在js了修改了样式。这时候就需要用这个方法强制使自己的样式生效，无法被改变。
这个效果很厉害，所以不能乱用。important只应该被允许用来覆盖掉js添加的样式，比如那些自己无法控制的js组件加上的样式，而且使用的时候必须限定css范围。

前端组件介绍

EasyUI

去Demo里找你需要的样式，直接把它的源码复制过来就可以使用了。样式上侧重于后台管理的场景。
不过页面里引用的 css 和 js 文件的连接还要改一下。去Download里把EasyUI下载下来，存放到本地。再把页面中的地址修改成本地文件的地址。
优点：功能齐全。
缺点：学习代价大，不太容易修改。因为，js代码中可能会修改html标签，即你写的html和你页面最终显示的html会不太一样，被js修改过了。还有，存在很多Ajax操作，这个还没学，等学习了Ajax之后再来考虑使用这个。

jQuery UI

使用起来和上面的EasyUI差不多。先下载下来，看中的样式你的自己找到源码复制下来使用。样式同样是侧重于后台管理的场景。
优点：没啥优点，各方面看和EasyUI都差不多。相对简单一下，目前的水平尚能掌握，这个可以先用着。
缺点：功能没有上面的EasyUI齐全。而且只是js丰富一些，基本没有css，做的很朴素。

BootStrap

上面2个基本都是针对后台管理页面的场景，这个组件对于其他场景的样式也同样有支持（大概是全部场景），比如你的Web主站。另外，这里面用有很多响应式布局，包括它自己的页面里也是，知道一下。
优点：应用场景更多。
缺点：没说。总之现在都用它

使用模板

上面提供的都是各种组件，我们还得自己组合。那么来试试看模板。
模板可以网上找免费的，当然好的模板也有收费的。
课上演示了 nifty-v2.2.2 这个模板。先去 template 文件夹里找你需要的示例，都是完整的一个页面。先基于一个模板把页面画出来，然后按照实际的需求改成自己需要的。

示例-轮播图（bxSlider）

这里再介绍一个组件：bxSlider。官网：https://bxslider.com/
首先下载插件，存放在本地。
Python自动化开发学习18-Web前端补充内容

接着在html中引入他的css文件和js文件，还有jQuery。注意jQuery得在js文件之前引入。
然后复制它的script代码，再复制它的body里的代码。
最后填入你的图片就好了：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-1.12.4.js"></script>
    <link rel="stylesheet" href="bxslider-4-4.2.12/dist/jquery.bxslider.min.css">
    <script src="bxslider-4-4.2.12/dist/jquery.bxslider.min.js"></script>
    <script>
        $(document).ready(function(){
            $('.slider').bxSlider();
        });
    </script>
</head>
<body>
<div class="slider">
  <div><img src="bxslider-4-4.2.12/docs_src/assets/img/photo1.jpeg" /></div>
  <div><img src="bxslider-4-4.2.12/docs_src/assets/img/photo2.jpeg" /></div>
  <div><img src="bxslider-4-4.2.12/docs_src/assets/img/photo3.jpeg" /></div>
  <div><img src="bxslider-4-4.2.12/docs_src/assets/img/photo4.jpeg" /></div>
  <div><img src="bxslider-4-4.2.12/docs_src/assets/img/photo5.jpeg" /></div>
  <div><img src="bxslider-4-4.2.12/docs_src/assets/img/photo6.jpeg" /></div>
</div>
</body>
</html>

上面只是默认的效果，还可以设置参数，只需要修改script，在里面加上参数：

    <script>
        $(document).ready(function(){
            $('.slider').bxSlider({
                mode: 'fade',  // 切换模式设为淡出
                auto: true,  // 自动切换
                pause: 2000  // 自动切换间隔（ms）
            });
        });
    </script>

更多的参数设置就去网上查吧。

补充各种前端插件

这部分内容是这个模块的学习内容学完之后，在之后的项目学习甚至是以后自己用过碰到过的全段插件，都补充到下面。

Bootstrap Wizard

文档：http://vinceg.github.io/twitter-bootstrap-wizard/
是在讲CRM项目的时候，提到过这个插件。可以做成向导式的（就是有上一步、下一步的）表单提交。