前端模板編譯

1. web前端有模板開發需要多久

不定。
Web前端開發是從網頁製作演變而來的，名稱上有很明顯的時代特徵，在互聯網的演化進程中，網頁製作是Web1.0時代的產物，那時網站的主要內容都是靜態的，用戶使用網站的行為也以瀏覽為主。
網頁製作都更接近傳統的網站後台開發，所以現在不再叫網頁製作，而是叫Web前端開發。

2. web前端開發需要掌握的幾個必備技術

接下來由小編簡單的列舉出幾個前端開發中必須要學會的知識：

第一階段：

HTML+CSS:

HTML進階、CSS進階、div+css布局、HTML+css整站開發、

javaScript基礎：

Js基礎教程、js內置對象常用方法、常見DOM樹操作大全、ECMAscript、DOM、BOM、定時器和焦點圖。

JS基本特效：

常見特效、例如：tab、導航、整頁滾動、輪播圖、JS製作幻燈片、彈出層、手風琴菜單、瀑布流布局、滾動事件、滾差視圖。

JS高級特徵：

正則表達式、排序演算法、遞歸演算法、閉包、函數節流、作用域鏈、基於距離運動框架、面向對象基礎、

JQuery：基礎使用

懸著器、DOM操作、特效和動畫、方法鏈、拖拽、變形、JQueryUI組件基本使用。

第二階段：

HTML5和移動Web開發

HTML5：

HTML5新語義標簽、HTML5表單、音頻和視頻、離線和本地存儲、SVG、WebSocket、Canvas.

CSS3:

CSS3新選擇器、偽元素、臉色表示法、邊框、陰影、background系列屬性改變、Transition、動畫、景深和深透、3D效果製作、Velocity.js框架、元素進場、出場策略、炫酷CSS3網頁製作。

Bootstrap:

響應式概念、媒體查詢、響應式網站製作、刪格系統、刪格系統原理、Bootstrap常用模板、LESS和SASS。

移動Web開發：

跨終端WEB和主流設備簡介、視口、流式布局、彈性盒子、rem、移動終端JavaScript事件、手機中常見JS效果製作、Zepto.js、手機聚劃算頁面、手機滾屏。

第三階段：

HTTP服務和AJAX編程

WEB伺服器基礎：

伺服器基礎知識、Apache伺服器和其他WEB伺服器介紹、Apache伺服器搭建、HTTP介紹。

php基礎：

PHP基礎語法、使用PHP處理簡單的GET或者POST請求、

AJAX上篇：

Ajax簡介和非同步的概念、Ajax框架的封裝、XMLHttpRequest對象詳細介紹方法、兼容性處理方法、Ajax框架的封裝、Ajax中緩存問題、XML介紹和使用。

AJAX下篇：

JSON和JSON解析、數據綁定和模板技術、JSONP、跨域技術、圖片預讀取和lazy-load技術、JQuery框架中的AjaxAPI、使用Ajax實現爆布流案例額。

第四階段：

面向對象進階

面向對象終極篇：

從內存角度到理解JS面向對象、基本類型、復雜類型、原型鏈、ES6中的面向對象、屬性讀寫許可權、設置器、訪問器。

面向對象三大特徵：

繼承性、多態性、封裝性、介面。

設計模式：

面向對象編程思維、單例模式、工廠模式、策略模式、觀察者模式、模板方法模式、代理模式、裝飾者模式、適配器模式、面向切面編程。

第五階段：

封裝一個屬於自己的框架

框架封裝基礎：

事件流、冒泡、捕獲、事件對象、事件框架、選擇框架。

框架封裝中級：

運動原理、單物體運動框架、多物體運動框架、運動框架面向對象封裝。

框架封裝高級和補充：

JQuery框架雛形、可擴展性、模塊化、封裝屬於傳智自己的框架。

第六階段：

模塊化組件開發

面向組件編程：

面向組件編程的方式、面向組件編程的實現原理、面向組件編程實戰、基於組件化思想開發網站應用程序。

面向模塊編程：

AMD設計規范、CMD設計規范、RequireJS，LoadJS、淘寶的SeaJS。

第七階段：

主流的流行框架

Web開發工作流：

GIT/SVN、Yeoman腳手架、NPM/Bower依賴管理工具、Grunt/Gulp/Webpack。

MVC/MVVM/MVW框架：

Angular.js、Backbone.js、Knockout/Ember。

常用庫：

React.js、Vue.js、Zepto.js。

第八階段：

HTML5原生移動應用開發

Cordova：

