1. web前端學習分哪些階段
您好，web前端學習分為8個階段：
階段1.前端核心基礎
HTML +_CSS核心、JavaScript基礎語法、JavaScript面向對象、JavaScript DOM和
BOM編程、jQuery框架
階段2.HTML5 + CSS3 + 移動端核心
HTML5新特性、Canvas專列、CSS3新特性、CSS3進階、CSS3實例演練
階段3.移動端
移動端核心、移動端適配、移動端特效
階段4.伺服器端
伺服器端開發、資料庫操作、前後端交互核心、微信公眾號開發
階段5.JavaScript高級
JavaScript基礎深入剖析、JavaScript面向對象深入講解、JavaScript非同步編程、
JavaScript函數式編程JavaScript設計模式
階段6.前端必備
性能優化、版本控制工具、模塊化、項目構建工具
階段7.高級框架
React框架基本使用、React框架進階、Vue框架基本使用、Vue框架進階、Vue源碼分析
階段8.小程序
原生小程序入門、原生小程序API使用、小程序框架Mpvue
web前端學習有哪些階段
這個學習路線圖不管是自學還是參加培訓班都是可以的，希望可以幫助到你。
2. 初學者如何迅速學習web前端開發
學習web前端不怕沒喲基礎，就怕沒有方向，推薦給你web前端學習的路線圖：
階段1.前端核心基礎
HTML +_CSS核心、JavaScript基礎語法、JavaScript面向對象、JavaScript DOM和
BOM編程、jQuery框架
階段2.HTML5 + CSS3 + 移動端核心
HTML5新特性、Canvas專列、CSS3新特性、CSS3進階、CSS3實例演練
階段3.移動端
移動端核心、移動端適配、移動端特效
階段4.伺服器端
伺服器端開發、資料庫操作、前後端交互核心、微信公眾號開發
階段5.JavaScript高級
JavaScript基礎深入剖析、JavaScript面向對象深入講解、JavaScript非同步編程、
JavaScript函數式編程JavaScript設計模式
階段6.前端必備
性能優化、版本控制工具、模塊化、項目構建工具
階段7.高級框架
React框架基本使用、React框架進階、Vue框架基本使用、Vue框架進階、Vue源碼分析
階段8.小程序
原生小程序入門、原生小程序API使用、小程序框架Mpvue
web前端學習方向
這個學習的路線路你按照從上到下這個順序學習就可以的，不管是報培訓班還是自學，都是可以的，現在web前端還是有不錯的視頻，你可以根據自己的實際情況看看這些視頻，希望對你有所幫助。3. 如何系統地學習前端
目前入門前端的人群分類
1、計算機相關專業出身系統走過計算機的理論基礎，比如計算機組成原理、操作系統原理、計算機網路、演算法數據結構、設計模式，至少用過兩門以上編程語言（強類型+弱類型）。
優點：理論、架構方面扎實，有整體計算機思維，內功不錯，外功學起來比較快。
缺點：部分人，前端相關細節技術不扎實，不過花時間能很快搞定。
2、非計算機出身自學（也包括計算機專業沒好好學的）理論基礎薄弱，後來因個人興趣或者職業需求，自學前端開發技能。
優點：自學能力比較強，能夠根據自己的興趣規劃學習內容。
缺點：部分人對前端沒有整體的學習框架 ，屬於東一片，西一片，不成體系，部分人計算機沒有整體思維，建議系統梳理下前端知識體系結構，該補的還是要補起來。
門前端時的一些困境
1、因一些基礎演算法、數據結構理論不扎實導致一些編程思維難於理解。比如 原型鏈，如果清楚 數據結構中鏈表結構，那麼這個東西不難理解，再比如 哈希值，懂得數據結構中哈希表，哈希值也就迎刃而解。
2、計算機體系結構、操作系統理論、網路理論不扎實導致到後期一些東西難於理解。比如有同學從前端學習入手，後來學習node開發 ，在 I/O ,進程、線程、IPC 、線程鎖方面有些概念就比較難於理解，而導致不能很好得使用node 的api 。
3、前端整體體系架構沒有做過深入思考。
導致用會用，但不知道為什麼用，用另外一個有什麼區別。
4、學習環境中無高手。
沒有高手能夠指導自己進入下一個層次。
5、有意識但是沒有行動我的網盤收集了一堆資料或者一堆視頻，然後就沒有然後了 。
如何系統學習前端
網站開發開發大致分為前端和後端，前端主要負責實現視覺和交互效果，以及與伺服器通信，完成業務邏輯。其核心價值在於對用戶體驗的追求。如果你現在是零基礎學員，大致可以按如下思路學習系統學習：
基礎部分
1、HTML + CSS 這部分學習，可以模仿一些網站做些頁面。在實踐中積累了一些經驗後，可以系統的讀一兩本書，推薦《Head First HTML 與 CSS 中文版》，這本書講的太細了，我沒能拿出耐心細讀。你可以根據情況斟酌。
2、Java 要學的內容實在很多，如果沒有其他編程語言的基礎的話，學起來可能要費些力，建議馬上看《Java語言精粹》，JS是一門很混亂的語言，這本書能夠幫助你區分哪些是語言的精華，哪些是糟粕，對於語言精華，應該深入學習。糟粕部分能看懂別人寫的代碼就行，自己就不用嘗試了。
進階部分
有了以上基礎，就可以進行一般的靜態網頁設計，不過對於復雜的頁面還需要進一步學習。
1、CSS。必看《精通CSS》，看完這本書你應該對：盒子模型，流動，Block，inline，層疊，樣式優先順序，等概念非常了解了。作為練習可以看下《CSS藝門之匠》這本書，它對標題，背景，圓角，導航條，table，表單等主題都有詳細的介紹。
2、Java。上面提到內容還不足以讓你勝任JS編程。在有了基礎之後，進一步學習內容包括：
a） 框架。
推薦jQuery，簡單易用，學習方法也很簡單，照著產品文檔做幾個頁面就行了，不用面面俱到，以後遇到問題查文檔就行了。框架可以幫你屏蔽瀏覽器的差異性，讓你能更專注與Web開發學習的精髓部分。補充：可以使用 Codecademy 學習 Java，jQuery，用戶體驗真的很好（感謝 TonyOuyang ）。
b） Java 語言範式 。這個名字可能並不恰當，只是我找不到可以描述「面向對象」，「函數式」這個兩個概念的概念。Java不完全是一個面向對象的語言，它的很多設計理念都有函數編程語言的影子，甚至說如果你不用面向對象，完全可以把它理解成一門函數式編程語言。
Java的很多語言特性，都是因為他具有函數式語言的特點才存在的。這部分推薦先學習面向對象的基本理論，對封裝，繼承，多態等概念要理解，維基網路，網路會是你的幫手，另外推薦《Object Oriented Java》，應該有中文版。對與函數式編程我了解的也不系統，不好多說，可以自己網路一下。
c） Java 語言內部機制。必須弄清如下概念：JS 中變數的作用域，變數傳遞方式，函數的定義環境與執行環境，閉包，函數的四種調用方式（一般函數，對象的方法，apply，call），以及四種調用方式下，『this』指向的是誰。這部分內容你會在《Java語言精粹》中詳細了解。另外，你必須理解 json。
d） dom編程，這個Web前端工程師的核心技能之一。必讀《Dom編程藝術》，另外《高性能 Java》這本書中關於dom編程的部分講的也很好。
e） Ajax編程，這是另一核心技術。Ajax建議在網上查些資料，了解這個概念的來龍去脈，網路，維基網路上的內容就足夠了。真正編程是很容易的，如今幾乎所有框架都對Ajax有良好的封裝，編程並不復雜。
f） 了解瀏覽器差異性。這部分包括CSS和js兩部分，瀏覽器差異內容很多，建議在實踐中多多積累。另外對於瀏覽器的渲染模式，DOCTYPE等內容應該系統學習。
3、HTML5和CSS3 。HTML5規范已經於2014年10月28日發布了，移動端HTML5和CSS3已經得到了非常廣泛的使用，必知必會呀。
升級部分
有了以上知識，對於大多數小型網站，你應該已經可以寫出能夠工作的代碼了。但要想成為更專業的前端，你還需繼續努力。更高的要求大概還有四方面：1）易維護，2）可測試，3）高性能，4）低流量（移動端）。
易維護。對於頁面你該理解『樣式』，『數據』，『行為』三者分離，對應的當然就是CSS,HTML,js。對於js代碼，你最好了解設計模式，重構，MVC等內容。
可測性。
高性能。必讀《高性能Java》
低流量。移動端關注比較多。
額外補充部分
前端項目同樣面臨軟體生命周期的各個環節，首先是代碼管理，你必須學會使用Svn和Git。其次是代碼的構建，如今前端代碼構建已經不是簡單的壓縮一下了，需要進行依賴管理、模塊合並、各種編譯，比需要學會使用Grunt、Gulp等前端構建工具。
以上內容只是簡單說了前端學習的順序。對於前端開發，基本內容就這些了，可以根據自己的興趣愛好選擇性學習以下內容。
1、交互設計。大公司依然有專業人士搞這些，不過不懂交互的前端一定不是好前端。推薦《簡約至上》。
2、後端。
應該說前端工程師必須至少了解一門後端語言，不過如果愛好也可深入學習，入手難度比較低的應該是PHP了。這部分由可分為基於頁面，基於框架兩種。大型項目都是基於框架開發的，建議至少了解一個MVC框架，比如PHP的Ci、Yii、Yaf 等，好還框架的設計思想都大同小異。如今NodeJs在大公司已經得到普遍的使用，推薦大家使用在Node上使用Express框架做一些後端服務的開發。
3、Android和IOS開發。
時至今日，前端的工作領域已經非常廣泛，native的界面開發本質上也是前端開發，個大公司都面臨著Native環境和web環境頁面同時維護的問題，如果能夠在技術上得到統一，將會有巨大的價值。
如何才能快速入門前端
1、學習東西，自學是一種途徑，然而在自學的過程中，很多人處於不知道自己不知道的狀態。
2、另一種是跟著高手，開闊視野，達到知道自己不知道的境界，從而有方向，在短時期內進入到一個新的境界，節約時間成本。
4. 前端必學-函數式編程（六）
我們前篇談了很多關於【閉包】的理解了，所以你應該會知道，我們現在將要談的就是 ——【非同步】。
我們為什麼覺得「非同步問題」復雜呢？
其中很重要的一個原因是 —— 時間！時間將我們對數據的操作、管理，變復雜了好幾個量級！
（需要特別提出並明確的是： 非同步和同步之間是可以相互轉化的！ 我們使用非同步或者同步取決於 —— 如何使代碼更加可讀！）
函數式編程給出了實現「代碼更可讀」的落地原則（已多次回顧）：
所以我們可以期待，非同步在函數式編程中的表現！
上代碼：
onCustomer(..) 和 onOrders(..) 是兩個【回調函數】釋義，兩者執行的先後順序並不能確定，所以它是一個基於時間的復雜狀態。
釋義：回調函數其實就是一個參數，將這個函數作為參數傳到另一個函數裡面，當那個函數執行完之後，再執行傳進去的這個函數。
通常來說，我們最先想到的是：把 lookupOrders(..) 寫到 onCustomer(..) 裡面，那我們就可以確認 onOrders(..) 會在 onCustomer(..) 之後運行。
這樣寫，對嗎？
不對！因為 onCustomer(..) 、 onOrders(..) 這兩個回調函數的關系更像是一種競爭關系（都是賦值 customer.orders ）， 它們應該並行執行 ， 而不是串列執行 。
即：我不管你們誰先執行，誰先執行完，誰就賦值給 customer.orders ！
那我們的思路應該是：
不過，這樣讓代碼又變得更加難閱讀！！函數內部賦值依賴於外部變數、甚至受外部回調函數的影響。
那究竟怎麼辦呢？
最終，我們借用 JS promise 減少這個時間狀態，將非同步轉成同步：
兩個 .then(..) 運行之前， lookupCustomer(..) 和 lookupOrders(..) 已被同步調用，滿足並行執行，誰先結束，誰賦值給 customer.orders ，所以我們不需要知道誰先誰後！
在這樣的實現下，不再需要時間先後的概念！減少了時間狀態！！代碼的可讀性更高了！！
這是一個 積極的數組 ，因為它們同步（即時）地操作著離散的即時值或值的列表/結構上的值。
什麼意思？
a 映射到 b，再去修改 a ，b 不會收到影響。
而這，是一個 惰性的數組 ， mapLazy(..) 本質上 「監聽」 了數組 a，只要一個新的值添加到數組的末端（push(..)），它都會運行映射函數 v => v * 2 並把改變後的值添加到數組 b 里。
什麼意思？
a 映射到 b，再去修改 a ，b 也會修改。
原來，後者存在 非同步 的概念。
讓我們來想像這樣一個數組，它不只是簡單地獲得值，它還是一個懶惰地接受和響應（也就是「反應」）值的數組，比如：
設置「懶惰的數組」 a 的過程是非同步的！
b ，是 map 映射後的數組，但更重要的是，b 是 反應性 的，我們對 b 加了一個類似監聽器的東西。
這里直接給出解答：
這里再多小結一句：時間讓非同步更加復雜，函數式編程在非同步下的運用就是減少或直接幹掉時間狀態。
想像下 a 還可以被綁定上一些其他的事件上，比如說用戶的滑鼠點擊事件和鍵盤按鍵事件，服務端來的 websocket 消息等。
上述的 LazyArray 又可叫做 observable ！（當然，它不止用在 map 方法中）
現在已經有各種各樣的 Observables 的庫類，最出名的是 RxJS 和 Most 。
以 RxJS 為例：
不僅如此，RxJS 還定義了超過 100 個可以在有新值添加時才觸發的方法。就像數組一樣。每個 Observable 的方法都會返回一個新的 Observable，意味著他們是鏈式的。如果一個方法被調用，則它的返回值應該由輸入的 Observable 去返回，然後觸發到輸出的 Observable里，否則拋棄。
比如：
本篇介紹了【非同步】在函數式編程中的表現。
原則是：對於那些非同步中有時態的操作，基礎的函數式編程原理就是將它們變為無時態的應用。即 減少時間狀態 ！
就像 promise 創建了一個單一的未來值，我們可以創建一個積極的列表的值來代替像惰性的observable（事件）流的值。
我們介紹了 RxJS 庫，後續我們還會介紹更多優美的 JS 函數式編程庫！
（俗話說的好，三方庫選的好，下班都很早！！）
現在本瓜有點明白那句話了：看一門語言是不是函數式編程，取決於它的核心庫是不是函數式編程。
也許我們還不熟悉像 RxJS 這類庫，但我們慢慢就會越來越重視它們，越來越使用它們，越來越領會到它們！！
非同步，以上。
5. web前端開發需要掌握的幾個必備技術
Web前端開發需要掌握的幾個必備技術是：
HTML +_CSS核心、JavaScript、VUE框架
前端的應用非常廣泛，基本網站、APP、HTML5小程序等都需要前端開發，所以只要是互聯網產品基本都需要前端。
前端程序猿切頁面寫頁面，Web上、H5上的炫酷效果，是前端開發大展身手的地方。最常見的用於前端開發的技術組合是：
HTML+CSS+JavaScript。
web前端是在開發人員中最直接面向產品、面向用戶的設計人員，一個開發團隊的成果是要靠web前端去展現，因為用戶不會去關心後台的處理有多麼強大。
後端開發是寫後台，各種業務邏輯、數據處理、模塊介面、客戶端介面等等。後端開發者通常精通於一種Web編程語言和一個資料庫管理系統。電商平台點擊篩選條件下面為你篩選出來的寶貝的功能以及付款人數數據的變化等都是由後台來實現提供的。
目前web產品交互越來越復雜，用戶使用體驗和網站前端性能優化這些都得靠web前端去做。
前端開發則是網站的前台代碼實現，包括基本的HTML和CSS以及JavaScript/ajax，最新的高級版本HTML5、CSS3，以及SVG等。
前端開發需要學習的技術
1 掌握基本web前端開發技術：HTML、CSS、JavaScript、DOM、BOM、AJAX等，而且要了解它們在不同瀏覽器上的兼容情況、渲染原理和存在的Bug
2 必須掌握網站性能優化、SEO和伺服器端開發技術的基礎知識
3 必須學會運用各種web前端開發與測試工具進行輔助開發
4 除了掌握技術層面的知識，還要掌握理論層面的知識，包括代碼的可維護性、組件的易用性、分層語義模板和瀏覽器分級支持等
5 未來web前端開發工程師還要研究HTML5、web視覺設計、網站配色、網站交互設計模式等相關技術
web前端有廣闊的發展空間，app、小程序、移動端、pc端等都網站是需要前端技術的開發支持才能夠完成，技術門檻相對較低、需求量較大，薪資待遇良好。只要是互聯網端的客戶界面，就需要前端來製作完成，前端開發的編程量不大，但是需要部分編程，入門簡單，但是要學的深入需要一個過程。
Web前端招聘崗位
• 前端開發工程師、Web開發工程師、網頁開發工程師、HTML開發工程師...
• H5開發工程師、移動應用開發工程師、App開發工程師、小程序開發工程師...
• JS開發工程師、Vue.js開發工程師、Node.js開發工程師、前端架構師...
• 小游戲開發工程師、數據可視化開發工程師、WebGL開發工程師、WebVR開 發工程師、Web安全工程師...
6. 2019Web前端編寫JavaScript代碼的小技巧
今天小編要跟大家分享的文章是關於2019Web前端編寫JavaScript
代碼的小技巧。2019已經到了，正在從事Web前端工作的小夥伴們是不是想要學習一些新的技巧呢?下面就來看一看本篇文章，讓我們一起學習一下編寫JavaScript代碼的小技巧。
1、Array.includes與條件判斷一般我們判斷或用||
//condition
functiontest(fruit){
if(fruit=="apple"||fruit=="strawberry"){
console.log("red");
}
}
如果我們有更多水果
functiontest(fruit){
constredFruits=["apple","strawberry","cherry","cranberries"];
if(redFruits.includes(fruit)){
console.log("red");
}
}
2、Set與去重
ES6提供了新的數據結構Set。它類似於數組，但是成員的值都是唯一的，沒有重復的值。Set本身是一個構造函數，用來生成Set
數據結構。
數組去重
constarr=[3,5,2,2,5,5];
constunique=[...newSet(arr)];
//[3,5,2]
Array.from方法可以將Set結構轉為數組。我們可以專門編寫使用一個去重的函數
functionunique(array){
returnArray.from(newSet(array));
}
unique([1,1,2,3]);//[1,2,3]
字元去重
letstr=[...newSet("ababbc")].join("");
console.log(str);
//'abc'
另外Set是如此強大，因此使用Set可以很容易地實現並集(Union)、交集(Intersect)和差集(Difference)。
leta=newSet([1,2,3]);
letb=newSet([4,3,2]);
//並集
letunion=newSet([...a,...b]);
//Set{1,2,3,4}
//交集
letintersect=newSet([...a].filter(x=>b.has(x)));
//set{2,3}
//差集
letdifference=newSet([...a].filter(x=>!b.has(x)));
//Set{1}
3、Map與字典類型數據
一般而已，JavaScript實現字典數據是基於Object對象。但是JavaScript的對象的鍵只能是字元串。對於編程來說有很多不便。
ES6提供了Map數據結構。它類似於Object
對象，也是鍵值對的集合，但是「鍵」的范圍不限於字元串，各種類型的值，字元串、數值、布爾值、數組、對象等等都可以當作鍵。
constresultMap=newMap()
.set(-1,{text:'小於',color:'yellow')
.set(0,{text:'等於',color:'black')
.set(1,{text:'大於',color:'green')
.set(null,{text:'沒有物品',color:'red'})
letstate=resultMap.get(null)
//{text:'沒有物品',color:'red'}
Map的遍歷順序就是插入順序
constmap=newMap([["F","no"],["T","yes"]]);
for(letkeyofmap.keys){
console.log(key);
}
//"F"
//"T"
for(letvalueofmap.value()){
console.log(value);
}
//"no"
//"yes"
4、函數式的方式處理數據
按照我的理解，函數式編程主張函數必須接受至少一個參數並返回一個值。所以所有的關於數據的操作，都可以用函數式的方式處理。
假設我們有這樣的需求，需要先把數組foo中的對象結構更改，然後從中挑選出一些符合條件的對象，並且把這些對象放進新數組result里。letfoo=[
{
ame:"Stark",
age:21
},
{
ame:"Jarvis",
age:20
},
{
ame:"Pepper",
age:16
}
];
//我們希望得到結構稍微不同，age大於16的對象：
letresult=[
{
person:{
ame:"Stark",
age:21
},
friends:[]
},
{
person:{
ame:"Jarvis",
age:20
},
friends:[]
}
];
從直覺上我們很容易寫出這樣的代碼：
letresult=[];
//有時甚至是普通的for循環
foo.forEach(function(person){
if(person.age>16){
letnewItem={
person:person,
friends:[];
};
result.push(newItem);
}
})
使用函數式的寫法，可以優雅得多
letresult=foo
.filter(person=>person.age>16)
.map(person=>({
person:person,
friends:[]
}));
數組求和
letfoo=[1,2,3,4,5];
//不優雅
functionsum(arr){
letx=0;
for(leti=0;i
x+=arr[i];
}
returnx;
}
sum(foo);//=>15
//優雅
foo.rece((a,b)=>a+b);//=>15
5、compose與函數組合
以下代碼稱為組合compose
constcompose=function(f,g){
returnfunction(x){
returnf(g(x));
};
};
由於函數式編程大行其道，所以現在將會在JavaScript代碼看到大量的箭頭()=>()=>()=>的代碼。
ES6版本compose
constcompose=(f,g)=>x=>f(g(x));
在compose的定義中，g將先於f執行，因此就創建了一個從右到左的數據流。這樣做的可讀性遠遠高於嵌套一大堆的函數調用.
我們選擇一些函數，讓它們結合，生成一個嶄新的函數。
reverse反轉列表，head取列表中的第一個元素;
consthead=arr=>arr[0];
constreverse=arr=>[].concat(arr).reverse();
constlast=compose(head,reverse);
last(["jumpkick","roundhouse","uppercut"]);
//"uppercut"
但是我們這個這個compose不夠完善，只能處理兩個函數參數。rex源碼有個很完備的compose函數，我們借鑒一下。
functioncompose(...funcs){
if(funcs.length===0){
returnarg=>arg
}
if(funcs.length===1){
returnfuncs[0]
}
returnfuncs.rece((a,b)=>(...args)=>a(b(...args)))
}
有了這個函數，我們可以隨意組合無數個函數。現在我們增加需求，組合出一個lastAndUpper函數，內容是先reverse反轉列表，head
取列表中的第一個元素,最後toUpperCase大寫。consthead=arr=>arr[0];
constreverse=arr=>[].concat(arr).reverse();
consttoUpperCase=str=>str.toUpperCase();
constlast=compose(head,reverse);
constlastAndUpper=compose(toUpperCase,head,reverse,);
console.log(last(["jumpkick","roundhouse","uppercut"]));
//"uppercut"
console.log(lastAndUpper(["jumpkick","roundhouse","uppercut"]))
//"UPPERCUT"
以上就是小編今天為大家分享的關於2019Web前端編寫JavaScript
代碼的小技巧的文章，希望本篇文章能夠對正在從事Web前端工作的小夥伴們有所幫助。想要了解更多Web相關知識記得關注北大青鳥Web前端培訓官網哦。
作者：廖振廷
作者：#/p/54758068
*聲明：內容與圖片均來源於網路(部分內容有修改)，版權歸原作者所有，如來源信息有誤或侵犯權益，請聯系我們刪除或授權事宜。
7. 前端使用面向對象式編程 還是 函數式編程 針對什麼問題用什麼方式...
前端建議使用函數式編程，搭配react框架 。可以上githup搜索 『函數式編程』start最高的呢個進行學習 。 真的是干貨滿滿的。 如果你是前端新手，還是先積累代碼量再說，這東西並不是你看懂就會用的！
8. 零基礎如何學前端
您好，零基礎學習前端是可以的，完全沒有問題：
階段1.前端核心基礎
HTML +_CSS核心、JavaScript基礎語法、JavaScript面向對象、JavaScript DOM和
BOM編程、jQuery框架
階段2.HTML5 + CSS3 + 移動端核心
HTML5新特性、Canvas專列、CSS3新特性、CSS3進階、CSS3實例演練
階段3.移動端
移動端核心、移動端適配、移動端特效
階段4.伺服器端
伺服器端開發、資料庫操作、前後端交互核心、微信公眾號開發
階段5.JavaScript高級
JavaScript基礎深入剖析、JavaScript面向對象深入講解、JavaScript非同步編程、
JavaScript函數式編程JavaScript設計模式
階段6.前端必備
性能優化、版本控制工具、模塊化、項目構建工具
階段7.高級框架
React框架基本使用、React框架進階、Vue框架基本使用、Vue框架進階、Vue源碼分析
階段8.小程序
原生小程序入門、原生小程序API使用、小程序框架Mpvue
web前端學習路線
上面是web前端的學習路線，你可以自己在網上看web前端相關的視頻，有些培訓機構的前端視頻還是不錯的，你也可以報個培訓班跟著老師學習web前端，如果說想走捷徑，少走彎路，還是建議你找個靠譜的培訓班，站在巨人的肩膀上你肯定比別人看的更遠，看到的東西更多，希望可以幫到你。
9. 零基礎怎麼系統學Web前端
網站開發開發大致分為前端和後端，前端主要負責實現視覺和交互效果，以及與伺服器通信，完成業務邏輯。其核心價值在於對用戶體驗的追求。可以按如下思路學習系統學習：
基礎知識：
1.html + css 這部分建議在 w3school 在線教程 上學習，邊學邊練，每章後還有小測試。 之後可以模仿一些網站做些頁面。
2. javascript 要學的內容實在很多，如果沒有其他編程語言的基礎的話，學起來可能要費些力，還是建議先在 w3school上學習。之後建議馬上看《javascript語言精粹》，js是一門很混亂的語言，這本書能夠幫助你區分哪些是語言的精華，哪些是糟粕，對於語言精華，應該深入學習。糟粕部分能看懂別人寫的代碼就行，自己就不用嘗試了。
對於習慣看視頻學習的同學，以上內容也可以在優就業網站上學習。
進階：
有了以上基礎，就可以進行一般的靜態網頁設計，不過對於復雜的頁面還需要進一步學習。
1.css。截至今日（2015.12.08），天貓、淘寶、支付寶都已停止對ie6,7的支持，未來相信大多數網站都會停止對ie6，7的支持，ie8的市場份額也不像兩年前那麼高了（天貓即將停止對IE8的支持，2016.12.13），webkit內核已成為市場主流。對於css的學習，我推薦分三塊：「基礎概念」，「css2.1規范」，「css3規范」。必看 精通CSS（第2版） (豆瓣)，看完這本書你應該對：盒子模型，流動，block，inline，層疊，樣式優先順序，等概念非常了解了。這本確實有些年頭了，但基礎概念部分講述非常清晰，可以稱之為經典。ie6，7相關的內容可以不看。css3的部分可以參考：CSS3實用指南 (豆瓣)。這本書同樣有些老，只是最新出版的書中沒發現有特別好的。
2. javascript。上面提到內容還不足以讓你勝任js編程。在有了基礎之後，進一步學習內容包括：
a) 框架。推薦 zepto，簡單易用，在w3school簡單學習js後，直接上手 zepto 即可完成一些簡單的項目。zepto 源碼簡單清晰，也適合新手閱讀。補充： 可以使用 codecademy 學習 javascript，zepto，用戶體驗真的很好（感謝 TonyOuyang ）。最近比較熱門的框架是React, VUE, Angular這些, 根據需要稍作了解即可。隨著ie瀏覽器市場份額的下降，以及移動端的發展，標准原生js已經可以在實際項目中使用（目前還需要藉助es5shim、babel等），重點還是ES5, ES6, ES7。
b) javascript 語言範式 。這個名字可能並不恰當，只是我找不到可以描述「面向對象」，「函數式」這個兩個概念的概念。javascript不完全是一個面向對象的語言，它的很多設計理念都有函數編程語言的影子，甚至說如果你不用面向對象，完全可以把它理解成一門函數式編程語言。javascript的很多語言特性，都是因為他具有函數式語言的特點才存在的。這部分推薦先學習面向對象的基本理論，對封裝，繼承，多態等概念要理解，維基網路，網路會是你的幫手，另外推薦《object oriented javascript》，應該有中文版。對與函數式編程可以參考這篇文章：JavaScript 中的函數式編程實踐
c) javascript 語言內部機制。必須弄清如下概念：js中變數的作用域，變數傳遞方式，函數的定義環境與執行環境，閉包，函數的四種調用方式（一般函數，對象的方法，apply，call），以及四種調用方式下，『this'指向的是誰。這部分內容你會在《javascript語言精粹》中詳細了解。
d) dom編程，這個web前端工程師的核心技能之一。必讀《dom編程藝術》，另外《高性能javascript》這本書中關於dom編程的部分講的也很好。
e) ajax編程，這是另一核心技術。ajax建議在網上查些資料，了解這個概念的來龍去脈，網路，維基網路上的內容就足夠了。真正編程是很容易的，如今幾乎所有框架都對ajax有良好的封裝，編程並不復雜。另外，ajax未來幾年會被 Fetch Standard 取代，也需要了解。另外關於xhr2，cors（跨站資源共享），formData文件上傳，也需要了解。
f) es5, es6。現在開發js大部分基於es5的，ie8以下通過es5-shim。但利用一些工具，現在已經可以直接寫es6代碼了，尤其在reactjs，nodejs類型的項目中。對於從es5，es6每個階段js發生了哪些變化都需要系統學習，學習順序建議是 JavaScript基礎 -> es5 -> es6，越靠前的越重要。一些參考鏈接：ECMAScript 5 compatibility tableECMAScript 6入門ES5 « 張鑫旭
3. html5。需要了解html都提供了哪些api，然後項目中用起來。這部分沒有什麼難理解的，關鍵在於能用html5解決業務問題，以及不支持html5的瀏覽器的降級方案。這部分體現了前端的一個思想：面向未來編程，盡早將新技術引入業務中來，而不是過分考慮兼容性問題，進而導致面向過去編程。
再進一階 · 代碼層面：
有了以上知識，對於大多數小型網站，你應該已經可以寫出能夠工作的代碼了。但要想成為更專業的前端，你還需繼續努力。更高的要求大概還有四方面：1易維護，2可測試，3高性能，4低流量（移動端）。
1.易維護。對於頁面你該理解『樣式』，『數據』，『行為』三者分離，對應的當然就是css,html,js。對於js代碼，你最好了解設計模式，重構，MVC等內容。
2. 可測性。就是保證你的代碼能溝通單元測試100%覆蓋到所有分支
3. 高性能。必讀《高性能javascript》
4. 低流量。移動端關注比較多，PC端現在可以不用太關注了
再進一階 · 工程層面：
前端項目同樣面臨軟體生命周期的各個環節，首先是代碼管理，你必須學會使用svn和git。其次是代碼的構建，如今前端代碼構建已經不是簡單的壓縮一下了，需要進行依賴管理、模塊合並、各種編譯，必須要學會使用grunt、gulp、webpack、rollup等前端構建工具，以及前端模塊管理的方式，amd，cmd，es6 mole 等等。
然後呢？以上內容只是簡單說了前端學習的順序。前端工程師應該有的知識結構請參考這里：JacksonTian/fks · GitHub
補充：
對於前段開發，基本內容就這些了，可以根據自己的興趣愛好選擇性學習以下內容。
1. 交互設計。大公司依然有專業人士搞這些，不過不懂交互的前端一定不是好前端。推薦《簡約至上》。
2. 後端。應該說前段工程師必須至少了解一門後端語言，不過如果愛好也可深入學習，入手難度比較低的應該是php了。這部分由可分為基於頁面，基於框架兩種。大型項目都是基於框架開發的，建議至少了解一個MVC框架，比如php的ci, yii, yaf 等，好還框架的設計思想都大同小異。如今NodeJs在大公司已經得到普遍的使用，推薦大家使用在Node上使用Koa框架做一些後端服務的開發。
3. Android和ios開發。時至今日，前端的工作領域已經非常廣泛，native的界面開發本質上也是前端開發，個大公司都面臨著Native環境和web環境頁面同時維護的問題，如果能夠在技術上得到統一，將會有巨大的價值。對於學有餘力的同學，應該了解Native開發的基本流程，至少了解到界面構建的技術。
4. 如果你能夠認真看到這里，說明你對前端有真愛，最後說一個編程習慣的問題，絕對是保你工作平安，少出故障。代碼提交前必須做的三個事情：A. git diff（svn diff）,檢查所有變更；B. 跑一邊單元測試；C. 手動運行一遍所有demo.
10. 前端要學哪些內容
您好web前端學習的內容有8個階段：
階段1.前端核心基礎
HTML +_CSS核心、JavaScript基礎語法、JavaScript面向對象、JavaScript DOM和
BOM編程、jQuery框架
階段2.HTML5 + CSS3 + 移動端核心
HTML5新特性、Canvas專列、CSS3新特性、CSS3進階、CSS3實例演練
階段3.移動端
移動端核心、移動端適配、移動端特效
階段4.伺服器端
伺服器端開發、資料庫操作、前後端交互核心、微信公眾號開發
階段5.JavaScript高級
JavaScript基礎深入剖析、JavaScript面向對象深入講解、JavaScript非同步編程、
JavaScript函數式編程JavaScript設計模式
階段6.前端必備
性能優化、版本控制工具、模塊化、項目構建工具
階段7.高級框架
React框架基本使用、React框架進階、Vue框架基本使用、Vue框架進階、Vue源碼分析
階段8.小程序
原生小程序入門、原生小程序API使用、小程序框架Mpvue
前端學什麼
這個就是學習前端的學習內容圖，你可以按照順序從上到下依次學習，現在學習的方法有很多，不管是你自學還是去參加培訓班這個學習的順序都是可以的，在學習方法上就是3多，「多思考、多問、多敲」，學習的本質就是不斷的重復，熟能生巧，你可以去網上看看視頻，現在有些機構的視頻還是不錯的，希望可以幫到你！