建站知識
Web前端技術歷經的洗禮和蛻變
發布時間:2015-03-03 11:43:26

隨著互聯網產業的爆炸式增長,與之伴生的Web前端技術也在歷經洗禮和蛻變。尤其是近幾年隨著移動終端的發展,越來越多的人開始投身或轉行至新領 域,這更為當今的IT產業注入了新的活力。盡管Web前端技術誕生至今時日并不長,但隨著Web技術的逐漸深入,今后將會在以下幾方面發力。

1.Web移動終端開發。

2.JavaScript的兄弟們。

3.百花齊放的類庫和框架。

4.工程化的Web前端開發規范。

Web移動終端開發

PhoneGap:一個開源的開發框架,使用HTML、CSS和JavaScript來構建跨平臺的移動應用程序。它使開發者能夠利用 iPhone、Android、Palm、Symbian、BlackBerry、WindowsPhone和Bada等智能手機的核心功能,包括地理定 位、加速器、聯系人、聲音和振動等。除了在本地編譯應用之外,還可以使用PhoneGap提供的云端Build工具進行應用編譯。也就是說,只需要將用 HTML5寫好的應用上傳到PhoneGap的云端服務器,PhoneGapBuild即可將其編譯成適合不同平臺的應用。

前端知識圖譜

SenchaTouch:說到這里,就不得不提一些面向移動端的WebUI庫,畢竟PhoneGap是一個工具,要想基于Web技術構建完整的 App,必須選擇一些適用的移動UI庫。而最值得一提的是SenchaTouch,它可以讓WebApp看起來像NativeApp。美麗的用戶界面組件 和豐富的數據管理,全部基于最新的HTML5和CSS3的Web標準,全面兼容Android和iOS設備。PhoneGap昭示著一種開發趨勢,即 App也可以使用Web前端技術來完成。而作為開發者最常用的UI工具箱,SenchaTouch又進一步加速了這種趨勢,目前在淘寶已有大量的項目采用 這種思路來搭建,即在內置應用的外殼加上自定義的基于移動Web的UI庫。相信在未來這種模式必會越來越流行。

Sencha Touch:說到這里,就不得不提一些面向移動端的WebUI庫,畢竟PhoneGap是一個工具,要想基于Web技術構建完整的App,必須選擇一些適 用的移動UI庫。而最值得一提的是Sencha Touch,它可以讓Web App看起來像Native App。美麗的用戶界面組件和豐富的數據管理,全部基于最新的HTML5和CSS3的Web標準,全面兼容Android和iOS設備。PhoneGap 昭示著一種開發趨勢,即App也可以使用Web前端技術來完成。而作為開發者最常用的UI工具箱,Sencha Touch又進一步加速了這種趨勢,目前在淘寶已有大量的項目采用這種思路來搭建,即在內置應用的外殼加上自定義的基于移動Web的UI庫。相信在未來這 種模式必會越來越流行。

Media Queries:在CSS2時代,如果你曾經為網站設計過打印版CSS,那么就會明白CSS3 Media Queries的作用。不過,CSS3的Media Queries比CSS2的Media Queries可以獲取這些數據:瀏覽器窗口的寬和高、設備的寬和高、設備的手持方向(橫向還是豎向)和分辨率等。也就是說,Media Queries提供了一種基于不同的平臺寫CSS的技術。這項技術在2011年初被推廣開來,至今已非?;鶉?,尤其是在Web頁面仍占互聯網流量大多數的 今天,這種兼容技術能很快讓網站兼容移動設備,保證產品實現最快的跨平臺的兼容性和多平臺的可用性。