WebApp/NativeApp/HybirdApp簡介、Cordova簡介、與PhoneGap之間的關系、開發環境搭建、Cordova實戰(創建項目，配置，編譯，調試，部署發布)。

Ionic：

Ionic簡介和同類對比、模板項目解析、常見組件及使用、結合Angular構建APP、常見效果(下拉刷新，上拉載入，側滑導航，選項卡)。

ReactNative：

ReactNative簡介、ReactNative環境配置、創建項目，配置，編譯，調試，部署發布、原生模塊和UI組件、原生常用API。

HTML5+：

HTML5+中國產業聯盟、HTML5PlusRuntime環境、HBuilder開發工具、MUI框架、H5+開發和部署。

第九階段：

Node.js全棧開發：

快速入門：

Node.js發展、生態圈、Io.js、Linux/Windows/OSX環境配置、REPL環境和控制台程序、非同步編程，非阻塞I/O、模塊概念，模塊管理工具、開發流程，調試，測試。

核心模塊和對象：

全局對象global，process，console，util、事件驅動，事件發射器、加密解密，路徑操作，序列化和反序列化、文件流操作、HTTP服務端與客戶端。

Web開發基礎：

HTTP協議，請求響應處理過程、關系型資料庫操作和數據訪問、非關系型資料庫操作和數據訪問、原生的Node.js開發Web應用程序、Web開發工作流、Node.js開發Blog案例。

快速開發框架：

Express簡介+MVC簡介、Express常用API、Express路由模塊、Jade/Ejs模板引擎、使用Express重構Blog案例、Koa等其他常見MVC框架。

3. 現在比較常用的前端框架有哪些

bootstrap是twitter出的一款不錯的UI框架，或者與其說是框架不如說是類庫（lib），當然這里邊牽扯到一個「究竟什麼是框架什麼是類庫？」的問題，我們暫時不談。畢竟是有大公司背景的代碼堆，我覺得沒什麼「落伍」可言。
angular是前兩年之內突然火得一塌糊塗的一個fe框架，這個我覺得可以算的上是真正意義上的框架了，MVVM雙向綁定，包括它擁有足夠完善的社區、生態，甚至chrome上都有很多好用的相關插件（這一點可以說是佔了google出品的光），比較完整的大型項目都是可以考慮引入的。但如果你的網站只是做一些輕量級的東西，殺雞焉用宰牛刀吧我覺得。
backbone主要針對的MVC中的M層，至少我是這么理解的。對UI層它幾乎沒什麼太多的限制，一方面給出了coder自由度進行發揮，另一方面也等於在這方面框架本身對開發沒提供什麼太大的幫助。我覺得這更像是一個高手向的框架，另外對於underscore前端模板那一套東西，說實話作為一名php java啥都能寫的FE我始終覺得這套東西有那麼一種純JS工程師的一廂情願的意味。這是個人看法了，不一定準確，況且有人會搬出ajax動態渲染時 前端模板的作用來反駁我，別急著反駁，至少往下看完我說的話。
相比之下，react可以說是一個在MVC中V層做的十分出色和新穎的框架了，獨特的jsx編譯機制就已經讓你的代碼變得高大上了，我是覺得這個類庫在UI層做的更徹底更專業，或者說讓FE的代碼更專業了。更何況，react比angular更年輕，而且同樣擁有大公司背景，react native一出更是讓JS工程師的地位取得了革命性的提升，（不要跟我提phonegap，用過兩個東西後你會明白，react打包的app性能甩phonegap幾條街沒問題）。另外既然樓主提到了之前的網站是bootstrap，不妨可以看一看react-bootstrap這個東西，或許這就是你想要的。

4. 前端為什麼需要構建工具

注: 在知乎上面幾年前回答的問題，搬過來給你看看吧

