你应该知道的前端小知识
1. css一行文本超出...
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
复制代码2.多行文本超出显示...
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
复制代码3.IOS手机容器滚动条滑动不流畅
overflow: auto;
-webkit-overflow-scrolling: touch;
复制代码4.修改滚动条样式
隐藏div元素的滚动条
div::-webkit-scrollbar {
display: none;
}div::-webkit-scrollbar 滚动条整体部分
div::-webkit-scrollbar-thumb 滑动条内部的圆圈可以上下滑动（根据滚动方向的不同左右滑动）
div::-webkit-scrollbar-track 滚动条的轨道（里面装有Thumb）
div::-webkit-scrollbar-thumb 滚轮组件两侧设有按钮结构，在使用时可以通过对微调方块进行定位来调节滚轮组件的高度
div::-webkit-scrollbar-track-piece 内层轨道，滚动条中间部分（除去）
div::-webkit-scrollbar-corner 边角，即两个滚动条的交汇处
CSS关键字：div::-webkit-resizer位于两条水平滚动条交汇处上的一个小可拖拽控制块
需注意该方案存在兼容性问题。通常在隐藏滚动条时我会使用一个色块通过定位覆盖其上，并非主动操作而是被动处理的方式较为稳妥。另一种方法是放大子级元素并使用overflow-hidden属性来截断滚动条部分这确实显得粗暴且直接但效率较高
5.使用css写出一个三角形角标
将元素的宽高设为0，并利用border属性进行设置。确保其他三个边界的border颜色要么透明要么与背景色相同；而另一个边界的border颜色则被设定为目标颜色。
div {
width: 0;
height: 0;
border: 5px solid #transparent;
border-top-color: red;
}
复制代码6.解决ios audio无法自动播放、循环播放的问题
当在 audio 或 video 播放时，iOS 设备中存在部分设备无法自动完成音频或视频播放功能。可以通过以下代码实现 hack。
// 解决ios audio无法自动播放、循环播放的问题
var music = document.getElementById('video');
var state = 0;
document.addEventListener('touchstart', function(){
if(state==0){
music.play();
state=1;
}
}, false);
document.addEventListener("WeixinJSBridgeReady", function () {
music.play();
}, false);
//循环播放
music.onended = function () {
music.load();
music.play();
}
复制代码7.水平垂直居中
我一般只使用两种方式 定位 或者 flex，我觉得够用了。
div {
width: 100px;
height: 100px;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
复制代码父级控制子集居中
.parent {
display: flex;
justify-content: center;
align-items: center;
}
复制代码8.隐藏页面元素
display-none: 元素不存在，从dom中删除
opacity-0: 元素的透明度设置为0（即完全不可见），然而该元素依然存在于页面中，并对该元素绑定的所有事件仍然保持有效性并能够被触发以执行相应的操作。
visibility-hidden：将元素设置为不可见状态，并使该元素依然保留在页面中；尽管如此，在页面上也无法对该元素触发相关事件
9.前端工程化
提起前端工程化时，人们往往首先想到的是Webpack。这一观点是错误的，因为Webpack只是前端工程化众多工具中的一个环节，在整体工程化进程中帮助我们解决了绝大多数的问题。然而，在实际应用中并未彻底解决所有问题。
前端工程化是通过工具提升效率，降低成本的一种手段。
近年来受到广泛关注与深入探讨的原因主要包括以下几个方面：随着现代化进程不断推进，在线服务需求日益增长的同时也在推动着前端技术的快速发展；与此同时随着互联网技术的不断进步使得业务流程日益复杂化；而作为当代互联网时代的核心支撑技术前端开发不仅在整个软件开发领域占据着绝对主导地位而且在各类应用场景中也展现出独特的优势
从这些表面现象中可以看出, 行业对于开发人员的需求已经发生了根本性的转变. 传统的做法是通过编写简单的演示文稿、套用模板以及手动调整页面来实现功能, 这种"刀耕火种"的方法显然无法满足现代对开发效率的高要求. 这也促使人们开始重视并推行前段工程化的理念, 成为每一位前端工程师不可或缺的技术手段.
在前端工程中包含多个关键环节：项目启动阶段、开发过程中的整合与优化、代码打包与分发、质量验证以及最终的上线部署。工程化理念是从系统管理的角度出发解决这些问题。具体而言，在项目启动阶段通常采用npm init命令进行配置，并通过Plop工具生成静态网页模板以简化开发流程；而采用ES6及以上版本作为开发基础并结合babel脚本转换工具将代码转译为兼容性较高的ES5代码；在持续集成过程中采用Git进行代码管理和版本控制；同时引入了Linting工具来规范代码编写标准；最后的部署阶段主要依赖CI/CD流程以及Jenkins等自动化工具完成项目的发布与测试保障
前端工程化是一个比较大的话题，后面我们会单开话题来讲。
10.contenteditable
在HTML中，默认情况下大多数标签都无法直接进行编辑操作；然而，在某些现代浏览器中通过设置contentEditable属性后，则允许相应标签的内容进行动态修改。
<div contenteditable="true"></div>
复制代码但是使得标签变为可编辑状态后仅限于input事件而没有change事件。同样无法如同表单一样使用maxlength来限制输入长度。我也记不清自己曾经在什么场景中使用过，在之后的机会中再补充吧。
11.calc
这个属性属于CSS家族的一员，在编程中常被亲切地称为CSS表达式。它不仅能够处理和计算不同的CSS值，其独特之处在于能够处理不同单位之间的数值差异。这一功能具有显著的优势，在视觉效果上往往能产生令人惊艳的效果。然而一个明显的不足就是难以直观理解其含义。普通用户难以迅速识别出像20px这样的具体数值。
div {
width: calc(25% - 20px);
}
复制代码12.Proxy和Object.defineProperty区别
Proxy的作用相当于代理，在教学过程中我会指导他使用一种名为"interceptor"的技术来阻止目标对象的特定操作。具体来说，通过调用new方法来生成一个新对象时，默认会传入两个关键信息：第一个参数对应的是被阻止的操作的目标（即被拦截的对象），而第二个参数则指定要阻止的操作类型和内容。一旦实例化成功后返回一个新的对象结构体，则后续对该新生成的对象进行任何操作时都会触发我们所描述的具体方法实现逻辑。
new Proxy(target, {
get(target, property) {
},
set(target, property) {
},
deleteProperty(target, property) {
}
})
复制代码Proxy区别于Object.definedProperty。
Object.defineProperty仅限于属性的读写操作。然而，在Proxy中不仅可以监听到属性的删除事件，还可以捕获如删除操作以及方法调用等其他相关事件。
在大多数场景中，我们希望监控数组的变化情况。这通常依赖于重构特定数据结构的方法来实现这种监控。这正是Vue框架所采用的方法。此外，在Vue中提供了Proxy组件能够直接监控并响应这些变化。
const list = [1, 2, 3];
const listproxy = new Proxy(list, {
set(target, property, value) {
target[property] = value;
return true; // 标识设置成功
}
});
list.push(4);
复制代码Proxy通过无需侵入的方式实现了对目标读写的监控管理；另一方面而言，在使用defineProperty时，则必须按照特定方式设置其属性参数。
13.Reflect
他作为ES2015的一个新增功能出现。纯静态对象也即无法被实例化的数据类型，并且必须通过静态方法来访问其属性和操作。与Math对象相似地，在这种情况下也只能调用其固定的方法调用方式，并非自定义函数能够直接引用或使用。
Reflect内部集成了对对象的底层操作种类，并总计提供了... 一共... 其中一个功能已被淘汰，并保留了...
Reflect的静态成员函数与Proxy对象描述的方法相同。换句话说，Reflection类中的成员函数相当于处理对象的基本实现方式。
Proxy对象默认实现的方法即是对Reflect内部处理逻辑进行了调用。换言之，在我们使用get方法时，在其核心流程中，Proxy对象会将请求完全按照原样传递给Reflect进行处理。
const proxy = new Proxy(obj, {
get(target, property) {
return Reflect.get(target, property);
}
})
复制代码Reflect与Proxy之间并不存在固定关系，并非存在非此即彼的对立情况。实际上，在实际应用中我们常常会将这两个概念结合讨论以帮助更好地理解它们的本质
Reflect对象的存在原因是什么？它主要用途在于提供一个实现对目标对象一致操作机制的接口。
检查对象是否包含某个特定属性时，默认情况下可以调用in运算符进行判断；然而这种做法显得不够优雅；或者调用Reflect.has方法同样能够实现目标；对于删除操作而言；既可以执行delete关键字移除指定属性；也可以通过调用Reflect.deleteProperty方法完成；获取所有属性名则可以通过Object.keys方法实现；或者调用Reflect.ownKeys函数以获得相同的列表结果；建议优先采用Reflect API来进行对象操作；因为这一工具体系因其先进性而备受推崇。
14.解析get参数
通过replace方法获取url中的参数键值对，可以快速解析get参数。
const q = {};
location.search.replace(/([^?&=]+)=([^&]+)/g,(_,k,v)=>q[k]=v);
console.log(q);
复制代码15.解析连接url
通过创建一个a标签，并为其分配一个href属性的方法，可以访问协议信息、pathname属性以及origin对象上的相关属性。
// 创建a标签
const aEle = document.createElement('a');
// 给a标签赋值href路径
aEle.href = '/test.html';
// 访问aEle中的属性
aEle.protocol; // 获取协议
aEle.pathname; // 获取path
aEle.origin;
aEle.host;
aEle.search;
...如果有人希望深入学习前端开发技术，请问我是否愿意将我多年的实践经验毫无保留地传授给各位，并附上一份学习资料包，并在QQ群：1046097531中与大家进行交流。
