标签：JavaScript

共 776 篇相关文章

IT 累计浏览 2,036

Chrome runtime 不稳定（GC）导致插件绑定事件失败

作者在重构Chrome插件时遇到了一个令人头疼的间歇性问题：插件完成加载后，在初始化绑定`chrome.webRequest`等事件时会概率性失败，控制台抛出`Cannot read property ‘onBeforeSendHeaders’ of undefined`的错误，导致后续逻辑完全中断。尤其是在调试页面时，错误源还会在`extensions::guestViewEvents`和`extensions::runtime`等内部脚本之间反复切换，让人难以定位。经过排查，问题的根源在于Chrome扩展运行时的不稳定，这很可能与V8引擎的垃圾回收（GC）机制有关。在GC发生时，某些在初始化期间依赖的底层对象或接口可能被意外回收或未就绪，从而导致访问失败。针对这个棘手的环境问题，作者尝试了包括简化代码、调整生命周期钩子（如onload、DOMContentLoaded）执行顺序等常见方法，但均未奏效。最终，他采用了一个务实但有效的容错方案：在初始化代码外包裹`try-catch`，一旦捕获到异常，就立即触发`location.reload()`进行页面自动重载。由于故障本身是概率性的，通过这种快速的自动恢复机制，可以很大程度上规避初始化失败导致的功能完全不可用。虽然这并非从根源上解决了运行时不稳定的问题，但在这种特定场景下，却是一个能够保障插件可用性的巧妙“妥协”。

IT 累计浏览 2,777

了解JS中的全局对象window.self和全局作用域self

这篇文章从初学者常有的疑问切入：JS全局对象window、window.self和直接使用self这几个写法到底有什么区别？文章首先澄清，在普通的Web页面上下文里，它们确实是等价的，仅凭这点self似乎可有可无。真正的价值区分出现在HTML5时代。随着Service Workers和Web Workers的兴起，JavaScript需要在独立于浏览器主窗口的后台线程中运行，而Worker环境没有“窗口”的概念，因此不存在window对象。此时，self就成为了指代全局作用域的唯一关键。文章通过一个Service Worker注册的实例，清晰地展示了在Worker脚本中，如何通过`self.addEventListener`来监听事件，这正是self的核心应用场景。简而言之，这篇文章厘清了self从“冗余别名”到“Worker环境基石”的角色转变，帮助开发者理解在不同的运行上下文中应该选择哪个全局引用。对于涉及前端性能优化、离线应用或后台数据处理的开发者来说，这是理解现代Web API一个不可或缺的细节。

IT 累计浏览 2,593

JavaScript: 2016年回顾

这篇讲的是2016年JavaScript世界里那些值得关注的变化。作者从语言本身的演进出发，提到ES6/2015规范终于开始被广泛支持，开发者可以通过Babel等工具平稳过渡，而ES7/2016带来的async函数更是让异步代码的编写变得清晰直观。文章重点回顾了渐进式Web应用（PWA）在这一年的成熟。随着Chrome 52的发布，PWA提供了离线优先、快速启动等关键能力，让Web应用首次能与原生应用在体验上直接竞争，而且改造步骤相对简单：启用HTTPS、创建应用清单和服务工作者。尽管当时苹果的支持尚不明确，但作者认为这已是移动端Web体验的一次重要突破。此外，文章也提及了前端框架的竞争格局，React在当时备受瞩目，而Vue.js的第二版发布也标志着其影响力的上升。整体来看，这篇文章捕捉到了JavaScript在语言特性、应用形态和生态工具上共同向前迈进的一个关键节点。

IT 累计浏览 2,693

ECMAScript 6 Modules(模块)系统及语法详解

这篇文章梳理了 JavaScript 模块化发展的关键节点：ES6 模块。作者指出，在 ES6 之前，模块化由互不兼容的 CommonJS（语法简洁、同步加载，主导服务器端）与 AMD（语法复杂、异步加载，主导浏览器）两大标准割据。 ECMAScript 6 模块的目标正是融合二者的优点：提供类似 CommonJS 的简洁单值导出语法，同时保留对 AMD 异步加载的支持。更重要的是，作为语言原生标准，ES6 模块在结构上支持静态分析（便于工具检查和优化），并能更优雅地处理循环依赖，从而超越了前代方案。文章系统讲解了 ES6 模块的语法细节，包括如何使用 `export` 进行“命名的导出”（一个模块可导出多个值），以及对应的 `import` 导入方式，并配有清晰的代码示例。