1. 【調試伺服器】首先如果你是一個准備做WEB開發實踐的，不管前端、後台，首先需要了解一兩種伺服器apache，tomcat，nginx啥的，至少能夠配置一個基本的本地服務和修改索引路徑，前端頁面使用http/https協議訪問，而不是本地文件協議（file協議下很多jsAPI都是受限的）。
2. 【調試自動更新】伺服器搭建好了，那麼現在開始調試網頁，然後你修改一點代碼，去瀏覽器裡面F5刷新頁面看看效果，再修改一點代碼，再去瀏覽器裡面F5刷新頁面看看效果...如此循環往復， maybe讓工具幫助你檢測本地文件修改然後實時刷新網頁更靠譜。
3. 【換種方式寫代碼】然後就是寫代碼了，less/sass是不錯的css組織工具，ES6也能讓你的javascript代碼顯得更嚴謹和邏輯清晰，要是能夠在訪問頁面的時候實時獲取css/babel(es6編譯器)編譯結果神馬的應該顯得很cool。
4. 【模塊化】當然在完成邏輯相對復雜的交互功能時候，可能需要你組織非常復雜的代碼功能，這個時候了解一下模塊化的開發思想顯得很有必要require.js事實上更早，也更廣泛一點，sea.js在國內也不錯。
5. 【模板引擎】然後就是對於js生成HTML(或者其他什麼的)的一種包裝方式, 即：js模板引擎(handlebars,jade)， 你可以嘗試在開發時候使用這樣的模板工具生成自己想要的HTML文檔什麼的，也是一種不錯的體驗，這個就像你用less寫css代碼一樣，或者說用php，jsp這樣的服務端語言工具生成實時HTML頁面。
6. 【代理調試】有的時候你開發的東西並不只是前端代碼，牽扯到跟服務端應用之間的數據交互，難免需要使用ajax，ajax這貨基於安全考慮是不允許跨域的，因此可能需要通過代理的方式實現數據調試這樣的工具也有不少，nginx伺服器是其中的佼佼者。
7. 【資源合並優化】OK， 如果到完成開發階段，你需要提交自己開發的代碼到線上伺服器了，在提交之前，你需要考慮將開發的資源進行最優化(合並，壓縮神馬的)， js方面有uglify，css有cssmin神馬的，圖片壓縮還可能根據不同的類型進行不同程度和配置的壓縮，這些事情交給別個工具處理顯得很有必要，要是能夠一鍵處理那簡直了， 網路的fis，業內最流行的grunt.js、gulp.js神馬的，事實上它們在配置化編譯LESS/Coffee這類工作在自己的流程中也很在行。
8. 【Combo】使用非同步模塊化開發帶來的弊端就是對於大量零碎依賴文件需要分別開辟多個http鏈接去獲取，這可不是一個好現象，要知道單個瀏覽器單域名並發獲取資源的數量是很有限的， 因此例如KISSY就支持了簡單配置一個combo參數來組織一個獲取nginx的 http-concat格式資源的路徑，當然這樣的動態合並模式也適用於普通的資源請求合並。
9.【資源緩存和更新】 CDN 能夠確保你已經發布到伺服器上的資源以最快的響應時間到達瀏覽器，但是帶來的問題是，你的代碼更新，CDN則傻乎乎的不理你，除非你在使用的地方告訴它需要更新了( 時間戳、MD5文件名啥的 )。
事實上，我覺著凡是重復進行的工作總有可以程序和代碼可以替你完成的部分，前端開發中這種事情尤其多，工具啥樣的自己去定義才最合適自己，而nodejs的出現使得前端自己可以方便的開發這類東西（上面的less、coffee、uglify、gruntjs、fis、gulp這些個單詞可以說：都依賴nodejs）。
PS: 感興趣可關注 f2e-server， 網路搜索關鍵字第一個就是官網。

5. 編譯器前端開發

編譯器粗略分為詞法分析，語法分析，類型檢查，中間代碼生成，代碼優化，目標代碼生成，目標代碼優化。把中間代碼生成及之前階段劃分問編譯器的前端，那麼後端與前端是獨立的。後端只需要一種中間代碼表示，可以是三地址代碼或四元式等，而這些都與前端生成的方式無關。也就是不論你前端是用fortran還是c/c++,只要生成了中間代碼表示就可以了，後端是不管你是用哪種語言生成的。

6. Web前端工程師該如何選擇web前端模板引擎

今天小編要跟大家分享的文章是關於Web前端工程師該如何選擇web前端模板引擎?如果你正在從事web前端工作，如果你也想要了解如何選擇web前端模板引擎的知識，那麼就來和小編一起看一看本文為大家介紹的內容吧~


一、Web模板就在那裡


模板引擎負責組裝數據，以另外一種形式或外觀展現數據。瀏覽器中的頁面是Web模板引擎最終的展現。


無論你是否直接使用模板引擎，Web模板一直都在，不在前端就在後端，它的出現甚至可以追溯到超文本標記語言HTML標准正式確立之前。


二、服務端的模板引擎


我所知道最早的Web模板引擎是PHP，它正式誕生於1997年，工作在伺服器端。讓我們看看PHP官方的intro-whatis：


PHP(「PHP:Hypertext
Preprocessor」，超文本預處理器的縮寫)是一種被廣泛應用的開放源代碼的多用途腳本語言，它可嵌入到HTML中，尤其適合web開發。


