岁月如歌

用开放的心态,打造专业的人生。

从 RequireJS 到 SeaJS(2)

with 2 comments

从 requirejs.org 的首页出发,接下来是快速入门和下载,我们来看下载页面:Download

产出物

RequireJS 提供了三个文件:

  1. require.js — 这是核心文件,提供 JavaScript 文件和模块加载功能
  2. require-jquery.js — 打包了 jquery 最新版本的 require.js
  3. r.js — 优化工具,以及让 RequireJS 的模块可运行于 Node 和 Rhino 环境

SeaJS 提供的内容,目前也有三部分:

  1. sea.js — 模块加载器
  2. modules — 可运行在 seajs 环境中的推荐模块,在这里下载 modules.seajs.com
  3. spm 等优化和支持工具

如果安装了 spm, 可以用 spm 获取到 seajs 提供的一切

$ spm install seajs   # 安装 sea.js
$ spm install jquery  # 安装 modules 中的模块
$ spm build a.js      # 压缩、打包等操作

SeaJS 的这种设计,是由其广义定位(浏览器端的 NodeJS)决定的。在这种设计下:
Read the rest of this entry »

Written by lifesinger

October 27, 2011 at 21:27

Posted in Articles

用 SeaJS 玩转 CoffeeScript 和 LESS

with one comment

CoffeeScript 是一门可以编译成 JavaScript 的语言,语法轻巧优雅,社区非常活跃,是目前玩家最多、最有可能将 JavaScript 变成编译目标语言的新语言。可参考:JavaScript 的死与生

LESS 是一门可以编译成 CSS 的动态样式语言。CSS 设计之初是给设计师用的,是一门语法非常简洁优雅的声明式语言。但随着应用场景的复杂化,越来越多的 CSS 工作已经交由专业程序员来负责。在这种大背景下,LESS 等动态样式语言应运而生,为 CSS 的编写提供了变量、混合、计算和函数等功能。

目前 CoffeeScript 和 LESS 在 NodeJS 端有良好的开发体验,但在浏览器端的开发方式并不是很舒适。通过 SeaJS 的插件,可以让你在浏览器端的开发体验得到很大提升。

例子:CoffeeScript and LESS in SeaJS

文档:常用插件

欢迎使用,欢迎交流反馈。

Written by lifesinger

October 27, 2011 at 20:06

Posted in Articles

从 RequireJS 到 SeaJS(1)

with 5 comments

RequireJS 发布 1.0.0 了,很值得关注,看是否有可借鉴之处。
本次比较不涉及具体实现代码,主要比较两者的 API 设计。

http://requirejs.org
http://seajs.org

从定位谈起

首先,从 requirejs.org 首页可以得知,RequireJS 的定位是:

RequireJS 是一个 JavaScript 文件和模块加载器,特别为浏览器优化,同时也可运行在 Rhino 和 Node 环境中。

SeaJS 的定位是:

SeaJS 是一个适用于浏览器端的 JavaScript 模块加载器。

不要小看这两句话,任何类库/框架的定位,或者说愿景/目标,最终会决定该类库/框架的方方面面。比如:

RequireJS 的定位中,除了是模块加载器,还是文件加载器,这决定了 RequireJS 需要实现类似 LABjs 等 script loader 的功能。LABjs 的核心功能是异步加载脚本并提供运行的依赖等待:

$LAB
   .script("a.js")
   .script("b.js").wait()
   .script("c.js");

为了提供类似功能,RequireJS 开发了 order 插件:
Read the rest of this entry »

Written by lifesinger

October 24, 2011 at 14:41

Posted in Articles

发布 SeaJS v1.0.2 以及 SPM v0.3.0

with 4 comments

2011.10.20 Version 1.0.2 (stable)

官方网站:http://seajs.com/
英文文档:http://seajs.com/docs/
中文文档:http://seajs.com/docs/zh-cn/

SPM Version 0.3.0

首先,特别感谢文河(yyfrankyy)的辛勤工作。这次发布的 v0.3.0 是在文河开发的 v0.2.0 的基础上,根据当前实际需求,大幅度更新的一个版本。

SPM 是 SeaJS 的模块包管理工具,场景介绍:打包部署
安装与使用说明:spm on GitHub

欢迎使用,并给出宝贵的建议。

SeaJS Changelog

  1. 增强了对页面内嵌模块的支持:
    <script>
    define('foo', function(require, exports) {
      exports.name = 'foo';
    });
    
    define('main', function(require) {
      alert(require('foo').name);
    });
    
    seajs.use('main');
    </script>
    
  2. 浏览器兼容性增强:#compatible
  3. 提高 define 的灵活性:test cases
  4. 优化 modules 项目中的模块,可直接通过 combo 服务合并了:

    http://a.tbcdn.cn/libs/??jquery/1.6.4/jquery.js,underscore/1.2.0/underscore.js
  5. 代码优化以及 bug fix: issues

