标签：JavaScript

共 776 篇相关文章

IT 累计浏览 1,739

如何捕获和分析 JavaScript Error

这篇文章从现代 Single Page App 的痛点切入：用户操作状态复杂，简单的“刷新页面”已无法作为错误处理的万能药，因此系统性地捕获与分析前端错误变得至关重要。它详细对比了两种核心捕获方式：try-catch 用于已知会抛出异常的 API 调用或回调，确保代码局部容错；而 window.onerror 则是兜底方案，用于捕获未预料到的全局错误。文章进一步剖析了跨浏览器环境下的属性丢失难题——window.onerror 有限的参数会导致关键信息（如列号、堆栈）缺失，作者探讨了通过序列化 message 或利用现代浏览器提供的第五个参数（Error 对象）来解决。针对跨域脚本抛出的 “Script error.” 这一普遍难题，文章提供了基于 CORS 的注入方案来绕过安全限制，并深入到一个非常实际的工程细节：通过插入空行的“行号反查”技巧，解决内联代码导致的行号冲突问题，使得错误定位依然准确。整体来看，作者从基础方法讲到浏览器兼容性深水区，再到跨域场景的工程化应对，为前端开发者提供了一份清晰、可落地的错误监控实施指南，而不仅仅是罗列 API。

IT 累计浏览 2,387

理解JavaScript 中的 this

这篇讲的是JavaScript里那个让人又爱又恨的`this`关键字。作者从`this`的基本工作机制切入，核心观点是：它的指向并非由函数定义决定，而是取决于函数被调用的“方式”。文章用简洁的代码示例对比了关键差异：当函数作为对象的方法调用时，`this`指向该对象；若将方法赋给变量再调用，`this`却会“叛逃”至全局。在构造函数中，`this`指向新创建的实例，但若漏写`new`，又会指向全局——这种“脆弱性”正是许多困惑的根源。作者进一步剖析了用`call`、`apply`和`bind`这三个工具显式绑定`this`的场景，它们适用于需要在不同上下文中复用函数，或提前锁定`this`指向的情况。最后，文章点明了一个进阶痛点：在嵌套函数（作用域链）中，`this`无法自动继承，通常需要借助`self`或`that`变量来“捕获”外层的引用。通篇没有空泛的理论，而是紧扣开发者日常会遇到的实际陷阱和解决方案，对理清`this`的作用规则很有帮助。

IT 累计浏览 1,351

javascript DOM操作中的insertAdjacentHTML方法

这篇讲的是如何用更现代的方式在DOM中插入HTML内容。作者从大家熟悉的innerHTML和innerText方法的局限性出发，引出了功能更强大的insertAdjacentHTML。它最大的特点是支持四个精确的插入位置参数：beforeBegin、afterBegin、beforeEnd、afterEnd，可以让你在目标元素的外部前后、内部开头或结尾处插入内容，控制粒度非常细，避免了innerHTML可能覆盖原有内容的风险。文章还贴心地分享了一个兼容老版本IE的自定义insertHTML函数实现。这个函数的思路很巧妙：对于不支持原生方法的浏览器，它通过创建Range对象并使用createContextualFragment来解析和插入HTML片段，从而模拟了四个位置的插入行为，确保了代码的跨浏览器可用性。如果你还在频繁使用innerHTML拼接界面，或者对DOM插入位置有更灵活的需求，这篇对insertAdjacentHTML的实操讲解会提供一个清晰直接的解决方案。

IT 累计浏览 1,870

移动应用开发工具：PhoneGap与Titanium的比较

这篇讲的是跨平台移动开发工具 PhoneGap 和 Titanium 的“道”与“术”之别。 PhoneGap 的核心是“包装”，它把 HTML/CSS/JS 写就的 Web 应用，用原生代码包裹起来，再通过一个“桥接”层让 Web 页面能调用摄像头、联系人等设备功能。它的优点是门槛极低，任何前端开发者都能快速上手，但缺点也明显：界面完全依赖移动设备的浏览器视图渲染，性能和体验参差不齐，且很难与真正的原生 UI 组件深度集成。 Titanium 的思路则截然不同，它是“生成”。开发者用 JavaScript 编写的代码，会通过其 SDK 在编译时转换成真正的原生应用指令和 UI 控件。运行时，JavaScript 与原生代码通过“代理对象”并行交互。这带来了接近原生的性能和体验，但代价是开发者需要理解原生应用的构建逻辑，且添加新平台支持的难度较大。因此，二者的选择归根结底是场景和理念的选择：PhoneGap 更像一个快速的“Web 应用转生器”，适合已有 Web 项目或对原生体验要求不高的场景；而 Titanium 则是一个能用 JS 驱动原生开发的“利器”，更适合追求性能和原生交互体验的移动应用开发。

