、Extjs核心工具方法

1、Ext.onReady

Ext.onReady在DOM模型加載完畢后才進行操作。

優點：無需像onload事件那樣，等待頁面的所有資源都加載完畢后才進行操作。

"onReady方法是Ext.Loader.onReady()方法的別名"

其語法如下：

Ext.onReady(Object fn,Objet scope,Objet options)

其中：

fn:指定Ext JS和HTML頁面加載完成后要執行的方法，fn參數類型為對象（必傳參數）；

scope:指定執行該方法的范圍（可選參數）；

options：指定執行一些附加選項，比如delay等（可選參數）。

2、Ext.create

Ext.create方法是創建對象的方法，

"在Ext JS 4版本之前，一直使用new關鍵字創建對象-- new classname([config])"

其語法如下：

Ext.create( String className, Object args)

其中：className指定要創建對象的類名，可以是類的全名、別名或者備用名；

args是一個JavaScript對象，用于向新生成的對象傳入構造參數值（也稱為配置選項，即為config屬性指定選項傳入參數值）,類型為對象。

二、Ext JS 4 語法

1、配置對象

config:用于為該類指定配置選項，Ext JS會自動為config指定的選項添加setter和getter方法。

2、關于xtype

定義xtype來指定該位置使用什么組件。

定義xtype，一般使用組件的別名。

3、使用Ext.widget或者Ext.createWidget創建對象

Ext.widget的作用是使用別名來創建對象。 Ext.widget=Ext.createWidget;

其語法如下：

Ext.widget( classname,[config] )

其中： classname是對象的別名；

configs是可選參數，為對象的配置對象（config options）,類型為對象。

4、使用Ext.ns或者Ext.namespace定義命名空間

Ext.namespace()方法用于創建一個或多個命名空間，命名空間可用于限定函數、類的范圍和作用域，可以 很好的解決二者的同名沖突。

很多時候都會使用命名空間來組織相關類和其他類。在Extjs中，使用Ext.namespace方法可創建命名空間

其語法如下：

Ext.namespae(namespace1,namespae2,...)

其中namespace1、namespace2都是字符串數據，是命名空間的名字

5、使用Ext.define定義新類

Ext.define()方法和Ext.extend()方法都用于自定義類。

"Ext.define()方法相當于Ext.ClassManager.create()方法的別名"

"在Ext JS 3版本，定義新類使用的是Ext.extend方法（不推薦使用）"

其語法如下：

Ext.define( String className, Object properties,[Function callback] );

其中：className:用于執行自定義的類名（推薦采用與java類名相同的命名規則）；

properties：新類的配置對象，對象里包含了類的屬性集對象（用于為該類定義屬性、方法）。

callback：回調函數，當類創建完成后執行該函數（用于指定該類創建成功的回調函數）。

注意：properties該對象可以指定任何合法的屬性，以下是幾種具有特殊意義的屬性。

Ⅰ.self:引用當前類本身

Ⅱ.alias:為該類定義別名

Ⅲ.alternateClassName:為該類定義可選的類名

Ⅳ.config:用于為該類指定配置選項，Ext JS會自動為config指定的選項添加setter和getter方法

Ⅴ.extend:用于指定該類繼承的父類

（還可以通過constructor為該類指定構造器）

Ⅵ.inheritableStatics:與statics屬性相同，也用于為該類定義靜態方法和靜態屬性，該屬性的 定義的靜態方法和靜態屬性可以被子類繼承

Ⅶ.mixins:用于列出所有要被混入的類

Ⅷ.override：用于注定要覆蓋的類

Ⅸ.requires:用于列出在實例化該類之前，必須預先加載的類

Ⅹ.singleton:如果該屬性被設為true,則該類的實例將是單例的

ⅩⅠ.statics:為該類定義靜態方法和靜態屬性

ⅩⅡ.uses:用于列出必須與該類同時使用的類

6、使用Ext.defer方法指定延遲執行的函數

Ext.defer()用于指定延遲執行的函數

