一、第三方函数工具库
- lodash:
语法:_.方法名()
使用方法:
第一种:通过script标签去使用
<script src=".js/lodash.min.js"></script>
第二种:通过npm结合脚手架去使用
npm install lodash -D
var _ = require('lodash');
或
import _ from 'lodash'
然后再vue组件中就可以使用了
_.debounce()
例如:
数组扁平化:_.flattenDepth(数组名,扁平化的层数),
数组排序:_.orderBy(数组名,[排序字段],[排序方式desc,asc]),
数组去重.uniq(要去重的数组名)
- moment库
主要用于处理日期和时间的
github官方仓库:https://github.com/moment/moment
官网:https://momentjs.com/
使用:npm install moment --save
3.css动画库:animate.css
npmp install animate.css -D
官方github仓库:https://github.com/animate-css/animate.css
css动画在vue中使用
1.纯css3动画实现:你平时写的css动画
主要通过vue内置的transition组件来实现
<transition name='动画名'>
//要做动画的组件
</transition>
有四个状态:
准备进入:.动画名-enter {}
离开后:.动画名-leave-to {}
进入过程中:.动画名-enter-active {}
离开过程中:动画名-leave-active{}
2.用第三方动画库实现:animate.css
第一步:安装animate.css
npm install animate.css -S
第二步:在main.js中引入
// 引入animate.css
import 'animate.css/animate.css'
第三步:在要应用的页面或组件中使用
<transition
enter-active-class="animate__animated animate__heartBeat"
leave-active-class="animate__animated animate__backOutDown"
>
<router-view></router-view>
</transition>
说明:
enter-active-class:进入过程中的动画类
leave-active-class:离开过程中的动画类
二、javaScript深浅拷贝
何为基本数据类型
基本类型的同仁,是复制的数据内容(基本数据number,string,boolean,null,undefined,symbol)
何为对象数据类型(或称引用类型)
对象之间的赋值,是复制的地址
浅拷贝:只是复制外层的地址,没有继续往内部找到基本类型数据
深拷贝:递归的复制内部数据走到找到基本类型数据才复制出来
如何实现一个深拷贝呢?
1.SON.parse(JSON.stringify(arr))
优点:简单,缺点:不能复制函数
2.用递归去实现深拷贝
//只遍历对象自身的属性,不遍历原型链的属性 hasOwnProperty() boolean
function deepCopy(arr) {
var newObj;
//初始化
newObj= arr instanceof Array ? [] : {}
//遍历检测数组或对象元素
for(var key in arr) { //arr[0]
// 只遍历对象自身的属性
if(arr.hasOwnProperty(key)) {
newObj[key] = typeof arr[key] === 'object' ? deepCopy(arr[key]) : arr[key]
}
}
return newObj;
}
知乎上关于深拷贝的理解:
https://www.zhihu.com/question/23031215
//深复制,要想达到深复制就需要用递归
function deepCopy(o,c){
var c = c || {}
for(var i in o){
if(typeof o[i] === 'object'){
//要考虑深复制问题了
if(o[i].constructor === Array){
//这是数组
c[i] =[]
}else{
//这是对象
c[i] = {}
}
deepCopy(o[i],c[i])
}else{
c[i] = o[i]
}
}
return c
}
3. 通过loadsh库去实现
var arr=[
{id:1001,name:'ipad2',price:2300},
{id:1002,name:'vivo',price:2350},
{id:1003,name:'oppor',price:1300}
]
var result=_.cloneDeep(arr);
result[2].name='nokia'
console.log('arr:',arr)
console.log('result:',result)
三、javaScript中的DOM操作方法
现在是数据驱动,组件化,模块化,虚拟DOM的天下!!!!
但上面的前提是你得在某个框架(Angular(2009年),React(2013.4),vuejs(2014.3),Flutter()2018.12....)下才能开始使用~~~
频繁操作DOM,会引起浏览器的重绘和回流,降低页面性能
DOM操作方法:
jQuery:操作dom神器 $('')
JS原生事件绑定:
1.html绑定事件
例如:<button class="btn" onclick="alert(1111)">事件绑定</button>
2.dom0级绑定事件
//先获取dom
var btn=document.querySelector('.btn');
//再给dom绑定事件
btn.onclick=function(e) {
console.log(e.target)
}
dom0移除: dom元素.onclick=null
优点:兼容性好
缺点:不支持同一事件的多次绑定,只支持事件冒泡
3.dom2级绑定事件【主流绑定事件的方式,特别是适合原生移动端的JS】
//先获取dom
var btn=document.querySelector('.btn');
//再给dom绑定dom2级事件
//dom元素.addEventListener('事件名',事件监听函数,是否冒泡或捕获)
btn.addEventListener('click',func,false)
function func() {
console.log(1111)
}
优点:支持同一事件的多次绑定,除了事件冒泡外,还支持事件捕获
缺点:兼容性一般,不过在移动端无压力
检测js,css兼容浏览器的网站:https://caniuse.com/
移除事件: btn.removeEventListener('事件类型',要移除的事件名,false)
dom操作方法:增,删,改,查
一、事件流
事件流:事件触发的顺序
事件流包括三个阶段:捕获阶段,目标阶段,冒泡阶段
冒泡阶段:事件由最具体元素触发,向上传播的过程
目标阶段:就是你最终触发的那个元素(即目标元素)
捕获阶段:事件由不具体的元素向下查找,直到找到你触发的那个元素,与事件冒泡相反
冒泡排序:是数组排序算法 注意和事件冒泡是不同
阻止冒泡: e.stopPropagation(); //同时会阻止冒泡和捕获
事件代理(事件委托):实现原理就是事件冒泡
问题:通过循环遍历,给每一个li都绑定事件,添加事件监听函数,性能有问题
解决方案:通过事件代理的方式来解决
通过事件对象来获取事件目标:e.target
JS原生实现事件代理:在父级元素上绑定事件处理函数,通过e.target来获取触发的目标来做后续操作
jQuery如何实现事件代理:
//jQuery事件代理如何实现
$('.list').on('click','li',function() {
console.log($(this))
$(this).addClass('bg')
})
jQuery搞明白:把在线的JS原生小案例,写在jQuery版本
JS版本
JQuery版本
阻止默认行为: e.preventDefault();
默认行为:元素本身带的一个特性 例如:超链接点击就会中转,form通过submit可提交,右键菜单
二、DOM常用操作方法
节点类型: nodeType
ELEMENT===1:元素节点
attribute:属性节点
text===3:文本节点
comment:注释节点
document:文档节点 代表整体页面
.....
节点类型官方文档:https://developer.mozilla.org/zh-CN/docs/Web/API/Node/nodeType
通常面试官会这样问:给我说几个常用的dom操作方法????
-
创建(增)
1.createElement() 创建标签 2.createTextNode() 创建文本 3.createDocumentFragment() 创建文档碎片,所有的操作是在内存中进行的 为了避免重绘和回流:咱们插入dom时可采用createDocumentFragment,最后一次性的再添加到页面的dom中 //先创建li,然后插入到ul中 var oul=document.querySelector('.list') //先创建一个文档碎片 var fragment=document.createDocumentFragment(); for(var i=0;i<100;i++) { var newLi=document.createElement('li'); newLi.textContent=`项目${i+1}` fragment.appendChild(newLi) //已经将100个li添加到fragment上了 } oul.appendChild(fragment); 4.cloneNode(true) 克隆 //添加true代表深度克隆,包括子节点的所有内容也可以克隆过来 例如: //需求:创建一个div,并添加文字,追加到页面上 var odiv=document.createElement('div'); var otext=document.createTextNode('1906A') //将文本追加到div上 appendChild odiv.appendChild(otext); //再将div追加到body上 document.body.appendChild(odiv)
-
修改:
父节点.appendChild(子节点) 尾追加 父节点.insertBefore(新节点,参考节点) 前追加 父级节点.removeChild(要删除的子级节点) 移除节点 replaceChild(新节点,旧节点) 替换节点
-
查询
getElementById() 获取id ,如果页面上有多个相同id,只返回第一个 getElementsByTagName() 获取标签名 返回是类数组 getElementsByName() 获取表单中name名称 返回类数组 getElementsByClassName 只能获取class名称 返回类数组 querySelector 只获取匹配的第一个css选择器 //特别适合移动端 querySelectorAll 获取匹配的css选择器类数组 //特别适合移动端 //封装一个$ function $(selector) { return typeof selector==='string' ? document.querySelector(selector) : selector } //难怪人有说有了querySelector,可以放弃jQuery了!!!!!!
-
节点关系
parentNode:找父节点 parentElement:找父元素 previousSibling:找前一个兄弟节点 previousElementSibling:找前一个兄弟元素 nextSibling:找后一个兄弟节点 nextElementSibling:找后一个元素节点 childNodes:属性,即包括元素节点,也包括文本节点 children:属性 只获取直接子级元素,不获取文本节点(元素类型===1) firstNode:找第一个节点 lastNode:找最后一个节点 hasChildNodes:用于判断是否有子元素
- 属性型
setAttribute getAttribute 例如: $('a').getAttribute('title') $('a').setAttribute('title','1906A')
-
样式型
window.getComputedStyle:获取css样式 getBoundingClientRect 获取dom的位置信息 参考文档:https://developer.mozilla.org/zh-CN/docs/Web/API/Element/getBoundingClientRect https://developer.mozilla.org/zh-CN/docs/Web/API/Window/getComputedStyle
参考链接:https://www.cnblogs.com/lrzw32/p/5008913.html