2020年3月所遇知识点整理

*注：本文章是在工作过程中所接触的知识点的整理，涉及的东西比价杂乱，如有错误之处，欢迎纠错与指导

一:前端 img标签显示 base64格式的 图片

data:,文本数据
data:text/plain,文本数据
data:text/html,HTML代码
data:text/html;base64,base64编码的HTML代码
data:text/css,CSS代码
data:text/css;base64,base64编码的CSS代码
data:text/javascript,Javascript代码
data:text/javascript;base64,base64编码的Javascript代码
data:image/gif;base64,base64编码的gif图片数据
data:image/png;base64,base64编码的png图片数据
data:image/jpeg;base64,base64编码的jpeg图片数据
data:image/x-icon;base64,base64编码的icon图片数据

二:css opacity影响子元素解决办法

给父元素设置了背景颜色加透明opacity: 0.5。发现效果是子元素也继承了父元素的属性，字也变的透明，如果不希望这样。就使用background: rgba(0,0,0,.5)代替。

三:vue锚点（双向）

效果

1，首先弄好侧边栏点击到页面锚点的功能
左侧页面

<div ref="pointOne" class="anchor-point"></div>
<div ref="pointTwo" class="anchor-point"></div>
<div ref="pointThree" class="anchor-point"></div>
<div ref="pointFour" class="anchor-point"></div>

右侧页面

<a @click="scrollAnchor(item.anchorId)"></a>

js

methods: {
     // 点击锚点操作
     scrollAnchor(anchorId){
         window.scrollTo({
           top: this.$refs[anchorId].offsetTop - 100, // 避免页面直接到顶
           behavior: 'smooth' // 缓慢
         })
     }
}

2，页面滚动监控滚动条
vue页面需要能监控到页面滚动，需要在被监控的页面滚动条样式不能设置是hidden。如果页面设置了 overflow:hidden ,则监测到的滚动值一直是0，注意页面的css overflow的影响，改为 overflow: visible或者其它。
html
<div @scroll="handScroll">
js

<script>
export default {
 data () {
   return {
     scrollTop: 0
   }
 },
 methods: {
   // 保存滚动值，这是兼容的写法
   handleScroll () {
       let that = this
       that.scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
       let anchorItem = document.querySelectorAll('.anchor-point')
       anchorItem.forEach((element, index) => {
         if(that.scrollTop >= element.offsetTop - 100) {
           that.isActive = index
         }
       })
   },
   // 滚动条回到顶部
   backTop () {
     if (this.scrollTop > 10) {
       document.documentElement.scrollTop = 0
     }
   }
 },
 mounted () {
   // vue页面需要能监控到事件，需要先声明
   window.addEventListener('scroll', this.handleScroll, true)
 },
 destroyed () {
   // 离开该页面需要移除这个监听的事件，不然会报错
   window.removeEventListener('scroll', this.handleScroll)
 }
}
</script>

四:vue绑定多个class

:class="{'redRoom': Number(items.status) === 1, 'greenRoom1': Number(items.status) === 2, greenRoom2: Number(items.status) > 2}"
:class="[computedView(item.n)?'numberParty':'numberCircle',{'select-active':items.istrue}]"

五:对于用户输入的身份证最后一位x小写转换为大写

// tool.js 文件内
// ID card 身份证最后位大写转换
const IDcardToUpperCase = (value) => {
  if(!value) return ''
  // 判断输入的字符串是否有x或者X，如果有就直接全部转换为大写，因为身份证一般是数字+X，所以可以直接转大写，数字没用大小写的区别
  if(value.indexOf('x') != -1 || value.indexOf('X') != -1){
    return value.toUpperCase()
  }
  return value
}
export {
  IDcardToUpperCase
}

六:前端安全相关

前端安全系列（一）：如何防止XSS攻击？
前端安全系列之二：如何防止CSRF攻击？

七:判断H5页面在小程序里面并且关闭所有H5页面跳转到小程序本身的页面

npm安装
npm install weixin-js-sdk
在需要分享的页面中引入
import wx from 'weixin-js-sdk'

let ua = navigator.userAgent.toLowerCase()
//是微信环境
if(ua.match(/MicroMessenger/i) == "micromessenger") {
    wx.miniProgram.getEnv((res) => {
        if (res.miniprogram) { // 在小程序里面
           wx.miniProgram.reLaunch({ //关闭H5所有的页面进入小程序
              url: '/pages/result-page/result-page?isFromWeb=' + 1 
            })
           } else { // 不在小程序里
           }
       })
} 

八:JS基础，函数声明提前

在js中，可以把函数像其它值一样传递。一个常见的用法是把_匿名函数_作为回调函数传递到异步函数中。
函数声明

function foo() {}

上面的方法会在执行前被解析(hoisted)，因此它存在于当前上下文的_任意_一个地方， 即使在函数定义体的上面被调用也是对的。

foo(); // 正常运行，因为foo在代码运行前已经被创建
function foo() {}

函数赋值表达式

var foo = function() {};

这个例子把一个匿名的函数赋值给变量foo。

foo; // 'undefined'
foo(); // 出错：TypeError
var foo = function() {};

由于var定义了一个声明语句，对变量foo的解析是在代码运行之前，因此foo变量在代码运行时已经被定义过了。

但是由于赋值语句只在运行时执行，因此在相应代码执行之前，foo的值缺省为undefined

命名函数的赋值表达式

另外一个特殊的情况是将命名函数赋值给一个变量。

var foo = function bar() {
    bar(); // 正常运行
}
bar(); // 出错：ReferenceError

bar函数声明外是不可见的，这是因为我们已经把函数赋值给了foo； 然而在bar内部依然可见。这是由于 JavaScript 的命名处理所致， 函数名在函数内总是可见的。
参考文章：js秘密花园。

另外一个知识点：JS的解析与执行过程