使用window.postMessage实现跨域通信
这篇文章直面JavaScript开发者长期头疼的跨域通信难题。在同源策略的限制下，作者梳理了document.domain、location.hash、Flash以及window.name等几种传统的变通方案，指出了它们在数据容量、类型或浏览器兼容性上的各种局限。 文章的重心放在了HTML5提供的标准解决方案——跨文档消息传输（Cross Document Messaging）上。它详细讲解了window.postMessage方法的发送机制与message事件的监听接收，强调了该API实现简洁、支持IE8+等现代浏览器的核心优势。文中还通过参数说明和事件对象属性解析，给出了清晰的代码指引。 值得注意的是，文章并未一味推崇新技术，而是客观指出了postMessage在IE8/9下仅支持字符串传输、对IE6/7需额外兼容等现实不足，并引导读者通过JSON序列化等方式进行优化。整篇文章从问题出发，对比了演进路径，最终聚焦于一个广泛可用的现代标准方案，脉络清晰。
Web工程师的工具箱
这篇文章整理了一份涵盖开发、测试、调试与文档等环节的Web工程师在线工具集合。它并非简单罗列，而是将功能相近的工具进行了分组介绍，方便读者按需查找。 比如，用于发送和检查HTTP请求的工具有RequestBin、Hurl和Httpbin，它们都能帮助开发者直观地分析网络交互；而用于检测网站状态、性能或安全性的工具则包含了Host tracker、SSL Checker和Loadzen等。文章特别指出，这份清单比常见的“18款工具”版本更为完整，补充了评论区和后续更新中的工具，总数达到40余个，像用于模拟网络问题的Necrohost、将HTML转为API的Apify，以及在线代码编辑器JSFiddle等都能找到。 这份“工具箱”的价值在于，它将分散的、实用的在线工具系统地汇总在一起，让工程师无需费力搜集，就能快速定位到解决特定问题的利器，从而提升开发调试的效率。
IE BUG相关文章集合
这篇资源集合聚焦于困扰前端开发者多年的IE浏览器兼容性问题，从底层的渲染机制到具体的bug修复方案，构建了一个系统的知识网络。 文章的核心首先深入剖析了IE特有的“HasLayout”机制，这是众多怪异bug的根源。它链接了多篇详解，帮助读者理解这个只存在于IE引擎中的概念如何影响页面布局。紧接着，文章将视线转向了标准的“块级格式化上下文”，并进行了对比解析。理解这两者的差异，是掌握IE兼容问题的关键所在。 真正的实战干货在于第三部分——具体的IE bug清单。这里罗列了从经典的3px bug、margin加倍、PNG透明问题，到Z-index层级失效、overflow处理异常等二十余个具体场景。每个条目都直接指向问题的表现与解决方案，比如如何为IE6修复`position:fixed`，或怎样处理父级padding后子元素的绝对定位。 最后，文章还整理了多个综合性的BUG修复指南与hack速查表，相当于为开发者提供了一套应对IE怪异模式的工具箱。对于需要维护历史项目或追求极致兼容性的前端工程师而言，这份清单能快速定位问题，节省大量试错时间。
javascript运算/转换技巧
这篇整理了多个实用的JavaScript编码技巧，专注于简化常见操作。作者直接对比了常规写法与更简洁的实现，提供了许多能立刻用在项目里的“糖”方法。 比如，将字符串快速转换为数字，除了 `parseInt` 和 `Number`，还可以用一元加号 `+` 直接搞定。要将任意值转为布尔值，双非运算符 `!!` 是最直观的写法。求数字数组的最大值，用 `Math.max.apply` 可以避免冗长的循环。文章还触及了几个经典痛点，如浮点数运算误差的修正方法（使用 `toFixed`），以及如何高效地实现数字前补零。 值得注意的是，文章不仅限于类型转换，还包含了防御性编程（如用几行代码防止页面被 iframe 嵌入）和函数参数处理（将 `arguments` 对象转换为真正的数组）的技巧。这些内容虽小，却能实实在在地提升代码的健壮性和简洁度。
使用 SourceMap 来进行前端代码调试
这篇文章讲的是前端代码调试中的一个常见痛点：我们写的源码和浏览器实际运行的代码往往不一致。因为现代前端项目普遍会对JavaScript、CSS进行压缩、合并，还会使用Sass、Less、TypeScript等预编译语言进行转换，这导致生产环境中的代码与我们本地编写的代码相去甚远，调试变得异常困难。 SourceMap正是为了解决这一问题而生的技术。作者从这个实际开发场景出发，清晰地解释了它的核心作用——建立压缩或编译后的代码与原始源码之间的映射关系，让开发者可以在浏览器的开发者工具中直接调试最初的、可读的源代码。虽然作者也坦诚地指出，当时的SourceMap生态还不够成熟，但它指明了未来前端调试工具链的一个重要方向。 文章的主体部分是一份详尽的演示文稿（Slides），作者通过二十多页的幻灯片，系统地梳理了SourceMap的原理、格式及其在开发流程中的应用。如果你正苦恼于如何调试生产环境中的“天书”代码，或是想理解这个日益重要的前端基础工具，这篇结合了清晰讲解与视觉化幻灯片的内容，提供了一个不错的入门视角。
取得当前script元素的src(path)
这篇讲的是如何在浏览器中准确获取当前正在执行的 script 元素的路径。作者从标准方案切入，介绍了 document.currentScript 这一便捷的 API，它不仅能拿到 src，还能区分脚本是同步还是异步加载。 不过，文章的重点落在了 IE 浏览器的“坑”上。当通过 document.write 动态插入多个 script 标签时，IE 下的 script readyState 状态与标准浏览器不同。例如，在一个由 a.js 动态写入 a.a.js 和 a.b.js 的场景中，a.a.js 通过 readyState 查找可能意外获取到 a.b.js 的路径，而其他浏览器则能正确识别自身。这揭示了 IE 独特的加载与执行机制：即便脚本已下载完成（loaded），其执行流程仍可能保持阻塞。 因此，作者提供了一个兼容函数，通过检查 document.currentScript 是否存在来降级，并针对 IE 实现了基于 readyState 的回退逻辑。文章通过这个具体的细节对比，点明了不同浏览器在脚本加载行为上的核心差异，对处理动态脚本场景的开发者有很强的实操参考意义。
javascript扩展Array(数组)类
这篇讲的是如何给 JavaScript 的 Array（数组）类“加餐”，作者通过几个实用的原型扩展方法，让数组操作变得更顺手。 文章逐一展示了八个常见的扩展场景，比如用 `clear()` 一行代码清空数组，用 `insertAt()` 和 `removeAt()` 精确控制元素位置。这些方法直接挂载到 `Array.prototype` 上，代码简洁，思路清晰，解决了原生数组操作中的一些不便。 其中最有意思的是一个功能更强大的 `select()` 方法。它能像数据库查询一样，从一个对象数组中灵活地“取出”特定字段，甚至支持重命名查询结果中的属性名。作者通过示例展示了如何用字符串、参数列表或配置对象等多种方式来调用它，实用性很强。 总的来说，这篇文章相当于一份数组操作的“工具箱”清单。作者提供的这些扩展，既能提升日常编码的效率，其中 `select` 的实现思路也能启发我们如何更好地处理复杂的数据转换需求。
10个超棒jQuery表单操作代码片段
这篇文章收集了10个在jQuery表单处理中非常实用的代码片段，直接针对前端开发中的常见痛点。它涵盖了从基础交互到数据管理的多个场景，比如如何防止用户意外按回车提交表单、一键重置所有表单字段，以及在Ajax请求前后有效地禁用和启用提交按钮来避免重复点击。 其中一些技巧设计得相当巧妙。例如，作者指出直接通过`.attr('disabled', false)`来启用按钮是不正确的，应该使用`.removeAttr('disabled')`。另一个亮点是关于防止表单多次提交的方案，它通过在提交时动态设置按钮状态并利用数据存储来标记提交状态，逻辑清晰且可靠。 文章还包括诸如根据输入内容动态启用按钮、高亮当前聚焦的输入框等增强用户体验的代码。这些片段虽然简短，但每个都解决了一个具体而微的问题，组合起来形成了一套高效的表单处理工具箱。作者在文末也鼓励读者分享自己的相关代码，显示出这是一个注重实践交流的实用集合。
Ext JS 4 布局和容器：Layouts、Containers
布局系统是Ext JS最核心的能力之一，负责决定页面上每一个组件的尺寸和位置。这篇文档就是带你走进这个强大系统的入门指南。 作者从Ext JS界面由组件构成这一基本事实出发，重点解释了“容器”这个特殊组件。容器的职责很纯粹——就是容纳其他组件，从而形成典型的嵌套结构。文章以最常用的容器类组件`Panel`为例，展示了如何通过`items`配置将子面板（比如两个指定高度和宽度的`Child Panel`）嵌套其中。 通过这个清晰的例子，文档揭示了Ext JS应用界面的构建逻辑：一层套一层的容器与组件，最终由布局系统统一管理。对于想搞明白Ext JS界面到底怎么搭起来的开发者来说，这篇文章抓住了“容器”和“布局”这两个枢纽，是建立系统认知的第一步。
JavaScript定时机制、以及浏览器渲染机制 浅谈
这篇从一道看似简单的代码题入手：当`setTimeout`的延迟设为0毫秒时，回调是否立即执行？作者指出，实际行为并非立即执行，而是将任务放入队列，这引出了对JavaScript单线程本质和浏览器内核多线程协作的探讨。 文章重点梳理了浏览器内核中的关键线程，包括JavaScript引擎线程、界面渲染线程和事件触发线程，并解释了它们之间的互动关系。核心观点在于，JavaScript引擎线程与浏览器渲染线程是互斥的——脚本执行时渲染会挂起，这直接影响了页面性能和加载策略。文中通过图解和概念分析，澄清了定时器、异步事件（如点击、Ajax请求）是如何通过事件队列与单线程的引擎交互的。 作者最后还解答了“单线程如何处理异步请求”的疑问，明确了异步操作实际由浏览器新线程处理，结果再回调入队列。整篇文章将理论机制与日常编码场景结合，帮助开发者理解代码背后的执行逻辑。
《javascript权威教程》、《javascript 王者归来》等几本书
作者从个人阅读经验出发，对多部JavaScript经典著作进行了梳理与点评。他坦言自己偏爱《JavaScript权威指南》与《JavaScript高级程序设计》这两部体系严谨的作品；认为《JavaScript DOM编程艺术》则更贴近实战开发场景；而《javascript 王者归来》被评价为颇具“禅意”，别具一格。 对于处于入门或中级阶段的学习者，作者的建议是：先择一基础扎实的读物潜心学习。若实在难以抉择，《JavaScript权威指南》是一个不会出错的首选。文章末尾还贴心地提供了这些书籍的打包下载链接，方便读者直接获取资源。
通过使用Chrome的开发者工具来学习JavaScript
这篇讲的是如何用Chrome开发者工具“看透”JavaScript的两个核心概念：闭包和内部属性。
作者从闭包这个经典话题切入，指出闭包的本质是函数持有外部作用域的变量，除了调用函数本身，外界无法访问。但Chrome的开发者工具让这种“隐藏”关系变得透明——在监控面板中展开函数，你能直接看到其下的 `
tabIndent.js让你在Textarea中也能用Tab键
不少人都习惯在代码编辑器里用Tab键来缩进，但在网页表单的Textarea中按下这个键，焦点往往直接跳到了下一个输入框，这个习惯性的操作反而成了麻烦。 这篇介绍了一个小巧的JavaScript库——tabIndent.js，它正是为了解决这个具体痛点。作者的方案很直接：在页面中引入这个脚本，然后调用`tabIndent.renderAll()`一行代码，就能为所有class为“tabindent”的Textarea启用Tab键缩进功能。它将原本用于切换焦点的按键，还原成了开发者更熟悉的代码缩进行为。 对于需要快速搭建网页代码编辑器、或者希望统一用户输入体验的开发者来说，这提供了一个轻量且即插即用的解决方案。文章末尾也提供了GitHub仓库链接，方便读者进一步了解和获取源码。
关于“浏览器无法拦截的弹出窗口”、IE、Firefox弹出新窗口
这篇讲的是一个看似简单却让很多开发者头疼的问题：如何让JS打开的新窗口不被现代浏览器拦截。 作者从朋友的实际问题出发，梳理了两种常见但均已失效的“万全之策”。一种是通过脚本模拟点击隐藏的``标签，但这只在IE有效；另一种是模拟提交隐藏的`
jQuery 教程的一点总结
这篇是一位前端开发者为新手整理的 jQuery 学习路径指南。作者从三个具体资源切入：推荐《15天学会jQuery》作为入门，强调其基础全面；建议用jQuery 1.4.2的帮助文档反复练习常用函数，做到熟练掌握；进阶则可研读《悟透Javascript》深入理解本质。 文章特别指出，jQuery 只是 JavaScript 的一个函数库，想成为优秀的前端工程师，扎实的 JavaScript 基础才是根本，这能帮助开发者看清新技术不过是已有技术的延伸与组合。 除了资源，作者更分享了学习心态：编程如练武，需要“三十年磨一剑”的耐心，反对浮躁与急于求成。他认为，踏踏实实地积累三年，掌握 jQuery 的核心设计与源码思路，进入腾讯、百度等公司并非难事。全文贯穿着“大道至简”的务实哲学，将技术学习归于扎实的基础与长期的坚持。
为什么通过前端 .js 记用户日志会丢数据
文章从实际业务需求出发，对比了三种点击日志记录方案。第一种是通过URL参数传递信息，在服务器端（如Nginx）记录请求日志；第二种是通过中间服务器进行跳转并记录，数据最完整，Google、百度等搜索引擎均采用此方式，百度每天十亿级网页搜索请求用约50台服务器即可承载；第三种是前端JavaScript监控上报，能记录悬浮、滚动等丰富行为，但普遍存在15%-20%的数据丢失率。 文章重点剖析了JS方案丢数据的根本原因：前端无法为每个事件立即发送请求，必须将行为缓存后批量上报。如果用户在上报触发前关闭浏览器或发生崩溃，这部分缓存数据就会丢失。这本质上是用户体验流畅度与数据完备性之间的权衡——上报越频繁，体验越卡顿但数据越完整；反之则数据丢失风险增加。同时，高频上报也会给日志服务器带来巨大压力。对于追求数据完整性的核心场景，跳转记录是更可靠的选择；而JS方案更适合需要采集丰富交互行为、对少量丢失可容忍的分析场景。
浏览器的重绘[repaints]与重排[reflows]
这篇讲的是前端性能优化中一个核心但容易被忽略的话题：浏览器的重绘与重排。 文章从交互评审中常见的前端质疑切入，解释了浏览器从解析HTML到渲染页面的复杂流程。它清晰地区分了重绘与重排：重绘只是外观改变，不影响布局；而重排则意味着渲染树需要重新计算，性能代价高昂。例如，table布局可能需要三倍于普通元素的计算时间。 文章进一步剖析了触发重排的常见操作，比如改变几何属性、增减DOM节点，甚至获取某些特定属性值（如offsetTop）都会强制浏览器重排，使优化失效。对此，作者给出了具体的优化策略，包括将多次样式修改合并为一次CSS类切换、对动画元素使用绝对定位脱离文档流、在内存中操作完节点后再插入DOM，以及缓存那些会引发重排的属性值。 这些策略都指向一个目标：减少重排次数并缩小其影响范围。文章甚至提到，在前端面试中，实现一个考虑了重排优化的表格排序方案会是很好的加分项。
IE的documentMode属性
这篇文章聚焦于IE浏览器中一个不太为人熟知但相当实用的属性：documentMode。作者从“如何准确获取IE文档的兼容性模式”这一具体问题出发，清晰地介绍了该属性的用法。通过一个详细的表格，文章列出了documentMode在IE6到IE10以及各版本兼容模式下的具体取值，例如在怪异模式下值为5，在标准模式下则对应版本号（如IE8为8）。同时指出，只有在文档加载完成后才能获取正确的值。 文章不仅解释了属性本身，还引申出了其实际应用场景：利用documentMode来可靠地判断IE的各个历史版本。最后给出了一段简短的检测代码，逻辑清晰，直接解决了开发中的一个痛点。对于需要处理历史IE兼容性的开发者来说，这是一篇很实用的参考。
匿名函数中undefined形参疑问
这篇讲的是作者从观察jQuery插件中常见的匿名函数封装写法出发，探究其中 `undefined` 形参的作用。他一开始对形如 `(function($, window, document, undefined){...})(jQuery, window, document);` 的代码感到疑惑：前面三个参数都显式传入了实参，但最后的 `undefined` 却没有传入任何值，这看起来是否多余？ 作者通过查阅和请教，理清了两个关键点。其一，`undefined` 在 JavaScript 早期并非保留字，理论上可以被重新赋值（例如在局部作用域 `var undefined = 5`），这会导致依赖全局 `undefined` 值的代码行为异常。虽然 ECMAScript 5 标准已将其改为只读属性，但考虑到旧版浏览器的兼容性，这一问题依然值得警惕。其二，匿名函数的调用处没有为形参 `undefined` 传递任何实参，因此该形参绑定的正是函数作用域内真正的 `window.undefined` 值。 这正是该写法的巧妙之处：通过声明一个不传值的 `undefined` 形参，在函数体内部创建了一个安全的、不会被外部任何意外赋值所覆盖的 `undefined` 引用，确保了代码逻辑的健壮性。文章从常见的代码模式切入，澄清了一个容易被忽略的细节及其背后的语言原理。
JS判断鼠标从什么方向进入一个容器
这篇讲的是如何用JavaScript判断鼠标从哪个方向进入一个页面元素。作者从一个常见的交互需求出发：想让元素的进入动画能根据鼠标来的方向“动态响应”，比如从左边进就从左往右滑入。 最初他想的方案是在容器四边放隐形块来“碰瓷”鼠标事件，但觉得太麻烦。后来他发现了一个基于jQuery的巧妙解法，其核心在于一行计算角度的数学公式：`direction = Math.round((((Math.atan2(y, x) * (180 / Math.PI)) + 180) / 90) + 3) % 4`。这行代码通过反正切函数计算出鼠标进入点相对于容器中心的角度，再将其映射为“上、右、下、左”四个离散方向（对应数值0,1,2,3）。 作者坦言自己最初也没完全看懂背后的数学原理，但这不妨碍他应用这个方案。文章不仅提供了完整的jQuery示例代码，还贴心地附上了不依赖库的原生JavaScript实现版本。在原生版本中，他使用了`mouseover/mouseout`事件，并考虑了IE的`attachEvent`兼容性处理，但提醒读者关于事件冒泡的细节需自行处理。对于需要实现类似创意悬停效果的开发者来说，这篇文章提供了一个可以直接拿来用的实用代码片段。