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界面到底怎么搭起来的开发者来说，这篇文章抓住了“容器”和“布局”这两个枢纽，是建立系统认知的第一步。
谈产品经理的转行
这篇讲的是产品经理在软件行业和互联网行业之间的转行问题。作者从知乎上的一个具体提问出发，深入分析了这两个领域的共性与差异，为考虑转行的产品经理提供了清晰的分析框架。 文章首先指出，软件行业和互联网行业同属IT领域，核心都是通过产品为用户创造价值。两者的根本区别在于产品形态，可以理解为传统的C/S架构与现代的B/S架构之分，但这种边界在SaaS、移动互联网时代正在融合。更重要的是，文章剖析了产品经理核心职能在不同环境下的侧重。例如，在软件行业，产品经理的角色常被“售前工程师”或“项目经理”替代，而互联网行业则更强调基于用户数据的持续迭代和运营。对于转行者，最大挑战是从产品交付思维转向持续优化思维，需要建立一套以数据为驱动的敏捷响应体系。 作者最后给出了一个理性的决策模型：评估转行带来的收益与需要付出的成本。但比模型更重要的是，文章点明了职业转变的本质——成功最终取决于你是否足够努力与坚定，这超越了任何具体的选择。
是时候使用filter:drop-shadow了
这篇讲的是，CSS中实现阴影效果的两种主流方式——传统的`box-shadow`属性与新的`filter: drop-shadow`滤镜——之间该如何选择。作者从自己项目中为实现全方位阴影而编写冗长`box-shadow`代码的经历出发，对比了两种方案的实现与效果。 核心差异在于，`drop-shadow`滤镜能更真实地模拟光照下的阴影，因为它能感知元素的实际轮廓（包括透明区域），生成的阴影贴合形状，视觉上更自然。相比之下，`box-shadow`只能为元素的整体矩形边界框添加阴影。此外，两者的浏览器兼容性也不同，`filter`在Webkit内核浏览器（如Chrome、Safari）中已获得良好支持，而Firefox和IE则仍需依赖`box-shadow`。 因此，在面向现代浏览器开发时，`filter: drop-shadow`无疑是更优的选择，能用更简洁的代码实现更逼真的效果。对于需要兼容旧版浏览器的场景，则应继续使用`box-shadow`作为备选。文章提供了清晰的代码对比和在线示例，直观展示了两者的区别。
非响应式设计的viewport
这篇讨论的是在那些还没有进行响应式改造的老网站上，viewport meta标签为何依然关键。很多开发者熟悉响应式设计中 `width=device-width` 的标准写法，却忽略了旧网站在移动端的尴尬处境。 文章点明，iPhone和安卓设备默认会以980px宽度来渲染页面。这意味着，一个宽度为1024px的页面会被截断，而一个只有700px宽的页面则会留下大量空白。核心问题就在于，没有明确告诉浏览器页面的真实宽度。解决方案其实很简单：为这类固定宽度的网站，明确设置viewport的实际像素值，比如 ``。 更值得注意的是，文中剖析了一个常见的错误实践：在非响应式网站上使用 `initial-scale=1`，尤其是同时搭配 `user-scalable=no` 或 `maximum-scale=1`。这会导致页面被锁定在100%宽度且禁止缩放，用户无法看清被截断或缩小的内容，体验极差。文章给出的结论清晰有力：如果你的网站不是响应式布局，那就请避免使用初始缩放设置，并务必保留用户的缩放能力。
标签？ID？还是CLASS？
这篇文章从几个基础的HTML问题切入，探讨了应该如何正确使用标签、ID和CLASS。作者认为，多使用header、nav这类有语义的标签，而不是无意义的div和span，本质上是让HTML更接近内容本身，未来甚至可能取代常见的div class组合。 文章进一步驳斥了“应尽量只用class以避免破坏样式优先级平衡”的观点，指出id的唯一性和高优先级是自然的设计，能和class协作表达更精确的语义。同时强调，在命名class和id时，应基于内容含义（如main-content、sidebar）而非视觉位置（如left、right），以适应响应式设计的需求。 作者的结论很清晰：不要滥用class而回避id，也坚决避免使用像“f14 red”这样的纯样式类名。整个讨论传递的核心理念是，HTML的写法应当服务于内容的表达和未来的可维护性，鼓励开发者勇于尝试新标准，保持对技术趋势的敏感。
如何实现一个编译器
这篇讲的是如何用 JavaScript 从零构建一个编译器。作者从解析 velocity 模板语言的实际项目出发，拆解了编译原理中最核心的词法与语法分析步骤。 文章巧妙地引入了 Jison 工具（一个 JavaScript 版的 Bison），将看似复杂的 Lex & Yacc 概念变得平易近人。作者以 velocity 的变量引用（如 `$foo.bar()`）和指令（如 `#foreach`）为例，展示了如何用词法状态（比如标志语法开始的 `mu` 状态）和语法规则来描述源字符串的结构，最终让计算机“读懂”这些字符串。 读完这篇，你会发现，写一个编译器的核心，或许并不是高深的算法，而更像是耐心地为计算机编写一本“语言说明书”。
JavaScript定时机制、以及浏览器渲染机制 浅谈
这篇从一道看似简单的代码题入手：当`setTimeout`的延迟设为0毫秒时，回调是否立即执行？作者指出，实际行为并非立即执行，而是将任务放入队列，这引出了对JavaScript单线程本质和浏览器内核多线程协作的探讨。 文章重点梳理了浏览器内核中的关键线程，包括JavaScript引擎线程、界面渲染线程和事件触发线程，并解释了它们之间的互动关系。核心观点在于，JavaScript引擎线程与浏览器渲染线程是互斥的——脚本执行时渲染会挂起，这直接影响了页面性能和加载策略。文中通过图解和概念分析，澄清了定时器、异步事件（如点击、Ajax请求）是如何通过事件队列与单线程的引擎交互的。 作者最后还解答了“单线程如何处理异步请求”的疑问，明确了异步操作实际由浏览器新线程处理，结果再回调入队列。整篇文章将理论机制与日常编码场景结合，帮助开发者理解代码背后的执行逻辑。
《javascript权威教程》、《javascript 王者归来》等几本书
作者从个人阅读经验出发，对多部JavaScript经典著作进行了梳理与点评。他坦言自己偏爱《JavaScript权威指南》与《JavaScript高级程序设计》这两部体系严谨的作品；认为《JavaScript DOM编程艺术》则更贴近实战开发场景；而《javascript 王者归来》被评价为颇具“禅意”，别具一格。 对于处于入门或中级阶段的学习者，作者的建议是：先择一基础扎实的读物潜心学习。若实在难以抉择，《JavaScript权威指南》是一个不会出错的首选。文章末尾还贴心地提供了这些书籍的打包下载链接，方便读者直接获取资源。
通过使用Chrome的开发者工具来学习JavaScript
这篇讲的是如何用Chrome开发者工具“看透”JavaScript的两个核心概念：闭包和内部属性。
作者从闭包这个经典话题切入，指出闭包的本质是函数持有外部作用域的变量，除了调用函数本身，外界无法访问。但Chrome的开发者工具让这种“隐藏”关系变得透明——在监控面板中展开函数，你能直接看到其下的 `
IE10 CSS hack
这篇讲的是Windows 8普及后，开发者发现不少网页在IE10中显示异常，一部分是旧版IE的CSS hack遗留问题，另一些则是新出现的兼容性问题。由于IE10不再支持条件注释，作者整理了几种针对IE10的CSS Hack方法。 首先是结合IE私有条件编译和JavaScript，在页面中为html元素添加“ie10”类名，从而通过选择器应用特定样式。另一种是利用IE10支持的“-ms-high-contrast”媒体查询特性，直接编写仅对该浏览器生效的CSS规则，不过这种方法也可能被未来版本继承。文章还提到了利用“min-width:0\0”这种hack同时覆盖IE9和IE10，但区分度不高。 作者在最后坦言，为IE专门编写hack是一件无奈的事情，这些方法都存在未来失效的风险，但它们确实是解决当前兼容性问题的实用技巧。
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` 引用，确保了代码逻辑的健壮性。文章从常见的代码模式切入，澄清了一个容易被忽略的细节及其背后的语言原理。
构建web前端异常监控系统–FdSafe
这篇讲的是如何构建一套名为“FdSafe”的前端异常监控系统，专门解决线上页面JavaScript报错或样式丢失等“裸奔”问题。作者从“让用户和Boss在发现问题前就修复问题”的实际需求出发，介绍了系统的两大核心监控思路：针对JS异常，利用JavaScript动态特性，通过注册时给所有函数统一包裹try-catch来无侵入地捕获错误，并上报详细的错误上下文；针对样式丢失，则采用定时截图并与历史图片进行OpenCV相似度对比的方法，当差异超过阈值时触发报警。 整个监控系统的后台基于Node.js搭建，负责接收前端上报的异常和定时抓取分析页面，异常一旦超限便会通过短信或邮件通知负责人。文章不仅给出了具体的技术实现路径（如cvCompareHist算法），也分享了插件化扩展的设计思想，为前端同学搭建自己的监控体系提供了清晰的框架和可落地的思路。