IT 累计浏览 1,717

20年的C2C之路

这篇讲的是中国互联网长达20年的“C2C”发展路径，即从美国复制商业模式的历程。作者深入剖析了这一现象背后的深层逻辑，指出其核心驱动力是风险投资（VC）的运作需求——通过对标一个已被验证的美国成功案例（如“中国的Facebook”），来降低投资者的风险感知并为最终的赴美上市铺平道路。但文章并未止步于“简单抄袭”的论断。作者进一步指出，成功的C2C实践都伴随着深度的“Glocalization”（全球本土化）。从门户网站为适应中国网民习惯而开创的“海量快速”编辑模式，到百度依赖线下代理和网吧预装的地推打法，再到淘宝基于中国零售业现状对eBay模式的颠覆性改造，乃至QQ在虚拟道具盈利上的原创，这些案例无不体现了基于本土环境的微创新甚至彻底重构。最终，随着互联网从“信息”深化到“人”，中美用户行为的差异愈发显著。作者观察到，纯粹的复制已难以为继，反而是具备强本地化能力或原生创新的模式（如微信生态、互联网金融）开始引领新阶段。这篇文章为我们理解中国互联网的商业基因提供了一个历史视角，也启发我们思考：在今天的出海或本土竞争中，单纯的模式借鉴已远远不够，对用户与市场的深刻理解才是关键。

IT 累计浏览 2,082

动态创建iframe在IE下的两个问题

这篇技术文章聚焦于动态创建iframe在早期IE浏览器（IE6/7/8）中遇到的两个具体兼容性坑点。作者首先指出，使用`createElement`动态创建iframe后，将其设置为表单提交目标（target）的方式在IE6/7下会失效，导致无法实现无刷新提交。其根因在于IE浏览器对这种方式创建的iframe元素识别存在缺陷，解决方案是改用`innerHTML`的方式将iframe插入DOM。第二个问题同样常见：通过`onload`属性为动态创建的iframe绑定加载完成回调，在IE6/7/8中均会失效。作者解释，这是因为IE的旧版本不支持该属性的事件绑定，需要改用其特有的`attachEvent`接口来实现。文章为两个问题都提供了简洁有效的代码示例，方便读者直接参考修改。对于仍在维护老旧系统或需要处理兼容性的前端开发者而言，这篇文章清晰地剖析了问题现象、根源并提供了即用型的解决方案，是一份实用的排错指南。

IT 累计浏览 2,572

从千分位格式化谈JS性能优化

这篇文章从日常开发中常见的千分位格式化（如“10,000”）需求切入，以此为案例，深入探讨了JavaScript代码的性能优化之道。作者没有满足于一个能用的函数，而是依次展示了六种不同的实现思路，包括基于数组循环、字符串拼接、正则循环匹配、字符串截取以及正则替换等方法。文章的核心价值在于对这些方法进行了清晰的对比。关键差异主要体现在两个方面：一是操作对象（是将数字打散为数组操作还是始终处理字符串），二是算法与工具的选择（是循环遍历还是利用正则表达式）。作者通过“执行5000次消耗的时间”这一直观的性能测试数据，给出了明确的结论：避免使用数组的`unshift`方法和复杂的正则循环，通常能获得更好的性能。例如，纯字符串操作的“方法二”和“方法四”在多数情况下表现优异，而一行代码的“懒人法”（方法六）虽然简洁，但性能并非最优。这篇文章生动地说明，一个看似微小的功能点，其背后也蕴含着值得优化的算法选择。它提醒开发者，在编写代码时，除了功能正确，也应关注实现方式对性能的潜在影响，尤其是在处理频繁调用的工具函数时。

IT 累计浏览 2,206

前端开发中Cookie那些事儿

