岁月如歌 -- IT技术博客大学习 -- 共学习共进步！

前端代码之丑（3）：蛋疼的压缩式写法

前端代码之丑（2）：丑陋的条件语句

看了 InfoQ 的代码之丑专栏，心痒痒忍不住，前端也来一个系列吧。分析的代码片段大都来自实际项目。还希望代码主人多多包容，让我们一起共同研究探讨，互助学习提高。实际代码今天要分析的是获取邮费目的地的一段代码（做了部分简化，整体保持原貌...

• JavaScript 的异步测试

JavaScript 的异步测试

• JavaScript 测试覆盖率检测工具

最近在用 Jasmine 给 KISSY 项目添加测试代码，遇到一个困惑：如何保证测试能完整覆盖到源码的所有分支？用 Google 搜索了下 JavaScript Coverage 工具，琳琅满目。有商业版的 JavaScript Coverage Validator, 还有 FireBug 的不少扩展 JavaScript Code Coverage Tool for Firebug. 美中不足是，这些要么要花钱，要么已停止更新，杯具。最后将目标锁定到免费开源一直更新的：JSCoverage. 不用不知道，一用立刻相见恨晚。下面简单...

• memoize 实现代码中的小陷阱

memoize 的原理很简单，实现时有以下注意点：当 arguments 不是简单字符串时，如何有效构建 hasher 来生成唯一 key 值；函数值的存储和获取；当缓存数据很大时，如何根据访问频率来释放低访问量的缓存项。

• 基于 SeaJS 模块化开发的一个实例

基于 SeaJS 模块化开发的一个实例

• CommonJS 的模块系统，AMD 和 Wrappings, 以及 RequireJS

与 LABjs, HeadJS, ControlJS 等 script loader 不同，RequireJS 是 module loader. 什么是 module 呢？ CommonJS 模块系统孟岩在救赎一文中提出，在对象范式里，一个对象系统的构建有两个基本观念：程序是由对象组成的；对象之间互相发送消息，协作完成任务。以上观念，可以普适化。对于一般系统的构建，可以归结为：系统由系统成员组成；成员之间互相通讯，协作完成任务。系统成员可大可小，可方可扁，可以从不同角度去...

• 从元编程到信息编程的遐想

愚公这篇文章很给力：原子，与原子联结的友类、友函数 CSDN 很不给力，要登录才能评论。好不容易注册了一个帐号，发表评论，居然提示“正在提交，请稍候”。我稍候了半个小时，重试了两次，都未发表成功

• JavaScript 压缩中的权衡

gzip 算法里，对重复字符做了处理。重复字符越多，压缩比越大。toggle2.js 增加了代码，减少了 toggle.js 的重复字符。对于该特例来说，我们的确帮了倒忙。注意一般情况下，toggle2.js 的写法还是有益的。

• JSCoverage 的一个 Uncoverage

上班途中想到的，到公司后一测，果然如此。看 test.js: function testFn(a, b, c) { var ret = 0; if(a || b || c) { ret++; } return ret; } testFn(1); JSCoverage 覆盖率 100%：jscoverage.html?test.html 实际上，testFn(0, 1); testFn(0, 0, 1); 等情形都没覆盖到。原因很简单， if 语句中存在或，但 jscoverage 生成的代码，是以代码行为单位的

• 行进中的前端类库：KISSY

书写干净漂亮的代码非常不易。作为前端工程师，还得处理恼人的浏览器兼容性问题。Protoype, jQuery, YUI, MooTools 等各种 JavaScript 类库，都是为了让前端工作更轻松自如。下面将介绍前端类库 KISSY 的起因、设计原则和核心功能，以及相关开发流程和社区建设。起因已经有了 jQuery, YUI 等优秀类库，为什么还要自主研发前端类库？这个问题和淘宝的发...

• a.x = a = { }, 深入理解赋值表达式

