2020个人笔记

目录

正则表达式 test()方法

遇见问题：VUE项目 npm run build卡住不动，也不报错

随意编辑网页

数组操作

小程序input中v-model出现不能清空的状态

css超出部分显示...

三种打印输出方式

类数组对象转数组

单页面应用

hash 路由

HTML5History 路由

---

正则表达式 test()方法

每个正则表达式都有一个 lastIndex 属性，用于记录上一次匹配结束的位置.

语法：regexp.test(str) 

全局匹配模式[g]下对于同一个正则对象重复调用就会出现下一次的匹配位置从上一次匹配结束的位置开始

解决方法：重置lastIndex为0

regexp.lastIndex=0

遇见问题：VUE项目 npm run build卡住不动，也不报错

check-version.js里有版本判断，升级npm  

npm install -g npm

依然出现问题，将下载仓库改为淘宝镜像

npm config set registry http://registry.cnpmjs.org

或者注销监测npm的代码

随意编辑网页

document.body.contentEditable='true';

数组操作

slice():从已有数组中返回选定元素

arrayObject.slice(start,end)

start:从何处开始选取。负数：从数组尾部开始算起的位置

end:从何处结束选取(数组下标)。不指定：从包含start到结束。负数：从数组尾部开始算起的元素

小程序input中v-model出现不能清空的状态

解决：使用value赋值

//<input type="text" :v-model="value" @input="inputChange" />
<input type="text" :value="value" @input="inputChange" />

css超出部分显示...

单行超出

overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;

多行超出

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
word-break: break-all;

三种打印输出方式

alert()// 是一个函数，可以弹窗警告，也经常用来调试
console.log()//打印函数，要配合相关调试工具才能看见
document.write()//可以将内容直接写到html文档中，在页面上输出

类数组对象转数组

xxx.forEach is not a function

原因：原生js获取的DOM集合是一个类数组对象，所以不能直接利用数组的方法（例如：forEach，map等），需要进行转换为数组后，才能用数组的方法！

解决1

let list = Array.from(hdList);//es6

Arrary.form()用来将其它对象转换成数组。

要求：

1.部署了Iterator接口的对象，比如：Set，Map，Array。

2.类数组对象，什么叫类数组对象，就是一个对象必须有length属性，没有length，转出来的就是空数组。

//有lenght
console.log(Array.from({
  0: '0',
  1: '1',
  3: '3',
  length:4
}))  //["0", "1", undefined, "3"]

//没有length
console.log(Array.from({
  0: '0',
  1: '1',
  3: '3',
  length:4
}))  //[]，空数组

Arrary.form()扩展

//将map对象转换成数组
const map1 = new Map();
map1.set('one', 1);
map1.set('two', 2);
map1.set('three', 3);
Array.from(map1);
//[["one", 1],["two", 2], ["three", 3]]

//将set对象转换成数组
const set1 = new Set();
set1.add(1).add(2).add(3)
console.log('%s', Array.from(set1))
//[1,2,3]

解决2

es6的扩展运算符 ...

let list = [...hdList];//用[ ...elems ]方法转化为数组并用list接收

例子

console.log({...{0:1,1:1,2:2}})//{0:1,1:1,2:2}

单页面应用

特征：SPA 单页面应用为什么可以几乎无刷新呢？因为它的SP——single-page。

在第一次进入应用时，即返回了唯一的html页面和它的公共静态资源，后续的所谓“跳转”，都不再从服务端拿html文件，只是DOM的替换操作，是模（jia）拟（zhuang）的。

那么js又是怎么捕捉到组件切换的时机，并且无刷新变更浏览器url呢？靠hash和HTML5History。

hash 路由

特征：

1. 类似www.xxx.html#bar 就是哈希路由，当 # 后面的哈希值发生变化时，不会向服务器请求数据，可以通过 hashchange 事件来监听到 URL 的变化，从而进行DOM操作来模拟页面跳转
2. 不需要服务端配合
3. 对 SEO 不友好

原理：

HTML5History 路由

特征：

1. History 模式是 HTML5 新推出的功能，比之 hash 路由的方式直观，长成类似这个样子www.xxx.html/bar ，模拟页面跳转是通过 history.pushState(state, title, url) 来更新浏览器路由，路由变化时监听 popstate 事件来操作DOM
2. 需要后端配合，进行重定向
3. 对 SEO 相对友好

原理：

粘性定位：sticky 的使用

设置position:sticky同时给一个(top,bottom,right,left)之一即可
使用条件：
1、父元素不能overflow:hidden或者overflow:auto属性。
2、必须指定top、bottom、left、right4个值之一，否则只会处于相对定位
3、父元素的高度不能低于sticky元素的高度
4、sticky元素仅在其父元素内生效

vscode 窗口字体改变大小

File->preference->settng,   zoom-level  窗口字体缩放

获取绝对定位的横坐标和纵坐标

    function getElementLeft(element){
　　　　var actualLeft = element.offsetLeft;
　　　　var current = element.offsetParent;

　　　　while (current !== null){
　　　　　　actualLeft += current.offsetLeft;
　　　　　　current = current.offsetParent;
　　　　}

　　　　return actualLeft;
　　}

　　function getElementTop(element){
　　　　var actualTop = element.offsetTop;
　　　　var current = element.offsetParent;

　　　　while (current !== null){
　　　　　　actualTop += current.offsetTop;
　　　　　　current = current.offsetParent;
　　　　}

　　　　return actualTop;
　　}

获取元素位置的快速方法

// 网页元素的相对位置就是

　　var X= this.getBoundingClientRect().left;

　　var Y =this.getBoundingClientRect().top;

// 再加上滚动距离，就可以得到绝对位置

　　var X= this.getBoundingClientRect().left+document.documentElement.scrollLeft;

　　var Y =this.getBoundingClientRect().top+document.documentElement.scrollTop;