前端操作方法

『壹』 前端怎麼學

與其他計算機主流技術所不同的是，Web前端所包含的知識模塊很多，就目前而言，HTML、CSS、JS、DOM是目前前端技術最為基礎也是最為主要的四大模塊，但會隨著實際需求而有所改變。
一名優秀的Web前端工程師，需要JavaScript語言基礎扎實，具有良好的規范開發習慣；熟悉常用的設計模式，熟練使用Vue、Angular技術棧開發；能夠熟練使用angular、vue、echarts、jquery、react等框架進行傳統開發；要熟悉MVVM、MVC開發模式；熟悉前端工程化、自動化技術，可以根據需求配置Gulp文件及更改Webpack配置文件；熟練使用git版本管理工具。
此外，還要熟悉HTML5、CSS3的新特性，了解不同瀏覽器之間的差異，製作出的頁面能夠有很好的兼容性。
Web發展得很快，幾乎每天都在變化！如果沒有快速學習的能力，就跟不上 Web發展的步伐。作為前端工程師僅僅依靠今天的知識是無法適應未來的，必須不斷提升自己，不斷學習新技術、新模式。因此，不僅作為新人小白要努力學習，提高自己；就連已經入職三五的前端開發工程師，也需要不斷學習，了解前端技術的變化，提高自己的技術技能。

『貳』 前端開發的基本方法

CSS部分

盒子邊傾斜

clip-path: polygon(12% 0, 100% 0, 100% 100%, 0 100%);

禁止點擊事件/滑鼠事件「穿透」

div * { pointer-events: none; /*鏈接啊，點擊事件啊，都沒有效果了*/ }

用來控制元素在移動設備上使用滾動回彈效果

.main{
-webkit-overflow-scrolling: touch;
}

可解決在IOS中使用overflow:auto 形成的滾動條，滾動不流暢的情況

文字漸變效果

.text-gradient{ background-image: linear-gradient(135deg, deeppink, deepskyblue);
-webkit-background-clip: text; color: transparent;
}

css三角形

#triangle-up { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid red;

}

實現圓弧

clip-path: ellipse(80%60% at50%40%);

JS部分

JavaScript中檢測數組的方法

(1)、typeof操作符

這種方法對一些常用的類型檢查沒有問題，但對array和null 都判斷為object
(2)、instanceof操作符

這個操作符是檢測對象的原型鏈是否指向構造函數的prototype對象的
(3)、對象的constructor屬性

const arr = []

console.log(arr.constructor === Array) // true

(4)、Object.prototype.toString

constarr=[]console.log(Object.prototype.toString.call(arr)==='[objectArray]')//true

(5)、Array.isArray()

常用的字元串操作

• 字元串轉化toString()

• 字元串分隔split()

• 字元串替換replace()

• 獲取長度length

• 查詢子字元串 indexOf

• 返回指定位置的字元串或字元串編碼 charAt charCodeAt

• 字元串匹配 match

• 字元串拼接concat

• 字元串的切割或提取slice() substring() substr()

• 字元串大小寫轉化 toLowerCase toUpperCase

• 字元串去空格 trim() 用來刪除字元串前後的空格

其中第9中三者的區別如下：
（1）slice(), 參數可以是負數，負數表示從字元串最後一個位置開始切割到對應結束位置
（2）substring()，參數不可為負數，切割第一個位置到第二個位置的字元串
（3）substr()， 參數可以是負數，第一個參數是開始位置，第二個參數為切割的長度
字元串去重

• const str = '11122223333'const uniqueStr = [...new Set(str)].join('')



常用的數組操作