PHPer普遍贊同PHP本身就是最天然、原生的PHP模板引擎，因為她本來就是。在PHP的世界裡多次出現過再包裝的模板引擎，著名的有
smarty。


其它伺服器端語言很多都有HTML模板引擎，比如JSP、mustache。


毫無疑問，這些伺服器端模板引擎最終生成的結果是HTML(XML)字元串，處理流程邏輯使用宿主語言本身的語法實現。


它們的共同特徵：HTML只是個字元串,最終結果可能還需要類似Tidy這樣的清潔或修正驗證工具。


這里提出一個問題：二次封裝的smarty有存在的必要麼?


三、瀏覽器端的模板引擎


我所知道最早的前端模板引擎是jCT，它託管於Google
Code，誕生於2008年，宿主語言是JavaScript，工作在瀏覽器中。很榮幸，我就是jCT的作者，相關早期博客可以查看achun、githubjCT
備份。


直到今天寫這篇文章，我才發現pure-js這篇文章裡面也提到不少先行者——jemplate最早在2006年就創建了。


今天在OSC搜索JavaScript模板引擎你會得到100+個結果，下邊列舉一些：


·輕量度：tpl.js、T.js


·認知度：arttemplate、mustache.js、doT.js、handlebars.js、pug


·DOM-tree-based：domTemplate、transparency、plates


·VDOM-based：htmltemplate-vdom、virtual-stache、html-patcher


·流行框架：Vue.js、ReactJS、riot


·Real-DOM：PowJS


它們的共同特徵：全都支持插值。


這里還有templating-engines受歡迎度的對比，甚至best-javascript-templating-engines
投票及正反方的理由。


四、如何選擇


我認為存在即合理，每個引擎、框架總有可取之處，至少在你的應用里，在某個時代，所以本文不會評論某個引擎哪一點不好，那樣是不客觀的。現在回答前邊提到的問題：smarty
有存在的必要麼?我的答案是：有。理由很簡單，看給誰用、看大背景。


對於前後端沒有分離的應用，或前端人員對後端語言不夠熟悉，或因崗位職責需要，那麼前端人員掌握一種比較通用的模板語法(語言)是現實的，反之讓PHPer自己去使用
smarty那就太浪費技能了。


下面是通常意義上的引擎選擇建議：


1.前提，選擇的引擎能滿足數據渲染需求，且不和現有依賴沖突，如果你已經非常熟悉某個引擎，那你已經有答案了。


2.是一次性的項目需求么?是的話直接選擇輕量的，學習復雜度最低的。


3.是要做組件開發么?


4.引擎支持預編譯結果，不必每次都實時編譯么?


5.要跨平台么?有官方提供支持的，首選類React-JSX的引擎或純粹的VDOM引擎。


6.選擇學習或維護復雜度最低的，眾所周知，開發者對調試的時間超過寫代碼的時間深惡痛絕。


7.最後才是性能對比，性能對比是一件非常細致的工作，他人的對比結果不一定符合你的場景。


我認為應該弱化語法風格的對比，偏好是沒有可比性的，一些語法甚至有特殊的背景原因。


為什麼最後才是性能對比?


性能的確很重要，但如果性能還沒有影響到你的應用體驗度，那就忽視它。很難真實地模擬應用場景，通常只有通過真實場景來檢驗，目前的測試工具還達不到這種效果。


前述問題有些有固定答案，下面討論餘下的問題：如何考慮組件開發、支持預編譯、復雜度?


五、組件開發


進行組件開發已經不再是選擇模板引擎的問題了，這是生態環境選擇的問題。如果你的應用需要更快地完成，那麼時間點是第一位的，就選擇流行框架，有足夠多的組件讓你使用或參考。如果你的應用有獨立的生態環境，需要技術選型以便長期維護，那繼續看下文。


六、預編譯


預編譯應該具備：


1.編譯結果在目標環境中不再需要編譯過程。


2.編譯結果可調試性，這意味著結果應該包含原生ECMAScript代碼，而不是純粹的數據描述。


大家都知道React-JSX是支持預編譯的，官方的說法是ReactWithoutJSX，即總是build過的。


一些基於字元串處理的引擎也支持預編譯。如果你需要預編譯，建議拋棄編譯結果依然是基於字元串拼接的引擎，那樣還不如不預編譯，那是HTML5未被廣泛支持之前的技術手段。


至少也要有類似React-JSX這樣的編譯結果才具有可調試性。備註：Vue.js支持多種模板引擎，可達到同樣的效果。


原ReactJS代碼，其中用到了WebComponents技術：classHelloMessageextendsReact.Component{

render(){

return