Zepto.js:一個專為 Mobile WebKit瀏覽器(如Safari和Chrome)而開發的JavaScript框架。它標榜自己簡約的開發理念能夠幫助開發人員簡單、快速地完成開發 交付任務。更重要的是這個JavaScript框架是超輕量級的,只有5KB。Zepto.js的語法借鑒且兼容jQuery。目前已有不少網站開始基于 Zepto.js做應用,因為在拋棄了IE瀏覽器的兼容性問題后,Web開發會變得越來越純粹,體積更輕巧,編碼也更加愉悅。不可否認,隨著移動終端開發 越來越流行,Zepto.js在未來將會有更加廣闊的應用場景和空間。

Bootstrap: Twitter推出的一個開源的用于前端開發的工具包。它由Mark Otto和Jacob Thornton合作開發,是一個CSS/HTML框架。Bootstrap提供了優雅的HTML和CSS規范,由動態CSS語言LESS寫成,與CSS 框架Blueprint存在很多相似之處。Bootstrap一經推出便頗受歡迎,一直是GitHub上的熱門開源項目,NASA和MSNBC的 Breaking News都使用了該項目。2012年第二季度,Bootstrap發布了2.0版,Bootstrap 2.0的一個重大改進是添加了響應設計特性,在1.0中,這是讓很多開發人員抱怨的地方。而且為了提供更好的針對移動設備的響應式設計方 案,Bootstrap 2.0采用了更為靈活的12欄網格布局。此外,它還更新了一些進度欄及可定制的圖片縮略圖,并增加了一些新樣式。值得關注的是,Bootstrap是一個 非常輕量級的框架,2.0在壓縮后只有10KB。Bootstrap為我們的網站快速搭建提供了不錯的工具和思路,這個工具集將擁有更旺盛的生命力。

JavaScript的兄弟們

CoffeeScript是一個借鑒Ruby編寫的新編程語言,創建者JeremyAshkenas戲稱它是JavaScript的低調的小兄弟, 因為CoffeeScript會將Ruby編譯成JavaScript,而且大部分結構都相似。但不同的是,CoffeeScript擁有更嚴格的語法。 它的最大功績就是將JavaScript硬綁的C/Java語法拋棄了,改為采用類似Ruby/Python的語法。Ruby/Python本來就是深受 Lisp影響的,與JavaScript算是同門師兄,它們的語法經過了實踐考驗,非常適合函數式編程。這種優雅的語言獨具魅力,即將面世的2013版的 淘寶首頁即采用了CoffeeScript實現。

TypeScript是微軟開發的JavaScript的超集,TypeScript兼容JavaScript,可以載入JavaScript代碼 然后運行。與JavaScript相比,TypeScript進步的地方在于:加入注釋,讓編譯器理解所支持的對象和函數,編譯器會移除注釋,不會增加開 銷;增加一個完整的類結構,使之更像是傳統的面向對象語言。由于JavaScript只是一個腳本語言,并非用于開發大型Web應用,所以沒有提供類和模 塊的概念。而TypeScript擴展了JavaScript實現了這些特性,能更好地支持大規模JavaScript應用開發,吸引了不開發者。但要注 意,雖然TypeScript有微軟做后盾看起來很有保證,但目前提供的只是早期的預覽版本,TypeScript并不像它的網站看起來那樣精美,最終版 本可能會在一年后ECMAScript6發布會確定,現在的版本只是個開發預覽版。因此,TypeScript今后發展如何,還需要進一步觀察。

此外,在服務器端,Node.js越來越流行。如今Node.js不僅作為處理高并發請求的中間層解決方案,還因其靈活的語法和豐富的底層API,越來越多的人開始用它來寫工具,尤其是之前基于Ant或者Java的一些工具如今都有了Node.js的版本。

如此看來,Node.js在命令行工具領域有著更加廣闊的應用場景,甚至可以代替Perl或者Ruby這些傳統的動態語言。在淘寶Node.js已 有非常多的應用場景,例如在數據部門,Node.js被用作處理高并發場景下的容池,專門吸收高并發的請求,甚至能夠保持和客戶端的長鏈接,而這在之前則 需要花費很高昂的成本,例如Comet技術等。此外,淘寶的開源前端類庫KISSY也可以直接運行于Node.js環境,這樣就可以在命令行運行 KISSY代碼,很多前端代碼就有機會采用自動化測試等,提高生產效率。再者,淘寶內部的開發工具鏈也已大部分采用Node.js來構建了。

