前端笔记
模块 module 功能集合，实现功能的方法，实现一系列功能的方法集合
插件 plugin 能复用的模块
组件 component 拆分逻辑结构样式(包括html/css/js文件),组件包含模块
function factorial(n) {
if (n === 0 || n === 1) {
return 1;
}
return n * factorial(n - 1);
}
var times = 0,
cache = [];
function factorial0(n) {
times++;
if (cache[n]) {
return cache[n];
}
if (n === 0 || n === 1) {
cache[0] = 1;
cache[1] = 1;
return 1;
}
return cache[n] = n * factorial0(n - 1);
}
console.time('first');
console.log(factorial(10));
console.timeEnd('first');
console.time('second');
console.log(factorial0(10));
console.timeEnd('second');
函数记忆(缓存池技术) -> 应用场景：数据反复处理使用，数据大量计算，递归函数，频繁调用数据
([] + []).length 隐式类型转换
({} + {}).length 隐式类型转换
(function () {}).length 函数有length属性
数组的扁平化 (Array.flat(param), param->数字、Infinity)
function flatten(arr) {
var arr = arr || [],
res = [],
elem;
for (var i = 0, len = arr.length; i < len; i++) {
elem = arr[i];
if (isArr(elem)) {
res = res.concat(flatten(elem));
} else {
res.push(elem);
}
}
function isArr(obj) {
return Object.prototype.toString.call(obj) === '[object Array]';
}
return res;
}
function flat(arr) {
if (!isArr(arr)) {
throw new Error('这方法只适用于数组类型！');
}
function isArr(obj) {
return Object.prototype.toString.call(obj) === '[object Array]';
}
return arr.reduce((prev, item) => prev.concat(isArr(item) ? flat(item) : item), []);
}
改变原数组方法：pop push reverse shift unshift sort splice
不改变原数组方法：concat join slice toString map every some filter reduce reduceRight
不确定方法：map forEach
var oList = document.getElementsByClassName("oList")[0];
oList.addEventListener("click", function(e) {
var e = e || window.event, // e是事件对象，做兼容性
tar = e.target || e.srcElement; // 事件源对象
switch (tar.innerText) {
case 'inner1':
console.log('inner1');
break;
case 'inner2':
console.log('inner2');
break;
case 'inner3':
console.log('inner3');
break;
}
}, false);
IE6常见BUG：
1.盒子浮动 margin*2 解决：display: inline/block;
2.外部一个盒子 相对定位
内部一个盒子 绝对定位
right/left/top/bottom = 0
1px间隙 解决：设置偶数宽高
3.img 下方有白色的间隙 解决(3种)：img设置block 调整vertical-align font-size: 0;
4.z-index失效 解决：父级元素设置position: relative; z-index: 1;(c层级比子元素低)
5.没有内容的空div宽度设置0-19px, 但都是19px 解决(4种)：overflow: hidden; font-size: 0 元素内加注释(<!--->) 元素内加空格( )
link和@import区别：
1. link是html标签，@import是css关键字
2. 加载顺序不同：link是同时加载(异步)，@import是页面加载完毕后加载
3. link可以DOM操作，@import不可以
4. @import会在css文件最前面加载，就算把代码放在css文件的最下面也是一样(多年经验总结出来)
meta标签的几个属性要会
css画三角形、等边三角形、梯形、六边形(1.拆分成中间是矩形，两边三角形用伪元素实现 2.3个盒子定位旋转实现)
前端性能优化：
webpack优化方案
EventLoop异步更新
浏览器缓存原理和最佳设置策略
避免回流和重绘
节流和防抖
CDN缓存优化
通过Performance监控性能