其語法如下：

Ext.defer(Function fn,Number millis,[Object scope],[Array args])

其中：

fn參數執行需要延遲執行的函數；

millis:指定延遲多少毫秒后執行fn函數；

scope參數用于指定執行fn函數的范圍；

args用于執行傳入fn函數的參數；

7、Ext.apply和Ext.applyIf方法

Ext.apply()及Ext.applyIf()方法都是用于把一個對象中的屬性復制到另一個對象中。

共同點：都用于實現屬性復制。

不同點：

Ext.apply()將會覆蓋目標對象中的屬性；

Ext.applyIf()只復制目標對象中沒有、而源對象中有的屬性不會發生屬性覆蓋。

其語法如下：

Ext.apply()方法的語法格式為：

Ext.apply(Object object, Object config,Object defaults)

作用：

把config、defaults兩個對象的屬性復制到objet中，但是當config、default兩個對象的屬性值發生沖 突時，config的屬性值取勝。

8、Ext.isXxx方法---用于判斷是否為某某對象

Ext.isXxx()方法代表系列的方法，它們都用于判斷是否為某某對象，isXxx()方法總是返回Boolean值。

9、Ext.each和Ext.iterate方法

Ext.each()方法用于遍歷數組，它是Ext.Array.each()方法的別名。

Ext.iterate()方法相當于Ext.Array.each()方法和Ext.Object.each()方法“綜合體”，

當被遍歷的數據是數組時，Ext.iterate()方法底層調用Ext.Array.each()方法進行遍歷；

當被迭代的數據是對象時，Ext.iterate()方法底層調用Ext.Object.each()方法進行遍歷；

三、Ext JS擴展的工具方法---更多方法參考：Ext JS API文檔

Ext JS擴展的所有工具方法都直接位于Ext命名空間下。

Ⅰ、為Array擴展的工具方法---Ext.Array工具類

JavaScript數組用做棧的兩個方法如下：

①.push(ele):元素入棧，返回入棧后數組的長度。

②.pop()：元素出棧，返回出棧的數組元素

JavaScript數組作為隊列使用的兩個方法如下：

①.unshift(ele):元素入隊列，返回入對列后數組的長度。

②.shift()：元素出隊列，返回出隊列的數組元素。

Ⅱ、為Date擴展的工具方法---Ext.Date工具類

Ext.Date為操作Date對象提供了大量的工具方法

例如：Ext.Date.format()、Ext.Date.between()兩個方法

Ⅲ、為Function擴展的工具方法---Ext.Function工具類

Ext.Function為JavaScript函數新增了大量工具方法

Ⅳ、為Number擴展的工具方法---4個工具類方法

Ext.Number為JavaScript的數值類型的值

Ext.Number.constrain()工具方法---Ext.Number.constrain(20，10，30) //20截取傲10~30范圍內

Ext.Number.from()工具方法---Ext.Number.from("abc","20") //字符串abc轉換為數值

Ext.Number.snap()工具方法---Ext.Number.snap(23,7,10,20) //返回離23最近的7的倍數(必須在10~30之間)

Ext.Number.snap()工具方法：作用--先獲取距離指定數值最近的、特殊數值的倍數，然后將得到的數值截取 到指定范圍之內。

Ext.Number.toFixed()工具方法---Ext.Number.toFixed(3.2545,1) //3.2545保留1位小數點

Ⅴ、為Object擴展的工具方法---Ext.Object工具類

javaScript的對象不僅僅可以作為對象使用，還可以作為Java Map集合使用，javascript對象的每個屬性名、屬性值就相當于Map的key-value對（鍵值對）

例如：Ext.Object.each()、Ext.Object.toQueryString()、Ext.Object.fromQueryString()、Ext.Object.getKeys()、Ext.Object.getValues()等等

Ⅵ、為String擴展的工具方法---Ext.String工具類

Ext.String提供了大量工具方法來操作字符串，這些工具方法可以進一步增強字符串的功能

