杂记 |前端 mini tips

173 阅读2分钟

js

let const var

变量的定义有三步:

  • 变量标识符(变量名)的创建
  • 变量标识符初始化
  • 赋值

var:创建标识符时自动初始化为undefinede。
let:创建变量只创建标识符并不初始化,赋值时候才判断是否需要初始化,用户没有赋值才会初始化。

创建执行上下文词法环境时,都会被创建,但是只有var自动初始化了所以发生了变量提升。

压栈存活作用域:var--函数作用域;let/const---es6的块级作用域。

内存泄漏

  • 无操作符变量定义,使用了为定义的变量而意外创建出来的全局变量
  • 被遗忘的定时循环
  • 引用了dom但是后来dom被删了
  • 闭包

object.is

Object.is(a,b)一般进行三等判断,但是+0与-0为false,NaN与NaN相等。

for循环

for循环循环体在块级作用域中,每次循环都是新的执行上下文环境,为了使得循环中的let等环境能够随着循环继承,for循环每次循环会将上一次的循环环境拷贝作为自己的环境再加强这个循环。const定义再for()里即使是新的环境但是由于拷贝,虽然不触发不可更改但是出发了不可从新定义。

for循环中的异步任务

for(var i = 0;i < 5; i++ ) {
    setTimeout(function(){ console.log(i); },0)
    }

var挂在在函数作用域,输出5个5;
换成let挂在在for循环体中,每次循环的上下文独立所以输出12345;
写个闭包与立即执行函数也可以做到,因为var的函数作用域被复制到了函数中闭包保存。

盒模型

box-sizing

  • border-box:width = content+padding+border
  • content-box:width = width
  • offsetWidth = content+padding+border
  • clientWidth = width+左右padding
  • scollWidth = 获取指定标签内容层的真实宽度(可视区域宽度+被隐藏区域宽度)

vue

组件通信方式

  • props/$emit
  • $children/$parent:获取组件的实例数组,当然可可以获取到组件的所有方法和data,并不推荐。
  • provide/inject:传给此节点以下的所有子节点,可以跨级传值。
  • eventBus:任意组件通信,通过一个EventBus实例
  • Vuex
  • localStorage/seesionStorage

nextTick与watch

一个宏任务轮一个tick,每个tick轮产生的视图更新,也就是watch函数会被推入一个视图更新任务队列,队列任务通过nextTick-API推入来尽快的应用更新。同时保证同一个id的watch只被推入一次。

nextTick尝试加入Promise.thensetImmediateMessageChannelsetTimeout

css

less/sass

sass服务端计算

@import './base.scss';//引入模块化组件
$highlight-color: #f90;//定义变量
$basic-border: 1px solid black;
#app{
  background-color:  $base-color;//使用变量
  border:$basic-border;
  .container{
    font-size:30px;
  }
  a{
    color:blue;
    &:hover{//父选择器
      color: red;
    }
  }
}

跨域

  • 后端CORS,使用额外的http头告诉浏览器准许访问非同源资源。(Access-Control-Allow-Headers/Methods/Origin)
  • jsonp
  • nginx配置
  • websocket

websocket

  • 与HTTP同级的应用层协议,建立在TCP上
  • 先发送http请求,建立三次握手连接,http头中加入了websocket相关字段。服务端拿到头字段使用http回馈可以把协议改为websocket,返回101code,从此借助TCP双向通信。

image.png