岁月如歌

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

通过 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

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

查看 UglifyJS 的源码,发现内部提供了 ast_walker 方法。我们可以简单封装成 Ast.js

var uglifyjs = require('uglify-js');
var pro = uglifyjs.uglify;
var Ast = exports;

Ast.walk = function(ast, type, walker) {
  var w = pro.ast_walker();

  var walkers = {};
  walkers[type] = function() {
    walker(this);
  };

  ast = w.with_walkers(walkers, function() {
    return w.walk(ast);
  });

  return ast;
};

这样,获取依赖信息的代码可以调整为:

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

  Ast.walk(ast, 'stat', function(stat) {
    if (stat.toString().indexOf('stat,call,name,define,') !== 0) {
      return stat;
    }

    if (++times > 1) {
      throw 'Found multiple "define" in one module file. It is NOT allowed.';
    }

    // stat[1]:
    //     [ 'call',
    //       [ 'name', 'define' ],
    //       [ [Object], [Object], [Object ] ] ]
    var argsAst = stat[1][2];
    var depsAst;

    // argsAst:
    //   [ [ 'string', 'a' ],
    //     [ 'array', [ [Object], [Object] ] ],
    //     [ 'function', null, [], [] ] ]
    argsAst.some(function(item) {
      // NOTICE: the deps MUST be literal, it can NOT be a reference.
      if (item[0] === 'array') {
        depsAst = item[1];
        return true;
      }
    });

    if (!depsAst) {
      return stat;
    }

    // depsAst:
    //   [ [ 'string', 'b' ], [ 'string', 'c' ] ]
    deps = [];
    depsAst.forEach(function(item) {
      if (item[0] === 'string') {
        deps.push(item[1]);
      }
    });

    return stat;
  });

  return deps;
}

详见:Dependences.js. 功能更可靠,可读性也更好了。

还可以通过 UglifyJS 隐藏的第三参数来让 AST 带上 type/value/start/end 等信息:

var ast = jsp.parse(code, false, true);

通过 ast_walker 来操作 AST, 可以完成很多意想不到的工作。比如获取某个闭包里的所有局部变量、删除某个特定函数、或者给所有 constructor 添加上调试信息等。老赵的 Jscex 也是基于这一原理,有兴趣的可以深入挖掘。

Advertisements

Written by lifesinger

September 29, 2011 at 13:34

Posted in Articles

2 Responses

Subscribe to comments with RSS.

  1. 很高兴看到国内的同学也开始用上ast了。
    我们公司的js的unit 测试就是用ast自动生成的,不知道射雕同学这方面还有什么研究啊?

    yanchuanli

    October 3, 2011 at 10:30

    • 用 AST 做 private 方法的单元测试,这想法真不错,楼上的一句话,解决了一直困扰我的一个问题,呵呵。

      目前对 AST 还没什么研究,只看了下 UglifyJS 的源码,用来实现模块依赖的分析提取、和模块文件的合并打包,其他方面还没实践过。

      多交流^o^

      lifesinger

      October 3, 2011 at 12:05


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s