前端必须熟悉的10个CSS3属性
CSS3和HTML5的流行让越来越多的前端开发者开始关注新特性，但真正掌握其核心的并不多。这篇讲的是，作者从前端发展的趋势出发，直接梳理了10个现代前端必须掌握的CSS3属性。 文章不仅列举了`border-radius`、`box-shadow`等高频属性，还强调了在不同浏览器中测试兼容性的重要性。作者以`border-radius`为例，展示了如何用它实现圆角乃至完美的圆形，并巧妙地结合弹性盒模型让文字居中。对于`box-shadow`，则揭示了它不仅能通过四个参数美化元素，还能叠加多重阴影创造独特效果。 这篇的价值在于，它没有停留在简单的属性罗列，而是引导开发者思考如何将这些新特性应用到实际项目中。作者鼓励大家拥抱这些代表未来的工具，同时关注浏览器间的细微差异，为构建更现代、更丰富的网页界面打下基础。
前端必须掌握30个CSS3选择器
这篇讲的是前端开发中经常用到但容易忽视的CSS3选择器知识。作者从一个常见的误区出发：很多开发者以为只要会用#ID、.class和标签选择器就足够了。但实际上，随着CSS3标准的演进，掌握更多选择器能极大提升样式编写的灵活性和效率。 文章系统性地梳理了30个核心选择器，从最基础的通用元素选择器（*）、ID选择器和类选择器讲起，深入介绍了它们的使用场景和浏览器兼容情况。比如，通用选择器常用于快速清除默认边距，而ID选择器虽然效率最高但需谨慎使用以确保唯一性。文中还提供了每个选择器的在线演示链接和详细的兼容性列表，涵盖了从IE6+到主流现代浏览器的支持状态。 对前端开发者而言，这不仅是一份语法速查手册，更是一次对CSS选择器体系的重新梳理。熟悉这些选择器及其特性，能让你在布局复杂页面或处理特定样式需求时，写出更精准、更高效的代码。
javascript的词法作用域
这篇讲的是JavaScript中一个容易被忽视但至关重要的概念：词法作用域。作者从一个非常普遍的编码场景出发——我们定义了一个方法，它却在距离定义位置“十万八千里”的地方被调用——直接抛出一个核心问题：此时，这个方法内部到底能访问哪些变量，又无法触及哪些变量？ 文章没有堆砌术语，而是引导读者思考这个作用域的判定规则。它点明，这背后决定因素正是代码的“书写结构”，即**词法作用域**，而非动态的调用路径。文章会剖析，变量查找是沿着代码的静态嵌套结构向上的，就像沿着家族族谱寻找祖先，而不是在运行时跳到某个临时上下文里去寻找。 通过理解词法作用域，开发者能更清晰地把握闭包、模块封装等特性的底层逻辑。这篇分析帮助读者建立起对JavaScript执行机制的一个稳固认知基础，让代码中的变量访问变得可预测。
javascript变量类型
这篇讲的是JavaScript开发者都会遇到的变量类型分类难题。作者指出，即使经验丰富的工程师，也常被JS模糊的类型系统搞得纠结，比如不理解数组为什么不是基本类型。文章的核心在于通过“typeof”和“instanceof”两个操作符，厘清JavaScript中并存的两套类型分类标准。 文章首先通过`typeof []`的结果，引出了由typeof区分的六种基本类型（如number、string）和由其衍生的对象类型系统（如Array、Number）。这里特别点明了基本类型中的`number`和对象类型中的`Number`之间是“映射”关系，并用代码示例展示了`new Number(123)`与字面量`123`的区别与联系。 接着，文章深入辨析了开发中更容易混淆的“值类型”与“引用类型”。通过修改赋值后变量`a`和`c`的不同表现，直观地展示了两者在内存中的独立存储与引用关系。这直接解释了为什么一不小心就会“污染”引用类型的值。 最后，文章澄清了一个关于函数参数`arguments`传递的常见误解。通过一个修改对象属性后又重写参数的代码示例，证明了即使在参数为对象时，ECMAScript的传值机制依然有效，重写参数变量并不会影响原始引用。整篇文章通过清晰的代码对比和原理剖析，试图化解JavaScript初学者与进阶者都会面临的核心困惑。
IE的fireEvent方法
这篇讲的是IE浏览器中一个不太常见的私有方法——fireEvent。作者在制作JavaScript入门材料时，发现这个方法的行为与他最初的直觉不同：他原以为调用`fireEvent`会像直接调用`onclick()`那样执行事件处理程序，但实际上，它需要两个参数：元素对象和要触发的事件类型字符串。 文章核心对比了`fireEvent`与标准事件触发方式的差异。在现代浏览器标准中，我们通常使用`new Event()`创建事件对象，然后通过`element.dispatchEvent(event)`来触发。而IE的`fireEvent`则是一个封装好的快捷方法，它的“触发”本质上也是调用该元素上对应的事件句柄（如`onclick`）。作者通过这个细节发现，指出了IE的DOM事件模型实现方式与标准规范的不同之处，也提醒我们即使在看似简单的API中，也可能存在需要注意的兼容性陷阱和实现细节。
javascript匿名函数
这篇分享从整理培训材料出发，聊了聊JavaScript中匿名函数的使用心得。作者没有堆砌定义，而是从实际编码场景切入，解释了为什么以及何时会用到匿名函数——比如作为回调函数传递给 `setTimeout` 或数组方法，或是通过立即执行函数表达式（IIFE）来创建独立作用域、避免变量污染。 文章重点对比了匿名函数与具名函数的核心差异：匿名函数无需显式声明，写法灵活，适合一次性、短小的功能片段；但它的缺点也很明显，比如在调试时堆栈跟踪信息不友好，且可读性不如一个清晰的函数名。作者通过简单的代码示例，展示了这两种形式在定义、调用和调试时的不同体验。 读下来，对于初学者而言，最大的启发在于“何时选择”：如果函数逻辑简单且短暂使用，匿名写法很便捷；但若功能重要或需要复用，一个好的函数名能极大提升代码的可维护性。文章用平实的语言，把一个基础知识点讲得清晰透彻。
收集几个手机浏览器的User-agent
这篇讲的是当我们在PC浏览器上试图访问某些手机网站时，常会遇到自动跳转到PC版页面的问题。文章指出，这通常是因为网站会根据浏览器的 User-agent 来判断设备类型，PC浏览器的默认标识与手机不符所致。 要解决这个“身份识别”错误，核心方法就是修改浏览器的 User-agent，让它伪装成手机浏览器。文章列举了多种实用方案：对于 Chrome 和 Firefox 用户，可以安装像 User Agent Switcher 这样的插件快速切换；而在 IE 环境下，则可以通过 Fiddler 等抓包工具进行代理修改。 作者通过收集几种常见手机浏览器的 User-agent 字符串，为我们提供了即拿即用的参考列表。这种“以假乱真”的技巧，不仅适用于日常调试和网页开发测试，也能帮助我们更顺畅地获取移动端特定的内容与功能。
IE6中a标签location.href失效解决方法
这篇讲的是一个经典的IE6兼容性坑：当a标签的href属性设置为`javascript:;`或`javascript:void(0);`，并在`onclick`事件中尝试通过`location.href`进行页面跳转时，跳转会失效，导致功能异常。文章详细复现了这个在IE6下特有的bug场景。 作者分析了问题的根源，指出这是由于IE6在处理这类特殊href值与事件绑定的交互时存在缺陷。针对这个棘手的兼容性问题，文章提供了一种简单有效的解决方案，核心思路是避免直接使用`location.href`，转而采用其他可靠的页面跳转方式，从而绕开IE6的这个怪癖行为。 文中附带了具体的代码对比，展示了失效代码与修复后的写法，对于需要维护老旧系统或处理极端兼容性要求的前端开发者来说，这篇实战记录提供了一个明确的避坑指南和修复样板。
javascript事件：获取事件对象getEvent函数
这篇讲的是在JavaScript开发中获取页面事件对象的常见方法与一个具体的解决方案。文章聚焦于 `getEvent` 这个实用函数，它帮助开发者在事件处理程序中稳定地获取到事件对象（event object），这是处理用户交互如点击、按键等的基础。 其核心实现思路巧妙地解决了浏览器兼容性问题——在旧版IE中，事件对象是作为 `window.event` 全局属性存在的，而在现代标准浏览器中，则作为回调函数的参数传入。`getEvent` 函数通过判断当前执行环境，智能地返回对应方式获取到的事件对象，屏蔽了底层差异，让开发者可以写出更简洁、跨浏览器的事件处理代码。 这个函数封装了繁琐的兼容性判断，将“获取事件对象”这个频繁操作标准化，使得业务逻辑代码可以更加专注于功能实现本身，提升开发效率和代码的健壮性。
新浪微博jsSDK操作指南
这篇指南针对新浪微博jsSDK使用中的一个常见坑点：许多开发者在集成时遇到调用失败，核心问题出在跨域文件的放置上。作者从实际问题切入，指出jsSDK虽然提供了开放接口，但缺少或错误配置crossdomain.xml文件会导致浏览器安全策略阻断请求，这是多数人卡住的关键。 文章详细拆解了故障原因——crossdomain.xml必须正确放置在服务器根目录，且内容需指定允许的域。解决方案部分逐步演示了文件创建、内容编写（例如包含domain属性）和部署验证，还列举了路径错误、权限不足等典型错误案例。通过开发者
自己写的一个轻量级javascript框架的设计模式
这篇讲的是作者从实际项目需求出发，动手构建一个轻量级JavaScript框架的过程。因为觉得现有框架如jQuery对小项目来说过于庞大，作者决定利用周末时间，探索如何用更精简的代码实现核心功能。文章重点探讨了JavaScript中不同于PHP的类继承机制，梳理了构建函数、原型扩展以及综合方式等多种实现方法，并参考了jQuery作者的类继承函数作为借鉴。作者分享了自己在设计这个迷你框架时的思考路径和技术选型，为希望理解框架底层原理或有类似定制化需求的开发者提供了切实的实践参考。
转变代码思路：js浏览器判断方法
这篇讲的是作者在实现浏览器判断时，如何从“教科书式”的冗长判断，转向利用 User-Agent 字符串本身规律的巧妙思路。起初，判断不同浏览器往往依赖一长串 `if-else` 条件，分别匹配各种可能的标识，代码臃肿且难以维护。 作者从自己开发的 JS 框架出发，展示了新的实现方式：与其逐个枚举，不如分析 UA 字符串的共性。例如，发现 IE11 会携带“Trident/7.0”这样的特征字符串。通过检测 `indexOf` 或使用正则表达式提取版本号，可以用更精炼、更声明式的代码覆盖更多情况。这种方法的转变，核心在于从“枚举所有可能性”到“识别关键特征”。 这种思路的升级让代码变得异常优雅。新方法不仅减少了条件分支，逻辑也更清晰，对未来新浏览器的兼容性也更强。它提示我们，编码时不妨跳出固定模式，从问题的本质规律入手，往往能找到更简洁高效的解决方案。
javascript继承的写法
这篇讲的是JavaScript中实现继承的各种写法。作者从JavaScript“基于对象而非面向对象”的语言特性出发，探讨了它如何通过原型（prototype）机制来实现面向对象的核心概念——继承。 文章对比了JavaScript与Java等传统面向对象语言，点明了关键差异：JS没有严格的类（class）体系，而是通过原型链让对象能够直接继承其他对象。这带来了动态、灵活的特点，但也要求开发者理解其独特的原型工作方式。 文中重点梳理了多种实现继承的具体写法，包括经典的构造函数继承、组合继承，以及更优雅的原型链继承、寄生组合式继承等。对于每种方式，它都分析了其核心思路和适用场景，也指出了各自的优缺点，比如内存效率、代码复用性等问题。 作者基于对阿里UED《重温javascript继承机制》一文的解读，将这些分散的知识点串联了起来，帮助读者理解不同写法背后的演进逻辑。对于想要厘清JS继承脉络、避免常见陷阱的前端开发者来说，这篇梳理能提供一个清晰的参考框架。
json_encode数组出现unicode \uxxxx的解决方案
作者在开发微博应用时发现了一个常见但棘手的问题：PHP的`json_encode`函数默认将中文字符编码为Unicode转义序列（`\uXXXX`），这虽然保证了跨页面传输时不会出现乱码，但每个汉字会膨胀成6个字符（`\u`加4位十六进制数），显著增加了JSON数据的体积，对于需要频繁通信的前端应用并不友好。 问题的根源在于PHP默认使用了不包含中文字符集的JSON编码设置。作者没有简单接受这一默认行为，而是寻找了更优的解决方案。其核心思路是绕过`json_encode`的默认处理，通过自定义编码方式来保持中文字符的直接可读性，从而有效缩减了传输数据量。 这篇分享不仅指出问题，更给出了一个在实际项目中验证过的具体处理方法。对于追求接口性能和数据精简度的开发者而言，了解如何控制`json_encode`的输出格式，是一个值得掌握的实用技巧。
使用javascript将XML解析为JSON
这篇文章聚焦于一个前端开发中常见的格式转换需求：如何用 JavaScript 将 XML 数据高效地解析为 JSON 对象。文章直接展示了一段实用的转换代码，其核心思路是通过遍历 XML 的节点树，递归地将其标签、属性和文本内容映射到一个对应的 JSON 结构中。 作者以 David Walsh 的一篇技术分享为蓝本，清晰地讲解了转换过程中的几个关键步骤：处理元素节点、提取属性、处理文本内容，并最终拼装成标准的 JSON 格式。这种方法巧妙地利用了 DOM 解析器（如 `DOMParser`）来处理 XML，避免了手动编写复杂的字符串解析逻辑。 对于需要处理来自旧系统 API 或配置文件的 XML 数据，同时又希望在现代 Web 应用中以更灵活、易于处理的 JSON 格式使用的开发者来说，这段代码提供了一个轻量且直接的解决方案。它展示了如何弥合两种数据格式之间的鸿沟，让数据流转更加顺畅。
使用windows7的virtual PC打造原装IE6、IE7、IE8测试环境
用IETester测试IE兼容性，结果发现JavaScript运行环境还是IE8内核——这个坑，不少前端开发都踩过。作者从这个实际工作中的痛点出发，指出了模拟器类工具无法隔离真实IE内核的根本局限。 为了解决这个问题，文章详细介绍了如何利用Windows 7系统自带的Virtual PC，搭建原装IE6、IE7、IE8的测试环境。核心思路是在虚拟机中安装纯净的Windows XP系统镜像，并分别配置对应的IE版本。整个过程不需要购买额外的授权，完全基于系统自带功能和老旧系统镜像来实现。最终，这种物理隔离的方案一劳永逸地解决了测试的准确性问题，让JavaScript的执行环境也变得完全可靠。对于仍在维护老旧系统的企业项目来说，这是一个稳定且完全可控的本地测试方案，相比依赖云服务，它的离线可用性更是一大优势。
NodeList集合跟Array数组的区别
这篇讲的是前端开发中容易被混淆的一对概念——`NodeList` 和 `Array`。作者从日常使用的 `document.querySelectorAll` 等方法返回值出发，点明 `NodeList` 并不是真正的数组，虽然它看起来像、用起来也有些像。 文章核心对比了两者的差异：`NodeList` 是 DOM 查询结果的集合，通常是“活的”或“静态的”引用，而 `Array` 则是标准的 JavaScript 数组对象。最关键的差别在于，`NodeList` 缺少 `Array.prototype` 上的大部分方法（如 `map`、`filter`、`forEach`），这会给习惯数组操作的开发者带来不便。 作者还梳理了处理 `NodeList` 的实用技巧，比如通过 `Array.from()` 或扩展运算符 `[...]` 将其转换为真正的数组，从而自由使用丰富的数组方法。文章最后指出，理解两者的本质区别，能帮助开发者在处理 DOM 操作时选择更合适、更高效的编码方式，避免不必要的类型转换或方法缺失错误。
利用跨域资源共享（CORS）实现ajax跨域调用
这篇讲的是如何利用跨域资源共享（CORS）来优雅地解决前端开发中棘手的ajax跨域调用问题。作者从日常开发中遇到的浏览器同源策略限制出发，引出了CORS这一标准机制。 文章的核心是梳理CORS的工作原理与实施要点。它并非空谈理论，而是基于Nicholas C. Zakas的经典英文讲解及其中文翻译，具体阐释了如何通过服务器设置特定的HTTP响应头（如`Access-Control-Allow-Origin`），来允许来自不同域的客户端代码安全地发起请求。这使得前端可以绕过传统的JSONP等hack方法，更规范、更强大地实现跨域数据交互。 作者的分享动机很实在：看到一篇讲解清晰、实用性强的英文资料，便将其翻译整理出来，希望帮助更多开发者理解并应用这一现代Web标准。对于正被跨域问题困扰，或希望了解浏览器安全模型与网络通信机制的开发者来说，这篇整理提供了一个明确且可靠的参考路径。
如何写出高质量的Javascript代码
这篇讲的是如何通过一系列具体、可操作的编码习惯来提升 JavaScript 代码的质量。作者从优秀程序员 Stoyan Stefanov 的经验出发，直接点出了几个容易被忽视但至关重要的细节。 文章没有泛泛而谈“代码风格”，而是聚焦在几个硬核的技巧上。比如，它强调要“避免使用全局变量”，解释了全局作用域污染可能带来的隐蔽 bug。再比如，推荐使用“单一的 var 关键字”来声明变量，这有助于代码维护和避免 hoisting 问题。在循环性能优化上，文中提到了“预存数组长度”这个小技巧，避免在循环体内重复计算。 这些实践虽然看似微小，但作者将它们系统地归纳出来，指向了一个核心：高质量代码往往源于对细节的严格把控和对 JavaScript 语言特性的深刻理解。文章为日常编码提供了清晰的“检查清单”，让开发者能立刻在自己的项目中应用这些被验证过的模式。