作為一個Enyo開發者,你可以自由選擇開發平臺和編碼工具。你可以使用windows、mac、linux等環境,只需要一個文本編輯器來編寫enyo代碼即可。所有的文本編輯器都滿足這一需求,包括免費的產品如windows上的notepad或者mac上的textwrangler。
在你的開發過程中可能需要web瀏覽器來測試代碼。盡管測試時可以直接從本地文件系統加載文件到瀏覽器,我們強烈建議你從http服務器訪問應用。這種方法具有多種優勢,包括從遠程設備進行測試的能力。
如果你現在沒有可運行的本地web服務器,你可以非常方便的安裝Apache/MySQL/PHP軟件包,例如windows的WAMPStack或mac的MAMP。
注意:由于安全限制,如果你選擇使用chrome開發并且直接從文件系統加載你的app,你需要在瀏覽器啟動命令行加上加上“--allow-file-access-from-files”。在windows上,你可以直接創建一個chrome.exe的快捷方式然后把語句加在快捷方式的末尾。然后使用快捷方式啟動瀏覽器。在mac和linux上也可以使用類似的方法。
獲取enyo源碼注意:可以從 Bootplate和Dupliforking獲取enyo源碼和盡快開始編寫app的文檔教程。這篇文章提供了更詳細的信息,你可以在使用bootplat templat之前通讀一次并從中受益。
Enyo的源碼可以從enyojs.com下載zip文件或者從github的enyojs project下載。
(后面講解在git客戶端中使用命令行獲取enyo的部分省略掉了。譯者注)
Enyo的核心和插件
不管你使用哪種方式獲取源碼,如果你要開發一個應用,你必須將enyo的核心源碼嵌入到app中。為了方便,源碼應放在應用目錄下的enyo文件夾下。
由于enyo的核心庫是開發的基礎,多思考enyo項目底層的代碼也是有益處的。一個典型的enyo應用通常由兩層構成,一個由可以重用的類庫或插件組成,另一個是實際應用的具體源碼。
插件代碼可能來自enyo項目本身(onyx工具類庫等)或其他開源社區,或其他開發者的努力成功。方便起見,插件應當放在lib目錄下。我們下面給出app的結構
<app>
enyo/
lib/
注意:更詳細的關于應用結構的討論在 Managing Your Project一章。
Starting an App
現在萬事俱備,開始寫一個enyo應用。你的第一個應用可以是一個簡單的HTML文件。
例如,我們在可以在index.html文件寫入以下代碼來中創建一個HelloWorld應用。
<!doctype html>
<html>
<head>
<title>Enyo Hello</title>
<!-- load debug version of Enyo -->
<script src="enyo/enyo.js"></script>
<!-- load debug plugin -->
</head>
<body>
<script>new enyo.Control({content: "Hello From Enyo"}).write();</script>
</body>
</html>
截圖:
現在我們的app文件夾看起來是這樣的
<app>
enyo/
lib/
index.html
如果我們要使用插件,我們可以直接使用<script>標簽加載。
<!doctype html>
<html>
<head>
<title>Enyo Hello</title>
<!-- load debug version of Enyo -->
<script src="enyo/enyo.js"></script>
<!-- load debug version of plugin -->
<script src="lib/aPlugin/source/package.js"></script>
</head>
<body>
<script>
// make a custom Control based on CoolKind from aPlugin
enyo.kind({
name: "App",
kind: "aPlugin.CoolKind",
coolness: true
});
new App().write();
</script>
</body>
</html>
注意我們加載了一個package.js文件。Enyo的資源可以使用package.js文件作為manifest(用來描述哪些插件需要加載)。通常,它是一個scripts和stylesheets的列表。(package.js在它單獨的一章里有更詳細的討論)
Factoring into Files
在開發的早期階段,通常并不會直接在html文件里創建大量的應用。然而,我們很快會發現單一的文件變得很難管理,我們希望把它的內容拆分放在各個單獨的文件里。
Enyo框架通常把應用的源碼放在一個source子文件夾中。這個source目錄通常有一個包含應用源碼的app.js文件和一個app.css的樣式文件。
一旦應用源碼和樣式文件被分解出來,我們的項目結構就變成這樣
<app>
enyo/
lib/
source/
App.js
App.css
index.html
Index.html文件包含下面的內容
<!doctype html>
<html>
<head>
<title>Enyo Hello</title>
<!-- load debug version of Enyo -->
<script src="enyo/enyo.js"></script>
<!-- load debug version of plugin -->
<script src="lib/aPlugin/source/package.js"></script>
<!-- load our application css -->
<script src="source/App.css"></script>
<!-- load our application source -->
<script src="source/App.js"></script>
</head>
<body>
<script>new App().write();</script>
</body>
</html>
注意應用變得復雜起來,<head>部分包含的文件也變得復雜起來。
package.js
我們原來看到在加載的插件中aPlugin有一個 package.js文件,現在創建一個有意義的package.js文件:
enyo.depends(
"$lib/aPlugin/source",
"App.css",
"App.js"
);
這個文件要注意的一些地方:
$lib:enyo使用$作為別名以簡化路徑。默認還有兩個類似的別名,$enyo指向enyo的根文件夾,$lib指向lib文件夾
加載插件時會為插件創建一個別名。在加載package.js文件后,我們可以使用$aPlugin別名。這樣的別名在使用指向文件夾的static部分時很有用。
對包含package.js的文件夾使用非絕對路徑,所有App.js和App.css在package.js的相同文件夾下。
如果你的應用增加文件,確保將新的文件添加到package.js中。
Ready for Growth
現在我們的HTML文件:
<!doctype html>
<html>
<head>
<title>Enyo Hello</title>
<!-- load debug version of enyo -->
<script src="enyo/enyo.js"></script>
<!-- load debug version of application-->
<script src="source/package.js"></script>
</head>
<body>
<script>new App().write();</script>
</body>
</html>
我們的應用文件結構:
<app>
enyo/
lib/
source/
MyView.js
App.css
App.js
package.js
index.html
在項目結構這一點上,我們的應用程序的結構類似于Managing Your Project 和bootplate template 中的應用架構。這個階段是通過現在的設置使項目能夠擴展到任意層次的復雜性。在source(或其中的子目錄)中可以添加和排列源文件,可以添加額外的庫,項目的正確設置是部署前優化(個人理解:使用package.js可以良好的管理應用的文件和其中的依賴關系)。
新聞熱點
疑難解答