js(三)

jiedinghui 2020-06-04

一、第三方函数工具库

  1. 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(要去重的数组名)
  1. 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

  1. ELEMENT===1:元素节点

  2. attribute:属性节点

  3. text===3:文本节点

  4. comment:注释节点

  5. document:文档节点 代表整体页面

  6. .....

节点类型官方文档:https://developer.mozilla.org/zh-CN/docs/Web/API/Node/nodeType

通常面试官会这样问:给我说几个常用的dom操作方法????

  1. 创建(增)

    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)
  2. 修改:

    父节点.appendChild(子节点)  尾追加
    父节点.insertBefore(新节点,参考节点) 前追加
    父级节点.removeChild(要删除的子级节点) 移除节点
    replaceChild(新节点,旧节点)  替换节点
  3. 查询

    getElementById()  获取id ,如果页面上有多个相同id,只返回第一个
    getElementsByTagName() 获取标签名 返回是类数组
    getElementsByName()  获取表单中name名称  返回类数组
    getElementsByClassName  只能获取class名称  返回类数组
    querySelector  只获取匹配的第一个css选择器  //特别适合移动端
    querySelectorAll  获取匹配的css选择器类数组 //特别适合移动端
    
    //封装一个$
    function $(selector) {
        return typeof selector===‘string‘ ? document.querySelector(selector) : selector
    }
    
    
    //难怪人有说有了querySelector,可以放弃jQuery了!!!!!!
  4. 节点关系

    parentNode:找父节点
    parentElement:找父元素
    
    previousSibling:找前一个兄弟节点
    previousElementSibling:找前一个兄弟元素
    nextSibling:找后一个兄弟节点
    nextElementSibling:找后一个元素节点
    
    childNodes:属性,即包括元素节点,也包括文本节点
    children:属性 只获取直接子级元素,不获取文本节点(元素类型===1)
    firstNode:找第一个节点
    lastNode:找最后一个节点
    hasChildNodes:用于判断是否有子元素
    1. 属性型
    setAttribute
    getAttribute
    
    例如:
    $(‘a‘).getAttribute(‘title‘)
    $(‘a‘).setAttribute(‘title‘,‘1906A‘)
    1. 样式型

      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

相关推荐