普通视图
A股三大指数集体高开,湖南白银涨超6%
恒指开盘涨0.87%,恒生科技指数涨0.96%
1月23日人民币对美元中间价调升90个基点
“跨境理财通”2.0落地以来,深圳银行办理跨境收付金额526亿元
现货白银突破97美元/盎司,再创历史新高
中信证券:2026年春节白酒实际动销有望维持平稳,看好行业底部配置机会
TikTok官宣美国方案,两公司共同运营,字节保留算法知识产权
两市融资余额增加40.34亿元
华创证券:我国商用航空发动机市场潜力巨大,关注产业链三条线索
华泰证券:龙头房企压力缓释有助于阶段性稳定市场预期
中信证券:当前有望步入新一轮封装涨价的起点
自由现金流ETF崛起,总规模逼近300亿元
我震惊了,jQuery 竟然发布了 4.0 !
作为近 10 年来的首次重大更新,jQuery 4.0.0 经历了漫长的开发周期与多个预发布版本后正式推出。
我真的以为 jQuery 死了
![]()
这款仍被广泛使用的 JavaScript 库 jQuery 现已推出 4.0.0 版本。作为近 10 年来的首次重大更新,jQuery 4.0.0 新增了可信类型(Trusted Types)支持,并提供了一个更精简的构建包。
该版本于 1 月 17 日正式发布,可从 jquery.com 下载。jQuery 4.0.0 中的可信类型功能确保,只有 TrustedHTML 接口的 HTML 内容才能传入 jQuery 的 DOM 操作方法,从而严格遵守浏览器内容安全策略(CSP)的 require-trusted-types-for 指令。
此外,尽管部分 AJAX 请求已在使用 <script> 标签来维护 crossdomain 等属性,jQuery 开发团队仍将大多数异步脚本请求切换为使用 <script> 标签,以避免内联脚本引发的 CSP 错误。仅在少数场景(如传递 headers 选项)下仍会使用 XHR 发起异步脚本请求,但只要条件允许,就会优先使用 <script> 标签。
jQuery 4.0.0 还带来了更精简的构建包,移除了 Deferred 对象和回调函数。
Deferred 长期以来支持 Promises A+ 标准,用于实现可互操作的 JavaScript Promise;不过在绝大多数场景下,除 IE 11 外,所有 jQuery 支持的浏览器都已支持原生 Promise。
官方表示,虽然 Deferred 具备一些原生 Promise 没有的额外功能,但大多数用法都可以迁移到 Promise 方法。如果你的项目仍需支持 IE 11,建议使用主构建包,或为原生 Promise 添加 polyfill。需要注意的是,jQuery 4.0.0 不再支持 IE 10 及更早版本。
根据 Web 技术调查机构 W3Techs 的数据,已诞生 20 年的 jQuery 目前仍被 70.9% 的网站使用。
该项目现由 OpenJS 基金会管理,旨在通过跨浏览器的 API 简化 HTML 文档遍历与操作、事件处理和动画等功能。jQuery 4.0.0 的其他重要更新包括:
-
焦点事件顺序标准化:现在遵循万维网联盟(W3C)规范,使 jQuery 与大多数浏览器最新版本支持的事件顺序保持一致。这一事件顺序与旧版 jQuery 不同,属于破坏性变更。从 4.0.0 开始,库不再支持覆盖原生行为,将严格遵循当前 W3C 规范的顺序:
blur→focusout→focus→focusin。 -
移除内部私有方法:从 jQuery 原型中移除了仅内部使用的数组方法(如
push、sort、splice)。这些方法的行为与其他 jQuery 方法不一致,仅用于内部逻辑。开发者如果用到了这些被移除的方法,可以用[].push.call($elems, elem)替代原来的$elems.push(elem)。 - 3.x 版本进入维护模式:jQuery 3.x 系列今后将只接收关键安全更新。
总结
我想起了那句话,老兵不死,只是慢慢凋零。
16 个前端冷知识:用一次就忘不掉的那种
“这个Bug我调了俩小时!” “早知道有这个属性就好了……”
这种对话,在程序员之间可以说是太常见了。
很多问题,一旦知道诀窍,三五分钟就能解决;可如果不知道,很可能就需要耗上大半天的时间去处理。
于是我就决定,把这些平时可能没人专门讲,但又特别实用的前端冷知识整理了一下,保准你看完有收获。
1. CSS中的:hover伪类也可以用于非链接元素
很多人以为:hover只能用在a标签上,其实不然!任何元素都可以使用:hover伪类。
/* 不只是链接,div也可以有悬停效果 */
div:hover {
background-color: #f0f0f0;
transition: all 0.3s ease;
}
实用场景:为表格行、卡片组件等添加悬停效果,提升用户体验。
2. 箭头函数没有自己的this绑定
这是ES6箭头函数的一个重要特性,但经常被忽略:
const obj = {
name: "前端小白",
regularFunc: function() {
console.log(this.name); // "前端小白"
},
arrowFunc: () => {
console.log(this.name); // undefined(这里的this是外层作用域的this)
}
};
原理分析:箭头函数不绑定自己的this,而是继承父级作用域的this值。
3. 快速浮点数转整数
// 这三种方式都可以将浮点数转为整数
console.log(~~3.14); // 3
console.log(3.14 | 0); // 3
console.log(3.14 >> 0); // 3
注意:这些方法只适用于32位整数,大数情况下可能会出现问题。
4. 使用dataset操作自定义数据属性
<div id="user" data-id="123" data-user-name="小明"></div>
<script>
const user = document.getElementById('user');
console.log(user.dataset.id); // "123"
console.log(user.dataset.userName); // "小明"(注意驼峰命名)
</script>
优势:比getAttribute/setAttribute更简洁,且自动进行数据类型转换。
5. 使用navigator.onLine检测网络状态
// 检测用户是否在线
if (navigator.onLine) {
// 在线逻辑
} else {
// 离线逻辑
}
// 监听网络状态变化
window.addEventListener('online', () => {
console.log('网络已连接');
});
应用场景:PWA应用、资源加载优化等。
6. 使用contenteditable使元素可编辑
<div contenteditable="true">
点击我就可以直接编辑内容!
</div>
实用技巧:可以结合localStorage实现简单的实时预览编辑器。
7. 使用currentScript获取当前执行的script标签
<script>
console.log('当前脚本:', document.currentScript.src);
</script>
应用场景:在脚本中动态加载依赖资源时非常有用。
8. 使用passive优化滚动性能
// 不好的做法(可能阻塞滚动)
document.addEventListener('touchmove', function(e) {
// 处理逻辑
});
// 好的做法
document.addEventListener('touchmove', function(e) {
// 处理逻辑
}, { passive: true });
原理:告诉浏览器事件处理函数不会调用preventDefault(),从而提升滚动性能。
9. 使用clamp实现响应式字体大小
.text {
font-size: clamp(16px, 4vw, 24px);
}
/* 字体大小会在16px-24px之间自适应 */
优势:比媒体查询更简洁,实现真正的流体排版。
10. 使用in操作符检查对象属性
const obj = { name: '小明', age: 20 };
// 检查属性是否存在
if ('name' in obj) {
console.log('name属性存在');
}
与hasOwnProperty的区别:in会检查原型链上的属性,而hasOwnProperty只检查自身属性。
11. 使用Array.from将类数组转为真实数组
// 将NodeList转为数组
const divs = Array.from(document.querySelectorAll('div'));
// 将arguments转为数组
function example() {
const args = Array.from(arguments);
// 现在可以使用数组方法了
}
12. 使用performance API进行性能监控
// 标记开始时间
performance.mark('start');
// 执行一些操作
for(let i = 0; i < 1000000; i++) {}
// 标记结束时间并测量
performance.mark('end');
performance.measure('操作耗时', 'start', 'end');
const measure = performance.getEntriesByName('操作耗时')[0];
console.log(`操作耗时: ${measure.duration}毫秒`);
13. 使用structuredClone进行深拷贝
const obj = { name: "小明", hobbies: ["篮球", "游泳"] };
const cloned = structuredClone(obj); // 真正的深拷贝
优势:比JSON.parse(JSON.stringify(obj))更可靠,可以处理循环引用。
14. 使用CSS的:where和:is简化选择器
/* 传统写法 */
header h1, header h2, header h3 {
margin-bottom: 1rem;
}
/* 简化写法 */
header :is(h1, h2, h3) {
margin-bottom: 1rem;
}
优势:代码更简洁,易于维护。
15. 使用requestIdleCallback进行任务调度
function processTask(deadline) {
while (deadline.timeRemaining() > 0 && tasks.length > 0) {
// 在空闲时间执行任务
processTask(tasks.shift());
}
if (tasks.length > 0) {
requestIdleCallback(processTask);
}
}
requestIdleCallback(processTask);
应用场景:大数据渲染、复杂计算等需要优化性能的场景。
16. 你可能不知道的console.log黑科技
最后一个,你可能不知道console.log还有这些用法:
// 1. 使用CSS样式
console.log('%c这是红色大字', 'color: red; font-size: 20px;');
// 2. 分组打印
console.group('用户信息');
console.log('姓名: 小明');
console.log('年龄: 20');
console.groupEnd();
// 3. 条件打印
console.assert(1 === 2, '这个条件为false时会打印');
总结
说实话,上面这些小技巧,我现在也记不全。平时写业务代码,可能80%的时间都用不上它们。
但看上一两遍有点印象之后,在哪天碰到某种问题时,你也会突然想起来:
“好像有个属性/方法就是干这个的”
本文首发于公众号:程序员大华,专注分享前后端开发的实战笔记。关注我,少走弯路,一起进步!