js-设计模式

JS部分

js-01.js创建 10 个标签，点击的时候会弹出来对应的序号

// 利用闭包
window.onload = function () {
    // 一次性操作片段，避免重复执行dom操作
    let frag = document.createDocumentFragment()
    for(let i = 0; i < 10; i++){
        let a = document.createElement('a')
        a.innerText = 'a tag'
        a.onclick = function(e) {
            e.preventDefault()
            console.log(i);
        }
        frag.appendChild(a)
    }
    document.body.appendChild(frag)
}

js-02.深拷贝

function deepClone(obj={}) {
  // 过滤出typeof值为object的(注:null == undefined)
  if(typeof obj !== 'Object' || obj == null){
    return obj
  }
  // 定义存放结果的变量
  let result
  if(obj instanceof Array){
    result = []
  }else{
    result = {}
  }
  // 遍历出obj里面的key（无论数组还是对象都能使用for...in,for...in array遍历的是数组下标）
  for(let key in obj){
    // 保证原型上无key这个属性
    if(obj.hasOwnProperty(key)){
      result[key] = deepClone(obj.key)
    }
  }
  return result
}

js-03.浅拷贝

注意：如果被拷贝的数据类型为值类型（包括null和undefined），则默认浅拷贝，否者为深拷贝

js-04.bind && call && apply

// 函数的this会在函数执行中体现
// call 和 apply 都会返回调用此方法的函数的返回值，调用即执行，而bind返回的是一个新的函数。
// call 的非第一参数为任意类型，而apply接收的是参数数组。
Function.prototype.mybind = function () {
  // 将伪数组转化为数组
  const args = Array.prototype.slice.call(arguments)
  // 获取参数
  let that = args.shift()
  // 获取调用此mybind的函数
  const self = this
  return function () {
    return self.apply(that,args)
  }
}
Function.prototype.mycall = function (context) {
  const args = []
  for(let i = 1; i < arguments.length; i++) {
    args.push(arguments[i])
  }
  function getContext(target) {
    return target == null ? window : Object(target)
  }
  context = getContext(context)
  // 在被指对象上注册这个函数，执行时this就为这个被指对象
  context.fn = this
  const res = context.fn(...args)
  delete context.fn
  return res
}
Function.prototype.myapply = function (arg1) {
  arg1 = (arg1 == null ? window : Object(arg1))
  arg1.fn = this
  const args = Array.prototype.slice.call(arguments)
  args.shift()
  let res = arg1.fn(...args[0])
  delete arg1.fn
  return res
}

js-05.手写promise

js-06.宏任务与微任务

参考：https://juejin.cn/post/6844903512845860872

js-07.事件代理绑定

function bindEvent(elem,type,selector,fn) {
  if(fn == null){
    fn = selector
    selector = null
  }
  elem.addEventListener(type,event => {
    const target = event.target
    if(selector){
      // 代理绑定
      if(target.matches(selector)){
        fn.call(target,event)
      }
      // 普通绑定
    }else{
      fn.call(target,event)
    }
  })
}

js-08.debounce && throttle

// 防抖函数
function deBounce(fn,delay = 500){
  let timer = null
  return function () {
    if (timer) clearTimeout(timer)
    timer = setTimeout(() => {
      fn.apply(this,arguments)
      timer = null
    }, delay);
  }
}
// 节流函数
function throttle(fn,delay = 500) {
  let timer = null;
  return function () {
    if (timer) return
    timer = setTimeout(() => {
      fn.call(this,...arguments)
      timer = null
    }, delay);
  }
}

js-09. trim()函数

if(!String.prototype.trim){
    String.prototype.trim = function () {
  		return this.replace(/^\s+/,'').replace(/\s+$/,'')
	}
}

js-10.数组的方法

（1）非纯函数：push、unshift会返回数组长度，原数组会发生改变

// push pop shift unshift
// forEach
// some && every 不会改变原数组，但返回值为Boolean
// every()是对数组中每一项运行给定函数，如果该函数对每一项返回true,则返回true。
// some()是对数组中每一项运行给定函数，如果该函数对任一项返回true，则返回true。
// reduce((res,item)=>{},0)