Ext.String.format()方法比較實用，用于將字符串中的{0}、{1}、{2}....占位符替換成實際的值。

Ⅶ、Ext.JSON方法

JSON是一種非常有用的輕量級數據交換格式。

Ext.JSON類提供了3個工具方法來完成javascript對象與JSON字符串的相互轉化。

Ext.JSON.encode()工具方法---用于把javascript對象或數組轉換為JSON字符串

Ext.JSON.encode()方法的別名是： Ext.encode()可直接使用

Ext.JSON.decode()工具方法---用于把JSON字符串恢復成javascript數組或對象

Ext.JSON.decode()方法的別名是： Ext.decode()可直接使用

Ext.JSON.encodeDate()工具方法---用于編碼一個日期。將返回的實際字符串，插入到JSON字符串作為 文本表達式。返回的默認格式是："yyyy-mm-ddThh:mm:ss"

Ext.JSON.encodeValue()工具方法---用于把javascript對象或數組轉換為JSON字符串

xtjs框架

ExtJS是一種主要用于創建前端用戶界面，是一個基本與后臺技術無關的前端ajax框架。

ExtJs初期僅是對Yahoo! UI的對話框擴展，后來逐漸有了自己的特色，深受網友的喜愛。 發展至今， Ext除YUI外還支持Jquery、Prototype等的多種JS底層庫，讓大家自由地選擇。該框架完全基于純Html/CSS+JS技術，提供豐富的跨瀏覽器UI組件，靈活采用JSON/XML數據源開發，使得服務端表示層的負荷真正減輕，從而達到客戶端的MVC應用！

Sencha Ext JS提供了開發人員構建數據密集型跨平臺Web應用程序所需的一切。Ext JS利用現代瀏覽器上的HTML5功能。

Ext JS具有115多種高性能，預測試和集成的UI組件，包括日歷，網格，圖表等。Ext JS Grid和Advanced Charting包可以輕松處理數百萬條記錄。該框架包括一個強大的數據包，可以使用來自任何后端數據源的數據。借助Sencha Pivot Grid和D3適配器，組織可以為其Web應用程序添加領先的可視化和分析功能。查看與其他框架的比較。

豐富的Ext JS工具和主題集有助于提高開發效率并加速提供外觀漂亮的Web應用程序。工具可用于幫助應用程序設計，開發，主題和調試以及構建優化和部署。

Sencha Test是一個補充產品，是Ext JS Apps最全面的單元和端到端測試解決方案。

extjs框架優勢：

1、預集成和測試的UI組件。

Ext JS包含業界最全面的預集成和測試高性能UI組件集合。這些組件包括HTML5日歷，網格，樞軸網格，D3適配器，樹，列表，表單，菜單，工具欄，面板，窗口等等。Sencha社區也提供數百個用戶擴展。

Sencha Grid使組織能夠處理數百萬條記錄，并提供開箱即用的功能，如排序，分組，列鎖定和摘要行。

Ext JS Calendar組件可幫助您輕松查看/管理Ext JS應用程序中的計劃和事件。通過利用此組件，您可以輕松地為應用程序添加功能齊全的日歷，而無需投入大量時間和精力來構建一個。

2、豐富的數據分析

Ext JS使組織能夠使用Sencha Pivot Grid為其Web應用程序添加強大的分析功能。它允許用戶匯總，匯總和分析多維數據，以做出更明智的決策。

Sencha Grid使組織能夠處理數百萬條記錄，并提供開箱即用的功能，如排序，分組，列鎖定和匯總行。

Exporter插件使您能夠以各種不同的格式導出Ext JS Grid和Pivot Grid數據。它支持標準的XLSX，XML，CSV，TSV和HTML格式，并允許您配置數據導出的可見（顯示）或不可見（隱藏）部分。Exporter插件還支持導出文檔的基本樣式。

3、復雜的數據可視化.

