开发环境
作为一个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可以良好的管理应用的文件和其中的依赖关系)。