基于Ext JS的模块化应用框架搭建及开发| 成都西华升腾科技有限公司

Ext JS开发大全

CmsWing

基于Ext JS的模块化应用框架搭建及开发

## 基于Ext JS的模块化应用框架搭建及开发
### Ext JS模块化开发
早期基于Ext JS的Web开发方式，是在HTML中引入JS和CSS文件，典型的就是引入 ext-all.js 这样的文件。ext all 包含的内容很多， 有基本的核心组件、扩展组件以及图表等其他组件。如果应用中不需要使用这些包，则导入全部的Ext JS包显然就是浪费了网络资源，同时应用的启动速度也大打折扣。
在Sencha Cmd工具之前，可以使用YUI Compressor编译和压缩指定的组件；在Sencha Cmd出现之后，编译选定包的代码就变得容易了。
Ext JS的发展陆续追谁了最新的前端技术，包括Node.js 和模块化开发等，具体包括：
代码结构及开发模块化
模块化编译
模块化加载，也就是动态加载
### 拆分模块的应用
在一般的应用中，比如互联网网站或是简单的应用系统，基本上创建一个应用，在该应用目录下开发即可，不需要拆分模块； 但如果是复杂的应用，类似使用Ext JS创建大型的应用系统，比如ERP或是PLM系统，　这些系统包含的模块很多，对于某些角色的用户，可能只会使用到一个或几个模块的功能，　不拆分模块的状况下，编译后的js 文件会达到几兆乃至十几兆，在该状况下，应用的首页的初始化就会很慢，需要一分钟乃至数分钟才能显示。这个时候，就需要引入模块的动态加载功能。
此外， 在应用较大时，拆分模块进行开发对于代码的分发和管理也是有很多好处的。
根据是否拆分和共享核心模块， 模块的结构分为两种：
在应用下创建核心模块和业务模块
![](/upload/picture/2022-10-09/upload_fe7dfaa2a70c4acb505ba5a09a967f5b.png)

不共享核心模块的状况下，将核心模块和业务模块创建在同一个Sencha Cmd应用中，业务模块继承自核心模块。
核心模块包含的内容有：
应用的布局（包括导航栏、工作区等）
应用的共用组件（基本是对Ext JS组件的封装或是业务需要开发的共用组件）
便捷的共用方法
其他
核心模块在应用启动时加载， 业务模块根据需求加载。
分离核心模块 并创建业务模块。
分离核心模块比较适用将Ext JS作为平台框架， 供多个系统导入使用，模块拆分的结构如下：
![](/upload/picture/2022-10-09/upload_87518313b457b12b98603686293e0e7e.png)

分离和共享核心模块， 核心模块使用单独的应用开发， 开发完成之后提交到中心库，开发人员拉取核心模块。
模块加载的行为与上面类似。
### 模块化应用的搭建步骤
这里以应用名称MyApp为例，在其下创建的模块包含：
myapp-core 应用核心模块
myapp-foo 某个业务模块
源码使用Git控管。
不分离核心模块与业务模块的场景
分离核心模块的场景稍微复杂些，不分离核心模块相对简单，搭建应用框架的步骤如下：
使用Cmc创建Ext JS应用
在当前目录下创建MyApp的Cmd应用。
```
sencha -sdk D:\install\ext7 generate app  MyApp myapp
```

MyApp 是应用的命名空间， 相当与包名， 习惯首字母大写
myapp 是项目目录名称
出现以下页面代表创建成功。

在应用下创建核心模块
```
sencha generate package myapp-core
```

以上命令会将创建的包加入应用的依赖

在应用下创建业务模块的包
```
sencha generate package myapp-foo
```

这里同样会将创建的包加入应用的依赖，但是这里需要做一些修改：
– 加入package-loader模块， 该模块是Ext JS提供
– 将myapp-foo移到uses配置下， 实现动态加载
```javascript
"requires":["font-awesome",   
"package-loader",   
"myapp-core"],    
"uses":["myapp-foo"],
```

开发环境实时开发
```
sencha app watch --uses
```

生产环境编译
```
sencha app build -u production
```

分离核心模块
核心模块可以有独立的命名空间，这里以ComApp为例。
创建核心模块的应用
```
sencha -sdk D:\install\ext7 generate app  ComApp comapp
```

购物车

0 ITEMS ON YOUR CART

Ext JS开发大全

基于Ext JS的模块化应用框架搭建及开发

网站导航