1、各种排序算法思想及代码的实现
2、flex布局全方位掌握，对于不兼容浏览器该怎么处理。
3、验证登录密码的等级
4、304状态码，如何读取缓存
5、jsonp实现
6、防止重复点击
验证登录密码的等级
思路：使用正则表达式
先来了解一下环视
(?=Expression):顺序肯定环视，表示所在位置右侧能够匹配Expression
(?!Expression)顺序否定环视，表示所在位置右侧不能匹配Expression
var strongRegex = new RegExp("^(?=.{8,})(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*\\W).*$", "g");表示从头匹配到尾，全局匹配。所匹配的字符串的后面要有8个以上不包括换行符的任意字符，要有大小写字符、数字、和非字母数字下划线的特殊字符。简而言之就是匹配字母、数字和特殊字符串至少8个。缺一条件就不满足。
也可以写成var strongRegex = new RegExp("^(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*\\W).{8,}$", "g");必须匹配字母数字特殊字符至少8个。
var strongRegex = new RegExp("^(?=.{8,})(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*\\W).*$", "g");
var s='13wrgfSD@';
console.log(strongRegex.test(s));//true
使用变量方式来定义正则表达式console.log(strongRegex.test(s));就不对了，返回false。具体什么原因我也不清楚。
监听密码输入框的keyup事件，匹配密码等级，并做响应处理
//html
<input type="password" name="pass" id="pass" />
<span id="passstrength"></span>
//js
$('#pass').keyup(function(e) {
var strongRegex = new RegExp("^(?=.{8,})(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*\\W).*$", "g");
var mediumRegex = new RegExp("^(?=.{7,})(((?=.*[A-Z])(?=.*[a-z]))|((?=.*[A-Z])(?=.*[0-9]))|((?=.*[a-z])(?=.*[0-9]))).*$", "g");
var enoughRegex = new RegExp("(?=.{6,}).*", "g");
if (false == enoughRegex.test($(this).val())) {
$('#passstrength').html('More Characters');
} else if (strongRegex.test($(this).val())) {
$('#passstrength').className = 'ok';
$('#passstrength').html('Strong!');
} else if (mediumRegex.test($(this).val())) {
$('#passstrength').className = 'alert';
$('#passstrength').html('Medium!');
} else {
$('#passstrength').className = 'error';
$('#passstrength').html('Weak!');
}
return true;
});
flex浏览器兼容,问题参考博文
向后兼容，使用老版本flex，对于容器加上display:box,display:flex-box，以及使用浏览器兼容的前缀例如：dispaly:-webkit-flex等
//替换类名
/* 定义 */
.flex-def {
display: -webkit-box; /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */
display: -moz-box; /* 老版本语法: Firefox (buggy) */
display: -ms-flexbox; /* 混合版本语法: IE 10 */
display: -webkit-flex; /* 新版本语法: Chrome 21+ */
display: flex; /* 新版本语法: Opera 12.1, Firefox 22+ */
}
/* 主轴居中 */
.flex-zCenter {
-webkit-box-pack: center;
-moz-justify-content: center;
-webkit-justify-content: center;
justify-content: center;
}
/* 主轴两端对齐 */
.flex-zBetween {
-webkit-box-pack: justify;
-moz-justify-content: space-between;
-webkit-justify-content: space-between;
justify-content: space-between;
}
/* 主轴end对齐 */
.flex-zEnd {
-webkit-box-pack: end;
-moz-justify-content: flex-end;
-webkit-justify-content: flex-end;
justify-content: flex-end;
}
/* 主轴start对齐 */
.flex-zStart {
-webkit-box-pack: start;
-moz-justify-content: start;
-webkit-justify-content: start;
justify-content: start;
}
/* 侧轴居中 */
.flex-cCenter {
-webkit-box-align: center;
-moz-align-items: center;
-webkit-align-items: center;
align-items: center;
}
/* 侧轴start对齐 */
.flex-cStart {
-webkit-box-align: start;
-moz-align-items: start;
-webkit-align-items: start;
align-items: start;
}
/* 侧轴底部对齐 */
.flex-cEnd {
-webkit-box-align: end;
-moz-align-items: flex-end;
-webkit-align-items: flex-end;
align-items: flex-end;
}
/* 侧轴文本基线对齐 */
.flex-cBaseline {
-webkit-box-align: baseline;
-moz-align-items: baseline;
-webkit-align-items: baseline;
align-items: baseline;
}
/* 侧轴上下对齐并铺满 */
.flex-cStretch {
-webkit-box-align: stretch;
-moz-align-items: stretch;
-webkit-align-items: stretch;
align-items: stretch;
}
/* 主轴从上到下 */
.flex-zTopBottom {
-webkit-box-direction: normal;
-webkit-box-orient: vertical;
-moz-flex-direction: column;
-webkit-flex-direction: column;
flex-direction: column;
}
/* 主轴从下到上 */
.flex-zBottomTop {
-webkit-box-pack: end;
-webkit-box-direction: reverse;
-webkit-box-orient: vertical;
-moz-flex-direction: column-reverse;
-webkit-flex-direction: column-reverse;
flex-direction: column-reverse;
}
/* 主轴从左到右 */
.flex-zLeftRight {
-webkit-box-direction: normal;
-webkit-box-orient: horizontal;
-moz-flex-direction: row;
-webkit-flex-direction: row;
flex-direction: row;
}
/* 主轴从右到左 */
.flex-zRightLeft {
-webkit-box-pack: end;
-webkit-box-direction: reverse;
-webkit-box-orient: horizontal;
-moz-flex-direction: row-reverse;
-webkit-flex-direction: row-reverse;
flex-direction: row-reverse;
}
/* 是否允许子元素伸缩 */
.flex-item {
-webkit-box-flex: 1.0;
-moz-flex-grow: 1;
-webkit-flex-grow: 1;
flex-grow: 1;
}
/* 子元素的显示次序 */
.flex-order{
-webkit-box-ordinal-group: 1;
-moz-order: 1;
-webkit-order: 1;
order: 1;
}
jsonp
JSONP是JSON with padding 的简写，是应用JSON的一种新方法，在后来的web服务中心非常流行。JSONP看起来与JSON差不多，只不过是被包含在回调函数中的json。例如callback({"name":"hh"})
JSONP由两部分组成，回调函数和数据。回调函数是响应到来时应该在页面中调用的函数。回调函数的名字一般在请求中指定。而数据就是传入回调函数的json数据，由服务器给出。栗子，JSONP请求：
https://freegeoip.net/json/?callback=handleResponse
JSONP是通过动态<script>元素来使用的，使用时可以为src属性指定一个跨域URL。因为JSONP是有效的JavaScript代码，所以在请求完成后，即在JSONP响应加载到页面中以后，就会立即执行。上栗子：
//js
function handleResponse(res){
console.log(res);
console.log(res.ip);
}
var script=document.createElement('script');
script.src="https://freegeoip.net/json/?callback=handleResponse";
document.body.insertBefore(script,document.body.firstChild);
当页面加载后控制台输出：
object展开
jsonp优点
- 能够直接访问响应文本
- 支持在浏览器与服务器之间的双向通信
jsonp缺点 - jsonp从其他域加载代码执行，如果其他域不安全，会在响应中携带恶意代码，安全性差
- 要确定jsonp请求失败不大容易，可以使用H5的onerror事件处理程序，但是浏览器支持行不广泛。或者使用计时器检测指定时间内是否得到了响应。但是毕竟不是每个用户的上网速度和宽度都是一样的
防止短时间重复点击
对于可以设置点击禁用，然后过一段时间取消禁用。也可以设置一个标志，为真时执行，并且改变标志状态，过一段时间恢复
setTimeout(fn,t)fn中的this指向window
//表单，非表单也可以，相当于定义一个属性和设置标志道理相同
var btn = document.getElementById('btn');
btn.onclick = function() {
if (!this.disabled) {
this.disabled = 'true';
}
var that = this;
setTimeout(function() {
that.removeAttribute('disabled')
// console.log(this) window
}, 1000)
}
var div = document.getElementById('btn');
var f=true;
div.onclick = function() {
if (f) {
f = false;
}
var that = this;
setTimeout(function() {
f=true;
// console.log(this) window
}, 1000)
}
网友评论