这篇讲的是前端开发中cookie的那些事儿。作者从实际项目经验出发，详细解释了cookie的各种属性及其用法，特别是那些容易踩坑的地方。例如，cookie的生存期由expires和max-age属性控制，但max-age用秒表示，已成为现代标准；max-age为正时cookie会持久化存储，为负时仅在当前会话有效，为0时则删除cookie。在ie6浏览器中，session cookie在不同打开方式下行为不一，作者曾为此吃过大亏，调试过程颇为曲折。文章还深入解析了domain、path、secure和httpOnly等属性。domain属性允许跨子域共享cookie，但需谨慎设置域以确保安全；path属性定义cookie的关联路径；secure确保cookie仅通过HTTPS传输；httpOnly则防止JS脚本访问，增强安全性。作者分享了一个实战教训：因忽略httpOnly属性，尝试用JS读取cookie失败，耗时近两小时才定位问题。在性能优化方面，文章强调cookie会随HTTP请求发送，增加网络开销，因此不建议将其作为客户端存储方案，并推荐了localStorage等本地存储作为替代。此外，还解释了cookie值的编码解码必要性，以及同名cookie在不同域或路径下的区别规则。通过结合理论解释和踩坑经历，这篇文章为前端开发者提供了实用的cookie操作指南，帮助大家避开常见陷阱，在复杂应用中更高效地管理状态和提升性能。

IT 累计浏览 3,823

Beforeunload打点丢失原因分析及解决方案

这篇技术文章由1688的朱铁根和胡大军撰写，他们从淘宝团队早年发现的“页面跳转前发送的打点请求丢失”现象切入，深入剖析了这一前端数据采集中的经典痛点。作者指出，问题核心在于浏览器页面卸载机制与网络请求时序的冲突：当页面跳转指令发出后，浏览器会迅速销毁当前页面的所有对象，包括用于发送打点请求的Image对象。如果此时打点服务器尚未完成响应，该HTTP请求就会被强制终止，导致数据丢失。为解决这一矛盾，文章并未建议以牺牲用户体验（如延迟页面响应）为代价，而是巧妙地利用了`window.name`属性的特性。在页面卸载前，将打点数据临时附加到`window.name`中；页面刷新加载后，新页面立即读取并发出这个积攒的打点请求。该方案有效规避了`window.name`在页面刷新后依然保留的特性，同时解决了`cookie`或`localStorage`存在的跨域限制问题。实测数据显示，该方案效果显著，在Chrome浏览器中打点回收率平均提升了约13%，在各版本IE浏览器上也取得了稳定的提升，为解决此类前端数据采集问题提供了一种可靠且兼容性良好的工程思路。

IT 累计浏览 4,656

防止表单重复提交的几种策略

这篇讲的是多用户Web应用中一个经典问题：表单重复提交。从用户误点两次按钮、刷新页面，到使用浏览器前进/后退，甚至网络层的重复请求，都可能导致同一数据被多次处理，带来数据不一致或资源浪费。文章梳理了四种常见的应对策略。前端层面，可以暂时禁用提交按钮，但这依赖客户端JavaScript，不够稳健。更推荐的做法是采用Post/Redirect/Get模式——提交后立即重定向到结果页，从根本上避免刷新或回退带来的重复提交。后端控制上，可以在session中为每次生成的表单嵌入一个一次性令牌，服务器处理时立即核验并删除，这是一种结合了安全考虑的有效方案。最后，从数据源头兜底，在数据库层面设置唯一约束或索引，确保即使重复数据到达也能被拦截。这些方法各有侧重，从用户交互、请求流转、会话状态到数据存储形成了多层次的防御。实际开发中，往往会根据应用的安全要求和复杂度，选择组合使用这些策略。

IT 累计浏览 3,199

如何更好用业余时间做互联网创业？

这篇讲的是作者从大量业余创业者的沟通中，观察到几个容易让项目陷入困境的共性问题。他发现，技术出身的创始人往往在产品开发上得心应手，但当项目进入运营阶段，由于身份和精力的限制，推广投入不足，很容易被后来者反超。团队也存在隐忧——很多成员的参与动力只是“最近有点空”，一旦本职工作忙碌起来就容易退出，影响整体士气。此外，同时兼顾两线作战带来的疲惫感，甚至可能波及家庭生活。基于这些观察，作者给出了几条务实的建议：要像全职项目一样设定运营里程碑，哪怕目标定低一些；在产品设计上务必精简，只做核心功能，避免野心过大；他特别指出，业余创业是降低风险的起点，而非终点。当项目验证了正向反馈后，就应考虑寻找资源转向全职，因为“鱼和熊掌不可兼得”。文章为那些在理想与现实间寻找平衡的创业者，提供了一份清醒的行动参考。

IT 累计浏览 4,943

