完善优化项目的样式逻辑

理解项目的基本逻辑及各种实现方式

优化处理小Bug

学习PHP相关知识

研究基本版代码

整理所得

刷新页面重新加载

location.reload()

判断是不是移动设备

let isMobile = {
    Android: function() {
        return navigator.userAgent.match(/Android/i) ? true: false;
    },
    BlackBerry: function() {
        return navigator.userAgent.match(/BlackBerry/i) ? true: false;
    },
    iOS: function() {
        return navigator.userAgent.match(/iPhone|iPad|iPod/i) ? true: false;
    },
    Windows: function() {
        return navigator.userAgent.match(/IEMobile/i) ? true: false;
    },
    any: function() {
        return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Windows());
    }
};

scss处理背景图片

@mixin bg-image($url) {
  background-image: url($url + "@2x.png");
  @media (-webkit-min-device-pixel-ratio:3),(min-device-pixel-ratio:3){
    background-image: url($url + "@3x.png")
  }
}

img处理

<img width="100" height="100" src="image100.png" srcset="image200.png 2x,image300.png 3x"/>

手机像素比

链接

取消a标签在移动端点击时的蓝色

a{ 
text-decoration:none; 
color:#333; 
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
-webkit-user-select: none;
-moz-user-focus: none;
-moz-user-select: none;
}

使用图片作为a标签的点击按钮时，当触发touchstart的时候，往往会有一个灰色的背景

a,a:hover,a:active,a:visited,a:link,a:focus{
    -webkit-tap-highlight-color:rgba(0,0,0,0);
    -webkit-tap-highlight-color: transparent;
    outline:none;
    background: none;
    text-decoration: none;
}

按钮的点击时出现边框的问题

button {
            border: none;
            outline: none;
}

CSS样式关键字

initial

表示元素属性的初始默认值(该默认值由官方CSS规范定义) 兼容性: IE不支持

inherit

表示元素的直接父元素对应属性的计算值兼容性: IE7-不支持

unset

unset相对于initial和inherit而言，相对复杂一点。表示如果该属性默认可继承，则值为inherit；否则值为initial。实际上，设置unset相当于不设置兼容性: IE不支持，safari9-不支持，ios9.2-不支持，android4.4.4-不支持

revert

表示样式表中定义的元素属性的默认值。若用户定义样式表中显式设置，则按此设置；否则，按照浏览器定义样式表中的样式设置；否则，等价于unset 兼容性: 只有safari9.1+和ios9.3+支持

all

表示重设除unicode-bidi和direction之外的所有CSS属性的属性值，取值只能是initial、inherit、unset和revert 兼容性: IE不支持，safari9-不支持，ios9.2-不支持，android4.4-不支持

实用的css弹窗

链接

禁用div元素（不可点击）

css

.disable {
    pointer-events: none;
}

js

//禁用
$.fn.disable = function () {
    $(this).addClass("disable");
};
 
//启用
$.fn.enable = function () {
    $(this).removeClass("disable");
};
$("#@id").disable();
$("#@id").enable();

正则表达式

链接

/^[0-9]+abc$/

^ 为匹配输入字符串的开始位置。 [0-9]+匹配多个数字， [0-9] 匹配单个数字，+ 匹配一个或者多个。 abc $匹配字母 abc 并以 abc 结尾，$ 为匹配输入字符串的结束位置。

限定符

字符	描述
*	匹配前面的子表达式零次或多次
+	匹配前面的子表达式一次或多次
?	匹配前面的子表达式零次或一次
{n}	n 是一个非负整数。匹配确定的 n 次
{n,}	n 是一个非负整数。至少匹配n 次
{n,m}	m 和 n 均为非负整数，其中n <= m。最少匹配 n 次且最多匹配 m 次

Vue/keep-alive

用来对组件进行缓存，从而节省性能，由于是一个抽象组件，所以在v页面渲染完毕后不会被渲染成一个DOM元素

当组件在keep-alive内被切换时组件的activated、deactivated这两个生命周期钩子函数会被执行

被包裹在keep-alive中的组件的状态将会被保留

activated created

#	created	activated
触发顺序	组件创建最初始	created => mounted =>activated
触发次数	只在组件刚创建时创建	在使用keep-alive标签中有效，每次进入都会执行钩子中的函数

Css3 animation

链接

1）animation-name，规定需要绑定到选择器的 keyframe 名称。

2）animation-duration，规定完成动画所花费的时间，以秒或毫秒计默认是0表示无动画，单位可以设s秒或ms毫秒。

3）animation-timing-function，规定动画的速度曲线，默认值ease，可以设linear，ease，ease-in，ease-out，ease-in-out，cubic-bezier(n,n,n,n)，steps。

4）animation-delay，规定在动画开始之前的延迟，默认值是0，表示不延迟，立即播放动画。单位是s秒或ms毫秒。允许设负时间，意思是让动画动作从该时间点开始启动，之前的动画不显示。例如-2s 使动画马上开始，但前 2 秒的动画被跳过。

5）animation-iteration-count，规定动画应该播放的次数，默认值为1，即放完一遍后不循环播放。除数字外也可以设关键字infinite表示无限循环播放。

6）animation-direction，规定是否应该轮流反向播放动画，可设normal，alternate，alternate-reverse。默认值是normal表示正常播放动画。alternate表示轮转正反向播放动画，即动画会在奇数次（1，3，5…）正常播放，而在偶数次（2，4，6…）反向播放。alternate-reverse正好反过来，奇数次反向播动画，偶数次正向播动画

2020-6-5