Extjs 6 MVC開發模式（二）

時間 2020-06-20

標籤 extjs mvc 開發模式简体版

原文原文鏈接

一、Extjs MVC開發模式javascript

在JS的開發過程當中，大規模的JS腳本難以組織和維護，這一直是困擾前端開發人員的頭等問題。Extjs爲了解決這種問題，在Extjs4.x版本中引入了MVC開發模式，開始將一個JS（Extjs）應用程序分割成Model-View-Controller三層，爲JS應用程序的如何組織代碼指明瞭方向，同時使得大規模JS代碼變得更加易於重用和維護；這就是Extjs MVC開發模式的初衷。css

在官方給出的MVC例子中，咱們能夠看到一個簡單的列表編輯功能，這篇文章就圍繞這個功能進行詳細的講解，讓咱們一塊兒來揭開Extjs MVC的神祕面紗！html

示例代碼適用於Extjs 4.x、Extjs 5.x和Extjs 6.0.1中親測可用！前端

建議1：編寫的全部JS、CSS、HTML/JSP統一編碼爲UTF-8。java

建議2：每一個屬性之間必須使用逗號（非中文符號），最後一個屬性千萬不可使用逗號。ajax

二、建立一個Extjs MVC程序：
數據庫

index.htmljson

系統的首頁:加載樣式表、核心庫、app,js瀏覽器

app.js網絡

命名空間、加載插件、指定app的主目錄、加載控制層、建立主視圖

app

Extjs程序的主程序文件夾

1）controller：全部的控制器

a）view：全部的視圖組件

b）store：全部的儲存數據源組件

c）model：全部的數據模型組件

2）其餘自定義組件/工具：lib/util（可選，例如自定義全局校驗工具類、靜態數據）

2）每一個應用都有一個實體，就是Application對象，而每一個應用一樣採用單一入口結構，有個快捷函數就是 Ext.application({config})，建立一個Application對象實例，而且運行它。Application在建立之初，會去加載Controller類，加載完畢後，會正式的lunch。

3）Application在lunch的時候，會建立一個Viewport實例，這個東西就像一個骨架同樣，上面能夠拼裝各類View，具體說，就是各類佈局形式和窗體控件，能夠說是view界面的載體，一個頁面只能有一個Viewport實例。

4）View純粹是一個界面組件，或者說窗體控件的集合（好比form,grid和window）。經過Store來加載數據而且展示到界面上，界面控件的響應都寫在Controller裏面，View對Controller的存在一無所知，也沒有代碼上的依賴

5）Controller的角色徹底是個粘合劑，它在加載之初，會幫忙加載跟其有關的Model，Store，View類，而其真正的做用，是經過一系列的事件處理函數(好比點擊保存按鈕)，肯定了每一個View上面界面組件對用戶交互行爲的響應方法，能夠說是一堆事件處理器函數的集合；這裏面主要經過一個 control成員函數來進行事件綁定，經過另外一個叫ComponentQuery的組件，使用相似css selector的語法來定位界面上的組件，併爲其綁定事件處理器。

6）Model是對抽象數據的具體化，簡單理解就是數據庫裏面的一行記錄。

7）Store是對經過網絡加載數據的過程的一個抽象，Store經過data發送請求(通常爲ajax請求)到後臺獲取數據(通常返回json格式)，Store依賴於Model，經過關聯的Model對象才知道如何將取回的數據對象化。

三、Extjs MVC程序的首頁

1）index.html Extjs開發環境的準備

功能：系統的首頁：加載樣式表、核心庫、app.js

官方的例子是自動根據環境加載extjs-theme-xxxx -all.css樣式表、extjs-all.js核心庫以及程序入口app,js。

<script type="text/javascript" src="../../shared/include-ext.js"></script>
<script type="text/javascript" src="../../shared/options-toolbar.js"></script>
<script type="text/javascript" src="all-classes.js"></script>
<script type="text/javascript" src="app.js"></script>

官方提供了多套樣式模板：

ext-6.0.1\build\classic\theme-xxxx\resources

theme- xxxx -all.css須要運行環境

@import 'theme-classic-all_1.css';

@import 'theme-classic-all_2.css';

手工導入兩個css文件便可：

theme-xxxx-all_1.css theme-xxxx-all_2.css

設計本身的MVC例子時候，最好手工加載樣式表、核心庫:

index.html

<head>
<!--1.手工導入Extjs CSS-->
<link rel="stylesheet" type="text/css" href="resources/theme/ext-theme-neptune/build/resources/ext-theme-neptune-all_01.css" />
<link rel="stylesheet" type="text/css" href="resources/theme/ext-theme-neptune/build/resources/ext-theme-neptune-all_02.css" />
<!--2.手工導入Extjs Core JS-->
<script type="text/javascript" charset="UTF-8" src="js/ext-all.js"></script>
<!--3.app程序的入口-->
<script type="text/javascript" src="app.js"></script>
</head>

注意：須要拷貝ext-all.js和resources樣式文件夾到相對的目錄路徑

四、Extjs MVC的App.js介紹

每一個應用都有一個實體，就是Application對象，而每一個應用一樣採用單一入口結構，有個快捷函數就是Ext.application({config})，建立一個Application對象實例，而且運行它。Application在建立之初，會去加載Controller類，加載完畢後，會正式的lunch。

