前端基础常识

Posted 2020-11-23 peace1

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端基础常识相关的知识，希望对你有一定的参考价值。

触发BFC

body 根元素
浮动元素：float 除 none 以外的值
绝对定位元素：position (absolute、fixed)
display 为 inline-block、table-cells、flex
overflow 除了 visible 以外的值 (hidden、auto、scroll)

BFC特性

1. 同一个 BFC 下外边距会发生折叠

2. BFC 可以包含浮动的元素（清除浮动）

3. BFC 可以阻止元素被浮动元素覆盖

CSRF预防

1..设置随机token

2.验证referrer

3.ajax添加自定义header

xss预防

1.用户输入信息转义html tag

2.开启https

自定义new

function newObj(obj,...args) {
    let newObj = new Object();
    newObj.__proto__ == obj.prototype;
    let result = obj.apply(newObj,args);
    return typeof result === ‘object‘?ret:newObj;
}

自定义call

Function.prototype.myCall = function(obj) {
    let object = obj || window;
    let args = [...arguments].slice(1);
    object[fun] = this;
    let result = object[fun](args);
    delete object.fun;
    return result
};

防抖：短时间触发事件会覆盖上一次事件，直到阈值时间未触发才调用

节流：高频率触发的事件，每隔一段时间只会触发一次

树遍历

数据

let classList = [
  {
    id: 2,
    content: "分类2",
    children: [{
      id: 21,
      content: "分类2.1",
      children: null
    }]
  }, {
    id: 1,
    content: "分类1",
    children: [{
      id: 11,
      content: "分类1.1",
      children: null
    }, {
      id: 12,
      content: "分类1.2",
      children: [{
        id: 121,
        content: "分类1.2.1",
        children: null
      }]
    }]
  },
]

View Code

递归遍历

function getContentsById(list, id, parentContents) {
  for (var i = 0; i < list.length; i++) {
    const item = list[i];
    if (item.id == id) {
      return `${parentContents}-${item.content}`.substr(1)
    }
    if (item.children !== null) {
      const itemContents = `${parentContents}-${item.content}`;
      return getContentsById(item.children, id, itemContents);
    }
  }
}

栈遍历

function getContentsById(list,id) {
  let array = JSON.parse(JSON.stringify(list));
  let item,cacheItem=[];
  let pContent = ‘‘;
  do{
    item = array.shift();
    if (cacheItem.children&&cacheItem.children.indexOf(item)>=0) {
      item.content = cacheItem.content+‘-‘+item.content;
    }
    if (item.id!==id&&item.children !== null) {
      cacheItem = item;
      array = item.children.concat(array);
    }
  }while(array.length!=0&&item.id!=id);
  if (item.id==id) {
    return item.content;
  }
}

栈遍历好处：在数据层级较大时候，避免内存泄露

柯里化（不知有何卵用的东西）

const currying = fn => {
    const len = fn.length
    return function curr(...args1) {
        if (args1.length >= len) {
            return fn(...args1)
        }
        return (...args2) => curr(...args1, ...args2)
    }
}

浏览器渲染

技术图片