前言
各位前輩在上小弟拱禮，小弟喚作查查锈津，何為查查呀酸，與渣渣者無(wú)水矣，意在小弟雖初出茅廬然已成自我琼梆，自認(rèn)非渣渣爾性誉，然則門下自識(shí)術(shù)業(yè)未成當(dāng)以與人謙遜見(jiàn)賢思齊，遂以銘茎杂。余非師出名門错览，然從業(yè)兩載有余，閑暇之時(shí)拜讀金典煌往，已有些許文章蝗砾，雖略顯輕浮，但玉不雕不成器，在下獻(xiàn)丑與眾位點(diǎn)撥悼粮，全當(dāng)玩耍闲勺，不當(dāng)之處望各位雅正。
（這逼裝的怎么樣）
背景
現(xiàn)在市場(chǎng)上流傳著很多近幾年新生的優(yōu)秀框架扣猫，雖然ExtJS發(fā)布的時(shí)間很早菜循，現(xiàn)在應(yīng)該算是古董級(jí)別的了，在當(dāng)時(shí)也提出了很多超前的思想如：依賴注入申尤，模塊化等癌幕，現(xiàn)在一代比一代更優(yōu)秀，但貌似市場(chǎng)上使用的廠子并不是很多昧穿，也有人對(duì)它的看法還停留在三代的版本上（現(xiàn)在已經(jīng)到六代了）勺远，本人比較熱衷社區(qū)討論，但很少有人對(duì)ExtJS有最新的認(rèn)識(shí)时鸵，一直在找相關(guān)方面的文章胶逢，但要么是比較陳舊的，要么是手冊(cè)類的饰潜，因而不才整理出這篇拙作與眾位把玩初坠。
巨人ExtJS
ExtJS這個(gè)框架有些年頭了（07年發(fā)布），對(duì)于一些從業(yè)時(shí)間有段時(shí)間的人來(lái)說(shuō)都從各方面了解過(guò)彭雾，有人評(píng)價(jià)說(shuō)它“功能豐富碟刺，無(wú)人能出其右”，但缺點(diǎn)也是存在的薯酝，太大半沽，學(xué)習(xí)曲線陡峭，但這些缺點(diǎn)在我認(rèn)為確實(shí)相對(duì)的吴菠，如JQuery UI等者填。
在這里稱它為“巨人”一點(diǎn)都不為過(guò)，
第一，一般的小型項(xiàng)目hold不住這個(gè)巨人，因?yàn)槭召M(fèi)和學(xué)習(xí)曲線陡峭很多小公司直接就不考慮它蔫慧。
第二，身軀太龐大重挑，豐富的組件導(dǎo)致它太重，非大中型管理系統(tǒng)很多難將它的特點(diǎn)發(fā)揮出來(lái)棠涮，它在復(fù)雜的業(yè)務(wù)處理中能節(jié)省出大量精力谬哀，也就是開(kāi)發(fā)速度快，可以說(shuō)一個(gè)中小型子系統(tǒng)严肪，讓一個(gè)熟練的前端在一到兩周就全部能完成史煎，還是不加班的那種谦屑。
第三，就是不在乎你用不用篇梭，反正老子是給大廠子做的氢橙。
有人說(shuō)過(guò)它丑，煩請(qǐng)查閱07年以前的富客戶端長(zhǎng)什么樣恬偷，大家的都知道前端框架都會(huì)有自定義樣式的設(shè)定悍手，當(dāng)然ExtJS1.0也有，不過(guò)那時(shí)候多數(shù)情況下前端是由后端人員來(lái)做的袍患，再加上學(xué)習(xí)曲線陡峭坦康，所以很少去自定義CSS。且自帶那幾套皮膚诡延，時(shí)間長(zhǎng)了審美疲勞之后覺(jué)得有點(diǎn)丑滞欠，現(xiàn)在看來(lái)較之落后，不過(guò)現(xiàn)在有好幾套自帶皮膚肆良，同時(shí)像HTML5 CSS3等新標(biāo)準(zhǔn)都已經(jīng)支持筛璧，而且在兼容性方面優(yōu)化的相當(dāng)不錯(cuò)，幾乎可以不用操心妖滔。
相比較同時(shí)期的JQuery隧哮，ExtJS應(yīng)該說(shuō)是一個(gè)完整的前端框架桶良，而JQuery是一個(gè)擴(kuò)展庫(kù)座舍，類比Easy UI是在晚于ExtJS之后的13年發(fā)布的，在默認(rèn)的皮膚和樣式上它是照搬ExtJS的classic皮膚的樣式陨帆，相對(duì)ExtJS它比較輕曲秉，基于JQuery容易擴(kuò)展，自己寫樣式也方便疲牵，不是那么干澀讓人不太容易琢磨承二。但熟知JavaScript設(shè)計(jì)模式的人都知道，JQuery很容易沒(méi)有編碼結(jié)構(gòu)可言纲爸，而ExtJS可以說(shuō)已經(jīng)很接近面向?qū)ο筮@個(gè)概念亥鸠。
之后在13年發(fā)布的ExtJS 4以及后續(xù)版本，可以使用Sencha cmd可以構(gòu)建MVC模式的前端項(xiàng)目识啦，以及完整的模塊化管理方案负蚊。還推出了一個(gè)基于ExtJS的sencha touch的移動(dòng)端框架，不過(guò)在后來(lái)的版本中好像取消了颓哮，現(xiàn)在的ExtJS 5和6版本都可以直接用做移動(dòng)端開(kāi)發(fā)家妆，也就是默認(rèn)支持觸屏的事件操作，但沒(méi)深入了解過(guò)冕茅，后面再補(bǔ)充吧伤极。
ExtJS簡(jiǎn)單實(shí)驗(yàn)
我喜歡ExtJS的一個(gè)重要原因就是它的API很方便查閱蛹找，大家可以自行去看一下。
官方API：http://docs.sencha.com/extjs/6.0.0/
ExtJS使用的是盒子模型（也叫做容器）哨坪，最常用的容器有Panel和Container先來(lái)一段代碼庸疾。
Ext.create('Ext.panel.Panel',{
? title: 'Hello',
? width: 200,
? html: 'World!',
? renderTo: Ext.getBody()
});
這樣便生成了一個(gè)容器，同時(shí)可以在里面增加子元素（items）当编，如：button彼硫，combox或者其他容器。
Ext.create('Ext.panel.Panel',{
? title: 'Hello',
? width: 200,
? height: 300,
? items: [{
? xtype: 'button',
? text:'OK',
? handler: function(){
? ? ?alert('I\'m a Button');
? }},{
? xtype: 'panel',
? html: 'I\'m a child Panel'
}],
enderTo: Ext.getBody()
});
這個(gè)是使用另一套皮膚crisp有Touch模式凌箕，也就是兼容了拧篮，觸屏操作。
也可自定義組件來(lái)繼承ExtJS的組件并擴(kuò)展它牵舱，如：我們現(xiàn)在要做一個(gè)字體樣式固定且?guī)б粋€(gè)確定和取消按鈕的容器串绩。
Ext.define('MyPanel',{
extend: 'Ext.panel.Panel',//該行繼承自Panel，即繼承Panel的所有屬性和法
width: 200,
height: 200,
margin: '20',
bbar: [
{ xtype: 'button', text: '確定' },
{ xtype: 'button', text: '取消' }
],
bodyStyle: {
color: 'red'
},
html: 'I\'m a Panel'
});
new MyPanel({
renderTo: Ext.getBody()
});
這個(gè)Ext.define其實(shí)是ExtJS中定義類的方法芜壁，寫法可能不一樣礁凡，但幾乎完全模擬了面向?qū)ο蟮脑O(shè)計(jì)模式。如：
Ext.define('My.awesome.Class',{
someProperty:'something',
someMethod:function(s){
alert(s+this.someProperty);
}
...
});
varobj=newMy.awesome.Class();
obj.someMethod('Say ');
ExtJS在某種程度上是提供了富客戶端項(xiàng)目結(jié)構(gòu)亂的解決方案慧妄，若是有人非要提ReactJS AngularJS等等顷牌，如果非要用ExtJS來(lái)做門戶網(wǎng)站，ReactJS AngularJS之類用來(lái)做富客戶端塞淹。這就好比用菜刀去砍柴窟蓝，用斧子去切菜一樣，雖然不是非不可以饱普，但其中有數(shù)不其盡的坑运挫。
ExtJS和Sencha Cmd---前端的MVC設(shè)計(jì)模式
ExtJS在4版本的時(shí)候同時(shí)發(fā)布了Sencha Cmd這個(gè)工具，Sencha Cmd是針對(duì)ExtJS設(shè)計(jì)的項(xiàng)目構(gòu)建工具套耕，通過(guò)命令可以構(gòu)建MVC模式的項(xiàng)目還是比較方便的谁帕，我們以ExtJS5.0為例演示一下。
安裝過(guò)程有興趣的自行查閱一下手冊(cè)冯袍，在官方文檔里都有匈挖，或者其他博客寫的都很詳細(xì)，我就不再累贅了康愤。
項(xiàng)目結(jié)構(gòu)
通過(guò)sencha generate app MyApp D:\MyApp這句命令生成項(xiàng)目MyApp
編碼目錄再app中儡循，可以看到main文件夾中有三個(gè)文件分別是
Main.js----視圖view
MainController.js----控制器Controller
MainModel.js---- ViewModel
同時(shí)也可以在sass目錄寫*.sass樣式，這些會(huì)通過(guò)sencha app build打包完成
其實(shí)在長(zhǎng)期的實(shí)踐中我發(fā)現(xiàn)它的MVC模式并不是需要嚴(yán)格的遵守翘瓮，也可以混著來(lái)贮折，不過(guò)根據(jù)個(gè)人習(xí)慣我還是喜歡分清一些好。項(xiàng)目生成好后通過(guò)sencha app build編譯項(xiàng)目资盅，\MyApp\build\temp\production可以看到編譯好的項(xiàng)目调榄，之后就可以通過(guò)瀏覽器來(lái)查看踊赠。這里要說(shuō)明一下sencha產(chǎn)生的項(xiàng)目必須要一個(gè)服務(wù)才能打開(kāi)，我們可以把項(xiàng)目放到一個(gè)服務(wù)中查看每庆，可以用sencha cmd自帶的服務(wù)工具筐带。通過(guò)sencha web start開(kāi)啟。之后訪問(wèn)http://localhost:1841/即可缤灵。這個(gè)端口也是可以配置的伦籍。
Main.js
Ext.define('MyApp.view.main.Main', {
extend: 'Ext.container.Container',
requires: [ //引入需要的模塊
'MyApp.view.main.MainController',
'MyApp.view.main.MainModel'
],
xtype: 'app-main', //自定義xtype名稱，可以在其他模塊中通過(guò)這個(gè)type調(diào)用這個(gè)模塊
controller: 'main', //注入main controller
viewModel: {
type: 'main' //注入main viewModel
},
layout: {
type: 'border'
},
items: [{
xtype: 'panel',
bind: {
title: '{name}'
},
region: 'west',
html: 'This area is commonly used for navigation,for example, using a "tree" component.',
width: 250,
split: true,
tbar: [{
text: 'Button',
handler: 'onClickButton'//事件注冊(cè)會(huì)在controller中映射
}]
},{
region: 'center',
xtype: 'tabpanel',
items:[{
title: 'Tab 1',
html: 'Content appropriate for the currentnavigation.'
}]
}]
});
MainController.js
Ext.define('MyApp.view.main.MainController',{
extend: 'Ext.app.ViewController',
requires: [
'Ext.window.MessageBox'
],
alias: 'controller.main', //聲明別名叫main的controller
onClickButton: function () {
Ext.Msg.confirm('Confirm', 'Are you sure?', 'onConfirm', this);
},
onConfirm: function (choice) {
if (choice === 'yes') {}}
});
MainModel.js
Ext.define('MyApp.view.main.MainModel', {
extend: 'Ext.app.ViewModel',
alias: 'viewmodel.main', //聲明叫main的viewmodel
data: {
name: 'MyApp'
}
//TODO - add data, formulas and/or methods to support your view
});
當(dāng)前是初始化的一個(gè)界面腮出，可以根據(jù)需求自行更改帖鸦。至此就簡(jiǎn)單說(shuō)了一下ExtJS和Sencha Cmd，后面若是有需要詳細(xì)教程的胚嘲，我會(huì)再整理一份作儿。
關(guān)于Sencha Cmd我也是在工作的時(shí)候一點(diǎn)點(diǎn)上手的，雖然鄙人才疏學(xué)淺但接受新事務(wù)比較快馋劈，且自己喜好鉆研攻锰，就多看了一些，有些自己的看法且與大家說(shuō)道說(shuō)道妓雾。
首先實(shí)際是用過(guò)的朋友就會(huì)知道在build完成后把所有的文件集中的一個(gè)文件里面去（app.js）娶吞，有時(shí)候會(huì)達(dá)到好幾兆，我見(jiàn)過(guò)最大的有12M械姻，加載這這個(gè)js會(huì)很慢妒蛇，這似乎是ExtJS設(shè)計(jì)的不合理之處，但其實(shí)不然策添，不知道大家注意到?jīng)]有材部，sencha構(gòu)建項(xiàng)目和編譯項(xiàng)目的命令有沒(méi)有什么特別之處毫缆，
sencha generate app MyApp D:\MyApp
sencha app build
它都是以app開(kāi)始的唯竹，也就是sencha是在創(chuàng)建應(yīng)用而不是web項(xiàng)目，這點(diǎn)我覺(jué)得很多人都沒(méi)注意過(guò)苦丁，針對(duì)這些我特地翻墻出去查了一些資料浸颓，沒(méi)找到實(shí)際的例子，估計(jì)都是內(nèi)部系統(tǒng)旺拉，不讓人看产上，倒是在有些論壇的個(gè)別回答里有只言片語(yǔ)的描述，他們都是用來(lái)做exe應(yīng)用的蛾狗，加載的都是本地資源也就不存在資源加載緩慢的問(wèn)題了晋涣。而我們的web應(yīng)用則無(wú)法避免資源加載時(shí)延過(guò)長(zhǎng)這個(gè)問(wèn)題，針對(duì)這點(diǎn)我特地做個(gè)一個(gè)模型沉桌，且叫它《ExtJS非阻塞加載設(shè)計(jì)模式》谢鹊，后面我會(huì)做個(gè)專題詳細(xì)說(shuō)明算吩。
時(shí)間倉(cāng)促不成文章，望眾位指正佃扼。
