狠狠色丁香婷婷综合尤物/久久精品综合一区二区三区/中国有色金属学报/国产日韩欧美在线观看 - 国产一区二区三区四区五区tv

LOGO OA教程 ERP教程 模切知識交流 PMS教程 CRM教程 開發(fā)文檔 其他文檔  
 
網(wǎng)站管理員

Web前端技術(shù)歷經(jīng)洗禮和蛻變

admin
2014年9月5日 6:56 本文熱度 4166
  隨著互聯(lián)網(wǎng)產(chǎn)業(yè)的爆炸式增長,與之伴生的 Web 前端技術(shù)也在歷經(jīng)洗禮和蛻變。尤其是近幾年隨著移動終端的發(fā)展,越來越多的人開始投身或轉(zhuǎn)行至新領(lǐng)域,這更為當(dāng)今的 IT 產(chǎn)業(yè)注入了新的活力。盡管 Web 前端技術(shù)誕生至今時日并不長,但隨著 Web 技術(shù)的逐漸深入,今后將會在以下幾方面發(fā)力。
  1.Web 移動終端開發(fā)。
  2.JavaScript 的兄弟們。
  3. 百花齊放的類庫和框架。
  4. 工程化的 Web 前端開發(fā)規(guī)范。
  Web 移動終端開發(fā)
  PhoneGap:一個開源的開發(fā)框架,使用 HTML、CSS 和 JavaScript 來構(gòu)建跨平臺的移動應(yīng)用程序。它使開發(fā)者能夠利用 iPhone、Android、Palm、Symbian、BlackBerry、WindowsPhone 和 Bada 等智能手機(jī)的核心功能,包括地理定位、加速器、聯(lián)系人、聲音和振動等。除了在本地編譯應(yīng)用之外,還可以使用 PhoneGap 提供的云端 Build 工具進(jìn)行應(yīng)用編譯。也就是說,只需要將用 HTML5 寫好的應(yīng)用上傳到 PhoneGap 的云端服務(wù)器,PhoneGapBuild 即可將其編譯成適合不同平臺的應(yīng)用。
  前端知識圖譜 
  SenchaTouch:說到這里,就不得不提一些面向移動端的 WebUI 庫,畢竟 PhoneGap 是一個工具,要想基于 Web 技術(shù)構(gòu)建完整的 App,必須選擇一些適用的移動 UI 庫。而最值得一提的是 SenchaTouch,它可以讓 WebApp 看起來像 NativeApp。美麗的用戶界面組件和豐富的數(shù)據(jù)管理,全部基于最新的 HTML5 和 CSS3 的 Web 標(biāo)準(zhǔn),全面兼容 Android 和 iOS 設(shè)備。PhoneGap 昭示著一種開發(fā)趨勢,即 App 也可以使用 Web 前端技術(shù)來完成。而作為開發(fā)者最常用的 UI 工具箱,SenchaTouch 又進(jìn)一步加速了這種趨勢,目前在淘寶已有大量的項目采用這種思路來搭建,即在內(nèi)置應(yīng)用的外殼加上自定義的基于移動 Web 的 UI 庫。相信在未來這種模式必會越來越流行。
  MediaQueries:在 CSS2 時代,如果你曾經(jīng)為網(wǎng)站設(shè)計過打印版 CSS,那么就會明白 CSS3MediaQueries 的作用。不過,CSS3 的 MediaQueries 比 CSS2 的 Media
  Type 更實用,因為 CSS2 的 MediaType 并不曾被多少設(shè)備支持過。CSS3 的 Media
  Queries 可以獲取這些數(shù)據(jù):瀏覽器窗口的寬和高、設(shè)備的寬和高、設(shè)備的手持方向(橫向還是豎向)和分辨率等。也就是說,MediaQueries 提供了一種基于不同的平臺寫 CSS 的技術(shù)。這項技術(shù)在 2011 年初被推廣開來,至今已非常火熱,尤其是在 Web 頁面仍占互聯(lián)網(wǎng)流量大多數(shù)的今天,這種兼容技術(shù)能很快讓網(wǎng)站兼容移動設(shè)備,保證產(chǎn)品實現(xiàn)最快的跨平臺的兼容性和多平臺的可用性。
  Zepto.js:一個專為 MobileWebKit 瀏覽器(如 Safari 和 Chrome)而開發(fā)的 JavaScript 框架。它標(biāo)榜自己簡約的開發(fā)理念能夠幫助開發(fā)人員簡單、快速地完成開發(fā)交付任務(wù)。更重要的是這個 JavaScript 框架是超輕量級的,只有 5KB。Zepto.js 的語法借鑒且兼容 jQuery。目前已有不少網(wǎng)站開始基于 Zepto.js 做應(yīng)用,因為在拋棄了 IE 瀏覽器的兼容性問題后,Web 開發(fā)會變得越來越純粹,體積更輕巧,編碼也更加愉悅。不可否認(rèn),隨著移動終端開發(fā)越來越流行,Zepto.js 在未來將會有更加廣闊的應(yīng)用場景和空間。
  Bootstrap:Twitter 推出的一個開源的用于前端開發(fā)的工具包。它由 MarkOtto 和 JacobThornton 合作開發(fā),是一個 CSS/HTML 框架。Bootstrap 提供了優(yōu)雅的 HTML 和 CSS 規(guī)范,由動態(tài) CSS 語言 LESS 寫成,與 CSS 框架 Blueprint 存在很多相似之處。Bootstrap 一經(jīng)推出便頗受歡迎,一直是 GitHub 上的熱門開源項目,NASA 和 MSNBC 的 BreakingNews 都使用了該項目。2012 年第二季度,Bootstrap 發(fā)布了 2.0 版,Bootstrap2.0 的一個重大改進(jìn)是添加了響應(yīng)設(shè)計特性,在 1.0 中,這是讓很多開發(fā)人員抱怨的地方。而且為了提供更好的針對移動設(shè)備的響應(yīng)式設(shè)計方案,Bootstrap2.0 采用了更為靈活的 12 欄網(wǎng)格布局。此外,它還更新了一些進(jìn)度欄及可定制的圖片縮略圖,并增加了一些新樣式。值得關(guān)注的是,Bootstrap 是一個非常輕量級的框架,2.0 在壓縮后只有 10KB。Bootstrap 為我們的網(wǎng)站快速搭建提供了不錯的工具和思路,這個工具集將擁有更旺盛的生命力。
  JavaScript 的兄弟們
  CoffeeScript 是一個借鑒 Ruby 編寫的新編程語言,創(chuàng)建者 JeremyAshkenas 戲稱它是 JavaScript 的低調(diào)的小兄弟,因為 CoffeeScript 會將 Ruby 編譯成 JavaScript,而且大部分結(jié)構(gòu)都相似。但不同的是,CoffeeScript 擁有更嚴(yán)格的語法。它的最大功績就是將 JavaScript 硬綁的 C/Java 語法拋棄了,改為采用類似 Ruby/Python 的語法。Ruby/Python 本來就是深受 Lisp 影響的,與 JavaScript 算是同門師兄,它們的語法經(jīng)過了實踐考驗,非常適合函數(shù)式編程。這種優(yōu)雅的語言獨具魅力,即將面世的 2013 版的淘寶首頁即采用了 CoffeeScript 實現(xiàn)。
  TypeScript 是微軟開發(fā)的 JavaScript 的超集,TypeScript 兼容 JavaScript,可以載入 JavaScript 代碼然后運行。與 JavaScript 相比,TypeScript 進(jìn)步的地方在于:加入注釋,讓編譯器理解所支持的對象和函數(shù),編譯器會移除注釋,不會增加開銷;增加一個完整的類結(jié)構(gòu),使之更像是傳統(tǒng)的面向?qū)ο笳Z言。由于 JavaScript 只是一個腳本語言,并非用于開發(fā)大型 Web 應(yīng)用,所以沒有提供類和模塊的概念。而 TypeScript 擴(kuò)展了 JavaScript 實現(xiàn)了這些特性,能更好地支持大規(guī)模 JavaScript 應(yīng)用開發(fā),吸引了不開發(fā)者。但要注意,雖然 TypeScript 有微軟做后盾看起來很有保證,但目前提供的只是早期的預(yù)覽版本,TypeScript 并不像它的網(wǎng)站看起來那樣精美,最終版本可能會在一年后 ECMAScript6 發(fā)布會確定,現(xiàn)在的版本只是個開發(fā)預(yù)覽版。因此,TypeScript 今后發(fā)展如何,還需要進(jìn)一步觀察。
  此外,在服務(wù)器端,Node.js 越來越流行。如今 Node.js 不僅作為處理高并發(fā)請求的中間層解決方案,還因其靈活的語法和豐富的底層 API,越來越多的人開始用它來寫工具,尤其是之前基于 Ant 或者 Java 的一些工具如今都有了 Node.js 的版本。
  如此看來,Node.js 在命令行工具領(lǐng)域有著更加廣闊的應(yīng)用場景,甚至可以代替 Perl 或者 Ruby 這些傳統(tǒng)的動態(tài)語言。在淘寶 Node.js 已有非常多的應(yīng)用場景,例如在數(shù)據(jù)部門,Node.js 被用作處理高并發(fā)場景下的容池,專門吸收高并發(fā)的請求,甚至能夠保持和客戶端的長鏈接,而這在之前則需要花費很高昂的成本,例如 Comet 技術(shù)等。此外,淘寶的開源前端類庫 KISSY 也可以直接運行于 Node.js 環(huán)境,這樣就可以在命令行運行 KISSY 代碼,很多前端代碼就有機(jī)會采用自動化測試等,提高生產(chǎn)效率。再者,淘寶內(nèi)部的開發(fā)工具鏈也已大部分采用 Node.js 來構(gòu)建了。
  百花齊放的類庫和框架 
  SeaJS 是由支付寶前端高級技術(shù)專家王保平(玉伯)開發(fā)的一個遵循 CMD 規(guī)范的模塊加載框架,可用來輕松愉悅地加載任意 JavaScript 模塊和 CSS 模塊。SeaJS 非常小巧,小巧在于其壓縮后體積只有 4KB,而且接口和方法也非常少。SeaJS 有兩個核心:模塊的定義和模塊的加載。SeaJS 可以加載任意 JavaScript 模塊和 CSS 模塊,能保證你在使用一個模塊時,已將所依賴的其他模塊載入腳本運行環(huán)境中。SeaJS 可以讓你享受寫代碼的樂趣,不用去管那些加載的問題。畢竟現(xiàn)在網(wǎng)頁的可維護(hù)性和性能問題一樣嚴(yán)峻,體現(xiàn)在:文件太多,不利于維護(hù),前端后端都一樣;HTTP 請求過多,當(dāng)然這個可以通過合并解決,但如果沒有后端直接合并,那么人工成本會非常大。用 SeaJS 就能非常好地解決這些問題。SeaJS 遵循 CMD 規(guī)范,因此可以很方便地書寫模塊。目前已經(jīng)有越來越多的人采用 CMD 規(guī)范來開發(fā)項目了。
  最近微軟已經(jīng)正式發(fā)布了 Windows8 操作系統(tǒng),Windows 操作系統(tǒng)的風(fēng)格已經(jīng)完全變成了磁貼狀的 MetroUI。對于微軟來說,這是一個巨大的改變,而且所有微軟的平臺包括桌面、平板、移動端及其網(wǎng)站都使用這個 UI 風(fēng)格。
  MetroUICSS 是一個非常完整的創(chuàng)建 Metro 風(fēng)格的網(wǎng)站框架。它自成體系,但也可以與其他框架一起使用。使用 LESS 創(chuàng)建,并且擁有網(wǎng)格系統(tǒng)、排版樣式、表格、按鈕和圖片。同時也擁有內(nèi)建的 JavaScript 組件,幫助你生成片狀、菜單、邊欄、進(jìn)度條和提示等,是一個非常好用的框架。隨著 Windows8 的進(jìn)一步流行,這種風(fēng)格的 CSS 類庫一定會成為一種趨勢。
  Hype 是一個小巧的工具,是 MacAppStore 新上架的一個 HTML5 創(chuàng)作工具,其長處是可以在網(wǎng)頁上做出悅目的動畫效果,無須 Flash 插件。開發(fā)該應(yīng)用的公司 Tumult 由兩個前蘋果工程師創(chuàng)建,并獲得了 YCombinator 的投資。由于公司的聯(lián)合創(chuàng)始人之一 JonathanDeutsch 曾擔(dān)任 Mail.app 后端的技術(shù)主管,因此他在接受 PaulHontz 的 TheStartupFoundry 訪談時,談到公司創(chuàng)始是為了解決 HTML5 創(chuàng)作工具缺乏的問題。可以說,Hype 是第一個可用的創(chuàng)作 HTML5 產(chǎn)品的可視化工具,具有里程碑式的意義。隨著硬件性能提升,HTML5 的應(yīng)用程序更加傾向于被工具生成,而不像傳統(tǒng)意義上由工程師 " 切 " 出來。因此工具化是一個方向,不管 HTML5 是否真的能在移動終端扎下腳跟,這種方向是值得堅持的。畢竟,HTML5 的應(yīng)用開發(fā)現(xiàn)在還處于原始社會。
  iScroll.js 是使用原生 JavaScript 編寫的一個模擬滾動效果的小類庫,不依賴于任何 JavaScript 框架。旨在解決移動 WebKit 系瀏覽器的區(qū)域滾動問題,兼容 MobileSafari、Android 默認(rèn)瀏覽器、Safari、Chrome、Firefox5+、Opera11+、IE9+ 及其他 WebKit 核心瀏覽器。最新版本為 iScroll4。這個小庫一問世就備受關(guān)注,因為它不僅可以在 PC 端完美模擬滾動效果,在移動終端里對觸屏事件的支持也堪稱完美。
  iScroll4 是 2011 年底問世的,2012 年在移動終端產(chǎn)品開發(fā)中大放異彩,在淘寶的諸多產(chǎn)品中都用到了這個 JavaScript 庫。iScroll 是小而精的經(jīng)典作品,名字也帶著蘋果范兒。但美中不足的是,只能使用 ID 調(diào)用。不過這個小特性不是什么大問題,可以通過二次封裝來解決。期待 iScroll4 在移動終端里有更多精彩的表現(xiàn)。
  前端 MVC 在 2011 年是比較火的話題,隨著越來越多的人開始嘗試使用諸如 JavaScriptMVC 和 Backbone.js 這些 MVC 類庫,更多的產(chǎn)品也看起來更像 " 軟件 " 而非 " 網(wǎng)頁 "。但由于前端環(huán)境的復(fù)雜性,我們也漸漸發(fā)現(xiàn) " 這種 "MVC 并非完美,只能應(yīng)用于 " 基于數(shù)據(jù)驅(qū)動 " 的場景,而對 " 基于事件驅(qū)動 " 的場景卻沒有太好的解決辦法。目前,淘寶有很多產(chǎn)品在嘗試使用 " 有限自動機(jī) " 來彌補(bǔ) MVC 在這方面的不足。因此,新場景下的 MVC 還需要更深入的提煉。
  工程化的 Web 前端開發(fā)規(guī)范 
  2012 年,關(guān)于前端開發(fā)編碼規(guī)范的討論愈來愈多。國外和國內(nèi)的頂尖開發(fā)者幾乎同時對編碼規(guī)范產(chǎn)生了很大興趣,前 Yahoo! 首頁首席前端工程師 N.C.Zakas 在他那本《高可維護(hù)的 JavaScript》書中也提到規(guī)范在團(tuán)隊協(xié)作過程中的重要性。而如下這兩個方面,是值得我們探討和深思的。
  AMD 與 CMD 規(guī)范之爭,隨著 CommonJS 的進(jìn)一步普及,CommonJS 規(guī)范在標(biāo)準(zhǔn)的模塊開發(fā)領(lǐng)域發(fā)揮著越來越重要的作用,而 CommonJS 在瀏覽器端的難以實現(xiàn)卻為這份規(guī)范增添了一絲變數(shù)。本質(zhì)上講,CommonJS 是一種用于同步加載 JavaScript 代碼的 API 規(guī)范,非常簡單優(yōu)雅。為了在瀏覽器端實現(xiàn)這種機(jī)制,則不得不加入了一層異步回調(diào),這便是 AMD(Modules/Asynchronous-Definition)。RequireJS 實現(xiàn)了這個規(guī)范,而 Dojo 也將馬上完全支持(Dojo1.6)。規(guī)范本身非常簡單,甚至只包含了一個 API。玉伯在開發(fā) SeaJS 的過程中,更多地保持了 CommonJSModules 規(guī)范的風(fēng)格,即 CMD(CommonModuleDefinition)。較之 AMD,CMD 沒有采用單一的 API 來適用于多個功能,而是根據(jù)不同功能定義不同的 API。我認(rèn)為,兩者在完備性上是基本一致的,但在社區(qū)理念和編程風(fēng)格上有所差異,開發(fā)者可以根據(jù)自己的偏好來選擇使用 AMD 還是 CMD 編程風(fēng)格。
  Java 語言編碼規(guī)范對于前端開發(fā)編程規(guī)范有非常大的影響。在 Zakas 的《高可維護(hù)性 JavaScript》一書中提到了五種 JavaScript 編程規(guī)范,都和 Java 語言編碼規(guī)范有著類似的淵源:Crockford 編程規(guī)范、jQuery 核心風(fēng)格指南、SproutCore 編程風(fēng)格指南、Google 的 JavaScript 風(fēng)格指南和 Dojo 編程風(fēng)格指南。不管是哪種規(guī)范,都強(qiáng)調(diào)了編碼風(fēng)格一致的重要性,這也可看出,前端團(tuán)隊開發(fā)越來越看重規(guī)范,JavaScript 的靈活性需要某種程度的限制。
  總之,通過上面的闡述,我們可以看到前端技術(shù)的不斷進(jìn)步和推陳出新,也能夠體會到項目過程的工程化,解決方案的輕量化,庫和框架的多元化,知識結(jié)構(gòu)的體系化,這種趨勢在今后會變得越來越明顯,也昭示著前端技術(shù)的發(fā)展方向。
  說到前端技術(shù)知識結(jié)構(gòu)的體系化建設(shè),這是我這些年來一直都在做的事情,在 2011 年也畫了一張圖來說明我的觀點——前端技術(shù)體系的建設(shè)是一項長期的任務(wù)。畢竟前端新技術(shù)新知識層出不窮,對于經(jīng)典的知識結(jié)構(gòu)的整理也很有挑戰(zhàn)性,但這項工作終究需要有人去做,為新入道的人指出一個大致的方向。對于前端工程師的成長問題,我也寫過一篇長文 " 前端開發(fā)十日談 ",幫助新人們解惑。