1、Array.map()
此方法是將數組中的每個元素調用一個提供的函數，結果作為一個新的數組返回，並沒有改變原來的數組
2、Array.forEach()
此方法是將數組中的每個元素執行傳進提供的函數，沒有返回值，注意和map方法區分
3、Array.filter()
此方法是將滿足條件的元素作為一個新數組返回
4、Array.every()
此方法將數組所有元素進行判斷返回一個布爾值，如果所有元素都符合判斷條件，則返回true，否則返回false
5、Array.some()
此方法將數組所有元素進行判斷返回一個布爾值,如果有一個元素滿足判斷條件，則返回true，所有元素都不滿足則返回false
6、Array.rece()
此方法為所有元素調用返回函數
7、Array.push()
在數組最後面添加新元素
8、Array.shift()
刪除數組第一個元素
9、Array.pop()
刪除數組最後一個元素
10、Array.unshift()
在數組最前面增加元素
11、Array.isArray()
判斷是否為一個數組
12、Array.concat()
數組拼接
13、Array.toString()
數組轉化為字元串
14、Array.join()
數組轉化為字元串，並用第一個參數作為連接符
15、Array.splice(開始位置，刪除個數，元素)
其中rece使用方法為：

• arr.rece(callback,[initialValue])



• 跳過第一個索引。如果提供initialValue，從索引0開始。



callback （執行數組中每個值的函數，包含四個參數）
1、previousValue （上一次調用回調返回的值，或者是提供的初始值（initialValue））
2、currentValue （數組中當前被處理的元素）
3、index （當前元素在數組中的索引）
4、array （調用 rece 的數組） initialValue （作為第一次調用 callback 的第一個參數。）
如果沒有提供initialValue，rece 會從索引1的地方開始執行 callback 方法，

數組去重：

• const arr = [1, 2, 3, 1, 2, 3]const uniqueArr = [...new Set(arr)]



常用對象方法

1、Object.assign()
用於克隆，兩個參數，將第二個對象分配到第一個中
2、Object.is()
用於判斷兩個值是否相同
//注意，該函數與==運算符不同，不會強制轉換任何類型， 應該更加類似於===，但值得注意的是它會將+0和-0視作不同值
3、Object.keys()
用於返回對象可枚舉的屬性和方法的名稱，返回一個屬性或方法名稱的字元串數組。
4、Object.defineProperty()
劫持變數的set和get方法,將屬性添加到對象，或修改現有屬性的特性

