HelloLimeJS 只有兩個檔案，HelloLimeJS.html 與 HelloLimeJS.js。
前面忘了講，LimeJS 必須使用 HTML 5，也就是說瀏覽器必須支援 HTML 5 才能正確執行 Lime JS，README.md 裡提到瀏覽器的支援狀況。
##Browser support: - *Current:* Chrome, Safari 5, Firefox 3.6+, Opera, IE9, Mobile Safari - *Soon:* Android, Blackberry Playbook - *Maybe:* WebOS特別注意的是 IE 只有 IE 9。
就來看看 HelloLimeJS.html 吧。
<!DOCTYPE HTML> <html> <head> <title>HelloLimeJS</title> <script type="text/javascript" src="../closure/closure/goog/base.js"></script> <script type="text/javascript" src="HelloLimeJS.js"></script> </head> <body onload="HelloLimeJS.start()"></body> </html>簡單到不行，兩個 javascript 和一個 onload。
LimeJS 是架構在 Google Closure Library 之上，所以得先加入 base.js，然後加入本身使用的 js，所以 onload 呼叫的 function 自然是定義在 HelloLimeJS.js 裡。
// set main namespace
goog.provide('HelloLimeJS');
// get requirements
goog.require('lime.Director');
goog.require('lime.Scene');
goog.require('lime.Layer');
goog.require('lime.Circle');
goog.require('lime.Label');
goog.require('lime.animation.Spawn');
goog.require('lime.animation.FadeTo');
goog.require('lime.animation.ScaleTo');
goog.require('lime.animation.MoveTo');
// entrypoint
HelloLimeJS.start = function(){
var director = new lime.Director(document.body,1024,768),
var scene = new lime.Scene(),
// ...略過內容
director.makeMobileWebAppCapable();
// set current scene active
director.replaceScene(scene);
}
// this is required for outside access after code is compiled in ADVANCED_COMPILATIONS mode
goog.exportSymbol('HelloLimeJS.start', HelloLimeJS.start);
先看架構的部份，Google Closure 特色之一就是提供了像是 Java package 的 Namespace，所以第一行先宣告這個專案（或這個檔案）的 namespace，接下來也像 Java 一樣 import 需要用到的 class，只是這邊是叫做 require 與 namespace，接下來就是程式的起點 HelloLimeJS.start() ，也就是 HelloLimeJS.html 裡 onload 所呼叫的。LimeJS 有點像是 Flash，由一個導演（lime.Director）控制一堆場景（lime.Scene），適時加入一些聲光效果。
先 new 個 lime.Director，指定使用的 Dom 物件與長寬，再 new 個 lime.scene，在 scene 裡加入內容，然後呼叫 director.replaceScene() 就開播了。
最後一行請看 LimeJS Project 快速瀏覽，重點就是最佳化 Javascript 時，會將變數與 function 名稱縮到最短，但從 HTML 呼叫的 function 卻不可以被改名，要不然就呼叫不到了，所以這邊就是在串這一段的。
---
---
---
沒有留言:
張貼留言