Application在lunch的時候，會建立一個Viewport實例，這個東西就像一個骨架同樣，上面能夠拼裝各類View，具體說，就是各類佈局形式和窗體控件，能夠說是view界面的載體，一個頁面只能有一個Viewport實例。

1）Name屬性與命名空間

Ext.application({
    name: 'FV',    //指定程序的命名空間：
});

name屬性用於指定程序命名空間（MVC組件）

例如controller文件夾內聲明一個控制器聲明規則：

Ext.define(命名空間.文件夾.文件名，{extend：'繼承類型'，屬性1，屬性2......})；

例如controller/Articles.js

Ext.define('FV.controller.Articles', {
extend: 'Ext.app.Controller',  //必須繼承Controller
Controller組件屬性1:’’,
Controller組件屬性2:’’
});

如此類推：

model/Article.js文件

Ext.define('FV.model.Article', {
extend: 'Ext.data.Model',
Model組件屬性1:’’
});

store/Article.js文件

Ext.define('FV.store.Article', {
extend: 'Ext.data.Store',
Store組件屬性1:’’
});

view/article/Grid.js文件

Ext.define('FV.view.article.Grid', {
extend: 'Ext.grid.Panel',
Grid Panel'組件屬性:’’
});

view/article/Preview.js文件

Ext.define('FV.view.article.Preview', {
extend: 'Ext.panel.Panel',
Panel'組件屬性:’’
});

其實最好仍是在命名JS文件的時候加上對應組件的後綴（模塊+組件）：

controller/Articles.js controller/ArticlesController.js

model/Article.js model/ArticleModel.js

store/Article.js文件 store/ArticleStore.js文件

view/article/Grid.js文件 view/article/ArticleGrid.js文件

view/article/ Preview.js文件 view/article/ArticlePreview.js文件

2）app.js主程序詳細介紹

主程序：

a）定義程序命名前綴

b）定義主程序的文件夾路徑

c）定義程序須要加載控制層

d）初始化主視圖

Ext.application({
    //1.Application命名前綴
    name: 'Sys',
    //2.設置Application自定義classes的目錄路徑
    paths: 'app', 
    //3.加載controller文件夾下的 controller類(默認全部均初始化)
    controllers: [],
    /*
    launch: function() {
        alert("init以後 確保App初始化完成後執行,等價於onReady");
    },
    init: function() {
        alert("init");
    },*/
    
    //4.初始化主視圖(默認爲paths/view/Viewport.js)
    autoCreateViewport: true
});

name屬性：

用於指定程序命名空間（MVC組件），相當重要，在上面的例子已經詳細講述。

requires屬性：

有的時候項目中要寫一些擴展組件，隨着擴展組件的增長，會形成有的頁面須要使用，而有的頁面不須要使用的問題，這對組件的js文件的引用形成了煩惱：若是每一個頁面都去引用的時候會形成瀏覽器打開頁面的流量的增長而影響資源，若是須要的時候引用管理起來又很麻煩，Extjs4.0幫咱們解決了這個問題，那就是Ext.requires。它能夠實現根據咱們的須要動態加在所須要的組件文件，很靈活也很方便。requires屬性,在application程序中全局加載組件，動態的加載，只加載一次。

paths屬性：

不聲明：

app.js必須能夠直接訪問到controller/model等JS文件夾相對路徑。

聲明：

a）直接指定加載JS路徑1：paths：'app'

去app文件夾下尋找controller/model等JS文件夾

b）直接指定命名空間+加載JS路徑2：paths：{'App.ux':'resources/ux'}

設置目錄映射'App.ux'命名空間的將去resources/ux下尋找

controller：[]屬性：

啓動App程序時加載全部的controller文件夾下的Controller組件並初始化。

若是程序比較大，建議動態根據模塊來加載和初始化Controller組件。以及對應Controller下配置的Model、Store、View組件

init: function() {}

初始化函數，application程序初始化的時候默認執行的方法，通常不須要聲明，也能夠用於測試app.js是否成功初始化。

autoCreateViewport: true

自動建立application的OPOA視圖，默認加載並初始化app/view/Viewport.js

Ext.define('SYSTEM.view.Viewport', {
        extend: 'Ext.container.Viewport',
        requires: [],
        layout: 'border',
        items: []
});

VeiwPort 表明整個瀏覽器顯示區域，該對象渲染到頁面的body 區域，並會隨着瀏覽器顯示區域的大小自動改變，一個頁面中只能有一個ViewPort 實例。Viewport 不須要再指定renderTo，而咱們也看到Viewport 確實填充了整個瀏覽器顯示區域，並會隨着瀏覽器顯示區域大小的改變而改變。Viewport 主要用於應用程序的主界面，能夠經過使用不一樣的佈局來搭建出不一樣風格的應用程序主界面。在Viewport 上經常使用的佈局有fit、border 等，固然在須要的時候其它佈局也會經常使用。

launch: function() {}

應用程序啓動init以後。這樣能夠確保全部腳本加載,防止依賴問題。相似於Ext.onReady爲DOM已經準備好了再執行邦定的特性。

實際用例：如application 的Viewport初始化以後纔對其進行事件的邦定。

本文部分由齊飛（youring2@gmail.com）原創，併發布在http://www.qeefee.com/article/extjs-mvc-in-detail，轉載請註明出處！