小说_Ext JS的模塊化開(kāi)發(fā)（Package）| 成都西華升騰科技有限公司

Ext JS開(kāi)發(fā)大全

CmsWing

Ext JS的模塊化開(kāi)發(fā)（Package）

## Ext JS的模塊化開(kāi)發(fā)（Package）
### Ext JS中的生產(chǎn)環(huán)境編譯
在使用 sencha app build production命令構建生產(chǎn)環(huán)境時(shí)，Sencha CMD會(huì )在應用目錄下創(chuàng  )建 “build/production/應用名” 子目錄，并將構建的結果放置與此目錄下。舉例來(lái)看：
![](/upload/picture/2022-09-27/upload_603822984dc4f5175bedf6e81dc18dd7.png)

生產(chǎn)環(huán)境的JS源碼編譯結果會(huì )集中到一下兩個(gè)文件：
index.html
app.js
整個(gè)的機制就是： CMD會(huì )將所有的源碼進(jìn)行去注釋、去空格等操作進(jìn)行編譯，最后匯總到一個(gè)html 和 js 文件中。這些編譯的結果包括哪些部分呢？
首先包含時(shí)應用中自己編寫(xiě)的源碼。
其次包括框架本身的核心代碼。
最后還包括引入的非核心代碼的其他包。
### Ext JS中的包（package）
Ext JS框架本身就是基于包（Package）開(kāi)發(fā)的， 可以下SDK的目錄結構
![](/upload/picture/2022-09-27/upload_f9868aafdbbf3025c5d7ef325571b47f.png)

以下面兩面兩個(gè)包來(lái)看：
core 框架核心代碼
charts Ext JS的圖庫代碼
### 為什么要拆分包開(kāi)發(fā)？
拆分不同的包開(kāi)發(fā)的目的就是實(shí)現前端的模塊化和組件化。在開(kāi)發(fā)的應用中，可以根據需要加載指定的模塊。這個(gè)思想已經(jīng)很接近基于Node.js和npm的開(kāi)發(fā)方式了。
拆分不同包的好處， 舉例來(lái)說(shuō)有的應用壓根不會(huì )使用到繪圖相關(guān)的API，　如果不拆分包開(kāi)發(fā)所有的代碼全部打包成一塊，在頁(yè)面訪(fǎng)問(wèn)時(shí)這些代碼需要首先下載到客戶(hù)端機器，雖然經(jīng)過(guò)了壓縮， 但是哪些完全不使用的代碼下載下來(lái)也是浪費， 況且，對于稍大的應用， 編譯后的js文件并不小， 超過(guò)了2M。
拆分包開(kāi)發(fā)還有一個(gè)重要的用途， 就是動(dòng)態(tài)加載。這個(gè)適用在中型、大型乃至超大型的Ext JS的應用。當編譯后的文件足夠大的時(shí)候， 首次登錄頁(yè)面的速度就會(huì )變慢，但是首頁(yè)需要顯示的東西畢竟有限， 很多頁(yè)面是在點(diǎn)擊某些Link時(shí)才會(huì )顯示，或者對于某個(gè)用戶(hù)，某些組件壓根就不會(huì )使用。這時(shí)候就可以分離某些包到單獨的文件中。
Ext JS 為了解決單個(gè)單個(gè)下載源碼文件到客戶(hù)端機器， 對源碼文件進(jìn)行壓縮，合并，減少傳輸文件的總體大??；但是完全合并的話(huà)，對于某些非必要或非即時(shí)使用的模塊又顯得浪費，所以又將某些包分離出來(lái)。正所謂： 分久必合， 合久比分。
綜合一下， 拆分包開(kāi)發(fā)的作用就是以下兩個(gè)：
導我所需
動(dòng)態(tài)加載
包的使用
包的使用方式很簡(jiǎn)單， 編輯應用下的app.json 文件
在requires下添加的包會(huì )被一并編譯打包
動(dòng)態(tài)加載，在requires下配置package-loader， 在uses下配置需要動(dòng)態(tài)加載的包。
```javascript
requires:['package-loader'],uses:['dashboard','mysettings']
```

配置界面如下：
![](/upload/picture/2022-09-27/upload_5f5fa9189460b53c7e4b4fa491fa2a6e.png)
### 包的開(kāi)發(fā)
可以直接使用Ext JS或其他第三方的包， 也可以在應用在開(kāi)發(fā)自己的包，如果開(kāi)發(fā)的包具備很高的共用型的話(huà)，也可以導出包給其他人使用?？梢杂脕?lái)作為包開(kāi)發(fā)的示例有：
某些共用組件和工具， 比如Ext JS本身的Chart， 字體圖標庫 font-awesome
主題包（Theme）
基于Ext JS開(kāi)發(fā)的平臺基礎庫。
分模塊的應用。比如基于Ext JS構建了一個(gè)電子表單的應用，生成和銷(xiāo)售相關(guān)的申請表單就是獨立的應用模塊。
在應用中創(chuàng  )建包
命令行切換到Ext JS應用的根目錄， 執行如下命令創(chuàng  )建包：
```
sencha generate package mypackgae
```