IT 累计浏览 3,510

优化JavaScript的执行效率

这篇讲的是一个在前端性能优化中常被忽视但影响重大的环节——JavaScript的执行效率。作者从页面动画和数据计算等常见场景切入，指出错误的执行时机和过长的代码执行时间是两大元凶。文章给出的核心建议非常具体：实现动画时，应果断用`requestAnimationFrame`替代`setTimeout`或`setInterval`，因为后者无法保证回调的执行时机，容易导致掉帧。对于耗时的计算任务，则应放到Web Workers中异步执行，避免阻塞主线程。同时，DOM更新应拆分成多个小任务，分批在多个帧中完成。此外，作者还强调了借助Chrome DevTools的Timeline和JavaScript Profiler进行性能分析的重要性，因为经过JIT编译器优化后的实际执行代码可能与你所写代码大相径庭。这些技巧组合使用，能有效解决页面卡顿，让动画更流畅，是前端开发中必须掌握的性能优化基础。

IT 累计浏览 1,400

jQuery 3.0 升级指南

这篇指南是为那些正在或将要将项目升级到 jQuery 3.0 的开发者准备的实用手册。文章开宗明义，指出 3.0 版本对 API 进行了清理和更改，并明确了新的浏览器支持范围（如 IE 9+、现代浏览器的前两个版本等）。其核心亮点在于详尽介绍了官方推荐的平滑迁移方案——使用 jQuery Migrate 插件。文章不仅解释了该插件的作用，即充当升级工具来警告不兼容用法，还给出了一个清晰的八步升级流程，指导开发者如何从 1.x/2.x 逐步过渡到 3.0，并确保代码的稳健性。例如，流程中强调先在 2.x 版本下使用 Migrate 1.x 插件解决遗留问题，再切换到 3.0 与 Migrate 3.x 插件配合。此外，文章将 3.0 的重要变更进行了分类梳理（如“更改”、“功能”、“已弃用”），帮助读者快速评估潜在影响。整体上，它不仅列出了“做什么”，更通过具体的步骤和工具解释了“如何安全地做”，为这次大版本升级提供了清晰、可操作的路线图。

IT 累计浏览 1,758

用webgl打造一款简单第一人称射击游戏

这篇讲的是如何用原生WebGL从零构建一款简单但完整的3D第一人称射击游戏。作者从一个有趣的缘由切入——为了回应同事对之前3D迷宫项目“缺少一把枪”的吐槽，于是有了这个新Demo。文章的重点不在于游戏复杂度，而在于两个WebGL核心知识点的实践：**如何在没有建模工具的情况下，用代码拼凑基本几何体来生成枪械等3D模型**，以及**如何控制“摄像头”来实现第一人称视角**。作者坦诚地展示了“手搓”模型的艰辛过程：通过将现实尺寸映射到WebGL坐标系，并拆解为简单子模型来组合成型。这种方式虽然不实用，但生动地揭示了3D物体在代码层面的构成逻辑。更精彩的部分是关于摄像头的讲解，作者用一组直观的对比图，清晰地说明了物体移动与摄像机移动在视觉上等效的原理，即它们都在改变物体相对于“视锥体”的位置，这是理解3D视角控制的关键。文章附有可直接试玩的链接和开源代码，将抽象的顶点变换（uPMatrix*uVMatrix*uMMatrix）与具体的射击游戏体验结合起来，让理论立刻变得可感知。对于想理解WebGL渲染管线，特别是摄像机机制的前端开发者来说，这是一个非常生动的实践案例。

IT 累计浏览 2,469

谈谈我这三年在技术上的成长