百花齊放的類庫和框架

SeaJS是由支付寶前端高級技術專家王保平(玉伯)開發的一個遵循CMD規范的??榧釉乜蚣?,可用來輕松愉悅地加載任意JavaScript??? 和CSS???。SeaJS非常小巧,小巧在于其壓縮后體積只有4KB,而且接口和方法也非常少。SeaJS有兩個核心:??櫚畝ㄒ搴湍?櫚募釉?。 SeaJS可以加載任意JavaScript??楹虲SS???,能保證你在使用一個??槭?,已將所依賴的其他??樵厝虢瘧駒誦謝肪持?。SeaJS可以讓你 享受寫代碼的樂趣,不用去管那些加載的問題。畢竟現在網頁的可維護性和性能問題一樣嚴峻,體現在:文件太多,不利于維護,前端后端都一樣;HTTP請求過 多,當然這個可以通過合并解決,但如果沒有后端直接合并,那么人工成本會非常大。用SeaJS就能非常好地解決這些問題。SeaJS遵循CMD規范,因此 可以很方便地書寫???。目前已經有越來越多的人采用CMD規范來開發項目了。

最近微軟已經正式發布了Windows8操作系統,Windows操作系統的風格已經完全變成了磁貼狀的MetroUI。對于微軟來說,這是一個巨大的改變,而且所有微軟的平臺包括桌面、平板、移動端及其網站都使用這個UI風格。

MetroUICSS是一個非常完整的創建Metro風格的網站框架。它自成體系,但也可以與其他框架一起使用。使用LESS創建,并且擁有網格系 統、排版樣式、表格、按鈕和圖片。同時也擁有內建的JavaScript組件,幫助你生成片狀、菜單、邊欄、進度條和提示等,是一個非常好用的框架。隨著 Windows8的進一步流行,這種風格的CSS類庫一定會成為一種趨勢。

Hype是一個小巧的工具,是MacAppStore新上架的一個HTML5創作工具,其長處是可以在網頁上做出悅目的動畫效果,無須Flash插 件??⒏糜τ玫墓綯umult由兩個前蘋果工程師創建,并獲得了YCombinator的投資。由于公司的聯合創始人之一 JonathanDeutsch曾擔任Mail.app后端的技術主管,因此他在接受PaulHontz的TheStartupFoundry訪談時,談 到公司創始是為了解決HTML5創作工具缺乏的問題??梢運?,Hype是第一個可用的創作HTML5產品的可視化工具,具有里程碑式的意義。隨著硬件性能 提升,HTML5的應用程序更加傾向于被工具生成,而不像傳統意義上由工程師“切”出來。因此工具化是一個方向,不管HTML5是否真的能在移動終端扎下 腳跟,這種方向是值得堅持的。畢竟,HTML5的應用開發現在還處于原始社會。

iScroll.js是使用原生JavaScript編寫的一個模擬滾動效果的小類庫,不依賴于任何JavaScript框架。旨在解決移動 WebKit系瀏覽器的區域滾動問題,兼容MobileSafari、Android默認瀏覽器、Safari、Chrome、Firefox5+、 Opera11+、IE9+及其他WebKit核心瀏覽器。最新版本為iScroll4。這個小庫一問世就備受關注,因為它不僅可以在PC端完美模擬滾動 效果,在移動終端里對觸屏事件的支持也堪稱完美。

iScroll4是2011年底問世的,2012年在移動終端產品開發中大放異彩,在淘寶的諸多產品中都用到了這個JavaScript庫。 iScroll是小而精的經典作品,名字也帶著蘋果范兒。但美中不足的是,只能使用ID調用。不過這個小特性不是什么大問題,可以通過二次封裝來解決。期 待iScroll4在移動終端里有更多精彩的表現。

