本文作者:IMWeb 黄龙 原文出处:IMWeb社区 未经同意,禁止转载
什么是AS3JS?
AS3JS是ActionScript 3.0到JavaScript的转换器,它基本上可以让你使用ActionScript 3.0语言编写客户端和服务器端JavaScript应用程序。AS3JS是不是一个框架。此工具也没有设计成用于转换的Flash到HTML5解决方案(虽然它可能会帮助!)。现在AS3JS纯粹是转换器,但是你可以自由的扩展它,如果你愿意,因为它是开源的。
github项目地址:https://github.com/cleod9/as3js
它是如何工作的?
AS3JS通过正则表达式解析ActionScript类文件,并将它们转换成JavaScript可以理解的文本。这意味着所有的AS3特定关键字会被去除,以及将代码重新组织成可在一个JS环境中运行的单个文件。
源代码的输出是可读的,因为它类似于原始AS3代码。没有复杂的结构。最关键的一点要记住的是,AS3,其核心是JavaScript的语法糖。这意味着,你可以选择你想要的AS3的功能,以用于项目。
安装和使用
交代一句,$符号不用输入,前提是你装了node
代码语言:javascript复制$ npm i -g as3js
可以像下面这样使用它
代码语言:javascript复制$ as3js -src ./path/to/as3/source -o output.js
在FlashDevelop中使用它
第一步:新建一个项目,选择Empty Project
如图所示:
第二步:配置项目
1.为了方便目录管理,在目录下新建src和bin目录,用于存放源码和编译后的文件
2.在src目录下新建Main.as
代码语言:javascript复制package src
{
public class Main
{
public function Main()
{
}
}
}
发现问题了么?package是src。解决的办法是先把FlashDevelop关掉,再在项目目录里面找到"项目名.as3proj"
文件,用其他编辑器打开(不要双击好么)。找到图中所示位置把<class path="." />
改成<class path="src">
3.删掉Main.as然后再创建Main.as。再在里面写上console.log("Hello world!");
package
{
public class Main
{
public function Main()
{
console.log("Hello world!");
}
}
}
4.在项目中新建make.bat
代码语言:javascript复制as3js -src src -o bin/output.js -e new:Main
5.在bin目录中新建index.html文件
代码语言:javascript复制<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>AS3JS测试</title>
</head>
<body>
<script src="output.js"></script>
</body>
</html>
6.配置项目属性
1> 在输出选项卡下如图配置
2> 在编译现象卡下如图配置
7.按F5运行,打开控制台并没有输出‘hello world’。原因是这个as3js目前这个版本很弱,暂时不支持顶级的包 或者是说TM就是个bug。我们可以把Main.as修改一下放到src/app目录下。顺便我们还需要修改一下make.bat
代码语言:javascript复制as3js -src src -o bin/output.js -e new:app.Main
8.按F5运行,打开控制台hello world
是不是出来了。
接下来我们看一下编译出的output.js或许你就明白了刚刚为啥不能输出hello world;
output.js
代码语言:javascript复制(function ( options ) {
options = options || {};
var AS3JSUtils = function () {};
AS3JSUtils.getDefaultValue = function getDefaultValue(value, fallback) {
return (typeof value != 'undefined') ? value : fallback;
};
AS3JSUtils.createArray = function (size, val) {
var arr = [];
for (var i = 0; i < size; i ) {
arr.push(val);
}
return arr;
};
if (typeof Object.create !== 'function') {
Object.create = function (o) {
function F() {}
F.prototype = o;
return new F();
}
};
var i, j;
var packages = {
"app": {
Main: {
compiled: false,
source: function ( module ) {
var Main = function() {
console.log("Hello world!");
};
module.exports = Main;
}
}
}
};
var imports = function ( packageName, className ) {
if (!packages[packageName][className].compiled) {
packages[packageName][className].compiled = true;
packages[packageName][className].module = { exports: null, inject: null };
packages[packageName][className].source(packages[packageName][className].module);
}
return packages[packageName][className].module.exports;
};
for (i in packages) {
for (j in packages[i]) {
imports(i, j);
}
}
for (i in packages) {
// Execute the injection functions
for (j in packages[i]) {
if (typeof packages[i][j].module.inject === 'function') {
packages[i][j].module.inject();
}
}
}
if (options.entryPackage && options.entryClass) {
var entryPoint = imports(options.entryPackage, options.entryClass);
if (options.entryMode === "new") {
new entryPoint();
} else if (options.entryMode === "exports" && typeof module !== 'undefined') {
module.exports = entryPoint;
}
}
})({ entryPackage: "app", entryClass: "Main", entryMode: "new" });
接下来可以愉快的玩耍了 helloworld工程地址:https://github.com/as3long/as3js_helloworld