直奔代码： var a = {x: 1}; a.x = a = { }; alert(a.x); // --> undefined 来自 JE: 写了 10 年 JavaScript 未必全了解的连续赋值运算. clue 的评论已经从 ECMA 规范分析了具体原因，下面尝试更直观的说明此问题。对于连续赋值语句，我们经常会这样理解： var a = b = 1; // 等价： var a; a = b = 1; 上面的理解很容易看出 var a = b = 1; 会造成 b 泄漏到上层作用域，有可能生成全局变量。根据直觉，我们可能会推断： a [...

• 用 CSS3 Transitions 实现动画

若干星期前，承玉心痒痒的推荐了一篇文章：Using CSS3 Transitions, Transforms and Animation. 我也心痒痒，但没啥时间。于是撮合龚浩一起折腾 S.Anim. 若干天的努力，终于有了成果，小结下。原理所谓动画，就是在一段时间内，连续改变 DOM 元素的属性。因此用 JavaScript 实现动画，最传统的方法就是采用定时器，在一段时间内（duration 时长），遵循特定规律（easing 平滑函数），改变 DOM 元素的属性（props, 最常见的是...

• 细说 expando 的来源

经常看到 expando 这个单词，经常被“忠告”不要给 DOM 元素随意添加 expando 属性。下面这张图也代表 expando: 究竟什么是 expando 呢？ expando 先看 Wiktionary 上的词条： Etymology Perhaps a short form of expandable object. Noun expando (plural expandos) (computing, programming) A property added to an object at run-time. 从语源上讲，expando 可能是 expandable object 的缩写。注意“可能”，并不确定。从使...

• 前端性能优化的方向

首先，我们一定不能忘记：对性能优化最重要的是内容优化。不过这不是我们前端能说了算的，我们只能努力从前端的角度给产品经理和运营人员提建议，因此内容优化不纳入性能优化范畴。从去年开始，到 Velocity 2010 大会中 Fast By Default 口号的提出，YSlow / PageSpeed / Msfast / dynaTrace / WebPageTest 等工具各领风骚，YSlow 几乎成了每个前端的标配。 YAHOO 的 34 条军规，光芒四射，无论后台开发还是运营人员，或多或少都...

• 优雅兼容之理想与现实

infinte 总是能给我们带来一些新思路新想法：更优雅的兼容很不错的思路。不过实际操作时，并不好组织。比如：getOffset （获取 elem 相对 page 的偏移量）方法，对于高级浏览器，直接 getBoundingClientRect + win.scrollLeft/Top 即可。对于低级浏览器，比如 Safari 2, 得利用 offsetParent 不断向上回溯叠加。

• Google Docs Ctrl + C 技术浅析

用 google docs 打开 pdf 文件，选中文本：表面上没有任何有趣的地方。但仔细一看，会发现选区的颜色是浅蓝色，而不是默认蓝。第一直觉是是有什么特殊的 CSS 属性，立马 firebug: 不看不知道，一看真蹊跷。selection-highlight 是选区，选区下面是一张图片 page-image! 于是立刻发现一个非常牛逼的特性：Ctrl + C 可以复制图片中的文字！ google 太强悍了，好在前端代码都是开源的，下面简单分析下。首先数据在哪呢，这个比较容...

• 用 JS 枚举质数

酷壳上的这篇文章很诱人：检查素数的正则表达式翻译成 JavaScript 代码如下： function prime(MAX) { var re = /^(11+?)\\1+$/, n, C = \'1\', s = C, r = [], j = 0; while ((n = (s += C).length) < MAX) { !re.test(s) && (r[j++] = n); } return r; } alert(prime(10000).length); 作为前端，为了让上面的脚本能在实际页面中应用，还得考虑脚本在浏览器中的耐心以及分时优化处理。最后，请猛击测试页面：prime-...

• KISSY 近期更新 & 设计思路讨论

这是内部的邮件讨论，我觉得可以开放出来，让所有关心 KISSY 的前端都参与进来，集思广益。