前端MVC在2011年是比較火的話題,隨著越來越多的人開始嘗試使用諸如JavaScriptMVC和Backbone.js這些MVC類庫,更 多的產品也看起來更像“軟件”而非“網頁”。但由于前端環境的復雜性,我們也漸漸發現“這種”MVC并非完美,只能應用于“基于數據驅動”的場景,而對 “基于事件驅動”的場景卻沒有太好的解決辦法。目前,淘寶有很多產品在嘗試使用“有限自動機”來彌補MVC在這方面的不足。因此,新場景下的MVC還需要 更深入的提煉。

工程化的Web前端開發規范

2012年,關于前端開發編碼規范的討論愈來愈多。國外和國內的頂尖開發者幾乎同時對編碼規范產生了很大興趣,前Yahoo!首頁首席前端工程師 N.C.Zakas在他那本《高可維護的JavaScript》書中也提到規范在團隊協作過程中的重要性。而如下這兩個方面,是值得我們探討和深思的。

AMD與CMD規范之爭,隨著CommonJS的進一步普及,CommonJS規范在標準的??榭⒘煊蚍⒒幼旁嚼叢街匾淖饔?,而 CommonJS在瀏覽器端的難以實現卻為這份規范增添了一絲變數。本質上講,CommonJS是一種用于同步加載JavaScript代碼的API規 范,非常簡單優雅。為了在瀏覽器端實現這種機制,則不得不加入了一層異步回調,這便是AMD(Modules/Asynchronous- Definition)。RequireJS實現了這個規范,而Dojo也將馬上完全支持(Dojo1.6)。規范本身非常簡單,甚至只包含了一個 API。玉伯在開發SeaJS的過程中,更多地保持了CommonJSModules規范的風格,即 CMD(CommonModuleDefinition)。較之AMD,CMD沒有采用單一的API來適用于多個功能,而是根據不同功能定義不同的 API。我認為,兩者在完備性上是基本一致的,但在社區理念和編程風格上有所差異,開發者可以根據自己的偏好來選擇使用AMD還是CMD編程風格。

Java語言編碼規范對于前端開發編程規范有非常大的影響。在Zakas的《高可維護性JavaScript》一書中提到了五種 JavaScript編程規范,都和Java語言編碼規范有著類似的淵源:Crockford編程規范、jQuery核心風格指南、SproutCore 編程風格指南、Google的JavaScript風格指南和Dojo編程風格指南。不管是哪種規范,都強調了編碼風格一致的重要性,這也可看出,前端團 隊開發越來越看重規范,JavaScript的靈活性需要某種程度的限制。

總之,通過上面的闡述,我們可以看到前端技術的不斷進步和推陳出新,也能夠體會到項目過程的工程化,解決方案的輕量化,庫和框架的多元化,知識結構的體系化,這種趨勢在今后會變得越來越明顯,也昭示著前端技術的發展方向。


版權所有:新扉設計 閩ICP備11021979號-1
copyright (c) 2011-2016 福建时时彩结果查询 www.zfjgw.icu all rights reserved
本站關鍵詞:福州網站建設 | 福州網站設計 | 福州網站制作 | 福州網頁設計 | 福州網站優化 | 福建时时彩结果查询
Web design by XinFei Design
 
在線咨詢
掃一掃

服務熱線
15980273325

返回頂部
pk10最牛稳赚模式单双 七星彩开奖视频今天的 k10全天二期计划在线 pk10北京直播视频 现在网上卖什么最赚钱 双面盘定制 白小姐论坛3码中特 七乐彩预测专家最准确 十一选五稳赚的万能组合 真人龙虎怎么下载 3d组选复式投注技巧 广东11选5一期计划软件 口袋棋牌下载安装 扑克21公式 不倒翁投注法反过来用 6狮娱乐