*注：本文章是在工作过程中所接触的知识点的整理，涉及的东西比价杂乱，如有错误之处，欢迎纠错与指导
一, 新窗口打开页面
1, js跳转页面与新窗口的打开
1.1, 超链接Welcome
等同于
window.location.href="XXXXX";//在同当前窗口中打开窗口
1.2, 超链接Welcome
等同于
window.open("XXXXX"); //在另外新建窗口中打开窗口
1.3, 在原来的窗体中直接跳转用
window.location.href="你所要跳转的页面";
2, vue-router在新窗口打开页面
2.1,
新页面打开home页 2.2, 编程式导航
可以借助router的示例方法，通过编写代码实现。但是vue2.0之后, $router.push 和 $router.go不支持新窗口打开的属性。所以使用 $router.resolve
openNewWindow(){
let routeUrl = this.$router.resolve({
path: "/openNewWindow"
});
window.open(routeUrl.href, '_blank');
}二, 获取属性的方法总结
属性：用input标签为例，value id style disabled等就是属性。
获取属性的方法如下
1, 通过点的方式
var oText = document.getElementById("text")oText.value可以直接获取到
注意：
1, 点要查找的是JS中本来就存在的属性名，不能找到变量或者函数的参数
2, 标准浏览器下无法访问html中的自定义属性，可以获取通过JS参加的自定义属性
3, 无法获取相对网址
2, 通过中括号[]的方式。
oText[value]注意：
1，可以访问任何变量和参数
2，标准浏览器下无法访问HTML中的自定义属性，可以获取通过JS参加的自定义属性。
3，无法获取相对网址，比如img.src获取的是绝对路径。
两者区别：
1, 中括号运算符总是能代替点运算符。但点运算符却不一定能全部代替中括号运算符。
2, 中括号运算符可以用字符串变量的内容作为属性名。点运算符不能。obj['string'+variable]
3, 中括号运算符可以用纯数字为属性名。点运算符不能。
4, 中括号运算符可以用js的关键字和保留字作为属性名。点运算符不能。
3, 通过DOM的方式
获取属性的值：getAttribute(属性名) oText.getAttribute('value')
设置属性的值：setAttribute(属性名, 要设置的值) oText.setAttribute('value','hello')
删除：removeAttribute(属性名) oText.getAttribute('value')
Dom获取属性的优势：
1，可以获取html中自定义的属性
2，获取的是相对网址，不过 IE7以下还是绝对网址
3，IE下可以通过style访问
//IE下可以这样用：oText.style.getAttribute('width') 标准浏览器不可以
三, BFC
**这个知识点真的是没怎么闹明白，收藏了几个写的不错的文章，多看看多学学吧
BFC 块格式化上下文(Block Formatting Context)。
W3C的定义：浮动元素和绝对定位元素,非块级盒子的块级容器(例如inline-blocks,table-cells,和table-captions),以及overflow值不为“visiable”的块级盒子,都会为他们的内容创建新的BFC。
什么是BFC //写的很通俗易懂
什么是BFC //写的比较详细系统
前端精选文摘：BFC 神奇背后的原理
四, VSCode设置Emmet的使用
1, 插件安装
设置-->管理扩展-->搜索Emmet安装
2, 配置
文件-->首选项-->设置
代码如下
{
"emmet.syntaxProfiles": {
"vue-html": "html",
"vue": "html"
},
"emmet.triggerExpansionOnTab": true,
"emmet.showSuggestionsAsSnippets": true,
}五, display:flow-root
对于display的属性,常见的有block、inline、inline-block、flex、grid、table和table-cell等。flow-root是display的新属性值,常用于清除浮动。
之前一般用的清除浮动的方案是clear:both;overflow:hidden，父元素display:table等。
几种常见的清除浮动方法
优势对父元素的设置比较友好
清除浮动案例：
.parentElement{
display: flow-root;
}
使用的时候因为浏览器兼容性的原因,需要做一些处理。使用css的条件选择属性@supports()。
@supports的具体用法可以看 CSS3条件判断 @supports
.floatElement{
float: left; /*或者right*/
}
.parentElement::after {
content:'';
display: table;
clear: both
}
@supports(display:flow-root){
.parentElement{
display: flow-root;
}
.parentElement::after{
content:none;
}
}或者
.floatElement{
float: left; /*或者right*/
}
@supports not (display:flow-root) {
.parentElement::after {
content: '';
display: table;
clear:both;
}
}六, module.exports
遇到这个知识点是在自学webpack过程中还有看见同事将极验相关的操作抽出来放在一个服务里面，用到了module.exports，于是就去了解了一下。
极验教程： 极验教程链接
开发中,可以将代码拆分成多个脚本文件，并且让它们相互调用。如何定义和使用模块，这个步骤简称为模块化。相当于：HTML 中的 。module.exports就是提供模块使用时候的接口。
var Demo = {
name: 'Demo',
author: 'xiaoyuan',
sayName: function(name){
console.log(this.name);
}
}
module.exports = Demo;返回一个json object。这样可以全局共享的变量或者方法。
调用方法：
var Demo= require('./Demo.js');
Demo.sayName('hello'); //hello或者：
var func1 = function() {
console.log("func1");
};
var func2 = function() {
console.log("func2");
};
exports.function1 = func1;调用方法：
var functions = require("./functions");
functions.function1();
functions.function2();官方说明： 链接地址
发现在开发过程中（主要使用vue+ES6），几乎很少用到module.exports。而使用module.exports达到的效果发现export也可以实现。于是去查了一下两者的关系。发现了第七个知识点
七, module.exports,exports,export, export default的区别
module.exports和exports遵循的是CommonJS模块规范。export和export default遵循的是ES6模块规范。CommonJS模块规范和ES6模块规范完全是两种不同的概念，阮一峰大神有全面详细的文档讲解。CommonJS模块规范 、ES6模块规范
每个模块内部，module变量代表当前模块,是一个变量对象，指向一块内存,它的exports属性（即module.exports）是对外的接口。加载某个模块，其实是加载该模块的module.exports属性。
exports:是一个变量对象，它不是module的引用，它是{}的引用，它指向module.exports的{}模块
exports只能使用.语法向外暴露内部变量。例：exports.xxx=xxx
module.exports既可以通过点语法，也可以直接赋值一个对象（module.exports.xxx=xxx。module.exports=xxx）
Node为每个模块提供一个exports变量，指向module.exports。这等同在每个模块头部，有一行这样的命令。
var exports = module.exports;**添加一个知识点，模块module.exports与实例化 链接地址
default就是别名，默认值的意思。所以export default向外暴露的成员，可以使用任意变量来接收，但是只能向外暴露一次。
//test.js
var word = 'hello world';
export default word;
//testDemo.js
import wordDemo from './test.js';
export default {
data(){
return {}
},
methods: {
test(){
console.log("testDemo");
}
}
}export向外暴露的成员，使用{}来接收,可以定义多个，需要使用哪一个的时候就引入哪一个。名字必须按照定义好的名字，实在不想用，可以用as来取别名。
//test.js
export var wordOne = 'hello world';
export var wordTwo = 'hello';
export var wordThree = 'hi';
//testDemo.js
import {wordOne,wordThree as wordFour} from './test.js';
export default {
data(){
return {}
},
methods: {
test(){
console.log("testDemo");
}
}
}export与export default可以同时使用
exports 和module.exports 必须后面跟=，export与export default不需要
发现module.exports一般配合require使用，export一般配合import使用，ps：一般没有定死。于是去了解了一下require与import的区别
八, require和import的区别
require和import的区别
九, vue中使用base64,md5和sha1
base64:编码方式，可以加密和解密。可逆加密。
md5：消息摘要算法， 不可逆加密。
sha1：安全哈希算法， 不可逆加密。
md5，sha1 是信息摘要，确保信息的唯一性。
安装：
npm install js-base64 --save
npm install js-md5 --save
npm install js-sha1 --save
使用:
import md5 from 'js-md5';
let Base64 = require('js-base64').Base64;
import Sha1 from 'js-sha1';
export default{
data(){
return {
value: 'xxxxx'
}
},
methods:{
encryptData(val){
let md5Value = md5(val);
let shaVaule = Sha1(val);
let base64Value = Base64.encode(val);//解密 Base64.decode(base64Value);
}
}
}十, 图片base64的使用
CSS中使用：background-image: url("data:image/png;base64,iVBORw0KGgo=...");
HTML中使用：
有点：
无额外请求，没有跨域问题，无需考虑缓存、文件头或者cookies问题
缺点：减少一个图片的 HTTP 请求，但是css体积增大，影响渲染，可能会导致比较长时间的空白屏幕。
十一, Http Header里的Content-Type
Content-Type是指http/https发送信息至服务器时的内容编码类型，contentType用于表明发送数据流的类型，服务器根据编码类型使用特定的解析方式，获取数据流中的数据。
一般常用的有这样几种：application/x-www-form-urlencoded、multipart/form-data、application/json、text/plain
具体格式可以看下面的博客 POST提交数据之---Content-Type的理解
十二, 校验总结
注：先了解一下js的正则表达式语法 RegExp 参考手册
//判断手机号
export function isMobile(val){
return /^(((13[0-9]{1})|(14[0-9]{1})|(15[0-9]{1})|(17[0-9]{1})|(18[0-9]{1}))+\d{8})$/.test(val);
}//判断邮箱
export function isEmail(val){
return /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/.test(val);
}//判断是否为邮箱或者手机号
export function isMobileOrEmail(val){
return /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/.test(val)||/^(((13[0-9]{1})|(14[0-9]{1})|(15[0-9]{1})|(17[0-9]{1})|(18[0-9]{1}))+\d{8})$/.test(val);
}//数字
export function isNumber(val){
return /^[0-9]*$/.test(val);
}//校验是否为纯数字 js的isNaN函数
export let checkNum = (val) => {
if(isNaN(val)){
return false;
}
return true;}
//校验是否为纯数字(正则)
export let checkNum1 = (val) => {
return /^[0-9]+.?[0-9]*$/.test(val); }
//匹配：0-9出现一次或多次,·出现零次或一次,0-9出现零次或多次。/^[0-9]+.?[0-9]*$/这样写法，012.23也是匹配的
//由字母、数字组合
export function isCombination(val){
return /^(([a-z]+[0-9]+)|([0-9]+[a-z]+))[a-z0-9]*$/i.test(val);
}//判断身份证
export function isIdCard(idCard){
var vcity={ 11:"北京",12:"天津",13:"河北",14:"山西",15:"内蒙古",
21:"辽宁",22:"吉林",23:"黑龙江",31:"上海",32:"江苏",
33:"浙江",34:"安徽",35:"福建",36:"江西",37:"山东",41:"河南",
42:"湖北",43:"湖南",44:"广东",45:"广西",46:"海南",50:"重庆",
51:"四川",52:"贵州",53:"云南",54:"西藏",61:"陕西",62:"甘肃",
63:"青海",64:"宁夏",65:"新疆",71:"台湾",81:"香港",82:"澳门",91:"国外"
};
idCard = idCard.toUpperCase();
if(!(/(^\d{15}$)|(^\d{17}([0-9]|X)$)/.test(idCard))) {
return false;
}
var province = idCard.substr(0,2);
if(vcity[province] == undefined) {
return false;
}
var len = idCard.length,re;
if(len == 15){
re = new RegExp(/^(\d{6})(\d{2})(\d{2})(\d{2})(\d{3})$/);
var arrSplit = idCard.match(re);
var dtmBirth = new Date('19' + arrSplit[2] + '/' + arrSplit[3] + '/'+ arrSplit[4]);
var bGoodDay;
bGoodDay = (dtmBirth.getFullYear()== Number(arrSplit[2]))
&& ((dtmBirth.getMonth() + 1) == Number(arrSplit[3]))
&& (dtmBirth.getDate() == Number(arrSplit[4]));
if (!bGoodDay) {
return false;
} else {
var arrInt = new Array(7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5,8, 4, 2);
var arrCh = new Array('1', '0', 'X', '9', '8', '7', '6', '5', '4','3', '2');
var nTemp = 0, i;
idCard = idCard.substr(0, 6) + '19' + idCard.substr(6, idCard.length - 6);
for (i = 0; i < 17; i++) {
nTemp += idCard.substr(i, 1) * arrInt[i];
}
idCard += arrCh[nTemp % 11];
return true;
}
}
if(len == 18){
re = new RegExp(/^(\d{6})(\d{4})(\d{2})(\d{2})(\d{3})([0-9]|X)$/);
var arrSplit = idCard.match(re);
var dtmBirth = new Date(arrSplit[2] + "/" + arrSplit[3] + "/"+ arrSplit[4]);
var bGoodDay;
bGoodDay = (dtmBirth.getFullYear() == Number(arrSplit[2]))
&& ((dtmBirth.getMonth() + 1) == Number(arrSplit[3]))
&& (dtmBirth.getDate() == Number(arrSplit[4]));
if (!bGoodDay) {
return false;
} else {
var valnum;
var arrInt = new Array(7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5,8, 4, 2);
var arrCh = new Array('1', '0', 'X', '9', '8', '7', '6', '5', '4','3', '2');
var nTemp = 0, i;
for (i = 0; i < 17; i++) {
nTemp += idCard.substr(i, 1) * arrInt[i];
}
valnum = arrCh[nTemp % 11];
if (valnum != idCard.substr(17, 1)) {
return false;
}
return true;
}
}
}//只能是英文字母
export let isLetter = (val) => {
return /^[a-zA-Z]*$/.test(val);
}//只能是汉字
export let isChinese = (val) => {
return /^[\u0391-\uFFE5]+$/.test(val);
}//只能是数字
export let isNumber = (val) => {
return /^[0-9]+$/.test(val);
}//获取字符串的真实长度（包含汉字）
export function stringLength(val){
//定义字符串的长度和字符串相应位置字符的编码值
var len = 0, code = 0;
for(var i = 0; i < val.length; i++){
code = test.charCodeAt(i);
if(code >= 0 && code<=127){
len += 1;
}else{
len += 2;
}
}
return len;
}//8-16位，不能是纯字母、数字、不能有特殊字符
export let isPasswordRational = (val) => {
return /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,16}$/.test(val);
}//验证座机号
export let checkTel = (val) => {
return /^(\(\d{3,4}\)|\d{3,4}-)?\d{7,8}$/.test(val);
}//校验ip
export let checkIp = (val) => {
var reSpaceCheck = /^(\d+)\.(\d+)\.(\d+)\.(\d+)$/;
if(reSpaceCheck.test(val)){
val.match(reSpaceCheck);
//RegExp.$1是RegExp的一个属性,指的是与正则表达式匹配的第一个 子匹配(以括号为标志)字符串
if(RegExp.$1 <= 255 && RegExp.$1 >= 0 && RegExp.$2 <= 255 && RegExp.$2 >=0
&&RegExp.$3 <= 255 && RegExp.$3 >= 0 && RegExp.$4 <= 255 && RegExp.$4>=0){
return true;
}else{
return false;
}
}else{
return false;
}
}//检验url地址
export let checkUrl = (val) => {
return /(http|ftp|https):\/\/[\w\-_]+(\.[\w\-_]+)+([\w\-\.,@?^=%&:/~\+#]*[\w\-\@?^=%&/~\+#])?/.test(val);
}//检验日期 格式为YYYY-MM-DD
export let checkDate = (val) => {
var result = val.match(/((^((1[8-9]\d{2})|([2-9]\d{3}))(-)(10|12|0?[13578])(-)(3[01]|[12][0-9]|0?[1-9])$)|(^((1[8-9]\d{2})|([2-9]\d{3}))(-)(11|0?[469])(-)(30|[12][0-9]|0?[1-9])$)|(^((1[8-9]\d{2})|([2-9]\d{3}))(-)(0?2)(-)(2[0-8]|1[0-9]|0?[1-9])$)|(^([2468][048]00)(-)(0?2)(-)(29)$)|(^([3579][26]00)(-)(0?2)(-)(29)$)|(^([1][89][0][48])(-)(0?2)(-)(29)$)|(^([2-9][0-9][0][48])(-)(0?2)(-)(29)$)|(^([1][89][2468][048])(-)(0?2)(-)(29)$)|(^([2-9][0-9][2468][048])(-)(0?2)(-)(29)$)|(^([1][89][13579][26])(-)(0?2)(-)(29)$)|(^([2-9][0-9][13579][26])(-)(0?2)(-)(29)$))/);
if (result == null) {
return false;
}
return true;
}//检验金额
export let checkMoney = (money) => {
if (money == '') {
return false;
}
money = money.replace(/(^\s*)|(\s*$)/g, ""); //去除目标字符串左右两边的空白字符^是开始\s是空白 *表示0个或多个|是或者$是结尾g表示全局
var reg = /^[0-9]*\.?[0-9]{0,2}$/;
if (!checkNum(money)) {
return false;
}
if (money.length > 3) {
if (money.substr(0, 1) == "0") {
if (money.substr(3, money.length).length > 2) {
return false;
}
}
}
if(!reg.test(money)){
return false;
}
return true;
}//银行卡号
export let isBankCard = (val) => {
val = val.replace(/\s+/g, ""); //去掉空格
return /^([1-9]{1})(\d{14}|\d{18})$/.test(val);
}
//统一社会信用代码
export let isSocialCreditCode = (val) => {
return /[^_IOZSVa-z\W]{2}\d{6}[^_IOZSVa-z\W]{10}/g.test(val);
}//组织机构代码（企业）
export let isOrganizationCode = (val) => {
return /[a-zA-Z0-9]{8}-[a-zA-Z0-9]/.test(val);
}//营业执照注册号
export let isBusinessLicense = (val) => {
return /(^(?:(?![IOZSV])[\dA-Z]){2}\d{6}(?:(?![IOZSV])[\dA-Z]){10}$)|(^\d{15}$)/.test(val);
}//判断是否是英语或者特殊字符。其实就是排除数字
export function removeNumber(rule, value, callback) {
const reg = /[^\D]/g
if(!reg.test(value)){
callback()
}else{
callback(new Error('只能是英语或者特殊字符'));
}
}//不能是汉字
export function removeHanzi(rule, value, callback) {
const reg = /[\u4E00-\u9FA5]/g
if(!reg.test(value)){
callback()
}else{
callback(new Error('不能是汉字'));
}
}发现的校验比较全的网站链接地址 链接地址
注：判断长度的时候，英文字母和中文汉字占的字节数不同。一般来说英文是1个，中文是两个。
一般来说英文是1个，中文是两个。但是会根据编码方式不同而不同。以下是搬运：
英文字母和中文汉字在不同字符集编码下的字节数
英文字母：
字节数 : 1;编码：GB2312
字节数 : 1;编码：GBK
字节数 : 1;编码：GB18030
字节数 : 1;编码：ISO-8859-1
字节数 : 1;编码：UTF-8
字节数 : 4;编码：UTF-16
字节数 : 2;编码：UTF-16BE
字节数 : 2;编码：UTF-16LE
中文汉字：
字节数 : 2;编码：GB2312
字节数 : 2;编码：GBK
字节数 : 2;编码：GB18030
字节数 : 1;编码：ISO-8859-1
字节数 : 3;编码：UTF-8
字节数 : 4;编码：UTF-16
字节数 : 2;编码：UTF-16BE
字节数 : 2;编码：UTF-16LE
JS判断字符串长度