2014网易前端开发笔试题笔记

这篇讲的是作者2014年参加网易前端开发校招笔试的真实经历与考题回顾。文章从收到临时通知的匆忙赶场开始，生动还原了考场外的见闻：来自不同高校的考生、不少“霸笔”同学，以及外包给智联招聘的笔试组织形式。核心部分聚焦于笔试本身。作者详细分享了两大板块的题目：第一部分是所有技术岗必考的计算机基础，涵盖文件组织、图遍历、无向图、可计算性、哈夫曼编码、死锁、数据库索引等经典问题，并附上了自己的解析。第二部分是前端开发专业题，题型包括不定项选择、填空、简答和编程题，重点考察JavaScript，例如要求手写闭包示例、阐述apply/call区别，并参照原型图实现交互页面。除了考题，作者还观察到招聘可能存在学校偏好，并指出广州考生流动性较低的现象。整篇文章既是一次笔试的详细记录，也为后来者提供了宝贵的复习参考和实战视角。

IT 累计浏览 4,446

谁说设计师不会写代码？—Photoshop脚本语言简介

这篇文章探讨的是设计师工作流程中一种常被忽视的自动化利器：Photoshop脚本语言。作者从设计师普遍使用“动作”进行自动化出发，指出了动作像固定录像、缺乏灵活性的根本局限，进而引出脚本语言这一更具交互性的替代方案。文章的核心在于澄清一个误区：脚本并非只有程序员才能驾驭。它明确指出，只要具备基础的JavaScript知识，设计师就能利用脚本实现更复杂、更智能的自动化，例如根据参数动态调整图像处理过程。文中以调整图像大小为例，清晰对比了动作步骤与对应脚本代码的写法，让技术门槛显得更为直观。此外，文章还提供了扎实的入门指引，包括推荐使用Adobe ExtendedScript Toolkit作为编写工具、解释Photoshop对象模型（DOM）的基本结构，并指出脚本可像动作一样保存和绑定快捷键。整篇文章旨在为设计师打开一扇新窗，将原本重复枯燥的机械操作，转化为可通过代码灵活控制的创意流程。

IT 累计浏览 2,683

通过WebRTC获取摄像头影像

这篇技术文章讲的是如何利用 WebRTC API 在网页中调用摄像头并实现一键截图。作者从基础的 video 标签搭建开始，引出了核心的 `navigator.getUserMedia` 接口，并特别指出了它在当时浏览器环境下的兼容性现实：Chrome 和 Firefox 需要加前缀，移动端支持不佳。文章的核心实现思路清晰：通过 `getUserMedia` 请求摄像头权限，成功后拿到视频流，再通过 `window.URL.createObjectURL` 将流媒体转换为 URL 填入 video 标签播放。截图功能则依赖 canvas 的 `drawImage` 方法，把视频当前帧“画”上去。作者贴心地给出了处理浏览器差异的兼容代码，并分享了一个实战中遇到的“坑”：在 Firefox 中无法通过常规事件可靠获取视频尺寸，最终采用 `setTimeout` 轮询的变通方案来绑定截图按钮。除了核心步骤，文章末尾还补充了几个有价值的细节，比如同一浏览器不同标签页可以共享摄像头，但不同浏览器不行；以及推荐将截图上传至服务器再提供下载，而非在本地强制保存。整体上，这是一份对前端开发者来说相当直接、步骤明确的实践指南。

IT 累计浏览 1,810

实现一下webapp的手机摇一摇功能

作者一开始也以为在WebApp里实现“摇一摇”必须依赖Hybrid框架，直到他发现了浏览器原生的DeviceMotion API。这篇文章就记录了他利用这一接口实现纯前端摇一摇功能的过程，思路清晰且实用。核心实现并不复杂：通过监听设备的`devicemotion`事件，可以获取到`accelerationIncludingGravity`属性下的`x`、`y`、`z`三个方向的加速度数据。作者通过分析这三个数值的变化，来判断手机是否发生了“摇动”行为。文章给出了关键的事件监听和数据获取的代码示例，展示了如何用短短几行代码搭建起这个交互的基础框架。这篇分享的巧妙之处在于，它证明了对于一些常见的设备交互需求，不必立刻上重型方案。利用好浏览器提供的标准Web API，往往就能以更轻量、更跨平台的方式达成目标。对于前端开发者来说，这为丰富移动端WebApp的交互体验提供了一个低成本的可行思路。