原文地址:http://iphone.myzaker.com/l.php?l=540813b91bc8e05d118b456a

該文章在 2014/9/5 6:56:40 編輯過
關(guān)鍵字查詢
相關(guān)文章
正在查詢...
點晴ERP是一款針對中小制造業(yè)的專業(yè)生產(chǎn)管理軟件系統(tǒng),系統(tǒng)成熟度和易用性得到了國內(nèi)大量中小企業(yè)的青睞。
點晴PMS碼頭管理系統(tǒng)主要針對港口碼頭集裝箱與散貨日常運作、調(diào)度、堆場、車隊、財務(wù)費用、相關(guān)報表等業(yè)務(wù)管理,結(jié)合碼頭的業(yè)務(wù)特點,圍繞調(diào)度、堆場作業(yè)而開發(fā)的。集技術(shù)的先進(jìn)性、管理的有效性于一體,是物流碼頭及其他港口類企業(yè)的高效ERP管理信息系統(tǒng)。
點晴WMS倉儲管理系統(tǒng)提供了貨物產(chǎn)品管理,銷售管理,采購管理,倉儲管理,倉庫管理,保質(zhì)期管理,貨位管理,庫位管理,生產(chǎn)管理,WMS管理系統(tǒng),標(biāo)簽打印,條形碼,二維碼管理,批號管理軟件。
點晴免費OA是一款軟件和通用服務(wù)都免費,不限功能、不限時間、不限用戶的免費OA協(xié)同辦公管理系統(tǒng)。
Copyright 2010-2025 ClickSun All Rights Reserved