前后端分离的思考与实践（二）
这篇讲的是前后端分离中“模板”这个模糊地带的梳理与实践。作者从传统开发模式切入，指出当模板逻辑堆积在服务端或浏览器端时，都会导致前后端职责不清、维护困难。文章的核心方案是，在 Java 服务与浏览器之间，引入一个前端可掌控的 NodeJS 中间层，将前后端的分割线从“硬件环境”重新定义为“工作职责”。 通过这个中间层，团队得以实现模板与路由的共享。前端使用一致的模板语言（如 XTemplate）和渲染引擎（JavaScript），决定是在 NodeJS 服务端渲染，还是交给浏览器端渲染，从而针对不同场景选择最优解。例如，对于复杂交互应用，首次进入时由 NodeJS 做全页渲染以避免白屏，后续交互则在浏览器端局部刷新，始终使用同一份模板，保证了体验一致性。 文章进一步通过多个案例（如单页面应用的 SEO 解决方案、跨终端页面的统一管理），展示了这一架构如何具体解决白屏等待、路由不匹配、SEO 困难等现实痛点。其本质是利用 NodeJS 的灵活性，让前端开发更聚焦于 UI 与交互，并与后端通过服务化接口进行清晰协作，最终提升整体项目可维护性与用户体验。
前后端分离的思考与实践（一）
这篇讲的是如何通过引入NodeJS层来真正实现前后端职责分离，解决传统Web开发中前后端代码混杂、沟通成本高、性能优化受限等顽疾。 作者团队认为，仅靠浏览器端的SPA模式不够通用，真正的分离应该从职责划分：前端负责View和Controller，后端只负责Model与业务数据。为此，他们提出在后端服务和浏览器之间增加一层NodeJS应用。这层Node让前端能掌控Controller，自由决定服务端渲染、异步接口或BigPipe等输出方式，同时后端可以专注于业务逻辑。文章解答了常见的疑问，比如“为何多一层”：它并非多余，而是为了解锁前端的控制权，通过集中代理请求、优化通信来提升整体性能，尤其在移动端效果显著。 淘宝已在部分项目中实践该架构，初步验证了其在开发效率和性能上的收益。他们认为，技术实现并非难点，关键在于打通开发流程、积累最佳实践，使这种分离模式能稳定落地。
让我们写快速的JavaScript,JS性能优化小窍门
这篇讲的是如何写出更快的JavaScript代码。作者从JS性能尚未达到极限的现状出发，直指在混合应用等场景中，性能优化仍是必要的“伎俩”。 文章没有空谈理论，而是用一系列直观的对比测试来揭示优化窍门。它告诉你，动态类型虽灵活，但会拖慢速度，保持变量类型一致（尤其是数组）是关键；`delete`运算符比赋值为`null`慢得多，而动态添加对象属性也会带来巨大开销。对于字符串拼接，`+=`运算符在主流浏览器上都胜过`concat`和`join`。在正则表达式使用上，`RegExp.prototype.exec`通常也比`String.prototype.search`更快。 更重要的是，这些结论都附带了跨浏览器（如Firefox与Chrome）的性能测试数据，比如位运算在Firefox上极快但在Chrome上却更慢。这些基于具体测试的发现，能帮助开发者在编写或优化JS代码时做出更明智的选择，避免那些“昂贵”的操作，让代码真正跑得更快。
使用 Sass (Using Sass)-插件，缓存，配置选项，语法选择及编码格式
这篇整理自官方文档的指南，深入浅出地介绍了 Sass 的三种核心使用方式：作为命令行工具、Ruby 模块以及 Rack/Rails/Merb 框架的插件。文章首先从安装 Sass gem 讲起，然后逐步展开不同场景下的具体用法。 在命令行部分，它演示了如何快速编译单个文件，以及使用 `--watch` 命令实时监控文件或整个目录的变化并自动更新 CSS，这对提升开发效率很有帮助。文章还展示了如何在 Ruby 代码中直接调用 `Sass::Engine` 进行编译。 对于框架集成，内容覆盖了 Rails 2、Rails 3、Merb 以及 Rack 应用的具体配置步骤，比如在 `Gemfile` 或 `config.ru` 中添加必要的代码。这些细节对于在实际项目中落地 Sass 非常实用。总的来说，无论你是想在本地环境快速上手，还是将 Sass 嵌入已有的 Web 框架，这篇文章都提供了清晰、可操作的路径。
用CSS代码写出的各种形状图形的方法
用CSS“画”图形，这篇是个实用的手册。作者一共整理了20种常见图形的CSS实现方法，从基础的正方形、长方形，到需要利用border技巧“掰”出来的各种方向的三角形、梯形，再到运用了`transform`变形和伪元素组合而成的六角星、五角星、五边形等复杂形状。 文章的核心价值在于它并非空谈理论，而是为每个图形都附上了可以直接使用的代码和效果预览。比如，实现一个平行四边形只需要一个`skew`变形，而画一个五角星则需要精巧地组合主元素与`before`、`after`伪元素，并配合旋转角度。这些示例清晰地展示了如何通过属性的叠加与变换，将简单的矩形“雕刻”成所需的任何形状。 对于前端开发者而言，这既是一份方便查阅的代码清单，也是一个学习CSS几何与变形技巧的趣味案例集。它直观地体现了CSS的灵活性，证明了无需依赖图片，仅用代码就能创造出丰富的视觉元素。
正确使用HTML title属性
这篇讲的是 HTML 的 title 属性，一个存在了超过 14 年却问题重重的特性。作者开篇点明，在某些场景下（例如对辅助技术和移动设备用户隐藏内容，只对键盘用户显示）title 属性似乎是合理的选择，但随即指出其本身存在广泛且严重的缺陷。 文章的核心在于揭示 title 属性的“鸡肋”本质：随着触摸设备的普及，其作用被进一步削弱。关键问题在于，它对手机用户、仅键盘操作者、以及依赖屏幕阅读器、屏幕放大器等辅助技术的用户群体非常不友好。浏览器缺乏支持，无法通过键盘或移动端触发显示其内容，屏幕阅读器也普遍不予播报，这使得它无法可靠地传递信息。 在有限的“有用”场景中，文章建议仅在为 frame/iframe 贴标签，或提供需要程序实现才能在特定情况下显示的辅助标签时使用。相反，作者详细列举了多种“无用或有害”的用法，例如用它来替代表单标签、为图片添加标题、提供与可见文本重复的信息，或作为缩写扩展等，并解释了这些做法为何对可访问性和用户体验没有帮助甚至造成干扰。 因此，这篇文章为前端开发者和内容创作者提供了一个清晰的避坑指南：在为元素添加额外信息时，应优先考虑确保内容对所有用户可见且可访问，而不是仅仅依赖这个支持度不足的 title 属性。
HTML5视频的那些事儿
这篇文章讲的是HTML5视频背后那堆让人头疼的概念和选择。作者从视频技术早于Web存在的历史讲起，梳理了我们常见的rmvb、mp4、flv等格式背后复杂的“三层结构”：容器、视频编解码器和音频编解码器，并用清晰的表格总结了mp4、ogg等主流组合的对应关系。 厘清这些后，文章转向HTML5的解决方案。它回顾了从黑盒的`embed`标签到功能强大但代码复杂的Flash插件的时代，引出了简洁的`
浅析line-height和vertical
这篇从基础的居中问题出发，深入剖析了两个常被误解的CSS属性：line-height和vertical-align。作者首先厘清了line-height的本质——它影响的是行框高度，并通过一系列对比实验揭示了关键差异：无单位数值（如1.5）会将比例传递给子元素，而百分比（如150%）则会将父元素计算后的固定值传递下去，这正是为何“1”与“100%”效果不同的根源。 文章还通过设置line-height:0等边界情况，直观展示了它对块级元素和行内元素影响的根本区别：块级元素的高度会随之收缩，而行内元素（如span）的高度则保持不变。关于vertical-align，作者明确指出它仅对inline和inline-block元素生效，并图解了top、middle、text-bottom等不同对齐值的具体依据（如middle是与父元素基线加上1/2 x高度对齐），帮助读者理解这些值在垂直方向上的精确定位逻辑。
《web前端最佳实践》—高维护性css
这篇讲的是如何让CSS代码更易维护。作者指出，CSS虽然上手简单，但若不加规范，很快就会变得混乱难改。文章从几个核心实践出发，探讨如何组织和书写高维护性的CSS代码。 首先是代码组织，建议将CSS文件按通用和业务模块分类，并单独处理浏览器兼容和基础重置样式。其次是书写规范，比如对属性进行逻辑排序、合理使用CSS Reset来统一浏览器默认样式。在选择器方面，应尽量避免高权重的ID选择器，多用组合类选择符以降低耦合。文章还提及了IE兼容代码的分离技巧，以及在em、px和%之间如何选择更合适的相对单位。 总的来说，作者通过这些具体、可操作的建议，为前端开发者提供了一套提升CSS项目质量与效率的实践框架，帮助团队写出更整洁、更灵活的样式代码。
《web前端最佳实践》—高性能css
这篇讲的是如何让CSS代码跑得更快。作者没有停留在理论层面，而是直击开发者日常编码中的常见痛点，给出了非常具体的优化指南。 文章开篇点破一个常见误解：很多人以为CSS选择器是从左向右匹配的，但事实恰恰相反——浏览器是从最右侧的选择器开始遍历的。基于这个原理，作者给出了几条黄金准则，比如避免使用通配符和标签选择器，层级不宜过多等。不过他也提醒，在性能影响不明显的小项目中，代码的可维护性应放在首位。 在图片处理上，文章对比了两种方案：一是不要随意用CSS缩放图片，而是准备合适尺寸的图片资源；二是谨慎使用CSS雪碧图。虽然雪碧图能减少HTTP请求，但它在制作和维护上都比较复杂，用不好反而会因内存消耗过大拖累性能。作者给出了非常落地的实践建议，比如将雪碧图尺寸控制在2500像素以内、200KB以下。 文章后半部分聚焦于代码瘦身和CSS3的兼容性处理。前者教你怎么合并与精简规则，删除无效代码；后者则详细剖析了浏览器前缀的使用策略，以及如何通过Modernizr等工具稳妥地应用新特性，避免为兼容性付出过高的性能代价。 总的来说，这篇文章将“高性能CSS”这个大话题拆解成了一个个可操作的具体动作，不仅告诉你“不该做什么”，更重点阐明了“应该怎么做以及为什么”，是前端工程师在追求卓越用户体验路上一份扎实的参考清单。
图片以及其他替换元素的空隙问题
这篇讲的是开发者经常遇到的一个小困扰：明明没设置任何边距，图片（或其他替换元素）之间却莫名出现空隙。 作者从一个具体场景切入——“图片右边和底部总有神秘缝隙，把 margin、padding 全清除了也没用”，然后点明了问题的根源：图片作为行内替换元素，默认的 `vertical-align` 基线对齐方式与父元素基线之间存在一段距离，这便是“空隙”的来历。 针对这个“不听话”的空隙，文章梳理了六种主要解法。核心思路包括改变元素的行内特性，比如将 `font-size` 设为 `0`，或者干脆把图片设为 `display: block`；也可以利用浮动 (`float`) 让元素脱离文档流。此外，调整 `vertical-align` 的值（如设为 `top` 或 `bottom`）也能消除空隙，但作者提醒需注意其对页面其他内容可能产生的影响。最后还提到了给父容器定高以及在代码上让标签“无缝拼接”的格式化方法。 文章的一个亮点是将讨论从 `img` 扩展到了 `input`、`textarea` 等所有替换元素，解释了它们具有相同的空隙特性，帮助读者建立更完整的认知。整篇内容直击痛点，提供的解决方案具体且可操作，能帮助开发者从原理上理解并彻底处理这类布局问题。
当前端也拥有 Server 的能力
这篇从 Fetch API、ServiceWorker 到 Cache API 出发，探讨了前端如何借助这些新接口获得传统上属于服务器端的能力。作者以 XMLHttpRequest 的繁琐写法作为对比，引出了基于 Promise 的 Fetch API 在处理请求与响应时的简洁与直观，例如只需两步即可完成 JSON 数据的获取与解析。同时，文章也客观指出了 Fetch 当前尚不支持请求中断、进度上报等局限。 文章的重点在于 ServiceWorker，它被描述为一个位于前端的“HTTP 拦截器”。通过注册一个 Worker 脚本，开发者能够完全控制特定 URL 的请求与响应，甚至可以模拟出服务端不存在的内容，清晰展示了前端如何拦截并处理网络流量，这是实现离线访问与高效缓存策略的基础。最后提及的 Cache API，则作为 ServiceWorker 的协作工具，提供了精细管理浏览器请求/响应缓存的能力。 总体来看，这篇文章串联起了三个关键 API，展示了现代前端从单纯的请求发起方，转变为能够管理请求生命周期、拦截网络通信并缓存资源的“轻量级服务端”角色。
JavaScript中的继承方式
这篇文章讲透了JavaScript中实现继承的两种经典方式：原型链继承与类式继承。作者首先厘清了JS中基于对象的核心特性——它不像Java那样拥有严格的“类”概念，而是更多依靠原型（prototype）机制。文章系统梳理了原型链继承如何通过对象间的原型链接实现属性与方法的共享，以及类式继承如何借助构造函数和apply/call方法来复用代码。 为了帮助读者建立扎实的理解，文章特别定义了一套清晰的代码约定，区分了私有属性、实例属性与原型属性（包括基本类型与引用类型），为后续的深入分析奠定了明确的基础。作者指出，理解这些基本属性的归属与区别，是掌握不同继承方式适用场景与潜在陷阱的关键。无论是想搞懂JS对象模型的底层逻辑，还是为后续学习ES6 class语法打好基础，这篇文章都提供了扎实且细致的技术剖析。
前端编码规范（4）—— CSS 和 Sass (SCSS) 规范
这篇文章讲的是前端开发中CSS与Sass的编码规范，核心聚焦于如何通过编写可维护的样式代码来提升长期项目效率。作者从选择器命名、ID使用、标签选择器和选择器精确性四个关键维度出发，给出了一系列具体且可操作的建议。 比如，在命名上提倡使用能反映元素目的的语义化类名（如 `.important`）替代表象名称（如 `.red`）；明确指出应尽量避免使用ID选择器进行样式定义，因为其权重过高且无法复用，会给后期维护带来“选择器战争”的隐患。同时，文章强调要摆脱对HTML标签的选择器依赖（如 `div.content`），应使用纯粹的类名，并善用直接子选择器（`>`）来精确控制样式作用范围，避免因样式过度继承而导致的意外覆盖问题。 整篇文章通过大量“不推荐”与“推荐”的代码示例对比，清晰地阐述了每条规范背后的逻辑。它并非罗列条条框框，而是为前端开发者，尤其是处理中大型项目的团队，提供了一套减少样式冲突、提升代码健壮性和协作效率的实用方法论。
前端编码风格规范（3）—— JavaScript 规范
这篇讲的是前端 JavaScript 编码中几个关键的最佳实践，核心目标是避免全局命名空间污染并提升代码健壮性。 文章首先强调，总是应该使用立即执行的函数表达式（IIFE）来包裹代码。这样做的好处是能创建独立的作用域，防止变量泄露到全局，也避免了代码被其他脚本意外修改。作者对比了 IIFE 的两种括号写法，并推荐将执行括号放在外层括号内部，以使表达式看起来更像一个整体。 严格模式的启用时机也很有讲究。文章建议在 IIFE 内部激活严格模式，而不是在整个脚本的开头。这样既能获得更严格的错误检查和性能优化，又能避免因全局启用严格模式而影响到第三方库的正常运行。 在变量声明方面，文章重申了必须始终使用 `var` 关键字。省略 `var` 会意外创建全局变量，使得作用域难以控制，而严格模式能帮助捕捉因变量名拼写错误导致的问题。 总的来说，文章通过清晰的对比和示例，梳理了这些容易出错的细节，旨在引导开发者写出更隔离、更安全的 JavaScript 代码。
前端编码规范（2）—— HTML 规范
这篇讲的是前端HTML编码中的几个关键规范。文章从HTML5文档类型出发，推荐使用``，并建议避免XHTML，因为后者在现代浏览器中的兼容与优化空间有限。对于无内容元素标签，开发时建议不闭合以保持可读性，但在生产环节可以通过压缩省略部分可选标签来优化文件体积。 文章强调了HTML验证的重要性，建议使用标准工具检测，除非为性能做出必要让步。一个容易被忽视的细节是：虽然规范允许省略可选标签，但在源码中显式写出能避免潜在问题，提升可维护性。 性能方面，文章重点分析了脚本加载策略。同步脚本会阻塞DOM解析，影响页面渲染。现代浏览器可使用`async`属性实现异步加载，甚至可以将脚本放在`
`中。对于需要兼容IE9等老旧浏览器的场景，最佳实践是将带`async`属性的脚本标签放在``之前，这样既限制了阻塞范围，又利用了现代浏览器的异步特性。 这些看似基础的规范，实则直接影响页面的可维护性、兼容性与性能。文章给出了清晰的对比与具体操作建议，对实际开发很有指导意义。前端编码规范（1）—— 一般规范
这篇讲的是前端开发中那些容易被忽视但至关重要的基础规范。作者从团队协作与代码质量的角度切入，清晰地梳理了制定一般性编码规范的核心意义。 文章聚焦于HTML、JavaScript以及CSS/SCSS这几个前端基石，阐述了一套旨在统一风格、明确对错的准则。它强调，规范的价值不仅在于代码的整洁，更在于它能让潜在的问题——无论是风格不一致还是逻辑Bug——在早期就变得显而易见。当团队成员都严格遵守这些约定时，后续的代码审核便能更精准地定位错误，而各种压缩、编译工具也能更顺畅地工作。 说到底，这篇指南提供的是一套可执行的“开发基石”，帮助团队在协作中减少无意义的摩擦，把精力更集中地投入到解决实际问题上。
页面跳转时，统计数据丢失问题探讨
这篇讲的是前端埋点统计中一个让人头疼的常见问题：页面跳转或关闭时，关键统计数据（如链接点击、停留时长）还没来得及发送就丢失了。作者从这个痛点出发，梳理了工程师们惯用的几种“阻塞”浏览器关闭的黑客方案（如同步Ajax、死循环、图片请求），并指出了它们在兼容性和用户体验上的硬伤。 文章真正的亮点在于提出了一个思路转换：既然在当前页面发送如此困难，不如将数据交给下一个页面去发送？由此引出了通过URL传参或利用`window.name`特性将数据跨页传递的方案。但作者也坦言，这依赖于开发规范和系统环境的统一。 最终，文章将解决方案推向了更高层面——这本应是浏览器原生能力。它介绍了W3C提出的`Beacon API`，其异步、不影响页面卸载的特性完美解决了上述所有痛点，尤其是在移动端场景下，即使用户切换应用，数据也能可靠上报。整个探讨过程从具体问题到变通方案，再到标准解，清晰展示了技术演进的逻辑。
如何在Angular中使用动画
这篇讲的是如何在AngularJS中为常见指令添加交互动画效果。作者开宗明义，指出Angular本身并不内置动画，需要通过引入ngAnimate模块来赋予动画能力，并且它的高度可定制性是其特点。 文章的核心是梳理了ngAnimate支持动画的具体指令列表，包括ngRepeat的进入、离开和移动动画，ngView、ngInclude、ngIf等的进入与离开动画，以及ngClass、ngShow/ngHide等的添加与移除类动画。这些细节清晰地展示了AngularJS动画机制的作用范围。 最后，文章以列表渲染指令ngRepeat为例，具体演示了如何配置和使用这些动画，帮助开发者理解动画元素进入DOM结构的过程。对于需要在旧项目中提升交互体验的开发者来说，这份针对ngAnimate模块的使用指南提供了直接的参考。
小叙透明
这篇讲的是网页设计中“透明效果”的实现细节与兼容性考量。作者从渐变、圆角等常见视觉手法中，聚焦于“半透明”这个容易被忽略但效果显著的特性，将其拆解为**背景透明的图片**和**半透明的纯色背景**两个方向展开讨论。 文章的核心对比在于CSS中实现半透明的两种主要属性：`opacity`和`rgba()`。作者指出，`opacity`控制整个元素及其子元素的透明度，类似PS的蒙版效果；而`rgba()`则专用于控制背景色或边框等颜色的透明度。关键差异在于，前者会让内容也变透明，后者则能实现“背景透，内容不透”。这种差异决定了它们各自适用的场景。 更实际的是，文章没有回避历史包袱，详细剖析了在需要兼容IE8及以下浏览器时，如何组合使用`rgba()`与IE私有的`filter`滤镜，并指出了其中需要注意的`haslayout`激活和元素定位等关键细节。最后，作者也简要提及了`hsla()`作为另一种颜色定义方式。整体来看，文章没有停留在概念科普，而是直接切入了不同方法的选择策略与实战中的兼容“坑点”，对前端开发者有很强的实操参考价值。