这篇讲的是作者在入职淘宝三年后，对技术成长路径的一次系统复盘。起因是收到许多前端同学关于学习瓶颈的咨询，作者决定整理自己的经验。文章从个人经历出发，强调了在职业生涯早期打下坚实基础的重要性——比如在学校反复啃完《JavaScript权威指南》这类看似枯燥的基础著作。随后，作者指出进入公司后，需要快速适应新的技术体系和业务流程，从关注“闭包、事件模型”转向理解“组件化、自动化测试”，并借助公司明确的能力分级来定位自己。对于层出不穷的新技术，作者分享了自己高效的学习心法：先快速了解工具的能力边界和适用场景，在脑海中将其归类（如“工程化-打包类”），而非立刻陷入源码细节。核心观点是，技术学习应紧跟业务需求，知道从哪里学到知识，就等于掌握了一半。全文没有空谈方法论，而是通过作者在百度、淘宝的实习与工作实例，为技术人尤其是前端学习者提供了一条从夯实基础、到构建体系、再到业务驱动的清晰成长路径参考。

IT 累计浏览 2,174

Date对象的那些事儿

作者从实际项目中处理时间戳转换的需求出发，深入讲解了 JavaScript 中 Date 对象的初始化参数与常用方法。文章梳理了几种创建 Date 实例的不同方式：既能传入自 1970 年起的毫秒数（并特别解释了参数为 0 时因时区显示为 8 点的细节），也能传入年、月、日等分项数字（其中月份 0 代表一月是个易错点），甚至能直接使用格式灵活的日期字符串。在方法部分，文章对比了 `getDate()`、`getMonth()`、`getFullYear()` 等一系列获取本地时间的函数，并重点说明了 `getTime()` 返回的毫秒数与 Unix 时间戳的关系，演示了两者相互转换的实用技巧。整体内容围绕 Date 对象的基本用法与常见陷阱展开，细节实在，适合想理清时间处理基础知识的开发者。

IT 累计浏览 2,151

超级小的web手势库AlloyFinger发布

这篇介绍的是一个名为AlloyFinger的Web手势库，它能为移动设备带来流畅的手势交互体验，同时解决困扰开发者已久的click 300ms延迟问题。作者从实际的移动端开发需求出发，提供了一个轻量级且功能完备的解决方案。 AlloyFinger的核心优势在于其极小的文件体积与丰富的功能。它支持包括pinch缩放、rotate旋转、pressMove拖拽、doubleTap双击、swipe滑动等在内的多种手势，并提供了独立版和React版本，方便不同技术栈的项目集成。文章详细列举了库支持的事件列表，并通过独立版与React版本的快速上手代码示例，直观展示了其简洁的API设计。值得注意的是，该库已在包括兴趣部落、QQ群、腾讯CDC在内的多个线上项目中得到实际验证，其性能与稳定性有据可查。文章还针对使用中的常见问题，如与transformjs的关系、调试方法、缩放原点计算等进行了Q&A解答，对开发者非常实用。总的来说，AlloyFinger为需要处理复杂触摸交互的Web项目，提供了一个开箱即用、经过实战检验的轻量级工具。

IT 累计浏览 2,292

前端路由实现与 react-router 源码分析

这篇技术文章从单页应用的前端路由切入，先带读者实现了一个极简的路由系统。作者用hash变化的原理，通过监听`hashchange`事件，构建了一个包含路由注册（`route`）和刷新（`refresh`）的`Router`对象，清晰地揭示了路由工作的底层逻辑。在打好这个基础后，文章的核心转向了react-router的源码分析。它点明了react-router与history模块结合的关键——“包装方式”，即通过一层包装来复用原生对象的内部机制，从而在解耦的同时实现功能增强。文章还展示了react-router如何将其API设计为React组件（如Router、Route、Link），使其能无缝融入React的组件生命周期和声明式编程范式。作者通过从极简实现到复杂库源码的剖析，让读者既能理解路由的“为什么”，也能看清主流解决方案的“怎么做”，尤其包装模式与组件化的设计思路，对理解大型前端库的架构很有启发。

IT 累计浏览 1,567

移动web开发调试工具AlloyLever介绍

这篇介绍的是AlloyLever，一个轻量但功能强大的移动端Web调试工具。它直接解决了移动调试的三大高频痛点：查看日志（Log）、捕获脚本错误（Error）、监控网络请求（AJAX）。与开发者需要连接电脑调试不同，AlloyLever通过在页面中注入一个JS文件，就能提供一个类似桌面浏览器DevTools的浮动面板。它巧妙地通过重写`console`方法和`XMLHttpRequest`对象，来拦截并记录所有的日志输出、JS错误、资源加载失败以及XHR请求的完整生命周期。同时，它也能展示Cookie、LocalStorage和页面性能时间线。这种“注入即用”的设计，极大地降低了移动端调试的门槛，特别适合在真机上快速定位问题。文章还清晰地拆解了其实现原理，比如如何通过回调检查AJAX状态来捕获响应数据，可读性很高。对于常做移动端开发的团队来说，这是一个能显著提升排错效率的实用工具。文章末尾也提到了微信团队的vConsole，方便读者对比选择。