Feedback

交流讨论,欢迎发送邮件到:seajs@googlegroups.com

20111027 更新:增加了插件机制,请查看:用 SeaJS 玩转 CoffeeScript 和 LESS

Written by lifesinger

October 20, 2011 at 21:18

Posted in Articles

利用位反操作来简化 indexOf 判断

with 16 comments

补码

在计算机系统中,数值用补码来表示。任何数值 n 的位反等于 -(n + 1):

~n === -(n + 1)

可以得到:

~9 === -10
~8 === -9
~1 === -2
~0 === -1
~-1 === 0
~-2 === 1
~-9 === 8
~-10 === 9

很明显,只有 ~-1 才等于 0. 对非 -1 值取反永远不为 0.
Read the rest of this entry »

Written by lifesinger

September 30, 2011 at 10:44

Posted in Articles

通过 ast_walker 来操作 AST

with 2 comments

通过 UglifyJS 可以得到 js 代码的 AST:

var fs = require('fs');
var jsp = require('uglify-js').parser;

var code = fs.readFileSync('test.js', 'utf-8');
var ast = jsp.parse(code);

得到的 ast 是以数组形式表示的抽象语法树。

spm 项目里,要提取 js 模块里的依赖信息。最裸的做法是通过正则来实现:

function parseStatic(inputFile, charset) {
  var ast = getAst(inputFile, charset);
  var deps;

  var pattern = /,stat,call,name,define,(?:(?:[^,]+,){2})?array(,.*?,)(?:function|name),/;
  var match = ast.toString().match(pattern);

  if (match && match[1]) {
    deps = [];
    var t = match[1].match(/,string,[^,]+/g);

    if (t && t.length) {
      deps = t.map(function(s) {
        // s: ,string,xxx
        return s.slice(8);
      });
    }
  }

  return deps;
}

详见:Dependences.js

正则的实现方式在绝大部分情况下不会有问题,但代码的可读性和扩展性不好。
Read the rest of this entry »

Written by lifesinger

September 29, 2011 at 13:34

Posted in Articles

也谈前端基础设施建设

with 9 comments

克军昨天的分享不错:前端基础架构的实践和思考

从 2009 年起,也一直在想这些事。受克军启发,梳理成一张图:

(请点击小图看大图)

几点说明:

  1. 将“架构”换成了“设施”,对应的英文是 Infrastructure. 感觉用“设施”更能精准表达原意。
  2. 克军的大分类是设施的形态:是一个工具,还是一份规范,或是一个系统。这样分类不错,但系统和工具之间感觉很难区分,系统可以包含工具,工具可以是一个系统。
  3. 这里从前端开发涉及的流程来划分:需求阶段 — 开发阶段 — 部署阶段 — 上线后。然后看每个阶段,需要哪些基础设施建设。想清楚后,前端的 Infrastructure 也就出来了。
  4. 需求阶段,一个快速原型工具,无论对交互还是前端,都是非常有用的。目前淘宝用的是 Axure RP.
  5. 开发阶段是重点。规范、流程有利于团队协作,类库、框架可以让业务代码有一个很好的开发基础,工具可以提高工作效率,测试能保障代码质量。
  6. 单独把部署阶段放出来,是因为前端在这一块还很薄弱,有很多可做的事。比如代码的压缩、模块的依赖分析和打包等。这些工作也可以放在开发阶段,但那样会增加前端的工作量。放在部署阶段,可做到自动化。前端写好源码后,提交就好,压缩等操作,交给平台来做。
  7. 上线后,主要是监控分析。很重要的一块,前端可做的事情不少。

注意:这张图仅是 Infrastructure Sketch. 每个公司,每个团队,应该根据自己的实际情况进行筛选和调整。适合自己的才是最好的。

除了前端基础设施,克军 slide 里还谈到了前端团队的角色定位:“前端开发在设计部门是过去时,现在更适合在技术部门”,深以为然。

最后,回到克军谈到的“转变”:

  1. 前端在做什么:以前做 Web Pages, 现在逐步转向 Web Apps. 在淘宝还不明显,但趋势是无疑的。
  2. 前端在什么地方做:以前是 Browsers, 现在增加了 Mobile, Server 等,前端可做的事情大大延伸了。
  3. 前端怎么做:以前是写 demo, 现在越来越直接开发代码,与服务端通过数据接口来协作。

以上转变,能让前端逐步脱离“页面实现者”的定位,转而变成软件开发的正规军,并踏上创新之路。

Written by lifesinger

September 26, 2011 at 16:09

Posted in Articles