IT 累计浏览 4,189

10分钟尝试10种编程语言

作者为想快速体验不同编程范式的开发者整理了一份清单，核心观点是：不必耗时安装环境，直接在浏览器里就能“尝鲜”多种编程语言。文章分类介绍了10种语言，从Lua这类擅长游戏脚本的动态语言，到Erlang这种构建高容错系统的函数式语言，再到Elm这样的响应式Web语言，甚至Brainfuck这种纯属娱乐的秘教语言都涵盖其中。文章强调，这些在线环境通常附带教程，能帮你快速了解一门语言的“性格”。例如，想体验LISP家族的现代变体可以尝试Clojure，它的社区项目Overtone能实现有趣的音频编码；而R语言则专精于统计图表。除了语言本身，文章还推荐了Cloud 9等浏览器IDE，让你连开发环境都不用本地配置。作者最后指出，通过解决像FizzBuzz或生命游戏这样的经典小任务，可以进一步巩固新学语言的技能。整篇文章像是一份有趣的“编程语言游乐园”导览图，从动态脚本到纯理论探索，路径清晰，旨在激发读者探索新范式的兴趣。

IT 累计浏览 4,065

通过WebRTC获取摄像头影像

这篇讲的是如何利用WebRTC实现实时获取摄像头影像并在浏览器中完成截图。文章从创建`

IT 累计浏览 3,540

JavaScript 中的陷阱

这篇讲的是JavaScript开发中那些因为语言特性而容易“掉坑”的典型场景。作者从JavaScript“弱语言”的灵活与宽松出发，指出了几个开发者常会忽略的陷阱细节。比如，全局变量的隐式创建并不局限于省略`var`关键字，`var a = b = 0;`这样的连写同样会让`b`意外泄露为全局变量。文章还深入剖析了“变量提升”与“函数提升”机制——你可能以为在函数里使用`alert`会输出外部变量，但实际结果往往是`undefined`，因为该作用域内的变量声明已被提前解析。函数声明也遵循同样的提升规则，甚至允许后面的声明覆盖前面的，导致行为与直觉相悖。这篇文章的价值在于，它没有泛泛而谈，而是用一连串精准的代码实例，揭示了JavaScript在变量作用域、解析顺序方面的核心机制。它提醒开发者，要写出健壮的代码，就必须理解这些“坑”背后的语言设计逻辑，养成逐一声明变量、手动管理提升作用域的习惯。

IT 累计浏览 8,009

程序员眼里IE浏览器是什么样的

这篇讲的是程序员如何用幽默解构曾经的浏览器霸主IE。文章没有做严肃的技术评测，而是收集了一系列广为流传的搞笑图片，从“反射弧有点长”到“如何区分HTML与HTML5”，再到不同浏览器的用户画像，用一个个生动的梗图勾勒出IE在程序员心中的形象——反应慢、兼容性差、总像没睡醒的“学渣”。这些看似戏谑的调侃，其实精准地指向了IE衰落的核心原因：在Web标准快速演进的时代，它固步自封，更新迟缓。文章以轻松的方式提醒我们，这些笑话不仅是吐槽，更反映了开发者们对一个开放、标准、高性能的Web环境的集体追求。

IT 累计浏览 2,252

[译文]关于移动Web性能的5个神话

Sencha的CEO Michael Mullany撰文回应了此前引发热议的“移动Web应用为何慢”一文，他指出该文数据虽基本正确，但解读存在偏差且忽略了更关键的图形性能。文章系统驳斥了五个关于移动Web性能的常见误解。首先，移动Web性能瓶颈主要在于浏览器渲染优化、DOM操作和GPU加速，而非JavaScript本身。其次，过去四年超过50%的JavaScript性能提升源于软件优化，而非单纯依赖硬件升级。再者，移动浏览器性能远未停滞，不同浏览器在各自领域存在10倍以上的差距，优化空间巨大。同时，未来的硬件迭代将通过更快GPU、内存带宽和多线程并行化持续带来性能飞跃。最后，现代浏览器采用的增量垃圾收集机制已大幅改善停顿问题，垃圾回收不再是无法逾越的性能杀手。作者结合iOS和Android设备长达四年的性能测试数据，展示了JavaScript与DOM操作性能的显著提升，这些进步远超摩尔定律预期。文章强调，优秀的开发者使用现代Web框架能够构建出体验流畅的移动应用，性能的持续进化让开发者对移动Web的未来充满信心。