LimeJS指南7

# Building

如果你已经完成之前的例子你可能会想在[Firebug](http://getfirebug.com/)或Webkit开发者工具看看内部是怎样的。在结果表格中看到的也许不能够使你满意。甚至Hello World的例子需要许多不同的Javascript文件加载,而且它们的总大小很大。不像[YSlow](http://developer.yahoo.com/yslow/)或者[Google Page Speed](http://code.google.com/speed/page-speed/)说的那样,它应该如何做到,而不是像噩梦一样。

幸好,有一个叫*Closure Compiler*的解决方法,而且当你第一次运行init时它已经下载下来了。你将永远不能散布开发文件(除非是开源的结果)。一旦你已经完成你的工程,只要运行*lime.py*帮手脚本中的*build*命令。这将组合所有需要的Javascript代码到一个文件里。要运行这个文件你可以使用相同的之前的HTML文件,而你不再需要将Closure程序库的base.js包括在内。

build命令吸收了你需要编译的代码的base命名空间。这个命名空间在你的工程的entrypoint代码中需要以‘goog.provide()’定义。用‘-o’参数,你可以定义编译后的版本的路径(默认输出到屏幕)。

#!Bash
bin/lime.py build helloworld -o helloworld/compiled/hw.js

## 高级优化模式

虽然默认build过程除去了所有空格,替换变量并且做了更多事情,但是压缩率可以更高。如果我们开启高级优化,附加的优化,像对于所有变量进行属性名更换和冗余去除也会发生。你的最终代码将更小,但是如果你想用这个模式,你必须遵守一些额外的要求,比如说你不能不一致地使用属性名(在某些地方使用点标记,在其他地方使用字符串标记),而且在静态函数中必须使*@this*对象类型变为*jsdoc*。更多在[here](http://code.google.com/closure/compiler/docs/api-tutorial3.html)。想要使用高级优化模式你只要在build命令后添加‘-a’。

#!Bash
bin/lime.py build helloworld -o helloworld/compiled/hw_adv.js -a

要进一步优化编译的版本的话,你最好用‘gzip’压缩。[Read more](http://code.google.com/speed/page-speed/docs/payload.html#GzipCompression)

### 声明外部变量

声明用于高级编译的外部变量,在build命令中使用‘-e’选项。这个选项可以被多次使用,以防你有多个外部变量文件。

#!Bash
bin/lime.py build helloworld -o helloworld/compiled/hw_adv.js -e helloworld/externs/some_externs.js -e helloworld/externs/more_externs.js -a

## 输出

就像以前说的一样,高级优化模式替换所有变量的名字。这表明你没有办法将你的编译代码与外部代码进行交互(比如你的HTML文件里的上传处理程序)。你可以从你的代码中定义外部变量和输出以应对这个。外部变量表示这个变量/属性将不会被重命名,所以你可以通过任何外部代码与它进行完全的交互。输出表示变量将重命名,但是将有一个连接初始变量的链接被创建。99%的情况你将只需要输出,并同过此方法节约许多空间。

#!JavaScript
goog.exportSymbol(‘helloworld.start‘, helloworld.start);

## 调试

有时候你会发现,按照高级优化模式的教程你已经造成了一个错误,而且你的编译后的版本再也无法在运行,然而你的源码能顺利运行。一般调试技术不能在这里得到应用,因为压缩后的文件是完全不可读的。解决方案是在编译的同时,加一个‘-m/--map’选项。这样编译器做了一个函数地图文件以在初始资源中将压缩后的函数与未压缩的函数链接起来。你需要下载一个Firebug的插件——Closure Inspector以使用地图功能。现在Firebug能够在初始资源中显示哪里出错了。[Read more](http://code.google.com/closure/compiler/docs/inspector.html)

#!Bash
bin/lime.py build helloworld -o helloworld/compiled/hw_adv.js -a -m helloworld/complied/debug_map.txt

## 预加载/离线支持

*预加载支持现在十分有限。将来更多的功能将加入。*

如果只有一个JavaScript文件,你的游戏能够很容易地发布,但是你需要使用的JavaScript文件和资源仍然需要在每次游戏启动时被载入。要想使得玩获得更好的体验,你可以为你的游戏编译预加载文件。这个预加载文件使用现代浏览器的离线支持能力,而且在游戏开始之前下载所用你需要的文件。更好的是,下次这个游戏启动时,它的速度更快,因为它被下载下来了。如果游戏被更新,预加载将首先下载更新文件,然后开始游戏。对iOS设备而言,离线接入是特别重要的,这可以允许人们玩你的web应用游戏,即使当他们没有连接网络。

你可以通过使用‘-p’选项来建立带有预加载功能,以及拥有一个在开始游戏时产生callback的游戏。his callback is the same Javascript function name that you would usually use in the onload handler of your development version.

#!Bash
bin/lime.py build helloworld -o helloworld/compiled/hw_adv.js -a -p helloworld.start

这里是一些使用建立预加载产生的[*.manifest](http://www.w3.org/TR/html5/offline.html#manifests) 文件的规则:

* Manifest文件,在你的web服务器上需要以*text/cache-manifest*的方式使用。[Tutorial](http://www.thecssninja.com/javascript/how-to-create-offline-webapps-on-the-iphone)
* 如果你使用游戏的assets(图片等),你需要将它们手动列在manifest文件中
* 如果你改变一些manifest中的文件文件(没有重新运行build命令),你也需要改变manifest文件。Simplest is to just update the generation time.

时间: 2024-10-12 09:42:04

LimeJS指南7的相关文章

LimeJS指南5

# 动画 动画提供一个随着时间改变元素属性方法.典型的用处就是自然而然地使对象变大或改变它 的位置.要做一个动画,你得新建一个动画对象,然后在目标对象上运行它.不要忘了你得 用‘goog.require()’,因为没有什么动画是自动载入的.默认情况下所有动画运行时长为 1秒钟,你可以用‘setDuration()’的方法来改变它. #!JavaScript var fadehalf = new lime.animation.FadeTo(.5).setDuration(2); ball.runA

LimeJS指南2

# Layout和nodes ## 调整大小和方位变化 在LimeJs中,支持不同的屏幕大小和视口大小的变化很容易,都是自动调好的.在Director的构造中(或在*setSize*方法中),但是这不需要与实际的屏幕大小相适应.你的游戏的实际大小是从你游戏所在的容器DOM元素中得到的.如果容器对象的大小改变,你的游戏也会调整大小以填充容器.注意虽然你的游戏的比例改变,你的游戏的坐标将仍然反应你的做出的舞台大小所以你可以完全忽略它. ## 全屏游戏 默认的工程样板直接在body元素内部初始化Dir

LimeJS指南3

# 形状与填充 ## Sprites 前几章我们学习了关于node的类.虽然node是LimeJS中最重要的类,但是你几乎从不创建一 个node.我们可以创建sprite,sprite是矩形的显示对象.它的外观可以通过方法 *setFill(fill)*来添加,所有node的函数在sprite和其它形状都可以使用.这也包括添加 子sprite. #!JavaScript var redsquare = new lime.Sprite().setSize(50,50).setFill ('#c00

LimeJS指南1

# 时间轴 ## director 一切从director开始.director是一个每个游戏所需要的基本对象,它连接所有网页上的Limejs逻辑到单个地方.如果你来自flash世界你可以把它当做一个舞台,Cocos2d用户可以当做Cocos2d-s自己的director.所有其他人可以把它当做一个前部的控制者. 每一个游戏只有一个director的例图.它操控游戏的全程视口,控制屏幕上的可见物.在你的逻辑涌现之初你得创建一个director的例图.构造函数的方法的参数是container DO

LimeJS指南0

开始 安装 windows用户:请按照README文件的安装向导安装 limeJS的开发需要[Python 2.6+](http://www.python.org/), [Git](http://git-scm.com/download) and [Subversion](http://subversion.apache.org/) or Git-SVN.如果你想使用Closure Compiler,还需要[Java](http://www.java.com/en/) .一旦你有了建好的游戏,就

LimeJS指南6

# 绘图引擎 LimeJS的一个最重要的特性就是支持不同的渲染引擎.也许不应该叫LimeJS一个Canvas 游戏框架,因为Canvas只是它所支持的一个较低的技术.有画图能力的较低的方法集中在在命名空间*lime.Renderer*.不同的渲染可以在任何时候通过方法*setRenderer(renderer)*在任何Node之间切换.现在LimeJS中支持的渲染有*lime.Renderer.DOM*和*lime.Renderer.CANVAS*. ## 为什么需要许多渲染 也许你的第一个想法

LimeJS指南4

# Events 在Lime中,事件的处理与Closure程序库中的差不多,你可以用‘goog.events.listen(src, type, listener, opt_capt, opt_handler)’添加事件监听,用‘goog.events.unlisten (src, type, listener, opt_capt, opt_handler)’取消监听,目标对象(src)就是你经 常用的node元素.事件类型(tpye)是就是你一般情况下添加到你的DOM元素上的东西:通 常有*m

最全解析如何正确学习JavaScript指南,必看!

划重点 鉴于时不时,有同学私信问我:怎么学前端的问题.这里统一回复一下,如下次再遇到问我此问题同学,就直接把本文链接地址发给你了. "前端怎么学"应该因人而异,别人的方法未必适合自己.就说说我的学习方法吧:我把大部分时间放在学习js上了.因为这个js的学习曲线,先平后陡.项目实践和练习啥的,我不说了,主要说下工作之外的时间利用问题.我是怎么学的呢,看书,分析源码.个人这几天统计了一下,前端书籍目前看了50多本吧,大部分都是js的.市面上的书基本,差不多都看过. 第一个问题:看书有啥好处

微信Android接入指南

注:本文为微信Android终端开发工具的新手使用教程,只涉及教授SDK的使用方法,默认读者已经熟悉IDE的基本使用方法(本文以Eclipse为例),以及具有一定的编程知识基础等. 1.申请你的AppID 请到 开发者应用登记页面 进行登记,登记并选择移动应用进行设置后,将该应用提交审核,只有审核通过的应用才能进行开发. 2.下载微信终端开发工具包 开发工具包主要包含3部分内容:(其中,只有libammsdk.jar是必须的) - libammsdk.jar(每个第三方应用必须要导入该sdk库,