目前MVC的應用已經不在滿足于背景的開發。分層的應用更好的使得系統中的各層進行解耦。可以提高代碼的閱讀性以及後期的維護性。
在面向對象程式設計的今天，古老的JS代碼也加入了對象程式設計的年代，自然MVC的結構也是必然的發展。
我之前并未接觸過JS方面的MVC，是以借此機會進行一次新鮮的嘗試。
Ext 的MVC架構包含了Controller, View, Model, Store. 通過其定義就可明确知道這些元件在MVC中的應用。
下面我們一步一步的來配置MVC架構。
1. 建立目錄
我這裡所說的是建立工程目錄，我已經将Ext JS的代碼放在了單獨的Ext檔案夾中。
根據以前背景的經驗，我将系統目錄分為以下幾類：
說明一下：
controller,model,store,view 就不用多說了。
plugins 裡面放置前端的一些自定義插件。
pages裡面存放所有的html/jsp頁面
2. 建立首頁
在pages中，建立一個index.html頁面作為首頁。（在不涉及背景代碼前，我暫時采用html的頁面）
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="../ext/resources/ext-theme-neptune/ext-theme-neptune-all.css" target="_blank" rel="external nofollow" />
<link rel="stylesheet" type="text/css" href="../css/library.css" target="_blank" rel="external nofollow" />
<script type="text/javascript" src="../ext/ext-all.js"></script>
<script type="text/javascript" src="../js/libraryApp.js"></script>
<title>ODC Library</title>
</head>
<body>
</body>
</html>
頁面上并沒有太多代碼，在Ext的MVC中，所有的頁面代碼都是由Ext.application動态建立的。（富用戶端的任務是把複雜任務簡單化，簡單任務複雜化。是以請做好用複雜的方法來解決簡單問題的心理準備。）
一般來講一個頁面對應一個application. 由application建立相應的View,Controller, 在Controller中引入Model，并且綁定Store
3. 建立啟動腳本：libraryApp.js
這個腳本是所有程式的入口
Ext.application({
name:'Library',
appFolder:'../js',
controllers:['Library','Login'],
launch: function(){
Ext.create('Library.view.LibraryView');
}
});
在此，我手動建立了一個Viewport，如果autoCreateViewport為true時，Ext會動态加載 /{appFolder}/view/Viewport.js，如果該檔案不存在，則會報加載失敗的錯誤。
系列連結：Web應用開發（前端）—Ext Js的MVC（2）
![Vue項目 - 單檔案元件和Vue中的路由[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)