D3 Adapter使您可以向Web應用程序添加復雜的數據驅動文檔包（D3）可視化，如熱圖，樹圖，旭日等。現在，您可以創建動態可視化，不僅可以講述特定的故事，還可以幫助您的用戶瀏覽他們的數據并了解它必須講述的故事。

Ext JS Charting軟件包允許您直觀地表示包含各種動態和靜態圖表的數據 - 包括直線圖，條形圖和餅圖。圖表使用使用SVG，VML和Canvas技術實現的繪圖包開發的曲面和精靈。瀏覽器變體會自動處理，因此圖表始終可以正確顯示。Ext JS Charts還支持移動設備上的觸摸手勢，從而為圖表提供增強的交互功能，如平移，縮放和捏合。

4、后端不可知數據包。

Ext JS中包含的強大數據包將UI組件與數據層分離。數據包允許使用功能強大的模型進行客戶端數據收集，這些模型提供排序和過濾等功能。數據包與協議無關，可以使用來自任何后端源的數據。它具有會話管理功能，允許多個客戶端操作，最大限度地減少到服務器的往返。

5、布局管理器和響應配置。

Ext JS包含一個靈活的布局管理器，可幫助組織跨多個瀏覽器，設備和屏幕大小的數據和內容顯示。它可以幫助您控制組件的顯示，即使對于最復雜的用戶界面也是如此。Ext JS還提供了一個響應式配置系統，允許應用程序組件適應特定的設備方向（橫向或縱向）或可用的瀏覽器窗口大小。

6、符合Section 508的可訪問性包（ARIA）。

Ext JS ARIA Package通過提供實現Section 508合規性所需的工具，可以為您的應用程序添加輔助功能支持。使用ARIA軟件包，您可以創建可供需要輔助技術（如屏幕閱讀器）的人員使用的應用程序來瀏覽網頁。

7、可定制的內置主題。

Ext JS組件有多種內置主題，包括Material，Triton，Classic，Neptune和Crisp。主題可自定義以反映特定的品牌標識。Sencha Cmd公開了Ext JS主題使用的數百個變量，可以改變這些變量來設計自定義主題。

YUI框架

Yahoo !UI Library (YUI)是一個開放源代碼的JavaScript函數庫，為了能建立一個高互動的網頁，它采用了AJAX,DHTML和DOM等程式碼技術。它也包含了許多CSS資源。 YUI 基于BSD協議，對所有的使用方式都是免費的。YUI 項目包括YUI 庫和兩個創建時工具： YUI Compressor (壓縮) 和 YUI Doc （JavaScripts代碼的文檔引擎）。

YUI分為兩個大類,一個是Ajax組件,里面包括對底層javascript包裝后的幾個工具包,分別是connection,event, dom,animation,dnd.還包括一組高級的javascript控件，目前包括AutoComplete,Calendar, Container,Menu,Slider,TreeView.

另一類是幾個很有用的幾個CSS文件，一個是CSS Page Grids，用它可以很方便的布局你的網頁。另外兩個是Standard CSS Fonts和Standard CSS Reset,利用這兩個CSS可以對字體等在不同瀏覽器中獲得一致的效果.

Sencha Touch 框架

Sencha Touch 是全球領先的應用程序開發框架，其設計旨在充分利用HTML5、CSS3 和Javascript 來實現最高級別的功能、靈活性和優化。Sencha Touch 是針對下一代具有觸摸屏設備的跨平臺框架。

它是針對企業級移動應用程序開發的完美解決方案。Sencha Touch 這款應用程序利用嚴格的代碼標準和經典的遺留模型創建而成，可供小型或大型團隊輕松簡便地使用。而且由于其輸出完全基于 web，您可以在您自己的團隊中部署您的應用程序，不必等候本地市場的批準或驗收。

特點：

1、支持世界上最好的設備。Beta版兼容Android和iOS，Android上的開發人員還可以使用一些專為Android定制的主題。

2、數據集成。提供了強大的數據包，通過Ajax、JSONp、YQL等方式綁定到組件模板，寫入本地離線存儲。