以上命令會(huì )處理的操作包括：
在應用的根目錄下創(chuàng  )建 packages/local/mypackage目錄， 并在該目錄下創(chuàng  )建包的結構(如果是使用現成的庫， 則會(huì )放置在remote目錄中，該部分在后續會(huì )介紹)
將該包添加到項目的依賴(lài)配置中（app.json）
在VS Code中執行以上命令的效果界面如下：
![](/upload/picture/2022-09-27/upload_8c5a3308fe40bd6e27c65b757ef00544.png)
包的開(kāi)發(fā)
包的開(kāi)發(fā)路徑與應用基本類(lèi)似：
src 放置js 源碼
sass 放置CSS相關(guān)
resources 放置圖片等資源文件
### 包的編譯與導出
包只作為應用的一部分，在應用編譯的時(shí)候會(huì )一并處理， 但如果這個(gè)包需要共用出來(lái)，供其他人下載使用， 則需要單獨編譯這個(gè)包，并且添加到庫中。這里涉及幾個(gè)問(wèn)題：
什么是Ext JS的庫？
如何編譯庫并提交庫？
如何使用提交的庫？
Ext JS中的庫
在Sencha Cmd 安裝的時(shí)候， 在安裝目錄會(huì )創(chuàng  )建一個(gè) repo的目錄，這個(gè)目錄就是本地庫的位置。
![](/upload/picture/2022-09-27/upload_def26200bcc84d1b49c7fb2b96d4c0f0.png)

repo 目錄的結構如下：
![](/upload/picture/2022-09-27/upload_6dcf53c30f5eb7f38cbafa5c3d57cad6.png)
.sencha 用于放置庫機制的文件
pkgs 里面就是本地提交的庫文件， 文件后綴是.pkg
這個(gè)庫的控管機制，看上去和git很類(lèi)似， 區別是git控管的是源碼， sencha控管的是.pkg的打包文件。接下來(lái)就來(lái)介紹如何對一個(gè)本地開(kāi)發(fā)的包進(jìn)行編譯和提交。
包的編譯
在執行包的編譯命令之前，必須先處理三件事情， 這三件事情都是在包目錄的package.json文件中進(jìn)行。
修改包的創(chuàng  )建者。默認的值是anonymous， 但是在提交到本地庫時(shí)， 會(huì )進(jìn)行驗證，不允許匿名提交。
![](/upload/picture/2022-09-27/upload_7db3c5a2232e40e07c3ec2d0ee31cbf2.png)
添加框架配置。 默認框架的配置是在注釋中的（因為主題開(kāi)發(fā)包的編譯可以不需要）
![](/upload/picture/2022-09-27/upload_7664e090171be5067de122f7570b552b.png)
主題的配置， 默認也是在注釋中。
這里需要注意， 配置的主題需要是Classic和Modern都支持的， 否則會(huì )報 “Fashion build exited with code : 1”的錯誤。
![](/upload/picture/2022-09-27/upload_4e7ba69a9430f7ad48acb1fcb612df77.png)
以上前置動(dòng)作完成后， 命令行切換到包的路徑中， 這里是D:\demoworkspace\extjs\ext7-demo-app\packages\local\mypackgae， 執行編譯命令：
```
sencha package build
```

編譯命令主要做了以下動(dòng)作：
在包的目錄下，創(chuàng  )建build目錄，并輸出編譯后的結果文件， 類(lèi)似
![](/upload/picture/2022-09-27/upload_6e20318ce809f83a26c61ed4cff4a17c.png)
在項目的build目錄下產(chǎn)生.pkg 的打包文件，提交到庫就是使用這個(gè)打包文件。類(lèi)似：
![](/upload/picture/2022-09-27/upload_bf1dc0d4ac0f51204b746110ce1562f7.png)
提交包到本地庫
提交包到本地庫，使用的就是上面產(chǎn)生的.pkg后綴的文件，但是開(kāi)始之前同樣有一個(gè)前置動(dòng)作就是初始化庫。也就是對提交的包的驗證， 這里僅簡(jiǎn)單演示驗證的方式，實(shí)際開(kāi)發(fā)可以設置更安全的驗證。
命令行切換到Cmd的repo目錄， 執行repo init 命令：
```
cd D:\install\Sencha\Cmd\reposencha package repo init -name "OscarChen" -email "xxx@mail.com"
```

注意， 以上用戶(hù)名中間不能有空格，否則有可能失敗，命令執行成功的界面如下：
![](/upload/picture/2022-09-27/upload_f7ee0afe649b9a91de0da4b10ff24355.png)

這條命令會(huì )在 repo\pkgs.meta\profiles\ 目錄下創(chuàng  )建分割用戶(hù)名的層級目錄（每?jì)蓚€(gè)字符作為一個(gè)文件夾），在最底層的文件夾中產(chǎn)生一個(gè)以用戶(hù)名命名， 以.json為后綴的文件， 文件的內容是JSON格式的配置文件，包括在命令行輸入的用戶(hù)名、郵箱、創(chuàng  )建時(shí)間以及公鑰等信息。（這個(gè)機制與Git又有很大的相似性）。
![](/upload/picture/2022-09-27/upload_6b88a6025d4de4a0d21a90b25cad5342.png)

接下來(lái)就是實(shí)際要提交包到本地庫的操作了。
命令行切換到項目的build目錄對應的包的目錄，這里是 D:\demoworkspace\extjs\ext7-demo-app\build\mypackgae，執行
```
sencha package add mypackgae.pkg
```
以上命令會(huì )把包的.pkg文件以及版本相關(guān)信息放到Cmd安裝的repo/pkgs 中。
到此， 包的開(kāi)發(fā)、提交步驟就全部完成了。本地機器需要使用該模組只需要在項目的app.json的requires配置中加入包的名字。其他機器需要添加Repo的地址進(jìn)行使用。

98国产在线视频福利_欧亚v视频日韩一区二区_国产在线精彩视频_亚洲伊人久久综合影院_亚洲欧美高清激情精品一区_少妇熟女天堂网av_午夜福利日本专区_中美女子成人毛片_大荫蒂毛茸茸视频国产_小14萝裸体自慰洗澡大尺度

購物車(chē)

0 ITEMS ON YOUR CART

Ext JS開(kāi)發(fā)大全

Ext JS的模塊化開(kāi)發(fā)（Package）

網(wǎng)站導航