JavaScript：多维数组像ORDER BY一样实现多键值排序
这篇讲的是如何让JavaScript的数组排序，像SQL查询里的`ORDER BY`一样，支持按多个字段进行排序。 文章从JavaScript最基础的`sort()`方法说起，它默认只按字符序排列。但在实际开发中，我们常常需要对更复杂的数据结构——比如多维数组——进行排序，这时就需要自定义排序函数。作者清晰地拆解了这个排序函数的返回值逻辑：负值、零、正值分别代表什么。 核心在于处理多键值时的嵌套比较。文章直接给出了关键代码：通过一个简洁的三元运算符嵌套，依次比较目标列。例如，要按第5、9、3列排序，函数会先判断第一键值是否相同，不同则直接比较它；相同则继续判断第二键值，以此类推。这种逻辑完美复现了`ORDER BY col5, col9, col3`的优先级规则。 作者还特别区分了数字和字符串两种场景。数字可以直接相减，字符串则需要调用`localeCompare()`方法进行比较。这种针对性的实现说明，让方案变得非常实用。最终，通过扩展`sort()`的功能，我们能在纯前端环境中实现数据库式的灵活排序。
table-cell的手机应用场景
这篇讲的是如何利用一个有点“过气”的 CSS 属性 `display: table-cell` 来解决移动端开发中棘手的垂直居中问题。作者从一篇老文章出发，重新审视了 `table-cell` 在当前移动场景下的价值。 文章先盘点了传统的垂直居中方案，如 `position` 配合负 `margin`，虽然兼容性好但必须预先知道元素高度，内容超出时容易“走光”。作者指出，这些方案在需要内容自适应垂直居中的移动 H5 页面里显得力不从心。 核心方案在于利用 `table-cell` 模拟表格单元格的行为。只需父元素设为 `display: table`，子元素设为 `display: table-cell` 并加上 `vertical-align: middle`，就能让内容在容器内完美垂直居中，无需知晓具体高度。作者还分享了一个关键的踩坑经验：必须避免在 `table-cell` 元素上同时使用 `position` 定位，否则效果会失效。 总的来说，这篇文章为移动端，特别是单屏滚动的 H5 活动页开发，提供了一个轻巧、可靠的垂直居中思路，非常适合那些对布局高度自适应有要求的场景。
小tips: 使用等空格实现最小成本中文对齐
这篇讲的是用几个特殊空格字符，在不借助复杂CSS的情况下，轻松实现中文排版的等宽对齐。作者从自身多年前的一篇旧文谈起，核心是介绍了 和 这两个“宝藏”空格。 它们的关键特性在于宽度稳定： 的宽度正好是中文字符的一半（1/2），而 的宽度则等同于一个完整的中文字符（1/1）。利用这个特性，只需在汉字之间插入对应数量的这些空格，就能实现“姓名”、“手机号”等不同字数中文的两端对齐，代码简单直观。 此外，文章还引入了全角空格 作为新成员，它同样占据一个汉字宽度。作者分享了如何用字符实体表示它，并提供了将任意字符转换为HTML识别格式的小工具。最后提到，由于IE6已退出历史舞台，这个原本受兼容性困扰的轻量方案现在可以放心使用了。
再说iconfont和font-face
这篇讲的是CSS3字体属性中一个让人“蛋疼”又离不开的话题：iconfont和@font-face。作者从网页内容的主体——文字说起，直指@font-face这个能让你彻底摆脱用户系统字体限制的关键属性。文章没有停留在浅层介绍，而是深入拆解了@font-face的语法，逐项解释了font-family、src、unicode-range等参数，并用一个清晰的表格展示了IE、Firefox、Chrome等主流浏览器对不同字体格式（如.eot, .ttf, .woff）的支持情况。更关键的是，它厘清了@font-face与iconfont之间相辅相成的关系：一个负责引入自定义字体，一个负责将图标集打包成字体以便调用。文中提供的兼容性写法代码，对处理多浏览器环境下的字体加载问题直接提供了实用参考。
webapp网页调试工具Chrome Devtools
这篇讲的是如何告别只能拉窄电脑屏幕来模拟手机页面的“土办法”，转用Chrome DevTools中专业的移动设备调试功能。文章指出，简单拉宽电脑窗口并不能真实还原手机屏幕的显示效果，因为手机采用“每英寸像素点”衡量清晰度，与PC端标准不同。 作者将焦点引向Chrome DevTools的“webapp调试界面”，详细拆解了其中几个核心功能。比如，通过“Device”选项可以直接选择iPhone 6等具体设备进行预览，无需手动调整浏览器窗口；“Network”面板允许模拟从离线、GPRS到WiFi的各种网络环境及其延迟，帮助开发者针对不同地区网络条件优化页面加载速度；此外，文章还解释了“分辨率”、“device pixel ratio”（设备像素比）以及视图比例（viewport scale）等关键参数的设置与含义。 对于需要精准还原移动端设计稿、或希望在不同网络条件下测试性能的前端开发者而言，掌握这些调试工具是提升工作效率和页面质量的关键一步。
网页字体排印指南
这篇讲的是网页上那95%的文字，到底该怎么排才好看又专业。作者从“阅读”这个最核心的用户行为出发，把字体排印清晰地分为偏向设计的Creative Typography和偏向技术的Technical Typography，并聚焦于后者，为前端工程师提供一套有迹可循的实践规则。 文章直面了中文网页排版的核心痛点：由于系统预置字体稀少且WebFont体积庞大，我们只能在有限的“系统安全字体”里做选择。为此，作者详细梳理了桌面端（Mac、Windows、Linux）与移动端（iOS、Android）上，中西文字体的推荐组合，并解释了宋体与黑体在内文与标题上的不同角色。 更进阶的是，文章将排版提升到了“旋律”的层面。它借鉴《字体排印的风格要素》中的理念，将字号大小类比为音乐的音阶，提出了以16px内文为基础，对标题字号进行同比例递减的具体方案，旨在构建视觉上的和谐韵律。文末直接提供了两套经过考量的`font-family`代码，分别用于内文和标题，极具实操参考价值。对于任何希望提升页面文字可读性与质感的开发者而言，这都是一份扎实的指南。
围住神经猫 1步玩法-”作弊”
这篇讲的是如何通过“破解”微信分享机制，来实现游戏“围住神经猫”分享链接的“作弊”。作者从被朋友圈刷屏后自己试玩出发，发现分享链接的击败百分比与步骤数直接相关，于是产生了一个“纯娱乐”的技术念头：能否自己伪造一个分享页面，让好友看到夸张的“1步通关”战绩？ 核心实现思路很直接：分享的只是一个网页URL，因此可以自己生成一个静态HTML页面，自定义页面的`title`（例如“我用了1步围住神经猫”），并引用原游戏的图片作为缩略图，以便微信抓取。关键的巧妙之处在于，为了不让好友点进这个“假”页面，利用浏览器`onload`事件直接通过`location.href`跳转到原游戏网址。 文章进一步深入，指出微信提供了更规范的分享JS-SDK。通过调用`WeixinJSBridge.invoke`接口，可以一站式设置缩略图、标题、描述以及跳转链接，使得这个“小恶作剧”的实现更加优雅和可控。作者附上了相关的JavaScript代码片段，展示了如何配置`shareTitle`和`link`等参数，为想了解微信网页分享机制的朋友提供了一个生动有趣的实现案例。
如何在一个页面上让多个jQuery版本共存
这篇讲的是在现有网页中如何同时使用多个jQuery版本。文章从实际开发中的痛点出发：老项目可能依赖jQuery 1.5及一堆旧插件，但新功能又想用jQuery 1.11的特性，直接升级会导致旧插件失效。 作者介绍的基础方案是利用jQuery的`noConflict()`方法。通过在新版本导入后调用`var $jq = jQuery.noConflict(true);`，就能恢复页面上`$`和`jQuery`全局变量为旧版本，同时通过局部变量`$jq`来使用新版本，从而实现共存。 但作者指出，直接在页面写多行脚本容易出错（比如被误删或顺序颠倒）。因此，他提出了一个更健壮的封装方案：把自己的新脚本（比如`myscript.js`）写成一个匿名函数，并在其中直接嵌入新版jQuery的压缩源码。这样，脚本内部通过`noConflict`获取的新版jQuery会成为一个局部变量`$`，完全不受页面其他jQuery版本影响。最终，页面只需正确引入旧版jQuery和这个封装好的新脚本即可，实现了解耦与自治。 这个方案的巧妙之处在于，它把版本兼容的复杂性完全封装在一个独立的文件里，让主页面保持干净，也避免了其他开发者误操作的风险。
JavaScript的闭包问题
这篇讲的是 JavaScript 闭包在循环中一个经典的陷阱。作者从一个看似简单的需求出发：在一个 `for` 循环中创建三个函数，分别打印当前的循环索引。但实际执行时，所有函数都打印了同一个值——循环结束后的最终值。 问题的根源在于闭包捕获的是变量的引用，而非创建时的快照。循环变量 `i` 在所有函数中都是同一个变量，因此函数执行时读取的都是循环结束后那个值。即使尝试在循环内用 `var n = i` 复制一份，由于 JavaScript 缺乏块级作用域，`n` 的作用域依然是整个外层函数，最终也会被后续的迭代覆盖。 作者指出，这条“不要在闭包中直接引用循环变量”的原则，适用于所有函数式语言。正确的做法是创建一个新的作用域来捕获当前迭代的值。文章演示了两种经典方案：一是通过一个额外的函数（如 `function(n){...}`）将当前 `i` 作为参数传入；二是更简洁的立即执行函数表达式（IIFE），在循环体内 `(function(n){...})(i)` 就地创建一个新作用域并传递参数。 这本质上是一个作用域与闭包机制如何相互作用的深度理解问题。掌握这个模式，能帮开发者避免在异步回调、事件监听等场景下产生难以排查的 bug。
揭秘JavaScript中谜一样的this
这篇讲的是JavaScript中this关键字的工作原理，作者从开发者常见的困惑入手，揭示了this在不同调用场景下的行为差异。文章首先对比了函数作为对象方法调用和获取引用后调用的区别：直接调用时this指向对象本身，但提取方法后调用可能让this指向全局window，在严格模式下则变为undefined。接着，探讨了this在构造函数中的角色，使用new关键字时this指向新实例，否则可能意外指向全局对象。 文章进一步介绍了如何通过.call、.apply和.bind来主动操作this，提供了灵活的解决方案。.call允许传递任意参数并指定this，.apply则接受数组参数，.bind能永久绑定this并创建部分参数的函数。这些工具帮助开发者应对this的“脆弱”特性，避免常见陷阱。 在作用域链部分，文章指出this无法自动继承的问题，建议使用局部变量如var self = this或.bind来保留引用，确保在嵌套函数中正确使用。通过具体代码示例，文章澄清了this的复杂机制，让读者能更清晰地理解其在JavaScript中的角色，提升代码编写能力。
利用函数的惰性载入提高javascript代码性能
这篇讲的是JavaScript中一个经典且实用的性能优化技巧：函数的惰性载入。作者从实际开发中的常见痛点切入——为了处理浏览器兼容性，像`addEvent`这类函数内部常常堆满了`if...else if`判断，而每次调用都会重复执行这些检查，造成不必要的性能损耗。 文章的核心方案是，让这些只依赖环境的判断只执行一次。作者清晰地讲解了两种实现“惰性载入”的方式。第一种是在函数首次执行时，动态地重新定义函数自身，用更精确的版本覆盖原函数，后续调用就直接命中新函数。第二种则更为巧妙，在函数声明时通过一个自执行函数来完成环境探测并直接返回一个定制好的函数，虽然初始化时稍有开销，但后续调用完全无额外负担。 两种方法的共同目标都是避免重复的分支检测。文章最后指出，选择哪种方式取决于你的具体场景，是更看重首次调用的性能，还是初始化时的简洁性。对于需要频繁触发、且依赖环境检测的工具函数来说，这种“只判断一次”的思路能带来实实在在的效率提升。
纯CSS3打造七巧板
这篇讲的是如何用纯CSS3“画”出一个七巧板。作者从项目需求出发，对比了Canvas、SVG等方案后，最终选择了更轻量、兼容性好的CSS3作为实现路径。 核心思路是用CSS的border属性来构建三角形、正方形和平行四边形这三种基本形状，再通过transform属性（包括translate、rotate、skew）将它们精确地平移、旋转和变形，拼合到指定位置。文章特别提到了利用CSS预处理器LESS，通过定义一个基础长度变量来控制整体尺寸，极大地提升了代码的可维护性和灵活性。 文中还包含了具体的代码片段和效果展示，甚至延伸到了使用CSS3动画让七巧板“动起来”的可能。它展示了前端如何用基础技术，实现一个充满趣味和传统文化味的小项目。
给你的网站添加 console.js
这篇讲的是为了解决前端调试中一个具体而恼人的兼容性问题——使用 `console.log` 等方法时，在旧版IE等浏览器下因 `console` 对象未定义而导致脚本报错。作者由此引出了一个名为 `console.js` 的微型解决方案。 核心方案是引入这个库来“修复”环境：它会在页面加载时检测并模拟出一个完整的 `console` 对象及其常用方法，使得后续代码无论浏览器是否原生支持都能安全调用，避免因调试语句影响线上功能。文章不仅展示了其简短的源码实现，还贴心地解释了代码开头那个分号的防御式编程技巧，防止文件合并时出错。 虽然作者坦承该库无法解决IE8/9打开控制台后才新建 `console` 对象的特殊场景，但其定位清晰——就像 `html5shim` 针对HTML5标签一样，`console.js` 专门处理 `console` API 的兼容层，让开发者不再需要写繁琐的 `if` 判断来“喂养”每一个浏览器。
JavaScript中的this关键字
这篇文章深入剖析了JavaScript中this关键字的行为规则。作者从其他编程语言的常见用法切入，指出JavaScript的this更加灵活且容易混淆，因为它的值并非静态，而是在每次函数调用时根据调用方式动态确定。 核心关键在于，this的值取决于函数“如何被调用”，而非“在哪里定义”。文章通过一系列递进的例子清晰地展示了这一点：在全局作用域中，this指向全局对象；当作为对象的方法调用时，this指向该对象；但若将方法赋给新变量再调用，this的指向就会改变。对于嵌套对象，this始终指向直接调用它的那个对象，而非最外层。在DOM事件处理中，this则指向触发事件的元素。作者还简要提及，可以通过call、apply或new操作符来手动控制this的指向。 总的来说，作者的目标是破除对this的误解。通过具体代码演示，文章阐明了this值在不同执行上下文中的变化逻辑，帮助开发者建立正确的心理模型，从而在编码时能准确预测this的行为。
仅100行的JavaScript DOM操作类库
这篇讲的是如何用不到100行代码实现一个轻量级DOM操作库，作为jQuery的精简替代方案。作者从实际开发中频繁的DOM操作需求出发，设计了简洁的API：例如通过`dom('.selector').val()`快速获取或设置元素内容。 核心实现上，文章展示了如何利用原生的`querySelector`和`querySelectorAll`来查询元素，并特别强调了作用域查询的能力——允许在指定的父元素上下文中查找，这增强了库的灵活性。另一个巧妙之处是库能同时处理单个DOM元素、选择器字符串以及一个包含多个选择器的JavaScript对象，后者可以批量获取元素并方便地转换为一个结构化的数据对象。 实现细节覆盖了如何获取不同类型元素（如input、textarea、文本节点）的值，以及通过链式调用返回API本身来保持操作流的连贯性。整个构建过程清晰地展示了一个虽小但功能完整的工具库从设计到实现的关键思路。
10条影响CSS渲染速度的写法与建议
这篇文章聚焦于CSS的渲染性能，作者从日常编码中常见的写法入手，剖析了10种可能导致浏览器渲染变慢的习惯。 文章开篇就直指通配符选择器`*`的滥用，它会遍历所有标签，是性能的一大隐患。接着，作者犀利地指出了IE滤镜（如实现灰色效果的`filter: gray`）的高资源消耗问题，并以汶川地震时大量网站变灰导致CPU飙升的实际案例佐证。此外，诸如过度使用绝对定位、背景图片平铺策略不当、CSS选择器路径过深等影响渲染链效率的写法，也都被一一拆解。 对于每个问题，作者都提供了务实的替代方案，比如针对通配符，建议改为对常用标签（body, li等）单独重置；对于背景平铺，则建议将色彩少的图片制成尺寸稍大的GIF格式。文章强调，合理的布局和让属性通过继承传递，能从根本上优化渲染路径。这些经验之谈，源于作者在真实项目中遇到的性能瓶颈，为前端开发者提供了清晰的避坑指南。
CSS3中的网格
这篇讲的是CSS布局从“一团糟”到初现曙光的演进史。作者从早年开发者们不得不依赖表格、浮动和inline-block这些“hack”方法来实现多列布局说起，深入剖析了其中的核心痛点：浮动需要 clearfix、盒模型计算导致宽度溢出、以及为列间距疲于奔命。 文章并未停留在抱怨历史，而是把重点放在了CSS3带来的三把“钥匙”上。它逐一演示了如何用 `box-sizing: border-box` 让宽度计算回归直觉，如何用 `calc()` 函数在百分比中精确扣除间距，以及 Flexbox 如何以更声明式的方式简化对齐与分布。每个方案都附带了清晰的代码示例和效果对比，直观展示了布局效率的提升。 当然，作者也没有回避现实。他指出 `border-box` 仍需搭配浮动，`calc()` 依赖负外边距这种老技巧，而 Flexbox 虽好却受制于当时的浏览器支持。这种客观的对比，让读者能清醒地认识到每个工具的适用边界。对于正挣扎于布局细节的开发者而言，这篇文章清晰地指明了哪些新特性值得立即投入学习，以及它们能实实在在解决哪类历史问题。
Javascript继承-原型的陷阱
这篇讲的是JavaScript原型继承中一个经典的“实例属性共享陷阱”。作者从一个简单的Widget父类和SubWidget子类出发，展示了当使用`SubWidget.prototype = new Widget()`设置继承后，所有子类实例会意外地共享同一个`messages`数组——比如给sub1和sub2分别push消息，结果它们的数组内容完全相同。 问题的根源在于，通过`new Widget()`创建的原型对象中，`messages`数组只初始化了一次，所有实例都指向原型上的同一份数据。作者用清晰的对象关系图逐步揭示了这一过程：原型上的共享属性，如何在实例操作时相互影响。 解决方法是在子类构造函数中调用`Widget.apply(this, arguments)`，借用父类构造函数在每个实例的上下文中初始化属性。文章还补充了两点优化：调整调用顺序以避免子类属性被覆盖，以及直接使用`SubWidget.prototype = Widget.prototype`避免父类构造函数重复执行。这些细节让这个“踩坑-解坑”的过程更具实操参考价值。
高效jQuery的奥秘
这篇文章系统梳理了提升jQuery与JavaScript代码性能的实战技巧，核心观点是：好的代码规范直接带来速度提升，而更快的渲染与响应能显著优化用户体验。作者从“jQuery本质就是JavaScript”这一前提出发，强调应遵循相同的编码最佳实践。 文中列举了多项具体优化措施，并辅以代码对比。例如，通过缓存DOM元素减少昂贵的遍历操作，为jQuery对象使用匈牙利命名法（$前缀）以增强代码可读性，以及将分散的var声明合并为单条语句。在事件处理上，推荐统一使用`.on()`方法；在代码组织上，则提倡链式操作与适当的格式化以兼顾简洁与可维护性。 文章进一步深入选择器优化层面，指出应避免使用通用选择符（如`*`），而是利用`.children()`等更高效的方法；同时强调ID选择符的唯一性，无需添加冗余的父级选择符。此外，诸如短路求值、分离元素进行批量操作等JavaScript通用技巧，也被融入jQuery的使用场景中加以说明。 总体来看，这并非泛泛而谈的理论，而是一套源自实践的“编码惯例”清单，旨在帮助开发者通过养成良好的编码习惯，从细节处挖掘出jQuery应用的性能潜力。
我的 Sublime Text 2 笔记
这篇笔记记录了一位长期使用Aptana的开发者，因工作需要转向Sublime Text 2后的真实上手过程与心得。作者坦言，初次接触便被其秒开的启动速度、干净简洁的界面以及“无干扰”的编辑体验所吸引。 为了高效驾驭这款新工具，作者遵循“工欲善其事，必先利其器”的原则，展开了一番针对性研究。文章的核心，是作者按照80/20法则总结出的一组最常用的快捷键。从用 `Ctrl+P` 快速搜索文件、`Ctrl+Shift+P` 打开命令面板，到使用 `Ctrl+L` 逐行选择、`Ctrl+M` 跳转括号，这些快捷键覆盖了文件导航、代码编辑、文本选择和面板操作等高频场景。 作者没有罗列全部功能，而是专注于能解决80%日常编码需求的关键操作，这种务实的思路让这篇笔记本身也成为了一种高效的“工具”，帮助其他开发者快速掌握Sublime Text的核心操作逻辑。
