[Ext JS 7]的开发模式| 成都西华升腾科技有限公司

Ext JS开发大全

CmsWing

[Ext JS 7]的开发模式

## [Ext JS 7]的开发模式
### 开发模式的分类及演进
早期的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作为库使用
使用该模式进行开发之前，先看一下官网下载的Ext JS的SDK（开发工具包）的解压目录结构：
![](/upload/picture/2022-09-30/upload_272db3095b9dac6c6aecd1736589fdb0.png)
build目录是Ext JS的JS源码文件和SCSS样式文件（SCSS是CSS的预处理语言，作用是可以对CSS样式进行编程）的编译结果的目录。
JS源码编译结果
JS编译后的文件位于build的直接子目录中，包括了多种选择的js文件，如下图：
![](/upload/picture/2022-09-30/upload_fca3719dabc7454c8779eb593970d61e.png)
ext.js , 最小化的文件，只编译基本的框架类，其他的类需要再动态导入
ext-all.js， 包含了所有功能，文件做了压缩，去除了注释和空行
ext-all-debug.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-09-30/upload_349f6d8beeb73d5fe9d057c6631c77b1.png)

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

以上代码的大致如下：
```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
<!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>导入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>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<script>        
Ext.application({
name:'MyApp',
launch: function (){
Ext.create('Ext.container.Viewport',{
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。

购物车

0 ITEMS ON YOUR CART

Ext JS开发大全

[Ext JS 7]的开发模式

网站导航