IT 累计浏览 2,071

元素选择器 - Mini Query

这篇讲的是如何用寥寥几行代码实现一个简单但功能完整的元素选择器，并且巧妙地兼容了IE8以下的老式浏览器。作者从一个实际的前端兼容性需求出发：虽然现代浏览器已经原生支持 querySelector 和 querySelectorAll，但在需要照顾低版本IE的项目中，开发者往往需要 hack。文章提出的核心方案原理清晰且富有巧思——通过动态创建一条CSS规则并应用到目标元素上，给它们打上一个临时标记（比如“Barret:Lee”这个属性）。接着，只需遍历页面所有元素（document.all），检查哪些元素“染上”了这个标记，就能将它们收集起来。完成任务后，再移除这条临时规则，保持页面清洁。文章提供了完整的实现代码，其中可以看到对 IE8 等环境的针对性处理，例如修复 `querySelectorAll` 返回值的兼容性问题。这种利用CSS Rule作为“探针”来定位元素的方法，避免了复杂的DOM遍历，实现轻量而有效，对于需要处理历史遗留项目的开发者来说，是一个值得了解的小技巧。

IT 累计浏览 1,501

JavaScript 代码执行效率对比工具

这篇文章介绍了一个用于对比JavaScript代码执行效率的轻量级工具。作者从小程序和大型工程对性能需求的不同出发，梳理了几种常见的性能测试方案，包括使用在线平台 jsperf.com、利用 `console.time` 计时以及自己编写计时器。为了更直观地对比不同代码片段的性能差异，作者开发了这个名为 Performance 的工具。其核心设计思路是在设定的时间内（默认1000ms）循环执行指定的代码，并基于执行结果计算出一个相对的效率百分比。其中效率最高的代码会被标记为100%，其余代码则显示为相对的性能百分比，从而让性能高低一目了然。文章提供了工具的在线演示页面和 GitHub 仓库地址，方便读者快速上手体验。对于正在编写框架或库、需要精细优化关键代码路径的前端开发者来说，这个工具提供了一种便捷的本地化性能评测与对比方式。

IT 累计浏览 1,497

用javascript比较语义化版本号

在移动端混合开发场景中，根据APP或其内置浏览器的版本号来执行不同业务逻辑，是一个常见需求。这篇文章聚焦于如何用JavaScript去精确比较语义化版本号（如`6.1.5`这样的格式）。作者首先澄清了版本号的标准格式（主版本号.子版本号.修正版本号），随后提供了一个清晰的JavaScript函数实现。这个函数的核心思路是将版本字符串按`.`拆分后，逐段比较数字大小，从而判断当前版本与目标版本的高低。文章通过几个简洁的示例，展示了具体的调用方式和结果。值得注意的是，作者坦诚该方法实现较为基础，只支持完整的版本号串比较，无法单独比较主版本或子版本。文末还补充了一个实用范例：如何从微信浏览器的UA中提取版本号并进行条件判断，这为实际项目中的落地提供了直接参考。整体来看，文章从实际问题切入，给出了一个轻量、可用的解决方案。

IT 累计浏览 2,395

聊聊前端

这篇文章是作者从前端新人到资深从业者的一路复盘，主要聊聊前端行业的认知、学习路径与职业发展。作者认为前端门槛看似低，但只停留在“切图”层面难以立足。他坦言学习过程漫长，能否学好与个人兴趣、对IT的理解、英语能力和坚持程度密切相关，绝非短期培训就能一蹴而就。关于前端是否高薪，作者指出这需要技能支撑，并非人人可达。当前市场存在公司期望“全能”与求职者期望“高薪”的错位。他还分享了自己从培训班入门，通过模仿、写插件、研读jQuery源码、尝试整体架构，最终重视用户体验的成长路径，并强调了学习Git、Node.js、数据库等扩展技能的重要性。整篇文章以过来人的口吻，坦诚分享了技术成长的心得与行业观察，提醒读者摆正心态，扎实积累。

