JS部分
// 利用闭包
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
}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-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比后两者精确，采用系统时间间隔，保持最佳绘制效率，不会因为间隔时间过短，造成过度绘制，增加开销；也不会因为间隔时间太长，使动画卡顿不流畅，让各种网页动画效果能够有一个统一的刷新机制，从而节省系统资源，提高系统性能，改善视觉效果。
特点：
requestAnimationFrame会把每一帧中的所有DOM操作集中起来，在一次重绘或回流中就完成，并且重绘或回流的时间间隔紧紧跟随浏览器的刷新频率
在隐藏或不可见的元素中，requestAnimationFrame将不会进行重绘或回流，这当然就意味着更少的CPU、GPU和内存使用量
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.解决包含塌陷问题 触发条件：
·设置浮动，不包括none
·设置定位，absoulte或者fixed
·行内块显示模式，inline-block
·设置overflow，即hidden，auto，scroll
·表格单元格，table-cell
·弹性布局，flex
HTML部分
html-01.rem && vh&&vw
①rem布局通常采用媒体查询屏幕所到达的尺寸来设置html字体大小，其弊端表现为呈现“阶梯”性响应。
②vmax相当于return Max(vh,vw；vmin同理;如设置{width: 10 vmax;height:10vmax} 表现为一个方形区域