3、基于最新的WEB標準 – HTML5，CSS3，JavaScript。整個庫在壓縮和gzip后大約80KB，通過禁用一些組件還會使它更小。

4、.增強的觸摸事件。在touchstart、touchend等標準事件基礎上，增加了一組自定義事件數據集成，如tap、swipe、pinch、rotate等。

LAYUI框架

LAYUI 是一款采用自身模塊規范編寫的前端 UI 框架，遵循原生 HTML/CSS/JS 的書寫與組織形式，門檻極低，拿來即用。其外在極簡，卻又不失飽滿的內在，體積輕盈，組件豐盈，從核心代碼到 API 的每一處細節都經過精心雕琢，非常適合界面的快速開發。

layui 首個版本發布于2016年金秋，她區別于那些基于 MVVM 底層的 UI 框架，卻并非逆道而行，而是信奉返璞歸真之道。準確地說，她更多是為服務端程序員量身定做，你無需涉足各種前端工具的復雜配置，只需面對瀏覽器本身，讓一切你所需要的元素與交互，從這里信手拈來。

事實上，layui更多是面向于后端開發者，所以在組織形式上毅然采用了幾年前的以瀏覽器為宿主的類 AMD 模塊管理方式，卻又并非受限于 CommonJS 的那些條條框框，它擁有自己的模式，更加輕量和簡單。layui 定義為“經典模塊化”，并非是刻意強調“模塊”理念本身，而是有意避開當下 JS 社區的主流方案，試圖以盡可能簡單的方式去詮釋高效！它的所謂經典，是在于對返璞歸真的執念，它以當前瀏覽器普通認可的方式去組織模塊！ layui 認為這種輕量的組織方式，仍然可以填補 WebPack 以外的許多場景。所以它堅持采用經典模塊化，也正是能讓人避開工具的復雜配置，重新回歸到原生態的 HTML/CSS/JavaScript本身！

以上內容如有錯誤歡迎補充指導！

S框架稱得上層出不窮，幾乎每周都有新的框架與廣大用戶見面。在今天的文章中，我們將立足于逆向思維，考慮如何斷定一套JS框架不符合實際需求。作為一名JavaScript架構師、培訓人員及導師，我經常面對這樣一個問題——你最喜歡的框架是什么？或者哪款框架最為出色？而我給出的兩個答案往往令提問者感到意外。就目前而言，我個人最偏好的框架是React JS。但如果要為企業選擇一套框架，我給出的答案則是Angular 2.0。

不過大家更應該問的恐怕是“為什么要準備兩個答案？”或者更進一步探究，“我們該如何完成框架的選擇過程？”下面，我將向大家共享一些使用框架的實際感受。為了公平起見，首先聊聊我個人的一點選擇傾向。

我個人更偏愛以下幾套框架：

• React JS

• Angular 2

• Angular 1

• Ext JS 5或者6

• Ext JS 4

而如果要為大型企業推薦框架，那么答案會稍有不同：

• Angular 2

• Angular 1

• Ext JS 5 或者6

• React

• Ext JS 4

考慮到這些前提，下面我們具體思考接下來的問題。

由誰來使用框架？

在我所效力的企業當中，大多數員工都屬于Java程序員。這意味著JavaScript及其各類衍生版本都能夠為大家所快速熟悉及掌握。然而盡管各框架之間存在相當程度的共性，但也仍有不少差異需要強調。目前，Ext或者Angular 2的發展勢頭可能更好，這是因為它們能夠以更貼近Java或者C#的方式產生效果，從而吸引更多相關開發者的加入。

學習曲線是否陡峭？

那么在前面提到的框架中，其各自需要耗費多少時間進行學習？要找到答案，我們還需要考慮以下幾個問題：

• 能否購買支持服務以解答技術疑問？

• 說明文檔是否清晰明確？

• 框架流行程度如何？

• 團隊中是否已經擁有相關專家？

• 這套框架是否擁有公開Slack頻道？