（2）纯函数：①不改变和影响原数组②返回一个新数组

// contact 连接一个数组
// map 数组映射操作
// filter 值为真过滤
// slice 切片

js-11.手写isEqual()函数

function isObject(params) {
  return typeof params === 'object' && params != null
}
// 没有包含函数
function isEqual(obj1,obj2) {
  if(!isObject(obj1) || !isObject(obj2)){
    return obj2 === obj1
  }
  if(obj1 === obj2) return true
  const obj1Keys = Object.keys(obj1)
  const obj2Keys = Object.keys(obj2)
  if(obj1Keys.length !== obj2Keys.length) return false
  for(let key in obj1){
    const res = isEqual(obj1[key],obj2[key])
    if(!res) return false
  }
  return true
}

js-12.load && DOMContentLoaded

window.addEventListener('load',function () {
  // 页面全部资源加载完才会执行，包括图片、视频等
})
window.addEventListener('DOMContentLoaded',function () {
  // DOM渲染完即可执行，此时图片、视频还可能没有加载完
})

js-13.数组flatern

function flat(arr) {
  const isDeep = arr.some(item => item instanceof Array)
  if(!isDeep) return arr
  return flat(Array.prototype.concat.apply([],arr))
}
const res = flat([1,2,3,[4,5,[6,7,[8,9],10]]])
console.log(res); // [1, 2, 3, 4,  5, 6, 7, 8, 9, 10]

js-14.requestAnimationFrame(RAF)

介绍：

requestAnimationFrame是HTML5的新特性，区别于setTimeout和setInterval。

requestAnimationFrame比后两者精确，采用系统时间间隔，保持最佳绘制效率，不会因为间隔时间过短，造成过度绘制，增加开销；也不会因为间隔时间太长，使动画卡顿不流畅，让各种网页动画效果能够有一个统一的刷新机制，从而节省系统资源，提高系统性能，改善视觉效果。

特点：

1. requestAnimationFrame会把每一帧中的所有DOM操作集中起来，在一次重绘或回流中就完成，并且重绘或回流的时间间隔紧紧跟随浏览器的刷新频率
2. 在隐藏或不可见的元素中，requestAnimationFrame将不会进行重绘或回流，这当然就意味着更少的CPU、GPU和内存使用量
3. requestAnimationFrame是由浏览器专门为动画提供的API，在运行时浏览器会自动优化方法的调用，并且如果页面不是激活状态下的话，动画会自动暂停，有效节省了CPU开销

应用：

//创建timer等于定时器编号
var timer = requestAnimationFrame(function(){
	// 具体动画实现函数
}); 
//取消
cancelAnimationFrame(timer);

js-15.js闭包

原理：实际上通过函数闭包来存储私有信息，而不被全局污染。（基本利用自执行函数返回一个函数）

CSS部分

css-01.line-height如何继承？

（1）length(具体值)

（2）比例值如1.5(通常为其所在容器font-size的1.5倍)

（3）百分比(通常为该容器的font-size * 百分比再转化成具体值向下继承)

css-02.BFC理解与与应用

理解：BFC属于普通流，相当于一块独立的渲染区域，BFC看成是元素的一种属性， 当元素拥有了BFC属性后，这个元素就可以看做成隔离了的独立容器。容器内的元素不会影响容器外的元素.

应用：1.清除浮动 2.避免与外边距重叠 3.阻止元素被浮动元素覆盖 4.解决包含塌陷问题

触发条件：

1. ·设置浮动，不包括none
2. ·设置定位，absoulte或者fixed
3. ·行内块显示模式，inline-block
4. ·设置overflow，即hidden，auto，scroll
5. ·表格单元格，table-cell
6. ·弹性布局，flex

HTML部分

html-01.rem && vh&&vw

①rem布局通常采用媒体查询屏幕所到达的尺寸来设置html字体大小，其弊端表现为呈现“阶梯”性响应。

②vmax相当于return Max(vh,vw)；vmin同理;如设置{width: 10 vmax;height:10vmax} 表现为一个方形区域