前端代码之丑（3）：蛋疼的压缩式写法
前端代码之丑（3）：蛋疼的压缩式写法
首页
/ 岁月如歌
前端代码之丑（2）：丑陋的条件语句
前端代码之丑（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 的前端都参与进来，集思广益。