• 框架開發者們是否關注企業客戶的需求？

說到這里，Ext JS與Angular 2的優勢應該已經顯現出來了，而這也正是我總結個人最愛的兩個選項的具體方式。

框架是否提供良好的約束機制？

我還記得當初VB 1.0剛剛面世時，每個人都興奮地高呼“看看它的構建與運行速度有多快”，并以此作為選擇的理由。

沒錯，VB允許大家采取任何能夠達到目標的代碼編寫方式。但歷史經驗告訴我們，只要框架本身仍然提供部分結構，那么用戶仍有可能編寫出糟糕的代碼，而且這類蹩腳成果的比例與框架所提供的結構量存在正相關。

在與多位開發者合作時，有些人可能要求其他成員重視代碼結構而不只是“能跑就行”。

立足于這一問題，Angular 2再次脫穎而出，而Ext則處于墊底位置。盡管Ext提供所謂MVC及MVVM機制，但其無法保證開發者編寫的代碼成果與其設計模式相匹配。在MVC當中，我甚至不確定編寫者是否清楚自己在開發些什么東西。

行業標準

為了讓Ext的運作效果更貼近桌面開發環境，其能夠生成HTML并利用其布局機制控制各元素在屏幕上的顯示位置。前面提到的其它框架皆全部利用CSS實現布局控制。Ext的優勢在于，我不需要了解HTML或者CSS即可實現理想的顯示效果。但弊端則是，如果我希望嘗試一些Ext支持能力之外的效果，則將面臨巨大障礙。另外，使用HTML與CSS則會讓屏幕渲染時長大幅增加，特別是在組件存在三層以上嵌套的情況下。

另外，Ext利用特殊的類定義機制讓JavaScript看起來更像是Java及C#。這不禁令人擔心，隨著ECMAScript標準的演進與其自有類似機制的推出，Ext選擇的作法未來還是否能夠得到廣泛支持。

Ext還采用專門的構建流程。雖然這能夠規避構建中的大部分阻礙，但大家可能會問，“為什么不采用gulp、grunt或者npm腳本之類的標準？”

盡管Angular 2主要使用TypeScript，但Angular 2與Ext間的區別在于：1）盡管強烈推薦，但大家并不一定需要使用TypeScript；2）TypeScript只負責實現部分功能，且實際效果與ECMAScript標準類似。因此，Angular 2的發展前景明顯要更為光明。

在這方面，另一款值得關注的框架為React JS。其應用構建流程全部采用行業標準，但這款單元測試框架并不允許大家在測試中使用Karma。

可測試性如何？

毫無疑問，我個人要求全部框架都具備單元測試能力，因此Ext JS 4直接被淘汰出局。大家可能會強調，MVC能夠用于測試控制器，但這是MVC的功能而非由Ext自身實現。

在另一方面，React的測試能力最出色，這也是我支持它的原因所在。但我認為它仍然不太適合由企業客戶選擇，因為其學習周期太長而且說明文檔不太完善。

調研工作

好了，到這里各原則性問題已經相當明確，但問題在于我們要如何提前做好準備？大多數具體信息往往要在員工實際使用某套框架后才會出現。

最好的辦法就是聽聽框架老用戶們的意見。在測試框架中，我的起步工作就是“我能在互聯網上找到多少與該框架相關的信息？”而第二個問題則是，“該框架流行程度如何？”最后，我會聯系這款框架的反對者，聽聽他們對其做出的負面評價。

如何判斷一套框架不符合實際需求？

現在說回標題——要想選出一套錯誤的框架，大家應當聽信銷售人員的忽悠、別問任何問題，同時忽略一切之前提到的考量因素。

然后為自己的沖動懊悔不已……

原文標題：How Not to Choose a Framework

【51CTO譯稿，合作站點轉載請注明原文譯者和出處為51CTO.com】

查看更多精彩內容，請關注51CTO官方微信賬號：51CTO（微信號：weixin51CTO）。行業資訊，技術干貨，福利互動，都在這里！