zoukankan      html  css  js  c++  java
  • enyo官方开发入门教程翻译一Getting Started之Starting Enyo App Development

    开发环境

         作为一个Enyo开发者,你可以自由选择开发平台和编码工具。你可以使用windowsmaclinux等环境,只需要一个文本编辑器来编写enyo代码即可。所有的文本编辑器都满足这一需求,包括免费的产品如windows上的notepad或者mac上的textwrangler

          在你的开发过程中可能需要web浏览器来测试代码。尽管测试时可以直接从本地文件系统加载文件到浏览器,我们强烈建议你从http服务器访问应用。这种方法具有多种优势,包括从远程设备进行测试的能力。

          如果你现在没有可运行的本地web服务器,你可以非常方便的安装Apache/MySQL/PHP软件包,例windowsWAMPStackmacMAMP

          注意:由于安全限制,如果你选择使用chrome开发并且直接从文件系统加载你的app,你需要在浏览器启动命令行加上加上“--allow-file-access-from-files”。在windows上,你可以直接创建一个chrome.exe的快捷方式然后把语句加在快捷方式的末尾。然后使用快捷方式启动浏览器。在maclinux上也可以使用类似的方法。

    获取enyo源码

          注意:可以从 BootplateDupliforking获取enyo源码和尽快开始编写app的文档教程。这篇文章提供了更详细的信息,你可以在使用bootplat templat之前通读一次并从中受益。

    Enyo的源码可以从enyojs.com下载zip文件或者从githubenyojs 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.jsApp.csspackage.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可以良好的管理应用的文件和其中的依赖关系)。

     

  • 相关阅读:
    第02组 Alpha冲刺(2/6)
    第02组 Alpha冲刺(1/6)
    第02组 团队Git现场编程实战
    第02组 团队项目-需求分析报告
    团队项目-选题报告
    第二次结对编程作业
    第一次结对编程作业
    第2组 团队展示(组长)
    Exchange 2013 中的 OAB (脱机通讯簿)以及如何管理
    vmware esxi 查看网卡、Raid卡驱动
  • 原文地址:https://www.cnblogs.com/waimai/p/2849630.html
Copyright © 2011-2022 走看看