免费视频淫片aa毛片_日韩高清在线亚洲专区vr_日韩大片免费观看视频播放_亚洲欧美国产精品完整版

原文：ExtJS vs AngularJSExtJS和AngularJS是兩個(gè)行業(yè)內(nèi)領(lǐng)先的富界面開(kāi)發(fā)框架。TechFerry有機(jī)會(huì)使用Ext JS和Angular JS來(lái)開(kāi)發(fā)多個(gè)富界面的單頁(yè)面應(yīng)用程序。本文講述的就是使用這兩種技術(shù)來(lái)開(kāi)發(fā)多個(gè)應(yīng)用程序后的開(kāi)發(fā)體驗(yàn)。本文圍繞利弊、架構(gòu)、測(cè)試、移動(dòng)能力、性能、生成和部署等方面對(duì)Ext JS和Angular JS進(jìn)行了超過(guò)30個(gè)以上的要點(diǎn)進(jìn)行了比較。我們將通過(guò)使用Ext JS和Angular JS開(kāi)發(fā)一個(gè)測(cè)試應(yīng)用程序來(lái)了解架構(gòu)細(xì)節(jié)，以便進(jìn)行詳細(xì)的性能比較測(cè)試。對(duì)于性能報(bào)告，我們使用了類似的組件集，采用了固定的生成過(guò)程，以確保比較是同類比較。Sencha Ext JS業(yè)界最強(qiáng)大的富界面應(yīng)用程序開(kāi)發(fā)框架無(wú)與倫比的跨瀏覽器兼容性先進(jìn)的MVC架構(gòu)無(wú)插件的圖表現(xiàn)代UI部件AngularJSHTML增強(qiáng)的Web應(yīng)用程序與其他庫(kù)的完整擴(kuò)展能力和好的協(xié)同表現(xiàn)開(kāi)源的Javascript框架，由谷歌維護(hù)聲明式編程Sencha ExtJS 和AngularJS 的比較Sno功能ExtJSAngularJS1.一站式富界面應(yīng)用程序 ? ?2.具有豐富的主題套件能力的UI組件 ?幸運(yùn)的是，有大量的開(kāi)源的商業(yè)組件，為Angular JS提供了集成組件，包括AngularUI、AngularUI Bootstrap、Kendo（或Angular-Kend）、Wijmo或其他。3.打頁(yè)面應(yīng)用程序的設(shè)計(jì) ? ?4.跨瀏覽器兼容性 ?Angular JS依賴于jqLite/JQuery來(lái)提供跨瀏覽器的兼容能力。但與其他第三方庫(kù)集成可能需要跨瀏覽器兼容能力。注意：Angular JS（1.3及以上）已經(jīng)不支持IE8了，而Sencha Ext JS 5還會(huì)繼續(xù)支持IE8。如果你的企業(yè)用戶需要支持IE8，應(yīng)考慮Ext JS。5.圖表Ext JS獨(dú)立圖表是業(yè)內(nèi)最強(qiáng)大和最先進(jìn)的，對(duì)于大多數(shù)商業(yè)應(yīng)用程序來(lái)說(shuō)，它的插件是免費(fèi)和足夠應(yīng)付的。AngularJS D3圖表基本上就是集成的D3圖表，這讓它擁有了令人驚異的圖表和圖形繪制功能。使用D3.js，你會(huì)愛(ài)上D3圖表的。6.學(xué)習(xí)曲線高中等架構(gòu)7.應(yīng)用程序設(shè)計(jì)框架MVC還可看看ExtJS 5 BetaMVW (Model-View-Whatever).它可支持流行的模式，如模型-視圖-控制器或模型-視圖-視圖模型8.依賴注入對(duì)于依賴注入，Ext JS可以通過(guò)擴(kuò)充Deft JS來(lái)添加Ioc（Inversion of Control，控制反轉(zhuǎn)）容器。 ?9.雙向數(shù)據(jù)綁定 ? ?10.直接的DOM操作 ? ?11.模塊化 ? ?測(cè)試12.自動(dòng)化測(cè)試支持可通過(guò)外部工具實(shí)現(xiàn) ?13.測(cè)試框架或測(cè)試運(yùn)行器一些流行的第三放javascript測(cè)試框架，如Siesta（專門為Ext JS進(jìn)行了優(yōu)化）、Jasmine和Mocha，都可用于測(cè)試。AngularJS依靠它自己的端到端測(cè)試運(yùn)行器（Karma）來(lái)實(shí)現(xiàn)集成測(cè)試。Protractor就是針對(duì)Angular應(yīng)用程序的端到端測(cè)試框架。性能14.Dom 算法深度優(yōu)先、自底往上的算法對(duì)于DOM樹(shù)，指令是深度優(yōu)先、自底往上的算法。而對(duì)于控制器則是自上往下的方式。15.性能較高的覆蓋面/重量，因此Ext JS相對(duì)比較慢。在性能測(cè)試中，Angular比Ext JS輕3倍。請(qǐng)參閱性能比較統(tǒng)計(jì)。16.輕量級(jí)-較小的下載覆蓋面 ? ?移動(dòng)能力17.Web應(yīng)用程序的移動(dòng)支持Sencha建議使用Sencha Touch來(lái)開(kāi)發(fā)應(yīng)用程序的移動(dòng)版本。在移動(dòng)設(shè)備上，像嵌套列表這樣的組件比網(wǎng)格更實(shí)用。不過(guò)，這意味著需要為應(yīng)用程序開(kāi)發(fā)移動(dòng)版本。使用ng-touch庫(kù)實(shí)現(xiàn)響應(yīng)式Web應(yīng)用程序，angular-gestures（手勢(shì)）和AngularJS響應(yīng)式模塊。18.跨平臺(tái)本地移動(dòng)應(yīng)用程序/混合應(yīng)用程序通過(guò)Sencha Touch集成Apache Cordova/Phonegap實(shí)現(xiàn)。通過(guò)Trigger.io、Cordova/Phonegap集成基于AngularJS優(yōu)化過(guò)Ionic框架實(shí)現(xiàn)，可用來(lái)開(kāi)發(fā)富界面和可靠的移動(dòng)應(yīng)用程序。19.移動(dòng)網(wǎng)站Sencha touch可用來(lái)開(kāi)發(fā)移動(dòng)網(wǎng)站。AngularJS響應(yīng)模塊（angular-responsive, angular-deckgrid等）、UI Boostrap、AngularJS responsive directives, angular-gestures 和ngTouch庫(kù)。路由20.內(nèi)置路由 ?參閱ExtJS 5 Beta ?21.深度鏈接 ?參閱ExtJS 5 Beta ?22.瀏覽器歷史、向前、向后按鈕支持t通過(guò)Ext.util.History實(shí)現(xiàn) ?23.瀏覽器書簽支持 ?參閱ExtJS 5 Beta ?24.SEO支持大多數(shù)單頁(yè)面應(yīng)用程序需要通過(guò)身份驗(yàn)證后才能使用，因而一般不需要SEO索引。對(duì)于公共頁(yè)面，可使用靜態(tài)HTML/CSS來(lái)實(shí)現(xiàn)，如果需要實(shí)現(xiàn)的動(dòng)態(tài)內(nèi)容，可考慮AjaxBased SEO?？煽紤]使用Prerender.io或在Web服務(wù)器中實(shí)現(xiàn)無(wú)頭的瀏覽器支持來(lái)實(shí)現(xiàn)基于Ajax的SEO。部署25.生成工具針對(duì)Ext JS 4.x+的Sencha cmd 工具或針對(duì)Ext JS 3.x的Sencha sdk工具第三放的 Grunt 工具26.包管理工具Sencha cmdYeoman, Grunt 或 Bower協(xié)議和支持27.協(xié)議：開(kāi)源或商業(yè)Per-seat / per-server的商業(yè)協(xié)議或GPL許可下的開(kāi)源協(xié)議MT許可下的開(kāi)源javascript框架28.完整的文檔套件、教程、視頻示例、培訓(xùn) ? ?29.支持：一般性討論、Bug報(bào)告和定制功能需求基于Web的公共或白金（僅付費(fèi)的訂閱用戶）支持公共支持30.完全的樂(lè)趣和滿足：在整個(gè)應(yīng)用程序開(kāi)發(fā)生命周期內(nèi)，不需要考慮所選擇的第三庫(kù)新版本發(fā)布或bug修復(fù) ? ?其他31.內(nèi)置動(dòng)畫支持 ? ?32.Deferred 和Promises.DeftJS提供了一些Ext JS擴(kuò)展，包含了Deferred和Promises. ?33.Dirty Checking（臟檢查） ? ?34.Deferred BootstrapUntil now, ExtJS applications' testing has never required delay in the Bootstrap as third-party JavaScript testing frameworks which are used for ExtJS application testing do not require deferring the bootstrap.Angular Scenario Runner and Batrang require Deferred Bootstrap and hence Deferred Bootstrap concept is introduced to allow end to end tests.性能比較統(tǒng)計(jì)為了評(píng)估這兩個(gè)框架的性能，我們開(kāi)發(fā)了一個(gè)包含網(wǎng)格、樹(shù)和圖表組件的小型的應(yīng)用程序。這兩種技術(shù)都是按照規(guī)定的生成過(guò)程來(lái)進(jìn)行的，因此，我們可以使用最小化的生成來(lái)進(jìn)行量級(jí)比較。YSlow用來(lái)收集性能數(shù)據(jù)。其他的細(xì)節(jié)：Ext JS：使用網(wǎng)格、樹(shù)和圖表組件Angular JS：使用angular-charts.min.js、angular.min.js、jquery.min.js、angular-route.min.js、ng-grid-2.0.7.min.js、angular.treeview.min.js、angular-animate.js模塊對(duì)于這些組件的數(shù)據(jù)部分，使用的是同意的http請(qǐng)求，同樣的Web服務(wù)器。結(jié)論：Ext JS比AngularJS重3倍Ext JSAngularJS：如果使用ext-all，那么統(tǒng)計(jì)結(jié)果是：框架的選擇：使用Ext JS：使用Sencha Ext JS提供的方便的組件，可節(jié)省大量時(shí)間。如果擔(dān)心編程和開(kāi)發(fā)時(shí)的兼容性問(wèn)題，它是一大亮點(diǎn)。你或你的客戶需要專門的許可或?qū)I(yè)支持。如果富桌面應(yīng)用程序（使用Ext JS）和移動(dòng)Web應(yīng)用程序（使用Sencha Touch）是獨(dú)立，這相當(dāng)實(shí)用。可承擔(dān)支持合約或per-seat / per-server 的商業(yè)許可。使用AngularJS：要求較小的足跡。更多詳細(xì)信息，請(qǐng)參閱性能比較統(tǒng)計(jì)。應(yīng)用程序要求響應(yīng)式設(shè)計(jì)。你的組織需要尋求自動(dòng)化測(cè)試的價(jià)值，以及自動(dòng)化測(cè)試是你們開(kāi)發(fā)文化的一部分。要整合的第三放組件是免費(fèi)的，因而成本比較低。團(tuán)隊(duì)更關(guān)注CSS和跨瀏覽器的兼容性問(wèn)題。在整個(gè)應(yīng)用程序開(kāi)發(fā)生命周期內(nèi)，團(tuán)隊(duì)能夠很好的管理所集成的第三方庫(kù)的新版本或bug修復(fù)。架構(gòu)差異：我們嘗試從以下10個(gè)方面來(lái)比較Ext JS和AngularJS之間的架構(gòu)差異：應(yīng)用程序設(shè)計(jì)框架組件路由的好處可測(cè)試性數(shù)據(jù)綁定SEO的友好性移動(dòng)解決方案DOM算法Deferred和Promises臟檢查Deferred bootstrap摘要：Ext JS是基于組件（網(wǎng)格、樹(shù)、表單和圖表）的，代碼開(kāi)始于擴(kuò)展的API類和配置模塊，如果需要，可自定義延時(shí)文稿或行為/事件，將這些組件添加到容器/布局。它遵循面向?qū)ο笤瓌t和MVC模式，很少需要與DOM直接交互。AngularJS，剛好相反，它是聲明式編程，開(kāi)始時(shí)，需要在純HTML中添加AngularJS指令、配置模塊、使用模板或路由來(lái)配置視圖，而且框架還有關(guān)注DOM的創(chuàng)建。由于要處理HTML，因而需要直接與HTML結(jié)構(gòu)或DOM元素交互。Ext JS:遵循 MVC框架.隨著Ext JS應(yīng)用程序的大小和復(fù)雜性的增加，Sencha Touch和Ext JS可以通過(guò)加入Deft JS來(lái)添加Ioc容器、針對(duì)依賴注入和動(dòng)態(tài)應(yīng)用程序的程序集。基于組件和hence模塊AngularJS:AngularJS是增強(qiáng)的HTML Web一個(gè)月程序它被描述為“Model-View-Whatever”框架，它沒(méi)有規(guī)定是哪一種特定的應(yīng)用程序架構(gòu)或哪一套模式。然而，它足夠靈活去支撐流行的模式，如模型-視圖-控制器或模型-視圖-視圖模型。基于模塊。依賴于模塊內(nèi)的html元素。Ext JS:Ext JS區(qū)別于其他框架的一個(gè)主要特性就是包含一套有豐富的主題能力的UI組件。Pros:使用Ext JS提供的方便的組件可以節(jié)省大量時(shí)間。Cons:Sencha組件往往會(huì)產(chǎn)生冗長(zhǎng)的DOM輸出，其結(jié)果就是需要更多標(biāo)簽。AngularJS:AngularJS不能解決的問(wèn)題是沒(méi)有豐富用戶接口組件。不過(guò)，有大量的開(kāi)源或商業(yè)組件可以集成到AngularJS，包括AngularUI、AngularUI Bootstrap、Kendo (或 Angular-Kendo)、 Wijmo以及其他。ExtJS:Ext JS沒(méi)有路由。不過(guò)，許多單頁(yè)面應(yīng)用程序可能不需要路由，除非你希望通過(guò)內(nèi)部/深度鏈接來(lái)實(shí)現(xiàn)SEO友好性或支持書簽。AngularJS:AngularJS路由連接著瀏覽器中的控制器、視圖模板和當(dāng)前URL定位。使用該特性就可實(shí)現(xiàn)深度鏈接。深度鏈接是由網(wǎng)站中指定的、可搜索的或可索引的內(nèi)容塊的連接所組出的超鏈接。它可以讓我們利用瀏覽器的歷史記錄（后退或前進(jìn)導(dǎo)航）已經(jīng)瀏覽器的書簽功能。ExtJS:使用Sencha框架生成的應(yīng)用程序可使用幾個(gè)流行的第三方j(luò)avascript測(cè)試框架來(lái)測(cè)試，如Siesta（基于Ext JS進(jìn)行了優(yōu)化）、Jasmine和Mocha。Sencha產(chǎn)品套件沒(méi)有包含測(cè)試框架或測(cè)試運(yùn)行器。AngularJS:AngularJS從創(chuàng)建之初開(kāi)始就被設(shè)計(jì)為可測(cè)試的應(yīng)用程序。它支持三方面的自動(dòng)化測(cè)試：?jiǎn)我弧⒓珊凸δ軠y(cè)試。AngularJS團(tuán)隊(duì)還開(kāi)發(fā)了它自己的Karma測(cè)試運(yùn)行器。另外，第三方工具Protractor是針對(duì)Angular應(yīng)用程序的端到端測(cè)試框架。雙向數(shù)據(jù)綁定是應(yīng)用程序UI和模型對(duì)象之間的粘合劑，這樣，對(duì)象屬性的改變就會(huì)反映到UI，反之亦然。ExtJS:通過(guò)使用存儲(chǔ)對(duì)象，Ext JS有著優(yōu)秀的數(shù)據(jù)綁定功能。為了執(zhí)行雙向數(shù)據(jù)綁定，還需要執(zhí)行一些工作，如重新加載存儲(chǔ)等等。 AngularJS:AngularJS的雙向數(shù)據(jù)綁定基本上是通過(guò)嵌套在原型繼承樹(shù)上的模型來(lái)實(shí)現(xiàn)的。Cons:如果模板綁定的數(shù)據(jù)有2000到3000，應(yīng)用程序會(huì)變得遲鈍。Bindonce is a great way to minimize the number of watches when most of the data presented in your page, once rendered, are immutable and you need not keep watching them for changes.Most of the single page apps which work behind authentication need not be indexed for SEO. If you have some pages in your app which are public and which needs to be indexed, you can createthem separately, either with static HTML/CSS or if you do need to use dynamic content, consider Ajaxbased SEO as described below.Ajax based SEO: For the indexing of dynamic / ajax-based single page web apps, all you have to do is to generate the additional static content so that when the crawlers access your page, they get easy access to that static content and when the users access your page, they see the app. To achieve this functionality you could either use some tools like Prerender.io: fully open-source or you have to set up the headless browser support in your web-server which is an additional effort.ExtJS:Ajax based seo is possible in ExtJS with hashbang urls' support in your web-server.AngularJS:AngularJS seo with Prerender.io: When a crawler visits your page at hashbang url, the Prerender service will check and see if it has a snapshot or already rendered page for that URL, if yes, it will send it to the crawler, if not, it will render a snapshot on the fly and send the rendered HTML to the crawler for correct indexing.Alternatively, you can also build support for hashbang URLswhich may require you to set-up your web-server to summon-up the headless html browser.ExtJS:Sencha Touch - the industry-leading and high-performance mobile HTML5 framework, is used to develop powerful, universal mobile web apps / mobile website.Sencha touch integration with Cordova/Phonegap is used to develop the cross platform hybrid applications.AngularJS:AngularJS can be used to develop responsive web apps / websites although all the angular modules are not responsive.To develop the cross platform hybrid applications, integrate AngularJS with Trigger.ioIonic Framework - Advanced Html5 hybrid mobile framework and optimized for AngularJSCordova/PhonegapExtJS:It follows the Depth First, Bottom-Up approach.AngularJS:Directives are linked in a Depth-First, Bottom-Up approach to the DOM tree.Controllers are linked in a top-down manner.Deferred and Promises break the complexities of asynchronous programming, separate out the synchronous and asynchronous world, remove the tight coupling between the twoThey are for asynchronous programming what try, catch and throw keywords are for synchronous programming.ExtJS:ExtJS augmented with DeftJS may provide Deferred and Promises.AngularJS:AngularJS offers an implementation of the Q API for Deferred and Promises.Dirty checking in nutshell: The framework compares the old value and new value and if they are different, fires the change event.ExtJS:ExtJS 4.x uses the store's binding feature to execute the dirty checking.ExtJS store allows you to delay the process of dirty checking via its autoSync config which when set to false, the user changes are marked with dirty flags in UI and are updated in batch when the user saves the store.To reflect the changes in the real data in UI, a little work is to be done like reloading the store etcAngularJS:Angular uses theDigest Cycle to execute the dirty checking.With Angular api, you do not need to manaually call the digest cycle, angular internally fires digest cycle followed by updation of the dom but from third party api, you need to call $apply method to enter the digest cycle.Changes are reflected in the real data in UI as soon as the digest cycle is finished.The dirty checking is done asynchronously.Cons:Application becomes laggy if there are 2000-3000 watches in a template...moreBindonce is a great way to minimize the number of watches when most of the data presented in your page, once rendered, are immutable and you need not keep watching them for changes.Bootstrap means the initialization process. Deferred bootstrap is to make a delay in the bootstrap process to mock out the heavy dependencies or for the instrumentation purposes. Deferred bootstrap is primarily introduced to allow end to end tests.Although deferred bootstrap has no value in the developement and testing of most single page applications, yet it serves its value in AngularJS applications' end to end testing. Some javascript test runners such as Batrang and Angular Scenario Runner (which are developed by AngularJS team for the end to end testing of the angularJS applications) require deferred bootstrap.ExtJS:Several popular third-party JavaScript testing frameworks such as Siesta (optimized specifically for Ext JS), Jasmine and Mocha, are being used for ExtJS applications testing which do not require deferring the ExtJS application's bootstrap.AngularJS:Batrang is a new Chrome extension, recommended by the angular team, provides the tools to address performance bottlenecks, visualize and debug applications.AngularJS Batarang and Angular Scenario Runner require Deferred Bootstrap feature to hook into angular's bootstrap process and sneak in more modules into the DI registry which can replace or augment DI services for the purpose of instrumentation or mocking out heavy dependencies.The digest cycle is all about reacting to changes in data.Generally what happens is, the browser's event-loop waits for an event to arrive, as long as it recives an event, it emits the event on the input controls which is then captured in the corresponding directive's event handler which calls apply function, to enter into Angular execution context, with function/expression (the work you wish to do in Angular execution context) as parameter.Model mutation is then executed in apply function with all the error handling followed by the firing of the digest cycle in its finally phase.In all the Dirty Cycle mechanisms, all thewatchers in the watch list are iterated and in each iteration watch expression in current scope is evaluated, old and new value of scope is compared and if both values differ,then the corresponding listener of the watcher function is fired which upon execution calls digest cycle again with one of the two possilities: If the listener function does not modify the scope then in the running digest turn, model is declared as stable and digest loop is finished followed by the browser re-painting of the DOM node which was dirty.If scope is modified, then it will fire the other listeners, so the watchers keep re-running until until no more watchers are fired and a max limit of 10 iterations is reached when $digest will throw 'Maximum iteration limit exceeded' to prevent infinite loops.This dirty checking is doneasynchronously.Three mechanisms of Dirty Checking:Reference-Based Dirty-Checking: The old value is compared to the new with the strict equality operator=== which detect the new and old values are the same "physical" object.It is the most efficient both in terms of computation and memory, since it doesn't do copying or traversal. It merely keeps a reference to the value around for comparison.Value-Based Dirty-Checking: It performs a deep-object-tree comparison.This means that within each $digest cycle, AngularJS will check to see if the new and old values have the same structure.Collection-based dirty checking: It works by comparing physical object references. Collection watchers keep an internal copy of the array or object, and traverse the old and new values in each digest cycle, checking for changes using the strict equality operator === i.e. unlike the reference based dirty checking, it goes one-level deep and performs an additional, shallow reference check of the top level items in the collection.Application becomes laggy if there are 2000-3000 watches in a template.Although anything faster than 50ms is imperceptible to humans and you can't really show more than about 2000 pieces of information to a human on a single page because anything more than that is really a bad UI and humans can't process this anyway, yet while building any sort of widget or data grid with two-way binding you may easily hit 2000 bindings without the bad UI.By default all the model data that is bound to UI are being watched upon i.e. they all have a watcher registered in the watch list, a collection used by digest cycle for the dirty checking. You can also attach a watcher to the scope by using $watch function. A watcher has two functions: A watch function or a watch expression, which specifies the piece of data you are interested in. A listener function which will be called whenever that data changes.Assignment such as $scope.username="angular" will not immediately cause a $watch to be notified, instead the $watch notification is delayed until the $digest phase. This delay is desirable, since it coalesces multiple model updates into one $watch notification as well as it guarantees that during the $watch notification no other $watches are running. If a $watch changes the value of the model, it will force additional $digest cycle.Recently launched ExtJS5 Beta version provides support for router and hence deep linking is now possible.ExtJS 5 also supports MVC and MVVM.We will review and update the article as and when new and stable versions of ExtJS and AngularJS are released.