更新時間：2025-06-08 15:33:30
網站建設
522隨著互聯網行業的爆發式增長，與之相伴的網站設計Web前端技術也在經歷著洗禮和變革。尤其是近年來，隨著移動終端的發展，越來越多的人開始加入或轉向新的領域，為當今的IT行業注入了新的活力。 Web前端技術雖然誕生時間不長，但是隨著Web技術的逐漸深入，未來會在以下幾個方面做出努力。
1、Web移動端開發。
2.JavaScript兄弟。
3. 多種類庫和框架。
4.工程Web前端開發規范。Web移動終端開發
PhoneGap：一個使用HTML、CSS 和JavaScript 構建跨平臺移動應用程序的開源開發框架。它使開發人員能夠利用iPhone、Android、Palm、Symbian、BlackBerry、WindowsPhone 和Bada 等智能手機的核心功能，包括地理定位、加速器、聯系人、聲音和振動。除了在本地編譯應用，還可以使用PhoneGap提供的Cloud Build工具來編譯應用。也就是說，你只需要將用HTML5編寫的應用程序上傳到PhoneGap云服務器，PhoneGapBuild就可以編譯成適用于不同平臺的應用程序。前端知識圖譜
SenchaTouch：說到這里不得不提一些面向移動端的WebUI庫。畢竟，PhoneGap 是一個工具。如果要構建一個完整的基于Web技術的App，就必須選擇一些適用的移動端UI庫。而最值得一提的是SenchaTouch，它可以讓WebApp看起來像NativeApp。漂亮的用戶界面組件和豐富的數據管理，全部基于最新的HTML5 和CSS3 網絡標準，完全兼容Android 和iOS 設備。 PhoneGap顯示出一個發展趨勢，即App也可以使用Web前端技術來完成。作為開發者最常用的UI工具箱，SenchaTouch進一步加速了這一趨勢。目前淘寶上大量的項目都采用了這種思路來構建，即添加自定義的移動端Web端UI庫。我相信這種模式在未來會越來越受歡迎。
Sencha Touch：說到這里，不得不提一些面向移動端的WebUI庫。畢竟，PhoneGap 是一個工具。如果要構建一個完整的基于Web技術的App，就必須選擇一些適用的移動端UI庫。而最值得一提的是Sencha Touch，它可以讓Web App看起來像Native App。漂亮的用戶界面組件和豐富的數據管理，全部基于最新的HTML5 和CSS3 網絡標準，完全兼容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年初開始推廣至今一直非常流行，尤其是在網頁仍然占據互聯網流量絕大部分的今天。這種兼容技術可以快速使網站與移動設備兼容，確保最快的跨境平臺兼容性和多平臺可用性。
Zepto.js：專門為Safari 和Chrome 等移動WebKit 瀏覽器開發的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 和MSN 上的熱門開源項目
BC的 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模塊和CSS模塊，能保證你在使用一個模塊時，已將所依賴的其他模塊載入腳本運行環境中。SeaJS可以讓你享受寫代碼的樂趣，不用去管那些加載的問題。畢竟現在網頁的可維護性和性能問題一樣嚴峻，體現在：文件太多，不利于維護，前端后端都一樣；HTTP請求過多，當然這個可以通過合并解決，但如果沒有后端直接合并，那么人工成本會非常大。用SeaJS就能非常好地解決這些問題。SeaJS遵循CMD規范，因此可以很方便地書寫模塊。目前已經有越來越多的人采用CMD規范來開發項目了。
最近微軟已經正式發布了Windows8操作系統，Windows操作系統的風格已經完全變成了磁貼狀的MetroUI。對于微軟來說，這是一個巨大的改變，而且所有微軟的平臺包括桌面、平板、移動端及其網站都使用這個UI風格。
MetroUICSS是一個非常完整的創建Metro風格的網站框架。它自成體系，但也可以與其他框架一起使用。使用LESS創建，并且擁有網格系統、排版樣式、表格、按鈕和圖片。同時也擁有內建的JavaScript組件，幫助你生成片狀、菜單、邊欄、進度條和提示等，是一個非常好用的框架。隨著Windows8的進一步流行，這種風格的CSS類庫一定會成為一種趨勢。
Hype是一個小巧的工具，是MacAppStore新上架的一個HTML5創作工具，其長處是可以在網頁上做出悅目的動畫效果，無須Flash插件。開發該應用的公司Tumult由兩個前蘋果工程師創建，并獲得了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的靈活性需要某種程度的限制。
總之，通過上面的闡述，我們可以看到前端技術的不斷進步和推陳出新，也能夠體會到項目過程的工程化，解決方案的輕量化，庫和框架的多元化，知識結構的體系化，這種趨勢在今后會變得越來越明顯，也昭示著前端技術的發展方向。
說到前端技術知識結構的體系化建設，這是我這些年來一直都在做的事情，在2011年也畫了一張圖來說明我的觀點——前端技術體系的建設是一項長期的任務。畢竟前端新技術新知識層出不窮，對于經典的知識結構的整理也很有挑戰性，但這項工作終究需要有人去做，為新入道的人指出一個大致的方向。對于前端工程師的成長問題，我也寫過一篇長文“前端開發十日談”，幫助新人們解惑。
我們專注高端建站，小程序開發、軟件系統定制開發、BUG修復、物聯網開發、各類API接口對接開發等。十余年開發經驗，每一個項目承諾做到滿意為止，多一次對比，一定讓您多一份收獲！
