Typecho HTML5预加载
这篇讲的是Typecho如何实现HTML5预加载功能。作者从搜索现状切入，指出WordPress的HTML5预加载方案广为流传，但Typecho的类似实现却鲜为人知。文章具体展示了在火狐浏览器环境下，通过简单的link标签（rel="prefetch"）引入预加载属性的方法，为Typecho用户提供了一个直接可操作的技术方案。它填补了该平台在前端性能优化方面的一个信息空白，帮助读者了解如何用轻量级的方式提升页面加载体验。
使用Javascript获取页面所在目录的绝对路径
这篇讲的是如何在 JavaScript 中准确获取当前页面所在目录的绝对路径。作者首先点明了日常开发中一个常见的痛点：直接使用 `location.pathname` 有时会返回文件名（如 `/index.html`），而非我们通常需要的目录路径（如 `/articles/`），这在需要动态加载资源或拼接路径时容易引发问题。 文章的核心方法是对 `window.location.pathname` 进行处理。具体思路是：先获取完整的路径字符串，然后通过 `lastIndexOf('/')` 找到最后一个斜杠的位置，最后使用 `substring` 截取出目录部分。这个方法清晰直接，不依赖任何外部库，兼容性也很好。作者还贴心地提供了几个不同场景下的代码示例，比如处理根目录、带文件名的路径等。 最终，通过这个简单的函数，开发者可以稳定地拿到类似 `https://example.com/blog/category/` 这样的绝对目录路径，为后续的路径拼接、API 请求等操作打下可靠基础。整个方案简洁高效，很好地解决了一个小而具体的技术点问题。
媒体查询与http请求
这篇讨论围绕一个常见技术选择带来的意外代价展开。作者Jason Grigsby从移动端开发的实践经验出发，对“CSS媒体查询是移动适配的利器”这一普遍看法提出了质疑。他认为，依赖媒体查询会导致浏览器下载大量最终不会被使用的图片等资源，造成不必要的网络开销和性能损耗。 为了验证这一观点，他构造了一系列具体的测试用例，直观展示了不同场景下资源的加载情况。随后，Tim Kadlec在Jason的工作基础上进行了更系统的跟进，通过编写JavaScript脚本自动化地测试这些用例，量化了不同策略下实际下载的资源量，将讨论从主观经验推进到了更客观的数据层面。 这项对比的核心启示在于，技术方案的选择需要权衡其带来的便利与潜在的性能成本。在追求响应式设计的同时，我们也应关注其背后对网络资源的实际影响，这促使开发者在移动端资源加载策略上进行更精细的思考与优化。
IE6下select下拉框不能随滚动条正常滚动
这篇讲的是IE6浏览器中一个经典的兼容性问题：select下拉框在滚动区域中无法正常跟随滚动条。作者从实际项目中遇到的bug入手，生动描述了当select标签置于带滚动条的容器内时，用户拖动滚动条会导致select框像被卡住一样停滞在原地，视觉上极不协调，只有通过点击下拉
前端代码的阻抗失配
这篇讲的是前端领域中一种类似于“阻抗失配”的问题。 作者从经典的服务器端“阻抗失配”概念切入——即面向对象代码与关系型数据库模型之间的不匹配，并指出ORM和NoSQL都是为了解决这一矛盾而生。随后，文章将这个比喻引申至前端开发场景，探讨了前端应用中的状态管理（如React状态、Redux Store）与后端数据模型、甚至与浏览器本地存储之间可能存在的“模型不匹配”问题。 文章指出，当前端的领域模型、组件状态与后端的API数据结构、数据库表设计无法自然对齐时，就会产生类似的失配，导致数据转换、状态同步的复杂度飙升。作者分析了这种失配的典型表现，例如为了适配UI展示而不得不对数据进行频繁的清洗和重组，并探讨了通过数据模型分层、引入BFF（Backend for Frontend）或采用GraphQL等方案来弥合这一鸿沟的可能性。它提醒开发者，在设计系统时，有意识地关注并提前规划数据模型的“转换边界”，能有效降低工程复杂度。
DOM元素上jQuery事件几点学习
这篇讲的是作者通过翻阅jQuery 1.4.4版本的事件处理（event）模块源码，发现的一些实现细节与设计巧思。在大多数人停留在API使用层面时，作者选择深入底层，去探寻事件绑定、触发和解绑等操作在框架内部是如何被优雅地组织与执行的。 文章并未停留在表面的“如何做”，而是聚焦于“为什么这样实现”。通过对具体代码片段的解读，作者揭示了jQuery在处理DOM事件时，为保持接口简洁和高效所采用的一些核心模式。这些发现可能让许多习惯于直接调用`.on()`或`.bind()`的开发者感到耳目一新，意识到这些便捷方法背后是一套精密的设计。 对于前端开发者而言，这类源码层面的剖析不仅能满足好奇心，更是理解现代JavaScript库工作原理、提升自身架构思维的绝佳途径。它展示了如何通过阅读优秀项目的源码，来学习解决复杂问题的编码智慧。
Juicer – 一个Javascript模板引擎的实现和优化
这篇讲的是如何从零实现一个名为 Juicer 的 Javascript 模板引擎，并对其进行优化。 作者从一段简单的 JSON 数据和模板标签出发，展示了如何用类似“<%=name%>”的语法在 HTML 中嵌入数据。文章的核心，是深入剖析 Juicer 将这类模板字符串编译成高性能可执行函数的过程。其关键思路在于，并非每次渲染都解析模板，而是通过一个编译步骤，将模板转换成优化后的函数体（本质上是拼接字符串生成代码）。文章探讨了这种实现的巧妙之处，也指出了其面临的 eval 安全性和性能瓶颈。 在此基础上，作者分享了具体的优化方案，比如减少字符串拼接次数、缓存编译结果、甚至探索利用浏览器原生的 Template 标签等。这些细节展示了从一个简单构想到打造一个实用工具时，所必须面对的工程考量与性能权衡。
JAVASCRIPT完美实现UTF8页面提交数据到GB2312
这篇讲的是如何在前端用 JavaScript 完美解决 UTF-8 编码页面向 GB2312 编码后端提交表单时的乱码问题。作者从实际开发中遇到的经典痛点出发——现代浏览器与 HTML 页面普遍采用 UTF-8，但不少老旧的服务器端或数据库仍只支持 GB2312，直接提交中文数据常会导致后端接收乱码。 文章的核心思路是，在数据离开浏览器之前，就由 JavaScript 完成从 UTF-8 到 GB2312 的编码转换。作者不仅给出了清晰的实现步骤，还深入剖析了转换背后的原理，比如字节映射表的构建与分段处理逻辑。其中最巧妙的部分在于，作者没有依赖庞大的第三方库，而是通过精巧的算法实现了轻量级的转换函数，并妥善处理了 GB2312 字符集有限的边界情况，确保了转换的准确性。 通过这种在前端预先“翻译”编码的方案，文章为遗留系统对接提供了一个清晰、可控的解决路径，避免了将编码转换压力全部丢给后端或中间件的复杂处理。
PhoneGap开发不可或缺的五件装备
这篇针对PhoneGap开发者的文章，系统梳理了五款能显著提升工作效率的核心工具，从轻量级的JQuery兼容库切入，深入对比了JQ.mobi与Zepto等库的关键差异。
Object类相关的属性，方法和操作符
这篇从 ECMAScript 中所有类的共同祖先——Object 类出发，剖析了那些常被初学者忽略，却支撑着整个语言对象模型的核心元素。 文章重点讲解了 Object 实例的几个关键属性与操作。例如，`Object.prototype` 作为原型链的顶端，其默认的 `constructor` 属性与 `[[Enumerable]]` 描述符的细节。同时，也涵盖了 `Object.keys()`、`Object.getOwnPropertyNames()` 等静态方法在遍历对象自身属性时的精确区别，以及 `in` 与 `hasOwnProperty` 操作符在判断属性归属（自身 vs. 原型链）时的根本差异。 作者没有停留在 API 的简单罗列，而是通过对比这些基础工具在不同场景下的表现，揭示了 JavaScript 对象属性的“可枚举性”与“所有权”这两个底层特性。对于想深入理解原型链、进行精细对象操作或调试相关代码的开发者来说，厘清这些由 Object 类定义的“规则”，是迈向更扎实语言功底的关键一步。
javascript实现简单的链式调用
这篇讲的是如何用原生JavaScript实现类似jQuery那样的链式调用。文章从jQuery中流畅的`.addClass().css().fadeIn()`这类写法切入，点明了链式调用的核心价值：让代码更简洁易读，避免反复书写同一个对象变量。 作者没有停留在概念层面，而是直接展示了具体的实现思路。关键在于理解链式调用背后的设计模式——让对象的方法在执行操作后，最终都返回对象自身（通常是 `this`）。这样，每一个方法调用的结果依然是那个对象，自然就能继续在后面串联起其他方法。 文章通过构造函数和原型方法的例子，一步步搭建起这个结构。你会发现，实现起来并不复杂，但非常巧妙：它利用了JavaScript中 `this` 指向调用者的特性，在每个方法的末尾添加一句 `return this;`，就打通了整条链路。这种模式不仅用于jQuery，如今在很多前端库和Node.js模块中都能看到它的影子。 理解这个实现，不仅能帮你更好地使用现有工具，当你需要为自己的类设计流畅的API时，也能信手拈来，写出更优雅、更具表达性的代码。
渐进增强的无刷新多图片上传控件(iFrame+HTML5)
这篇讲的是如何构建一个既实用又健壮的图片上传控件。作者面对的核心问题是：如何在保证所有浏览器用户都能完成图片上传（兼容性）的同时，为现代浏览器用户提供无刷新的、带进度条的流畅体验（用户体验）。文章给出的方案采用了iFrame结合HTML5 File API的渐进增强策略。 巧妙之处在于其分层设计。对于不支持JavaScript或旧浏览器的环境，控件会优雅降级为标准的多文件表单提交，确保功能可用。而在现代浏览器中，它则会加载增强脚本，利用隐藏的iFrame作为提交通道，从而实现文件的异步上传，避免页面刷新。用户可以实时看到每张图片的上传进度，并在所有图片上传完成后动态更新页面内容。 作者详细拆解了实现思路，包括如何利用iFrame模拟AJAX，如何处理多文件队列与并发，以及如何提供清晰的视觉反馈。这种方案平衡了兼容性与体验，对于需要处理文件上传的前端开发者来说，提供了一个可直接落地且考虑周全的解决思路。
JavaScript Slider效果实现思路
这篇讲的是如何用原生JavaScript实现网页中的Slider（轮播图）效果。作者从自己重拾《JavaScript DOM编程艺术》的学习历程出发，没有直接堆砌代码，而是清晰地拆解了从零构建一个Slider的思考过程。 核心实现思路围绕几个关键步骤展开：首先是搭建HTML结构和基础CSS样式，为轮播图搭建“舞台”；其次是用JavaScript获取DOM元素并处理图片序列，这涉及到如何组织多张图片的布局。最巧妙的部分在于作者对交互逻辑的梳理——如何通过监听点击事件来切换图片，以及如何利用定时器实现自动轮播。文章特别点出了一个常见的陷阱：快速连续点击时，动画队列可能产生错乱，并分享了通过设置“动画锁”来解决的实用技巧。 整个过程就像在搭建一个微型剧场，作者不仅告诉你怎么操作幕布（切换图片），还解释了背后的机械原理（事件循环与定时器协调），让读者能举一反三，理解这类组件通用的实现模式。
js防刷新的倒计时代码
这篇代码直接解决了一个在模拟考试、限时测试等场景中常见且烦人的问题：用户刷新页面导致倒计时重置。作者没有使用复杂的后端交互或本地存储API，而是提供了一种轻巧的纯前端解决方案。 其核心思路巧妙地利用了浏览器的 `window.name` 属性。这个属性在页面整个生命周期内（包括刷新）都会保持其字符串值。代码首先检查 `window.name` 是否已有存储值（即之前的倒计时），若有则从中读取时间，否则初始化为60秒。倒计时函数每秒递减，并将最新的剩余秒数实时写回 `window.name`，同时更新页面显示。 实现上，代码还包含了实用的交互提醒：当剩余时间刚好为5分钟时，弹出提示框；倒计时归零时自动结束并弹出最终提醒。整个过程无需依赖任何框架，逻辑清晰，非常便于直接嵌入到需要防刷新计时的HTML页面中，体现了用最直接的技术手段解决具体痛点的务实风格。
javascript实现简单的链式调用
链式调用在前端开发中广受欢迎，比如jQuery的方法链就能让代码更简洁、易读，避免多次重复同一个对象变量。这篇文章就聚焦于用JavaScript原生实现链式调用，作者从日常开发场景切入，解释了这种语法特性如何提升代码质量。核心实现思路是通过函数构造类，并在每个方法末尾返回this，从而允许后续方法在同一对象上连续调用。文章提供了几个简单的实现示例，展示了如何利用JavaScript的this上下文和对象引用机制来构建链式调用。这种实现的巧妙之处在于，它仅依赖语言基础特性，却能大幅减少冗量代码，使逻辑表达更加流畅。对于开发者来说，掌握这个技巧能帮助写出更优雅、可维护的JavaScript代码，即使不依赖库也能在项目中灵活应用。
Phonegap + HTML5 开发经验小结
这篇总结来自作者一次完整的实践：从去年对Phonegap 1.1版本性能与跨平台能力的疑虑，到今年亲自用Phonegap + HTML5完成一款App的一期开发并成功提交至App Store。一个月左右的实战让他彻底改变了看法。 作者认为，这种模式对前端开发者而言是个重大机遇。核心在于，通过Phonegap的Native API与Plugin，应用能访问移动设备绝大多数本地功能，再配合HTML5的能力，实现了极低的跨平台迁移成本与很高的开发效率。他从最初的谨慎评估，转变为对这一技术路线实际价值的明确认可。 对于正在评估混合开发方案，特别是具备前端技术栈的团队，作者用亲身经历给出了一个相当积极的参考案例。
理解Javascript的闭包
这篇讲的是JavaScript中一个让很多传统语言开发者感到新鲜的特性——闭包。作者从几个具体的例子入手，直观展示了闭包如何在函数外部访问内部变量的现象，这很可能会让熟悉C/C++静态作用域的读者感到困惑。 文章没有停留在表面，而是结合了一点ECMAScript的语言规范，解释了闭包背后词法作用域和执行上下文的机制。它清晰地指出了闭包与传统静态语言作用域的关键差异：在JavaScript中，函数内的变量在函数执行结束后，仍可能因为被外部引用而存活。 通过对比，文章帮助开发者理解了闭包最适合解决的场景，比如数据封装、函数工厂或回调中保持状态。对于想从“会用”走向“理解”的JavaScript开发者来说，这篇循序渐进的讲解提供了扎实的基础。
离线存储
这篇讲的是WebApp在离线可用与便捷更新之间如何找平衡。作者从一个实际开发困境出发：把页面放在服务器上，服务一挂或用户没网，App就罢工；可要是把页面打包进原生安装包里，每次改点东西都得重新提交审核，效率太低。 文章的核心思路是利用离线存储技术来破解这个两难。作者重点探讨了如何通过Service Worker配合缓存策略，让应用在首次访问后，关键资源就能被本地存储。这样即使网络中断，应用依然能正常启动和运行基础功能。对于更新问题，方案设计了智能的版本管理机制——后台静默检查新版本，下次启动时自动激活，避免了强制打断用户。 通过这种架构，最终实现了两个目标：用户在地铁、飞机等无网环境下依然能使用App核心功能，同时开发团队也能通过Web管道快速推送更新，无需经过原生应用商店的漫长流程。文章用这个案例说明，离线存储不仅是技术补丁，更是提升应用可靠性和迭代效率的关键设计。
反webkit之战
这篇讲的是 WebKit 内核如何从备受赞誉的“现代浏览器标杆”，逐渐成为开发者与用户心中新的“兼容性噩梦”。作者敏锐地捕捉到了浏览器市场的这一轮回：在 IE6 的阴影终于散去后，WebKit（尤其是其移动版）因其垄断地位衍生的标准化滞后、私有特性泛滥以及性能瓶颈等问题，正承受着与当年 IE6 相似的批评浪潮。 文章梳理了 WebKit 从一家独大到争议四起的历程，具体点出其对新 Web 标准（如 Flexbox 布局早期版本、部分 API）的实现偏差、在移动端造成的渲染不一致问题，以及其庞大的代码库带来的维护挑战。核心观点指出，任何技术的垄断都可能反噬其自身发展，WebKit 目前面临的挑战正是这种循环的体现。 作者并未止于批判，而是将这场“反 WebKit 之战”视为 Web 平台走向更健康竞争的信号，最终将推动浏览器引擎（如 Blink、Gecko、WebKit）在良性竞争中共同解决根本问题。对于前端开发者而言，这既是一个理解平台演进复杂性的案例，也提醒我们持续关注标准实现与跨引擎兼容的重要性。
延迟加载图片的jQuery插件-Lazy Load Plugin for JQuery
网页性能优化中，图片加载是个常见痛点，尤其对于图片密集的长页面来说。这篇介绍的是一个经典的jQuery插件——Lazy Load，它精准地解决了这个问题。 这个插件的核心思路很直接：只加载用户当前能看到的图片，当用户滚动页面时，再动态加载即将进入视口的新图片。这样就避免了一次性请求所有图片资源导致的页面卡顿和漫长等待，显著提升了首屏加载速度和整体用户体验。 实现上，它通过监听滚动事件来检查图片位置，巧妙地只对即将显示的图片发起请求。对于开发者来说，使用非常简单，只需引入脚本并初始化，几乎不需要修改原有代码。尽管现在有更现代的实现方式，但这种延迟加载的思想依然是性能优化的基石。