ExtJS从头开始(第2部分)

Posted 周五, 02/09/2018 - 14:03 by admin

欢迎来到ExtJS从头开始博客系列之二。在第一篇博客中，已经从零开始创建了一个应用程序看起来像什么且希望它做什么的的可工作的应用程序，现在，从HTML和CSS角度来审视一下它是如何构建的。

应用程序的源代码可以在这里找到：https://github.com/mgusmano/ExtJSFromScratch/tree/master/Part02/01

要注意的是，在该应用程序中，index.html文件使用了硬编码来指定js和css文件（第5到7行）。

    <!DOCTYPE HTML>
     <html>
       <head>
         <title>Ext JS From Scratch - Part 1, Demo 4</title>
         <link href='theme.css' rel='stylesheet'/>
         <script src='Ext-lite.js'></script>
         <script src='app.js'></script>
       </head>
       <body></body>
     </html>

在创建的应用程序中，这些文件会随着时间的推移不断被添加而发生改变。这些文件将会添加新的功能，例如，添加新的视图。此外，这些文件会随着开发到发布，发布到测试等不同阶段而发生改变，因而，需要一些必要手段来管理这些文件。

在Ext JS,文件管理是通过微加载和Sencha Cmd来实现的。使用Sencha Cmd创建的应用程序的index.html文件是不包含这些文件的，代之以的是使用微加载来下载他们。一个典型的，使用Sencha Cmd创建的Index.html文件包含以下代码：

    <!DOCTYPE HTML>
    <html manifest="">
    <head>
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=10, user-scalable=yes">
      <title>FromScratch</title>
      <!-- The line below must be kept intact for Sencha Cmd to build your application -->
      <script id="microloader" data-app="41afb480-65e8-43c8-9cda-6b7659d5a865" type="text/javascript" src="bootstrap.js"></script>
    </head>
    <body></body>
    </html>

微加载一直很神秘：它是做什么的？它生成哪些文件？何时需要重新生成文件？重新生成了什么文件？好的，就从这个典型的Ext JS从零开始吧，来创建我们自己的微加载!

正如所提到的，使用Sencha Cmd创建的Ext JS应用程序在index.html中只包含1个文件——微加载，以下是它的代码：

    <script id="microloader" data-app="41afb480-65e8-43c8-9cda-6b7659d5a865" type="text/javascript" src="bootstrap.js"></script>

这个单一文件bootstrap.js，就是引导加载文件，或者被称为微加载文件。要注意的是，该文件与用来实现html布局的Bootstrap库没有任何关系。在未来的文章，会讲述如何修改该文件的名称以避免混淆，如microloader.js。在本博文，将使用bootsimple.js作为名称。

同样需要注意的是，微加载做了许多事情，在未来的文章中将会讲述，而现在，暂时只讨论它的文件加载功能。

微加载会从一个清单文件（manifest file）中读取所需的文件，默认是读取bootstrap.json文件。Sencha Cmd会向bootstrap.js文件添加诸如项目所需文件、修改过的主题等等内容。

在更高的层面，微加载会实现以下应用程序所需的功能：

定义全局的Ext变量
读取清单文件(bootstrap.json)
等待氢弹文件读取完成
为js和css文件生成DOM元素
添加css文件的DOM元素到head标记
添加第一个js文件DOM元素到head标记（Ext框架文件）
等级框架文件加载完成
将剩余的js文件的DOM元素添加到head标记
当所有文件加载完成，触发app.js的launch事件

现在，来看看简化版的微加载，正如上面所提到的，将该文件命名为了bootsimple.js，并包含在了index.html文件中。以上处理的每一步都会通过console.log来显示，这样就可以很简单的看到微加载的过程了：https://github.com/mgusmano/ExtJSFromScratch/tree/master/Part02/02

在Ext JS，是使用Sencha Cmd工具来管理浏览器的加载文件，这个是一个免费工具，且正如你所看到的，它还可以用来构建一个初始应用程序，而且在整个应用程序的开发过程中都会使用到它。如果不使用Sencha Cmd，那就会在项目构建或其他许多方法失去最佳实践的体验。

Sencha Cmd可以在这里下载：[url] https://www.sencha.com/products/extjs/cmd-download/[/url]

下面，使用Sencha Cmd来创建一个应用程序。为了构建初始应用程序，需要在终端窗口运行以下命令。在命令中，需要根据自身情况修改Ext JS框架的文件位置。

sencha -sdk <framework folder> generate app -modern -r -starter=false FromScratch ./03

在查看创建的应用程序文件夹内，会看到一些熟悉的文件：bootstrap.js和bootstrap.json（或bootstrap.jsonp，用于某些跨域情况）。这个几个文件是由Sencha Cmd生成的，在未来的文章还将谈论workspace.json、build.xml、bootstrap.css、app.json、ext文件夹和app文件夹。

在当前，只展示了微加载的一小部分功能，如从Sencha Cmd创建的清单文件中动态加载文件。在下一篇文章，将完成的展示如何在整个开发过程中使用Sencha Cmd。以下是使用微加载和Sencha Cmd来构建Ext JS应用程序的其他好处：