整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          關于ExtJS與JQuery對比

          先分別介紹一下ExtJS和JQuery,然后進行對比分析

          一、什么是ExtJS?

          1、ExtJS可以用來開發RIA也即富客戶端的AJAX應用,是一個用javascript寫的,主要用于創建前端用戶界面,是一個與后臺技術無關的前端ajax框架。因此,可以把ExtJS用在.Net、Java、Php等各種開發語言開發的應用中。ExtJs最開始基于YUI技術,由開發人員JackSlocum開發,通過參考JavaSwing等機制來組織可視化組件,無論從UI界面上CSS樣式的應用,到數據解析上的異常處理,都可算是一款不可多得的JavaScript客戶端技術的精品。

          2、Ext的UI組件模型和開發理念脫胎、成型于Yahoo組件庫YUI和Java平臺上Swing兩者,并為開發者屏蔽了大量跨瀏覽器方面的處理。相對來說,EXT要比開發者直接針對DOM、W3C對象模型開發UI組件輕松。

          二、什么是JQuery?

          jQuery是一個兼容多瀏覽器的javascript框架,核心理念是write less,do more(寫得更少,做得更多)。jQuery在2006年1月由美國人John Resig在紐約的barcamp發布,吸引了來自世界各地的眾多JavaScript高手加入,由Dave Methvin率領團隊進行開發。如今,jQuery已經成為最流行的javascript框架,在世界前10000個訪問最多的網站中,有超過55%在使用jQuery。

          jQuery是免費、開源的,使用MIT許可協議。jQuery的語法設計可以使開發者更加便捷,例如操作文檔對象、選擇DOM元素、制作動畫效果、事件處理、使用Ajax以及其他功能。除此以外,jQuery提供API讓開發者編寫插件。其模塊化的使用方式使開發者可以很輕松的開發出功能強大的靜態或動態網頁。

          三、二者對比

          1.JQuery-EasyUI是仿照Ext做的。

          2.Ext框架是一個整體,面向對象的編程思想,每個控件之間可以相互通訊。

          3.JQuery的控件全都是分散的,沒有整體性可言。你可以單獨拿出來一個控件就能用。

          4.若要開發系統應用,首選Ext,控件庫豐富,擴展和維護都方便。若是簡單的頁面動畫和效果,首選JQuery

          5.jquery只是一個工具庫,比較簡單,相對容易。 Ext是一套真正的ria開發框架,甚至可以實現桌面應用一樣的強大功能。本身代碼質量極高,而且是高度的面向對象設計。jQuery 入門相對容易一些,實際用的過程中要用到各種插件,基本上用一個“學”一個。 ExtJS 入門稍難。

          6.大小比較:首先ExtJS是一個完整的Framework,是重量級別的,easy ui 是基于jquery庫的一套UI組件庫,是輕量級的,ExtJS是應用application級的,而jquery是page頁面級的。當然application也是由page組成的,那就需要你自己去完成了,考慮你的需求,和使用框架的初衷,選擇使用哪一種。同時ExtJs由于是重量級框架,完全面向對象風格,提供API非常完備也非常龐大,所以學習成本也想相對較大。

          7.兼容性比較:ExtJS兼容IE全系列瀏覽器和其他非IE現代瀏覽器,jquery UI向來不太考慮ie低版本瀏覽器的兼容,從態度上的鄙視。easy UI是基于jquery的,jquery2.X以上的版本不再支持IE6、7、8,,已鄭重聲明,請看官方網站,easyUI最新版本1.3.3使jQuery2.0,由于又很多HTML5特性,不再支持IE6,低版本由一些小部分的兼容不夠好,請自己做技術選型的時候去測試,你要使用那個版本。在兼容問題上,他們都有瑕疵,看你的接收程度。

          8.使用許可license. EXTJS 2.1以上版本,商用需要購買商業授權,jquery UI 使用MIT協議,開源。 jquery easyUI如果商用需遵循license commercial商業許可,也就是要購買使用權.

          的, 我就是鼎鼎大名的Javascript, 典型的高富帥,前端編程之王,數以百萬計的程序員使用我來編程。 如果你沒有用過我就太out了。

          不過當我是一個屌絲時, 真的沒有想到能發展到如今的地位......

          第一章:出世

          我出生在上古時代的瀏覽器Netscape中, 那個時候的網頁真是乏善可陳, 你可能都想象不到, 主要是些丑陋的靜態文本和簡單的圖片, 和現在美輪美奐的頁面相比,差的實在太遠了, 不信你請看著名的Yahoo 網站:

          那個時候人們還在用Modem(調制解調器)通過電話線撥號上網, 每次撥號都有種吱吱啦啦聲音, 就像一個鐵片努力的刮一個鍋底,讓無數人抓狂不已。

          這還不算什么, 網速只有28.8kbit /s , 下載一個網頁都得耐心的等待半天。

          我的主人Brendan Eich 有一回用公司的Netscape上網購物的時候, 需要注冊用戶, 填了一個表單, 點擊了提交按鈕, 等待了38秒, 然后服務器告訴他:“對不起, 您忘了選擇性別了”

          他幾乎要崩潰:“靠,怎么能夠這樣! 這么簡單的問題瀏覽器怎么不告訴我, 還得讓我把數據提交到幾千公里外的服務器網站, 然后在那里檢查才能發現問題嗎!”

          對瀏覽器進行改革勢在必行!

          Brendan Eich 于是去找老板: “我實在是受不了了, 我需要一種腳本語言運行在瀏覽器中, 幫助我完成這些本來就應該在瀏覽器中完成的任務“

          老板: “我們Netscape公司也早有此意, 要不你來設計一個吧”

          Brendan Eich: “好啊, 你聽說過LISP(確切的說是Scheme)嗎, 當今最牛的編程語言,我們公司何不把Scheme 運行在瀏覽器中呢? “

          老板: "LISP有誰會用啊? ”

          Brendan Eich: "......"

          老板: "我們正在和Sun 公司合作, 你聽說過他們剛發明的Java 嗎, 那個運行在瀏覽器中的Applet簡直是酷斃了,Java 肯定是未來的網絡語言。 所以你要搞個新語言出來,要和java 足夠相似, 但是要比java 簡單的多的多, 這樣那些網頁開發人員就可以用了。 ”

          我的主人Brendan Eich很郁悶, 但是也沒有辦法, 他對java 毫無興趣, 為了應付公司的任務, 他只花了10天就把我設計了出來, 對了, 我本來叫LiveScript, 但是為了向“萬惡”的Java示好, 我竟然被改成了 Javascript !

          由于設計時間太短,我的一些細節考慮得不夠嚴謹,導致后來很長一段時間,Javascript寫出來的程序混亂不堪。如果主人預見到,未來這種語言會成為互聯網第一大語言,全世界有成千上萬的學習者,他會不會多花一點時間呢?

          第二章:成長

          Java 是當時的明星語言, 年輕,活力四射 , 他經常嘲笑我: 你小子到底是個計算機語言嗎?

          我說“是啊, 我的語法和你差不多呢”

          Java: "你為什么只能在瀏覽器中運行啊? 你能寫個程序單獨運行嗎, 哎對了你能讀取一個文件嗎 ?"

          我當然讀取不了文件,我生活在瀏覽器里, 用我寫的程序只能嵌入在html網頁中, 由瀏覽器中來執行。他們給這個執行模塊起了一個很有動感的名字: javascript 引擎

          我于是反擊Java : “我有個引擎你知道嗎?”

          但是Java 輕松就把我打翻在地: “我還有個虛擬機呢”

          年長的C也問我:你怎么不編譯運行啊, 你看我編譯以后,運行的多快。

          我說: 省省吧, 要是每個頁面打開后都先編譯javascript ,那多慢啊。

          不僅僅是Java 和C , 包括VB, Delphi等當時流行的語言都瞧不起我,背地里叫我屌絲。

          也是, 我沒法獨立運行, 也不能像VB,Delphi他們畫出漂亮的界面, 我能做的就是操作HTML 的DOM 和瀏覽器。

          你可能不知道DOM是什么東西, 這么說吧, 瀏覽器從服務器取到HTML網頁以后, 會展示成頁面讓你看, 但是他的內部其實會把HTML組織成一個樹給我,

          這個樹可以稱為DOM。 例如這個頁面:

          <html>

          <head>

          <title>Sample Page</title>

          </head>

          <body>

          <p>hello world!</p>

          </body>

          </html>

          DOM樹會長成這樣:

          (碼農翻身:該例子來自w3school)

          有了這棵樹, 我就能大展身手,我可以定位到DOM樹中任意一個節點, 然后對這個節點進行操作, 例如隱藏節點、顯示節點、改變顏色、獲得文本的值, 改變文本的值 ,添加一個響應點擊事件的函數 等等等等, 幾乎可以為所欲為了。

          更重要的是, 這些操作可以立刻展示出效果來, 你完全不用刷新網頁。

          注意這些操作完全是內部進行的, html源碼并不會改變, 所以有時候你打開html源碼,會發現這些源碼和你在瀏覽器中看的效果并不一致, 那就是我在背后改變了這個DOM樹了。

          我的主人Brendan Eich最初遇到的問題簡直就是小菜一碟了, 做個簡單的表單驗證,太簡單了。

          不只是操作DOM, 我還能控制瀏覽器, 比如打開窗口, 在一個窗口內前進,后退, 獲得瀏覽器的名稱, 版本 等等。

          你可能要問了, 為啥還要獲得瀏覽器的名稱和版本呢?

          說起來慚愧, 在Netscape 和IE 進行瀏覽器之戰的期間, 他們都爭相在自己的瀏覽器中支持Javascript, 并且為了鎖定程序員, 還開發了很多自己瀏覽器的獨特功能, 有些功能只能在IE用, 有些只能在Netscape 用, 所以必須的判斷是什么瀏覽器, 這樣才能特殊處理。

          不管怎么說, 我的這些本事讓瀏覽器中的網頁變的更加動態了, 更加有趣好玩了。

          但僅限于此, 我被困在瀏覽器和網頁上, 別的什么也干不了。

          用Java 的話來說: 這些都是雕蟲小技,奇技淫巧, 只是一個打著我的羊頭賣狗肉的屌絲而已。

          第三章: 第一桶金

          互聯網的發展超出了所有人的預料, 我被應用在幾乎每一個網站上, 但我一直很苦悶: 我作為一門語言,在瀏覽器中運行, 沒法像java 那樣訪問網絡, 也就沒有辦法調用服務器端的接口來獲取數據。

          用戶只能通過GET或者POST向服務器發送請求,這時候服務器返回的數據是整個頁面, 而不是頁面中的一個片段, 也就是說整個頁面都得刷新一遍, 哪怕是頁面中只有一個文字的改變。

          (碼農翻身注: 《IE為什么把Chrome和火狐打傷了》這篇文章介紹了HTTP的GET和POST, 可以通過菜單查看)

          1998年的時候 ,我和積極進取的IE5做了一次會談, 雙方就共同關心的話題深入的交換了意見, 最后一致同意, 在IE5中引入一個新的功能:XMLHttpRequest , 這個新功能將允許我直接向服務器發出接口調用!

          每當發起調用時, IE5通常會這么說:

          "小JS啊, 來, 你拿這個用戶名和密碼訪問一下服務器端處理登陸的接口 , 這個過程很費時間,我就不等你了, 先干別的事兒去了, 你得到服務器端的返回數據以后, 一定要記著調用下我給你的這個函數啊。 "

          我知道這其實叫做異步調用, 于是就乖乖的通過XMLHttpRequest 訪問那個登錄的url, 耐心的等待服務器干完活,把數據傳輸回來, 然后我就去調用那個函數, 基本是就是把DOM樹的某個節點更新一下, 例如讓那個包含用戶名和密碼登陸框消失, 再加一個提示消息:登錄成功 , 這事兒我很擅長。

          如果服務器處理和網絡速度都足夠快的話, 用戶就會發現: 咦, 我沒有刷新整個頁面, 竟然已經登錄了啊。

          我和IE都沒有料到,這個功能帶來了一場革命: 這種方式可以使得網頁局部刷新, 讓用戶瀏覽網頁的體驗極佳, 尤其是Google 地圖, Gmail 等應用讓互聯網應用火了起來。

          其他瀏覽器也迅速跟進,實現了類似功能, 各種各樣交互性極佳的網站如雨后春筍般出現。

          VB和Delphi 慢慢的不再嘲笑我了, 因為他們絕望的發現, 他們擅長的桌面應用慢慢的都被搬到了互聯網上, 沒人再喜歡他們了。

          我, Javascript, 挖到了第一桶金,開始走向人生巔峰。

          第四章: 發明JSON

          后來有個好事之徒把上面的那種處理方式稱為AJAX即“Asynchronous Javascript And XML”(異步JavaScript和XML), 其實異步挺好, 但是XML就很不爽了。

          比如說服務器返回了下面這段xml :

          <book>

          <isbn>978-7-229-03093-3</isbn>

          <name>三體</name>

          <author>劉慈欣</author>

          <introduction>中國最牛的科幻書</introduction>

          <price>38.00</price>

          </book>

          真正的數據很少, 標簽(像<name>這樣的)反而占了大頭, 把數據都給淹沒了。

          我對XML說: “你是不是太臃腫了, 傳輸起來多費勁啊。”

          XML說:“切,你這就不懂了,這樣很優雅啊,格式化良好, 人可以讀, 程序也可以讀啊。”

          "優雅個啥啊, 無用的數據這么多, 再說我還得用XML解析器來解析你, 費了勁了!"

          "你真是屌絲啊,連個解析都搞不定, 你看人家Java, 用我用的多Happy , Spring, Struts, Hibernate, 幾乎所有配置文件都是我。"

          Java 也在一旁幫腔: 是啊, 我解析的時候還用DTD 做校驗呢, 看看XML數據合法不合法。

          我無語。

          記得CPU阿甘說過:既然改變不了別人, 那就改變一下自己吧。

          我看了看我的語法, 里邊有個叫對象的東西, 它有一個花括號, 在括號內部,對象的屬性以名稱和值對的形式 (name : value) 來定義, 屬性由逗號分隔, 像這樣:

          var book = {

          "isbn": "978-7-229-03093-3",

          "name": "三體",

          "author": "劉慈欣",

          "introduction": "中國最牛的科幻書",

          "price": "38.00"

          }

          這種結構完全可以表達上面的xml 內容啊!

          我的語法還支持數組,這樣表達多個對象也不在話下啊:

          var books = [

          {

          "isbn": "978-7-229-03093-3",

          "name": "三體",

          "author": "劉慈欣",

          "introduction": "中國最牛的科幻書",

          "price": "38.00"

          },

          {

          "isbn": "978-7-229-03094-1",

          "name": "我是一個線程",

          "author": "劉欣",

          "introduction": "一個線程的自述",

          "price": "0.0"

          }

          ]

          數組和對象都支持嵌套, 任何復雜的結構都可以保存!

          更重要的是, 如果采用這種結構, 我根本不用什么XML解析器去解析了,它就是我語言的一部分。 直接拿來用即可。

          books[0].name -->返回“三體”

          books[1].introduction --> 返回“一個線程的自述”

          生活不要太爽啊 :-)

          我把這種簡潔的格式叫做JSON, 并且和服務器約定, 我們以后都用JSON來傳輸數據。

          至于XML, 還是讓Java 這樣的老學究去用吧。

          第五章:人生巔峰

          HTML負責結構, CSS負責展示, 而我(加上AJAX, JSON) 負責邏輯。

          于是前端編程三劍客形成了。

          ExtJS, prototype, JQuery 這些框架把前端編程推向另外一個高峰。

          甚至出現了AngularJS 這樣的奇葩,實現了SPA(單一頁面應用程序), 實在是難于想象。

          我給Java 說: Java 兄, 現在我完全可以在瀏覽器端實現MVC了, 你只需要在服務器端通過接口給我提供數據就行了。

          但是Java 還是給我潑冷水: 別得意忘形了, 服務器端才是核心, 要不你到服務器端試試?

          我很詫異:“服務器端? 我還真沒有想過, 住在64G內存, 32核的CPU 這種擁有幾乎無限資源的機器上是什么感覺? ”

          "感覺沒你想象的好 " Java 沒聲好氣的說 “多線程編程, 很多東西都要加鎖, 一不留神就掉到坑里。 我這里基本一個請求就是一線程來處理, 遇到數據庫操作, 雖然慢的要死,線程也得等待。 ”

          "那不能改成異步操作嗎?像我的AJAX一樣, 數據來了再通知我 " 我問Java。

          "不行, 一開始就是這樣, 現在改不了"

          把Javascript 放到服務器端執行怎么樣? 這個想法夠瘋狂的。

          首先得把瀏覽器端的運行環境, 就是javascript引擎移到服務器端, 這個引擎執行javasript 得足夠快,要不Java 還不得笑死我。

          原來的引擎一直不合格, 知道Chrome V8的出現, 才解決問題。

          其次得繞開java 服務器的問題: 線程遇到IO/數據庫/網絡 這樣的耗時操作, 不能等待, 得搞成異步處理。

          但的確有人這么做了, 在我的創始人Brendan Eich 發明了我10幾年以后 , 又一位大牛Ryan Dahl于2009年真的把我放到了服務器端。這就是node.js

          (碼農翻身:《Node.js 我只需要一個店小二》這篇文章介紹了Node.js的原理, 可以通過公共號的菜單查看)

          這下Java無話可說了, 雖然他還是對我在服務器端執行持懷疑態度, 但越來越多使用node.js的網站證明, javascript的確可以在服務器端立足, 并且有一個巨大的優勢:前端和后端都用同樣的開發語言:那就是我 javascript

          原來的前端開發現在竟然也可以毫無障礙的寫后端的程序了, 是名副其實的“全棧工程師” !

          這就是我,一個屌絲的逆襲, 我的創始人絕對想不到10幾年后我能成為這么一個高富帥, 我估計他夜里經常會想: "唉,當年太倉促了, 我要是把javascript 設計的更好一點就好了。"

          來源:碼農翻身

          曾在微博上說過“React就是哪吒”,那么一個前端框架和哪吒有什么關系呢?其實我覺得二者有某些相似的地方。

          哪吒家室顯赫,擁有的神器多到需要三頭六臂才能拿得過來,后來經歷磨難,脫胎換骨,能夠獨當多面。

          React源自Facebook,集多項特色于一身——組件化、聲明式、虛擬DOM、局部更新、狀態機等,React 16引入的Fiber架構更可謂脫胎換骨,得Flux、Redux、immutable.js、React Router助陣,如虎添翼。

          隨著React Native的出世和React Canvas的誕生,更是讓React如同有了三頭六臂一般,將傳統前端突破到安卓端、iOS端,大有一統全端的趨勢。

          目前三大框架Angular、React、Vue.js逐鹿中原,無論誰主沉浮,我都相信能“革了React命”的一定不是React的仿制品。

          如果你對上面提到的這些名詞不是特別了解,建議你閱讀本文后續的內容,本文將介紹前端的歷史和React相關知識。

          1 前端簡史

          在沒有Web時,信息的傳遞不太容易,得發明一種工具,讓信息的創造者和閱讀者都能看到一樣的東西,于是Web誕生了。

          1.1 Web 1.0

          Web的內容由網站制作者生成,家族介紹用戶只能瀏覽內容,信息的流動方向只能從服務端到客戶端,這一階段被稱為Web 1.0時代。有人說這個時代的Web是靜態的,這一階段主要涉及的技術是HTML、CSS、JavaScript。

          如果一段文字沒有標點,那就不太容易閱讀,標點其實是一種數據結構,數據必須有結構承載才能更容易傳遞。在Web中,HTML就是數據的結構,比如標題、段落、強調、表格等,現在我們稱其為語義化。

          因為視覺是Web的主要傳播途徑,除了結構,視覺也是一種信息,CSS成為視覺信息的載體,有HTML和CSS已經可以制作出頁面了。由于HTML中大量使用div標簽,HTML+CSS也被稱作DIV+CSS。

          光有視覺頁面還是不夠的,頁面還要能和用戶交互,比如點擊按鈕要有彈窗,JavaScript正是用來做這部分工作的,被稱為行為。至此,Web三要素,結構、表現和行為就全了,分別對應HTML、CSS和JavaScript。

          HTML、CSS和JavaScript要分離,一直被視為前端的金科玉律,CSS選擇器成為連接HTML和CSS的紐帶,而DOM成為HTML和JavaScript的橋梁,CSSOM承擔了JavaScript和CSS的媒介。

          1.2 Web 2.0

          Web的內容主要由用戶生成,用戶瀏覽其他用戶創造的內容,這一階段統稱為Web 2.0時代。這一階段涉及的技術繁多。

          服務器語言和表單的發明,第一次讓信息可以從客戶端流向服務端,賬號體系把用戶從屏幕前搬到了Web上,這一階段的技術棧沒啥變化,JavaScript也只是作為玩具語言,用來驗證表單,前端開發者都被稱作美工。

          2006年谷歌推出了Gmail,可以不用刷新完成各種操作,其媲美客戶端的體驗,也將Web 2.0推上了浪潮之巔。

          一種被稱為AJAX的名詞被發明——頁面需要更新,JavaScript向服務器發起請求,服務端不再返回頁面,而是返回XML格式的數據,然后JavaScript將數據渲染到頁面中——最開始采用的是拼接字符串的形式,后來發明了前端模版,比如template.js。

          這一階段涌現了大批技術,如prototype.js、Dojo、ExtJS、jQuery,其巔峰是YUI 3。這些工具各有各的優點,其中jQuery可以作為代表,其主要功能是抹平瀏覽器差異,簡化DOM操作。

          JavaScript代碼規模越來越大,一個JavaScript文件已經不能適應現狀了,需要拆分成多個JavaScript文件(分治思想),代碼之間存在依賴關系,且依賴關系越來越復雜,為此社區進行了各種嘗試來解決這個問題,比如采用AMD、CMD、CommonJS。2015年ECMAScript 6定稿,帶來了原生的模塊系統,這一問題才最終被解決。

          隨著項目工程越來越大,代碼的組織結構是不是也需要復用?有人將后端的MVC模式帶到前端,但MVC并不適合前端,因此前端做了適當改變,誕生了MVP、MVVM等框架,典型的有Backbone.js、Knockout、AngularJS等。

          2013年發布的React,將一種全新的思路帶到了我們面前,一個新的時代已經來了。

          2 React是什么

          傳說Facebook的大神們,對現有的框架都不滿意,于是有了React。React是前端一個用于構建用戶界面的 JavaScript 庫,和其他MVC庫不一樣的地方是,React僅僅涉及界面層,類似于MVC中的View。

          React是一次完整的抽象,改變了我們思考、設計和寫代碼的方式;React是一次完整的統一,統一了以前很多種編寫界面的方式。原生前端實現界面太過靈活,基本上團隊里每個人都有自己的一套方法,而React是一套非常優雅的方法論,我們苦苦追尋了多年的最佳思想,竟然都在React里了。

          React有三個特色,分別是聲明式、基于組件和一次學習,多端受用。

          2.1 聲明式

          React改變了也統一了界面的實現方式,在React中,將界面抽象為狀態和視圖,只需定義好每個狀態對應的視圖就行了,剩下的React會幫你搞定,比如狀態改變時會自動刷新視圖等。

          下面代碼中的flag如果發生變化,界面會自動刷新。

          2.2 基于組件

          React改變了寫前端的習慣,在React的世界里一切都是組件,以前的入口在HTML,現在的入口在JavaScript;以前是HTML + CSS + JavaScript的組合,現在是JavaScript+ CSS的組合;以前要想復用功能得拷貝三處代碼,現在僅需引用一個組件即可。來看一個組件的例子。

          上面的代碼中包含兩種組件,一種是HTML標簽組件,另一種是React組件,其區別是HTML標簽以小寫字母開頭,React組件以大寫字母開頭。

          2.3 一次學習,多端受用

          React中抽象了一層虛擬DOM,所以我們可以頻繁地修改狀態,但是更改的都是虛擬DOM。當虛擬DOM發生變化后,會集中更新到真實DOM,因為虛擬DOM的存在,只要替換掉底層的渲染引擎,就可以突破瀏覽器了。React Native就是將React實現到了原生App,React的一切都在,但是底層卻不是DOM了,而是原生的View。類似的還有服務端渲染,這也是本書主要講的內容。理解了React的思想,就可以搞定Web和App,簡直不能再棒了。

          3 React家族

          React只是視圖層,React家族還有一些其他成員,本節來簡單介紹一下。

          3.1 React Router

          傳統Web都是多頁面的,每個頁面一個URL,頁面之間通過超鏈接跳轉,由瀏覽器負責管理頁面的跳轉、前進、后退等功能,通過指定URL可以直接跳轉到指定頁面。

          比如有一個首頁和一個文章頁,此時首頁是一個URL,文章頁是一個URL,可以從首頁跳轉到文章頁,然后再從文章頁跳轉到首頁,這一切都由瀏覽器完成。

          傳統頁面刷新跳轉的方式,體驗不是很友好,于是更友好的單頁面應用來了,也被稱為WebApp。在這種模式下整個應用只有一個傳統的頁面,傳統模式下的多個頁面被抽象成一個個視圖,原來的頁面跳轉,此時由JavaScript負責切換視圖;原來向后端請求整個頁面,現在變成向后端請求數據接口,因為不需要刷新頁面,體驗非常好。

          但這種方式有一個問題,就是除了首頁,其他頁面是無法直接到達的,也就是每次都要先進到首頁;為了能夠實現傳統Web那種URL的優點,需要在前端模擬一套路由,有了路由就可以通過URL直接進入某個視圖了。

          React非常適合做單頁應用,React Router就是專門為React定制的路由,對React非常友好。下面看一下使用React Router實現上面首頁和文章頁跳轉的情況。

          3.2 Redux

          面向界面的編程可以分為三部分:界面、數據和數據操作。React對界面的抽象做到了極致,但對數據和數據操作幾乎沒有約束,我們可以把這部分寫到React組件中,也可以抽出來,將界面和數據與對數據操作進行分離,這就是Redux的工作。

          Redux是JavaScript的狀態容器,提供可預測化的狀態管理,Redux因React而生,但也可以與其他類庫配合使用。

          3.3 React Native

          React Native是一套披著React外衣的原生控件,React Native將原生控件封裝為跨平臺的React組件,并賦予我們通過JavaScript調用原生控件的能力。

          在React Native里沒有CSS,但React Native讓我們可以通過CSS的語法來設置原生控件的屬性。下面是一個例子。

          可以看到,React Native就是用React語法封裝過的原生控件,用CSS語法設置控件屬性。


          本文選自《React狀態管理與同構實戰》一書,作者侯策、顏海鏡,由電子工業出版社2018年8月出版。

          React自開源以來,便以革命性的設計理念迅速顛覆了前端開發的傳統意義,其倡導的組件化、狀態管理、虛擬DOM等思想極大提高了前端開發效率。為了更加高效地維護React應用的數據狀態,以Redux為代表的數據管理模式橫空出世。

          本書以React技術棧為核心,在介紹React用法的基礎上,從源碼層面分析了Redux思想,同時著重介紹了服務端渲染和同構應用的架構模式。書中包含許多項目實例,不僅為用戶打開了React技術棧的大門,更能提升讀者對前沿領域的整體認知。主要適合具有一定JavaScript基礎的前端工程師,以及對前端開發感興趣的相關從業人員閱讀。


          主站蜘蛛池模板: 女人和拘做受全程看视频日本综合a一区二区视频 | 国产视频一区在线观看| 日韩视频在线一区| 一区二区三区免费视频观看| 香蕉久久一区二区不卡无毒影院| 日韩欧美一区二区三区免费观看| 国产乱人伦精品一区二区| 好湿好大硬得深一点动态图91精品福利一区二区 | 韩国福利一区二区三区高清视频| 99精品久久精品一区二区| 99精品一区二区三区| 国产精品乱码一区二区三| 午夜福利一区二区三区在线观看| 精品一区二区久久久久久久网站| 中文字幕乱码人妻一区二区三区 | 国产大秀视频一区二区三区 | 精品视频在线观看你懂的一区 | 亚洲码欧美码一区二区三区| 熟女少妇精品一区二区| 日本一区二区三区精品中文字幕| 色窝窝免费一区二区三区| 亚洲A∨无码一区二区三区| 亚洲国产成人久久综合一区| 亚洲视频一区二区三区四区| 国产婷婷色一区二区三区| 亚洲永久无码3D动漫一区| 亚洲午夜电影一区二区三区 | 亚洲av无码一区二区三区天堂古代| 中文字幕日韩一区二区不卡 | 欧洲精品一区二区三区| 午夜福利一区二区三区在线观看| 中文字幕在线无码一区| 久久精品国产第一区二区三区| 一区二区三区影院| 成人免费av一区二区三区| 无码人妻精品一区二区三区99仓本| 在线精品国产一区二区三区| 国产福利无码一区在线| 国产成人午夜精品一区二区三区| 毛片一区二区三区无码| 亚洲一区二区三区乱码A|