[Ext JS]开发模式及快速测试方式| 成都西华升腾科技有限公司

Ext JS开发大全

CmsWing

[Ext JS]开发模式及快速测试方式

## 开发模式及快速测试方式
### Ext JS 开发模式的分类及演进
Ext JS开发模式的演进历程基本就代表了Web开发模式演进的大致方向，即：
![](/upload/picture/2022-10-10/upload_7dfcda1e60d0cea280e6197ceee3300d.png)
早期的Ext JS类似于JQuery， 是一个前端的组件库， 开发方式是导入一个JS的文件和一个CSS的样式文件。随着前端框架的发展，Ext JS也逐步向框架层级靠近，提供了类似前端流行的 NPM（模块管理）以及WebPack（依赖管理和打包）和Node.js（相当于有一个Web服务器）的完整功能，这些都是通过Sencha本身提供的CMD工具实现的。
通过CMD工具，可以做到：
创建一个项目
编译项目
启动项目
于是乎， Ext JS的应用开发主要有两种开发模式：
开发模式一： 在项目中将Ext JS作为库导入使用， 除了Ext JS之外，可能还使用了其他库。
开发模式二： 使用Sencha CMD工具创建Ext JS类型的项目，遵循该项目的目录结构和开发标准。
此外， Ext JS还完整的提供了对npm的支持，可以像导入其他Web包的方式一样导入Ext JS的组件包。
### 开发模式一： 将Ext JS作为库使用
使用该模式进行开发之前，先看一下官网下载的Ext JS的SDK（开发工具包）的解压目录结构：
![](/upload/picture/2022-10-10/upload_1891531a8a8f09eed8f9fec3cb417693.png)
这里重点看build目录，该目录是Ext JS的JS源码文件和SCSS样式文件（SCSS是CSS的预处理语言，作用是可以对CSS样式进行编程）的编译结果的目录。
JS源码编译结果
JS编译后的文件位于build的直接子目录中，包括了多种选择的js文件，如下图：
![](/upload/picture/2022-10-10/upload_49099074e4c451f7065bcf367089b3fa.png)
ext.js , 最小化的文件，只编译基本的框架类，其他的类需要再动态导入
ext-all.js， 包含了所有功能，文件做了压缩，去除了注释和空行
ext-all-debug.js，包含了所有功能，没有压缩，可以在浏览器进行源码调试
ext-all-rtl.js rtl : right to left , 支持右对齐语言的开发（比如阿拉伯语，汉语的习惯是从左到右）。
除了以上的，还有沙箱安全的、现代风格样式等类型的编译版本。
样式文件编译结果
Ext JS使用SCSS开发CSS，当然也可以直接使用CSS。SCSS开发的样式源码文件是以.scss为后缀，这个类型的文件最终都需要编译成css文件使用，区分classic（经典）和modern(现代)两种风格，分别存放对应的目录中，以classic风格为例，编译后的css文件的地址位于build\classic下，每种样式主题对应一个目录，比如经典风格、neptune主题的样式文件编译的结果位于build\classic\theme-neptune\resources目录中，如下图：
scss与sass介绍
![](/upload/picture/2022-10-10/upload_5f3aca1e6520f5c693a80d87fbe09806.png)

编译的样式文件同样分为多种类型，有压缩版和未压缩版的，也有支持从右到左布局的（rtl）。
### 导入JS和CSS文件后使用Ext JS组件
在使用其他JS前端库和框架的项目中，通过导入编译后的JS和CSS文件，可以在页面的部分区块使用Ext JS组件，以“按钮”， 为例， 示例页面如下：
![](/upload/picture/2022-10-10/upload_d1f4e58c5de0a385518df17f30f4dc44.png)

以上代码的大致如下：
```html
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8">
<meta name="author" content="ChenXueming,https://oscar.blog.csdn.net/">
<meta name="copyright" content="© 2020 ,Chen Xueming">
<title>Ext JS作为库使用示例</title><link rel="stylesheet"type="text/css" href="ext/classic/theme-neptune/resources/theme-neptune-all.css">
<script type="text/javascript" src="ext/ext-all.js"></script>
<script type="text/javascript" src="ext/classic/theme-neptune/theme-neptune.js"></script><meta http-equiv="X-UA-Compatible" content="IE=edge">
<script>        
Ext.onReady(function (){  
Ext.create(Ext.button.Button,{  
text:'我是Ext JS的按钮',         
renderTo:'mydiv3'})});
</script>
</head>
<body>
<div id="mydiv1">
<input type=button value="我是原生HTML按钮">
</div><br><br>
<div id="mydiv2">我是其他JS库组件（略）</div>
<br><br>
<div id="mydiv3"></div>
</body>
</html>
```