• var a = {};Object.defineProperty(a, 'name', { value : 'kong', enumerable : true //該屬性是否可枚舉})



5、Object.defineProperties()
可添加多個屬性,與Object.defineProperty()對應,
6、isPrototypeOf

• function a(){}


• var b = new a();console.log(a.prototype.isPrototypeOf(b));//true



安卓監聽可視區域變化，讓輸入框移動至可視區域

• if (/Android/gi.test(navigator.userAgent)) { window.addEventListener('resize', function () { if (document.activeElement.tagName === 'INPUT' || document.activeElement.tagName === 'TEXTAREA') { window.setTimeout(function () { document.activeElement.scrollIntoViewIfNeeded();


• }, 0);


• }


• });


• };



vue中平滑滾動到某個位置

this.$refs.rule.scrollIntoView({ block: 'start', behavior: 'smooth' })

向URL追加參數

• /**


• * 向URL追加參數


• * @function stringifyUrlArgs


• * @param {string} url - URL路徑


• * @param {object} params - 參數對象


• * @return {string}


• const stringifyUrlArgs = (url, params) => {


• url += (/?/).test(url) ? '&' : '?'


• url += Object.keys(params).map(key => `${key}=${params[key]}`).join('&') return url


• }



解析URL參數

• /**


• * 解析URL參數


• * @function parseUrlArgs


• * @param {string} url - 字元串


• * @return {object}export const parseUrlArgs = url => { const arr = url.match(/([^?=&]+)(=([^&]*))/g) || [] const args = arr.rece((a, v) => {


• a[v.slice(0, v.indexOf('='))] = v.slice(v.indexOf('=') + 1) return a


• }, {}) return args


• }



好用的JavaSrcipt庫與模塊（包）

日期時間處理庫

1、monent.js
2、day.js
day相對於monent要輕量許多

高精度數學運算

number-precision

• NP.strip(num) // strip a number to nearest right numberNP.plus(num1, num2, num3, ...) // addition, num + num2 + num3, two numbers is required at least.NP.minus(num1, num2, num3, ...) // subtraction, num1 - num2 - num3NP.times(num1, num2, num3, ...) // multiplication, num1 * num2 * num3NP.divide(num1, num2, num3, ...) // division, num1 / num2 / num3NP.round(num, ratio) // round a number based on ratio



實用工具庫

Lodash
lodash 是一個 JavaScript 實用工具庫，提供一致性，及模塊化、性能和配件等功能。
Lodash 消除了處理數組的麻煩，從而簡化了 JavaScript、 數字、對象、字元串等

『叄』 怎麼學習前端

如今的WEB前端工程師不論是薪資待遇還是工作環境都很不錯，因此吸引了不少的人加入。
第一個階段，HTML5+CSS3，需要大家掌握的知識點是我們常用的瀏覽器和瀏覽器內核是什麼，和html語法和使用技巧並將常用標簽掌握。還需要學習的就是css的語法和使用技巧等等。這個階段大家一般需要學習的時間在10天左右。
第二個階段，js交互設計的學習，需要大家掌握JavaScript語法和相應的演算法，如：用戶界面交互、變數提升及變數作用域、定時對象等。其它類似，cookie原理解析、正則表達式、面向對象原型繼承、http協議、Ajax前後台數據交互等等也是需要大家學習的。這個階段一般需要大家學習的時間在兩周左右。
第三個階段，node開發，需要大家掌握的知識點主要是，webpack模塊打包器、客戶端伺服器交互模型、 JavaScript 非同步編程模型、 JavaScript 模塊化編程方式、 能夠使用 Node.js 操作 MongoDB 資料庫、 能夠獨立開發基於後台介面的動態網站、Ajax 數據交互的項目、能夠獨立完成企業網站從前台到後台的基本開發工作。這個階段需要大家學習的時間在兩周左右。
第四個階段，前端框架的學習，這個階段需要大家掌握的知識點主要是， D3.js 進行大數據可視化交互開發、Vue 技術棧進行項目開發、React 技術棧進行項目開發、源代碼管理工具的使用、web項目的部署與發布模式學習，可以對常見網站業務模塊進行開發等等，這個階段一般需要大家的學習時間在兩周左右。
第五個階段，小程序與app開發，這個階段需要大家學習的知識點主要是，小程序開發基礎並獨立開發小程序項目、Canvas的掌握、小程序開發框架mpvue的使用、第三方AI平台的使用等。這個階段需要大家學習的時間在三周左右。
沒有基礎的小夥伴想要成為專業的WEB前端工程師在千鋒只需要5個月左右的時間就可以成為合格的WEB前端工程師。

『肆』 零基礎學習前端開發都必須掌握什麼內容

前端前景是很不錯的，像前端這樣的專業還是一線城市比較好，師資力量跟得上、就業的薪資也是可觀的，學習前端可以按照路線圖的順序，

0基礎學習前端是沒有問題的，關鍵是找到靠譜的前端培訓機構，你可以深度了解機構的口碑情況，問問周圍知道這家機構的人，除了口碑再了解機構的以下幾方面：

1. 師資力量雄厚

要想有1+1>2的實際效果，很關鍵的一點是師資隊伍，你接下來無論是找個工作還是工作中出任哪些的人物角色，都越來越愛你本身的技術專業前端技術性，也許的技術專業前端技術性則絕大多數來自你的技術專業前端教師，一個好的前端培訓機構必須具備雄厚的師資力量。

2. 就業保障完善

實現1+1>2效果的關鍵在於能夠為你提供良好的發展平台，即能夠為你提供良好的就業保障，讓學員能夠學到實在實在的知識，並向前端學員提供一對一的就業指導，確保學員找到自己的心理工作。

3. 學費性價比高

一個好的前端培訓機構肯定能給你帶來1+1>2的效果，如果你在一個由專業的前端教師領導並由前端培訓機構自己提供的平台上工作，你將獲得比以往更多的投資。

希望你早日學有所成。

『伍』 零基礎學習前端開發要怎麼開始

這里整理了一份web前端學習路線的思維導圖，需要掌握和學習的內容如下：

第一階段：專業核心基礎

階段目標：

1. 熟練掌握HTML5、CSS3、Less、Sass、響應書布局、移動端開發。

2. 熟練運用HTML+CSS特性完成頁面布局。

4. 熟練應用CSS3技術，動畫、彈性盒模型設計。

5. 熟練完成移動端頁面的設計。

6. 熟練運用所學知識仿製任意Web網站。

7. 能綜合運用所學知識完成網頁設計實戰。

知識點：

1、Web前端開發環境，HTML常用標簽，表單元素，Table布局，CSS樣式表，DIV+CSS布局。熟練運用HTML和CSS樣式屬性完成頁面的布局和美化，能夠仿製任意網站的前端頁面實現。

2、CSS3選擇器、偽類、過渡、變換、動畫、字體圖標、彈性盒模型、響應式布局、移動端。熟練運用CSS3來開發網頁、熟練開發移動端，整理網頁開發技巧。

3、預編譯css技術：less、sass基礎知識、以及插件的運用、BootStrap源碼分析。能夠熟練使用 less、sass完成項目開發，深入了解BootStrap。

4、使用HTML、CSS、LESS、SASS等技術完成網頁項目實戰。通過項目掌握第一階段html、css的內容、完成PC端頁面設計和移動端頁面設計。

第二階段：Web後台技術

階段目標:

1. 了解JavaScript的發展歷史、掌握Node環境搭建及npm使用。

2. 熟練掌握JavaScript的基本數據類型和變數的概念。

3. 熟練掌握JavaScript中的運算符使用。

4. 深入理解分支結構語句和循環語句。

5. 熟練使用數組來完成各種練習。

6.熟悉es6的語法、熟練掌握JavaScript面向對象編程。

7.DOM和BOM實戰練習和H5新特性和協議的學習。

知識點：

1、軟體開發流程、演算法、變數、數據類型、分之語句、循環語句、數組和函數。熟練運用JavaScript的知識完成各種練習。

2、JavaScript面向對象基礎、異常處理機制、常見對象api，js的兼容性、ES6新特性。熟練掌握JavaScript面向對象的開發以及掌握es6中的重要內容。

3、BOM操作和DOM操作。熟練使用BOM的各種對象、熟練操作DOM的對象。

4、h5相關api、canvas、ajax、數據模擬、touch事件、mockjs。熟練使用所學知識來完成網站項目開發。

第三階段：資料庫和框架實戰

階段目標：

1. 綜合運用Web前端技術進行頁面布局與美化。

2. 綜合運用Web前端開發框架進行Web系統開發。

3. 熟練掌握Mysql、Mongodb資料庫的發開。

4. 熟練掌握vue.js、webpack、elementui等前端框技術。

5. 熟練運用Node.js開發後台應用程序。

6. 對Restful，Ajax，JSON，開發過程有深入的理解,掌握git的基本技能。

知識點：

1、資料庫知識，範式，MySQL配置，命令，建庫建表，數據的增刪改查，mongodb資料庫。深入理解資料庫管理系統通用知識及MySQL資料庫的使用與管理，為Node.js後台開發打下堅實基礎。

2、模塊系統，函數，路由，全局對象，文件系統，請求處理，Web模塊，Express框架，MySQL資料庫處理，RestfulAPI，文件上傳等。熟練運用Node.js運行環境和後台開發框架完成Web系統的後台開發。

3、vue的組件、生命周期、路由、組件、前端工程化、webpack、elementui框架。Vue.js框架的基本使用有清晰的理解，能夠運用Vue.js完成基礎前端開發、熟練運用Vue.js框架的高級功能完成Web前端開發和組件開發，對MVVM模式有深刻理解。

4、需求分析，資料庫設計，後台開發，使用vue、node完成pc和移動端整站開發。於Node.js+Vue.js+Webpack+Mysql+Mongodb+Git，實現整站項目完整功能並上線發布。

第四階段：移動端和微信實戰

階段目標：

1.熟練掌握React.js框架，熟練使用React.js完成開發。

2.掌握移動端開發原理，理解原生開發和混合開發。

3.熟練使用react-native和Flutter框架完成移動端開發。

4.掌握微信小程序以及了解支付寶小程序的開發。

5.完成大型電商項目開發。

知識點：

1、React面向組件編程、表單數據、組件通信、監聽、生命周期、路由、Rex基本概念。練使用react完成項目開發、掌握Rex中的非同步解決方案Saga。

2、react-native、開發工具、視圖與渲染、api操作、Flutter環境搭建、路由、ListView組件、網路請求、打包。練掌握react-native和Flutter框架，並分別使用react-native和Flutter分別能開發移動端項目。

3、微信小程序基本介紹、開發工具、視圖與渲染、api操作、支付寶小程序的入門和api學習。掌握微信小程序開發了解支付寶小程序。

4、大型購物網站實戰，整個項目前後端分離開發；整個項目分為四部分：PC端網頁、移動端APP、小程序、後台管理。團隊協作開發，使用git進行版本控制。目期間可以擴展Three.js 、TypeScript。

這已經是一套非常完備的Java學習路線了，零基礎學習Java完全自學的話還是比較吃力的，建議還是找專業的機構系統學一下，可以點 擊 頭 像 了解一下。

『陸』 web前端怎麼入門學習

入門標准很簡單

就一條：達到能參與 Web 前端實際項目的開發水平。請注意，是實際項目，這就需要了解如今的實際項目開發都用了哪些技術棧。HTML/CSS/JavaScript 這三大基礎技術棧肯定是需要掌握的，但要能參與實際項目開發，肯定還要掌握其他一些主流的框架體系。

幾年前，jQuery + Bootstrap可以說是一統江湖，是前端領域的絕對霸主。而這幾年，隨著Angular、React、Vue等框架的興起，變成了百家爭鳴的局面。這幾年，Web 前端的技術發展真是太快了，相應地，技術棧也就變得非常多，除了最基本的HTML/CSS/JavaScript，以及Vue/React/Angular等這些 JavaScript 框架和各自的生態體系，還有 CSS 預處理器Sass/Less/Stylus，還有TypeScript，還有grunt/webpack/gulp等各種打包構建工具，還有其他一大堆技術棧。

這么多技術棧，我們不可能全都掌握，就算是資深的前端工程師，也只是精通其中一部分，比如，有些精通 Angular，有些掌握 React，有些則熟悉 Vue，很少有人對三種框架生態體系都非常了解。因此，我們入門也沒必要每種框架都學習，只要挑選一種就夠了。而且，作為全棧，我們學習一門技術更重要的是要學習技術背後的編程思想、設計思想、架構思想等。而不管是 Angular、React 還是 Vuew，其背後的核心設計思想都是組件化的設計，因此只要掌握一種框架，我們也就能學習到前端技術的核心思想了。

那麼，我們應該學哪種框架體系呢？我的建議是從 Vue 開始，因為 Vue 的學習成本是最低的，入門簡單，而且這兩年 Vue 可以說是出現了爆發式的增長，已經直逼 React。React 的主要學習成本在於要掌握 JSX 語法，而且文檔還大多都是英文。Vue 因為是國人開發和維護的，自然對國內的開發者更友好。Angular 則是個大而全的框架，顯得太重，學習成本自然最高。至於 jQuery + Bootstrap 這套，已經過時了，建議沒必要去學習了，畢竟我們的時間很寶貴，還有一大堆更有價值的東西等著我們去學。

因此，我們要入門 Web 前端開發的話，除了要學習 HTML/CSS/JavaScript 三大基礎技術棧，還要了解 Vue 體系。而 Vue 體系，除了 Vue 框架本身，還包括其他技術棧。

下方是學習前端開發的學習路線：

『柒』 有什麼前端學習方法

學習前端最有效的方法是持之以恆的堅持。

無論做什麼，先別想那麼多先做了再說，因為人都是懶惰，什麼事情最先想到的都是走捷徑，深怕付出了沒有回報。學習這個事情，從小學老師就說，一定要好好學習天天向上，去總結了真的努力了，到頭來除了抱怨還抱怨，總期望天上掉餡餅。方法有很多種，真的適合的才是真的有用，什麼樣的方法才適合自己，無論什麼方法你得做了才有效！所以沒有最有效的方法，只有持之以恆的堅持才是真正有效的。

作為一個初學者，你必須明確系統的學習方案，我建議一定有一個指導的人，全靠自己學，放棄的幾率非常大，在你對於web前端還沒有任何概念的時候，需要一個人領進門，之後就都靠自己鑽研，第一步就是確定web前端都需要哪些內容，並且在多少時間內學完，建議時間6個月保底。

視頻為主，書為輔。很多初學者在學習前端的時候非常喜歡去買書，但是最後的結果是什麼？看來看去什麼都不會寫，所以在這里給大家提醒，書可以看，但是是在建立於你已經對於某個知識點有了具體操作的執行後，在用書去鞏固概念，這樣更加利於你對於知識的理解。

對於學習技術來講，掌握一個學習方法是非常重要的，其實對於學習web前端來講，學習方法確實很多都是相通的，一旦學習方法不對，可能就會造成「方法不對，努力白費」。其實關於這方面還是很多的，我就簡單說個例子，有的人邊聽課邊跟著敲代碼，這樣就不對，聽課的時候就專心聽，做題的時候就專心做題，這都是過來人的經驗，一定要聽。根據每個人的不同，可能學習方法也會有所出路，找到適合你自己的學習法方法是學習的前提。

不建議自己一個人瞎學，在我了解學習編程的這些人來看，從零基礎開始學並且最後成功做這份工作的其實並沒有幾個，我覺得大部分原因就是因為他們都不了解web前端是干什麼的，學什麼的，就盲目的買書看，到處找視頻看，最後看著看著就放棄了，所以我建議初學者在沒有具體概念之前，還是找有經驗的人請教一下，聊過之後你就會知道web前端具體是干什麼的，該怎麼學，這是我個人的小建議，可以不採納。

自學路線：

第1階段：前端頁面重構(4周)

內容包含了：(PC端網站布局項目、HTML5+CSS3基礎項目、WebApp頁面布局項目)

第2階段：JavaScript高級程序設計(5周)

內容包含：(原生JavaScript交互功能開發項目、面向對象進階與ES5/ES6應用項目、JavaScript工具庫自主研發項目)

第3階段：PC端全棧項目開發(3周)

內容包含：(jQuery經典交互特效開發、HTTP協議、Ajax進階與PHP/JAVA開發項目、前端工程化與模塊化應用項目、PC端網站開發項目、PC端管理信息系統前端開發項目)

第4階段：移動端項目開發(6周)

內容包含：(Touch端項目、微信場景項目、應用Angular+Ionic開發WebApp項目、應用Vue.js開發WebApp項目、應用React.js開發WebApp項目)

第5階段：混合(Hybrid,ReactNative)開發(1周)

內容包含：(微信小程序開發、ReactNative、各類混合應用開發)

第6階段：NodeJS全棧開發(1周)

內容包括：(WebApp後端系統開發、一、NodeJS基礎與NodeJS核心模塊二、Express三、noSQL資料庫)。

網上有很多免費的web前端視頻教程，可以跟著學學，給你推薦一套視頻教程：網頁鏈接。

『捌』 web前端怎樣入門

先說一下自學前端如何入門吧。

方法：

第一：理清Web前端的知識結構。要想高效學習Web前端知識，首先應該搞清楚Web前端都包括哪些技術結構。Web前端開發雖然技術難度並不高，但是技術細節卻比較多，內容也比較雜。Web前端的基礎包括三大部分，包括Html、CSS和JavaScript，其中JavaScript是學習的重點，也是難點。另外，vue等框架也是需要熟練掌握的。

第二：緊跟技術發展趨勢。目前Web前端的技術發展趨勢有三個，其一是前端開發數據化;其二是前端開發高效化;其三是前端開發全棧化。前端開發數據化主要是大數據發展的影響，在大數據的推動下，Web前端逐漸涉及到了大量的數據展示任務。前端開發高效化主要體現在Web前端正在進行獨立部署，前端與後端的溝通主要通過資源介面的方式來進行。前端開發全棧化也是一個比較明顯的趨勢，比如Nodejs的應用。

路線：

第1階段：前端頁面重構(4周)

內容包含了：(PC端網站布局項目、HTML5+CSS3基礎項目、WebApp頁面布局項目)

第2階段：JavaScript高級程序設計(5周)

內容包含：(原生JavaScript交互功能開發項目、面向對象進階與ES5/ES6應用項目、JavaScript工具庫自主研發項目)

第3階段：PC端全棧項目開發(3周)

內容包含：(jQuery經典交互特效開發、HTTP協議、Ajax進階與PHP/JAVA開發項目、前端工程化與模塊化應用項目、PC端網站開發項目、PC端管理信息系統前端開發項目)

第4階段：移動端項目開發(6周)

內容包含：(Touch端項目、微信場景項目、應用Angular+Ionic開發WebApp項目、應用Vue.js開發WebApp項目、應用React.js開發WebApp項目)

第5階段：混合(Hybrid,ReactNative)開發(1周)

內容包含：(微信小程序開發、ReactNative、各類混合應用開發)

第6階段：Node.js全棧開發(1周)

內容包括：(WebApp後端系統開發、一、Node.js基礎與Node.js核心模塊；二、Express；三、noSQL資料庫)

至於視頻教程，我這里有很多前端的全套教程，如果你需要的話，可以加一下我的學習交流裙裙，找我要就行了！

『玖』 前端的學習步驟

先學HTML 、再學CSS、JavaScript 然後學 jQuery、最後學 ajax和前端框架；
前端框架包括：Vue、React、angularjs 等 。

『拾』 Web 前端如何入門

如果你是剛入門、或者准備入門的童鞋。我建議你還是按部就班一步步的來，先把 HTML + CSS 先學好，注意：這里並不是要你非常深入的學習 HTML + CSS，如果要非常深入的學習 CSS，得花好多年，比如很有名的張鑫旭老師，就是一直深耕與 CSS 領域。

（1）把 CSS 的盒模型、浮動、裝飾、flex、適配，這幾塊掌握清楚了，就能解決業務中 80% 以上的問題了，找幾個靜態頁面練練手，可以找 PC、移動端都有的一些著名網站，比如「網路首頁」。

（2）大概花一周的時間把 JavaScript 語言最基礎的內容學習一下，如：變數（lvar、let、const）、條件判斷（if、else、switch）、循環（for、while、do…while），函數（function）、數組等。

（3）花兩周的時間把 DOM 和 BOM 的基礎知識、事件、定時器、事件學習一下，然後做練習。這里強調一下：做練習很重要，從我兼職帶學生和在公司帶實習生的經驗來看，學了一些知識的時候，一定要加以練習。這個階段一些簡單的特效了，把所有學到的知識都給用上去（HTML + CSS + JavaScript + DOM + BOM + 定時器的知識點都可以用上去）

學習是一個艱苦的過程，當然如果能把技術學成，最後也一定可以獲得高薪工作。掌握一個好的學習方法，跟對一個學習的人非常重要。今後要是大家有啥問題，可以隨時來問我，能幫助別人學習解決問題，對於自己也是一個提升的過程。

（4）用三周 ~ 四周的時間深入學習 JavaScript，其中：原型、閉包、作用域鏈、this、面向對象，這幾塊要重點學習。在這個階段還不要學習 ES6+ 的內容，先把 ES5 的內容掌握好，學習這部分的內容會比較難，一定不要放棄。

（5）用一周學習 node.js 最基礎的知識，注意：這里學習最基礎的知識就行，知道一個 HTTP 請求到響應的大致過程就可以，知道 GET、POST 的區別，能夠寫出一個最簡單的介面即可。關於 ndoe.js 其他的內容放到後面再學習，這一步是為了學習 Ajax 做准備。

（6）用兩周的時間學習 Ajax，深入學習什麼是非同步，向自己用 node.js 寫的後端介面發送請求。一開始使用回調函數的方式，逐步學習使用 Promise、async + await，在這一步的實戰中學習非同步相關的知識，非同步的知識比較抽象，一定要結合實戰學習。

（7）用一周的時間學習 ES6+ 的內容，有一部分的內容已經在前面幾步中學完了，比如 let、const、Promise、async。這一步中重點學習箭頭函數、class、模塊化、擴展方法（字元串、數組、函數等）

（8）以上步驟都走完之後，前端已經入門了，可以學習框架了，建議先學習 Vue.js，關於 Vue.js 學習的步驟與內容，我在以下回答中有詳細講述（學習 React 也是差不多的套路），這里就不再贅述了。

以上內容學完就夠了嗎？肯定不夠呀，CSS 還需要深入、JavaScript 還需要深入、組件化開發還需要深入，node.js 還需要深入，還要學習數據結構和演算法、計算機網路、操作系統等。