IT 累计浏览 2,417

JavaScript 被忽视的细节

这篇讲的是《JavaScript 权威指南》的深度阅读心得。作者带着研究精神再次逐字逐句研读犀牛书，总结出一系列容易被初学者甚至熟练开发者忽略的细节。文章从基础概念辨析讲起，比如语句与表达式的区别、分号自动插入规则的最佳实践（在以“（”、“[”、“/”、“+”、“-”开头的语句前加分号）。它深入探讨了精度陷阱，如 `0.3-0.2 != 0.2-0.1` 的 IEEE-754 浮点数根源，以及 `undefined` 的正确使用场景和 ES5 对它的保护。对于一些关键特性，作者给出了明确建议：尽量少用 `eval`，可用 `new Function` 替代；指出了 `delete` 操作只删除引用而对象可能仍被其他变量持有的内存泄漏风险；理清了 `this` 仅有作为方法调用和作为函数调用两种核心语义。此外，文章还涵盖了 ES6 新特性如 `Symbol` 的多样用法、`Map/WeakMap` 相比传统对象的便利性，以及正则表达式中零宽断言的理解。这些片段化的笔记，实则是对 JS 核心机制的一次次澄清。作者认为，带着问题去重读经典，理解的深度会完全不同。

IT 累计浏览 1,922

使用jquery卸载全部事件

这篇讲的是如何在jQuery中彻底卸载页面上全部事件的方法。作者从jQuery源码切入，揭示了其如何通过内部机制支持“匿名事件”的卸载——这正是我们通常无法直接用原生JS完成的。文章清晰地梳理了背后的原理：jQuery会为绑定事件的元素（或像window这样的对象）打上一个独特的`expando`标识，并将所有事件处理函数存储在一个以该标识为键的`$.cache`全局缓存对象中。因此，卸载所有事件的关键，就在于切断元素与缓存的关联。核心操作分为两步。首先是遍历页面所有元素以及window对象，尝试删除它们身上由jQuery添加的`expando`属性，清除连接标记。其次是重置`$.cache`对象和window上的`expando`，彻底清空事件缓存。这套组合拳能有效清理掉包括滚动、窗口调整等在内的所有jQuery绑定事件。对于需要动态重建页面或排查内存泄漏的开发者而言，理解这个机制并掌握这种清理方法非常实用，它展示了jQuery内部精巧的设计如何被我们反向利用。

IT 累计浏览 1,575

提高JavaScript性能

这篇讲的是如何从多个层面提升JavaScript代码执行效率。作者开篇就指出了JavaScript作为解释型语言的固有速度劣势，与编译语言相比差距悬殊，因此优化显得尤为重要。文章从具体实践出发，分享了四个核心优化方向。在作用域方面，强调通过缓存全局对象（如document）的引用来减少作用域链查找，并避免使用会拖慢速度的`with`语句。对于算法选择，文章深入到了循环优化的细节，包括采用减值迭代、简化终止条件，并介绍了如何运用Duff装置等技术来高效展开循环。此外，作者还提醒开发者注意减少不必要的语句解析，例如合并变量声明、使用数组和对象字面量来替代`new`操作符。最后，文章点明了DOM操作是性能瓶颈的关键所在，因其会触发昂贵的页面重绘。整体来看，这些技巧从微观的代码写法到宏观的策略选择，构成了一份实用的JavaScript性能优化清单。

IT 累计浏览 1,659

前端开发者不得不知的ES6十大特性

这篇文章从ES6的发展历史讲起，旨在为前端开发者提供一份清晰的ES6入门指南。作者精选了十大核心特性进行解析，涵盖了从代码简化到模块化工程的方方面面。摘要直接切入重点，介绍了默认参数、模板字符串、多行字符串、解构赋值、箭头函数等关键特性。通过与ES5中繁琐写法的直观对比，生动展示了ES6语法如何让代码更简洁、更易读。例如，模板字符串告别了字符串拼接，箭头函数让回调更轻量，而解构赋值则能直接从对象或数组中提取值。文章还提及了Promises、Let/Const、类与模块等特性，这些特性共同解决了异步处理、作用域污染和代码组织等实际问题。全文旨在帮助前端开发者快速把握这些核心新特性，提升开发效率和代码质量。