对以上代码说明：
Ext.onReady() 是页面载入完毕，相当于JQuery的$(document).ready()和原生HTML的window.onload。因为只有载入完成，才能使用DOM中的元素（这里是mydiv3）。
Ext.create() :创建Ext JS的组件
renderTo是渲染的目的地。
以上文件可以在如下地址找到：https://github.com/osxm/demoworkspace/blob/master/extjs/ext7-demo-library/index.html
使用Ext.application创建Ext JS类型的应用
除了对HTML的DOM对象进行渲染， Ext JS也提供了Ext.application() 用来创建完整Ext JS的应用，这种方式基本就是完全使用Ext JS组件类，而不是部分的小打小闹。示例如下：
```html
<html>
<head>
<metacharset="UTF-8">
<meta name="author"content="ChenXueming,https://oscar.blog.csdn.net/">
<meta name="copyright"content="© 2020 ,Chen Xueming">
<title>导入JS和CSS的Ext JS应用title>
<link rel="stylesheet"type="text/css"href="ext/classic/theme-neptune/resources/theme-neptune-all.css">
<script type="text/javascript"src="ext/ext-all.js">script>
<script type="text/javascript"src="ext/classic/theme-neptune/theme-neptune.js">
<script><metahttp-equiv="X-UA-Compatible"content="IE=edge"><script>   
Ext.application({         
name:'MyApp',          
launch:function(){      
Ext.create('Ext.containerViewport',{  
renderTo: Ext.getBody(),     
html:"这是一个Ext JS的应用"});}});</script>
<head>
<body>
</body>
<html>
```

这种使用方式基本很少使用，取而代之是配合Sencha CMD 开发，也就是下面要介绍的。
### 开发模式二： 将Ext JS作为框架，开发Ext JS类型的项目
使用Ext JS作为框架，配合Sencha CMD创建项目骨架，编译项目和启动运行项目。 具体参见：
Ext JS开发基本环境准备与项目创建
### 开发模式的选择
Ext JS 4以及更旧的版本的项目， 只能维持导入文件作为库开发；Ext JS作为一站式的Web开发框架，基本提供了所有的应用系统中可能使用到的前端组件，所以：
新项目，使用开发模式二。按照Sencha CMD，遵循Ext JS的框架开发。团队需要一个Ext JS的熟练人员负责创建项目、选择MVC以及MVVM开发模式、制定相关的规范和开发方式以及项目的整体维护，其他开发人员只要属性JS和面向对象的编程思想就够了，按照API分模块、分层（MVC/MVVM）进行开发。
旧项目，看中了Ext JS的部分组件要导入使用。建议是选择最少的框架基本框架代码以及对应的组件代码，编译最小化的js库文件使用。
新组件类的开发阶段，如果在应用框架中编码和测试，需要启动项目才能看到效果，而且如果这个组件位于应用的较深层级的目录，需要点击好几次才能点到，势必影响开发效率，可以借鉴模式一的方式，快速开发。验证完成后再放到框架对应的目录中。类似示例：https://github.com/osxm/demoworkspace/blob/master/extjs/ext7-demo-app/demo/core-concept/image-comp.html。
### 快速测试方式
学习一门语言或框架最好的学习方式就是边学边练，Ext JS相关代码练习方式起码有三种：
在项目中，按照标准的目录和方式，在MVC或MVVM对应的文件中编码和练习
本地的单一HTML文件中练习。不同类型的类定义在同一个HTML文件中，
在线的单一HTML文件中练习。
### 方式1： 标准方式
标准的方式类似第1章的开发示例，在model目录下定义模型类，在store目录下定义数据仓库类， 在view目录下定义视图类。
编写完成，使用sencha watch app命令查看效果。
这是标准的开发方式，对于功能简单或是类较少的应用很方便， 但是如果组件很多， 某个组件需要从主页进入后，点击数次才能显示的状况，显然是比较耗费时间和低效的。
### 方式2：本地单一文件
本地单一文件就是将相关代码全部放在一个 .html文件中，在不开启服务器的状况下，直接使用浏览器打开本地文件就可以显示效果。如果对Ext JS的早期版本或是运行机制比较了解，就很容易理解这种方式。
该方式主要是需要在html页面中导入汇总的js和CSS文件。以第一章的示例项目为例，在演示的文件放在项目根路径的demo子目录中，在该子目录中按照主题再拆分一层目录，结构如下：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IUTurJVp-1606259663073)(images/screenshot_1587304421411.png)]
demo.html 是模板文件， 需要测试或练习直接复制该文件并重命名。内容如下：
ExtJS7 Demo

该文件也可以到以下地址获取：
https://github.com/osxm/demoworkspace/blob/master/extjs/ext7-demo-app/demo/template/demo.html
### 方式3：在线单一文件
在线单一文件的方式与本地类似，只是这个服务由相关网站提供，在线练习和查看效果。这些网站整合了Ext JS框架， 比如 https://jsrun.net/。
示例如下：
![](/upload/picture/2022-10-10/upload_e750d6070c34eff8ca8bd129305cfa6b.png)
这里可以选择Ext JS框架及版本，页面包括四个区块： HTML代码块部分、JavaScript代码块、CSS代码块以及页面的最终效果。
在HTML、JavaScript和CSS上分别输入对应的代码，就可以实时在页面查看效果了。
不足的是在这个网站目前支持的Ext JS的版本是5.1.0, 不过对于Ext JS的大部分特性和功能还是可以测试的。

购物车

0 ITEMS ON YOUR CART

Ext JS开发大全

[Ext JS]开发模式及快速测试方式

网站导航