整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          前端程序員入門html的4大方法,這兩本神書真心經典!

          日,有不少的程序員問w3cschool這邊,前端開發應該怎么學?

          有個小白程序員表示,自己走了很多彎路,學java開發沒學透不能就業,現在學前端又不知道如何下手,前后算起來浪費了不少的時間。

          針對此問題,下面w3cschool就給程序員小伙伴們答疑解惑,并分享一些干貨。

          前端有三架馬車你一定要學會“駕馭”,HTML+CSS+Javascript。

          照目前看來,網上各種前端學習資料又多又雜,確實讓不少入門前端的小伙伴不知所措。要選什么學習資料?如何入門前端開發?

          0、Come on,來點國外的土特產視頻!

          關于視頻的選擇,直接網上搜“30 Days to Learn HTML & CSS”這個視頻來看。

          這個視頻是國外的前端開發特產,大小有1G多吧!

          前端開發可以照前端開發的視頻進行實戰訓練,建議可以一邊開著NotePad++?,一邊看視頻,一邊敲代碼。

          另外,可以用有道云,或者是印象筆記稍微做點記錄,這會加快你對html、css的學習。

          1、從經典的w3cschool前端html教程學習

          當你咨詢了很多的前端工程師,他們都會推薦你從經典的w3cschool基礎教程開始,把上面的課程刷一遍。

          2、html微課

          通過前面兩步的學習,你基本上算是入門html啦。

          但相信也會有些程序員覺得很枯燥,那不妨可以嘗試w3cschool新開發的html微課。

          比如之前的《刀塔傳奇》,很多人每天刷副本都可以樂此不疲,因為游戲升級通關是比較有趣的。

          w3cschool微課同樣采用了闖關刷副本的模式,你通過每天有趣的刷副本闖關,就可以掌握html重點的概念和編程技能。

          3、前端開發神書推薦

          會有些前輩會給你推薦《DOM編程藝術》、《Javascript權威指南》、《Javascript高級程序設計》、《鋒利的JQuery》等,但對于新手來說似乎略難。

          不妨去看Head first html, xhtml & CSS這兩本簡直是神書,真心經典!

          者 | 六小登登

          責編 | 屠敏

          從 2013 年專科畢業開始,一路跌跌撞撞走了很多彎路,做過餐廳服務員,進過工廠干過流水線,做過客服,干過電話銷售可以說經歷相當的“豐富”。

          最后的機緣巧合下,走上了前端開發之路,作為一個非計算機專業且低學歷的人來說,自學編程其實不是件容易的事情,不過慶幸的是自己堅持下來了。

          目前工作還算不錯,收入在目前所在的城市不算高,不算低,生活也還過得去,繼續加油努力,也希望自己在今后更上一層。

          從 2016 年下半年開始,我真正接觸前端,到現在 2 年多的時間。開始之初,我沒有任何的語言基礎,完全從零的小白開始,就連「對象」我都弄不明白,更別說那些高深莫測的什么封裝、繼承、多態等。

          當時自己也不知從何入手,怎么辦呢?于是每當自己遇到困難時,就厚著臉皮去請教前輩大牛,然后就是去查閱資料,很多時候自己也很覺得不好意思,現在才發現人很多時候都恥于相別人請教,怕自己丟面子。

          但作為一個過來人,我要告訴你請教前輩大牛真的很重要,可以讓你少走很多的彎路,不要怕丟人,沒面子,面子值幾個錢?學到真本事才最重要。沒有技能才叫真的沒有面子。當然了我們在請教別人時,一定要掌握「度」,不要打擾到了別人的工作。

          我現在非常感謝前輩們的賜教,也感謝那些在網上寫博客、文章分享的大牛們,給了我們這些自學的小白很多的資料,經驗,心得。從中受益很多。

          向優秀的前輩們學習,我開始寫博客,希望也能幫到和我一樣,學渣、從零開始、喜歡技術的一群志同道合的人。

          我深知自己的技術并不高,還處在繼續學習的路上,離大牛還差的很遠,我本身也非常敬畏技術,也知道自己的渺小,只希望這篇文章的「學習之路」對于那些「從零開始」學習前端的同學有一些指引作用,不像自己一開始那樣的那么盲目,哪怕對你有一點點的幫助,就足夠了。

          說了這么多,下面我們直接進入正題,都是我平時學習和收集的一些資料希望能夠幫到你。

          前言

          1. 首先我得告訴你,自學是件很苦的事情,學習本身就是件反人性的過程,更何況在一個從零開始的全新領域獨自奮斗,這里不是要打擊你,而是要你認真想好,結合自身的環境、條件。不然半途而廢浪費的不僅是時間,還有精力、金錢。
          2. 如果你已經想好決定去做,那就不要猶豫,堅持下去你就可以成功,像我這樣的學渣都可以,你沒有什么不可以的,一定要相信自己。
          3. 興趣是最好的老師,很多人對這句話非常反感,被生活所迫,談興趣不可笑嗎?其實不是,問問自己對技術有沒有興趣,做自己喜歡和感興趣的事情才能夠走的更遠和更久,很多人不理解這一點,總有一天你會明白的,我當時轉前端的時候也是因為自己挺喜歡,而且最接近用戶,都是所見所得的東西很好玩,另外一方面也覺得工資也挺高,所以自己打心里覺得做前端挺好。
          4. 做好持續學習,時刻保持學習的心態,說實話現在社會,科技的發展非常之快,技術的更新更是如此,如果你覺得學習一門技術就可以吃到老,我勸你還是打住,可能考個公務員更適合你(不要杠精,我并不是說公務員不要學習,自己體會就好)。
          5. 永遠不要覺得遲,只要行動然后堅持下去,你就干掉了 80% 的人,自學的人很多,但是堅持下來的沒有幾個。就像郭德綱說過,不是我的相聲說的多好而是我活了下來。著名營銷人員「小馬宋」畢業時燒了很多年的鍋爐,但是自己對廣告營銷感興趣,所以離職從零開始,現在已經是很有名的營銷大師。
          6. 與其把時間花在學與不學的糾結上,不如把這個時間放在行動上,如果發現自己不合適也堅持不下去,那就換個賽道,專注的去做一件事情,會提高你的成功概率。

          工具篇

          工欲善其事,必先利其器,所以在開始之前選擇一個合適好用的編輯器是很重要的,工具不再多,在于好用就行,除了編輯器,我們也要掌握其他的一些工具,才能夠讓我們在學習的道路上更加的順暢。

          1. WebStorm

          不必多說,前端最強大的編輯器,特別是那無敵的智能提示,但是它的缺點在于如果項目多于大時,出現的卡頓讓很多人苦惱。

          • WebStorm 官網下載地址:https://www.jetbrains.com/webstorm/。
          • WebStorm 有哪些過人之處?(https://www.zhihu.com/question/20936155)
          • 激活 WebStorm2018(https://blog.csdn.net/qq_32135281/article/details/82696280)

          2. Visual Studio Code

          微軟開源免費產品,受到非常多技術人員的喜愛,基本上成為前端開發者的必備編輯器,強大的插件擴展,可以靈活的打造自己喜歡的風格。給你們送上常用插件列表拿走不謝。

          • Visual Studio Code 官網下載地址:https://code.visualstudio.com/。
          • VSCode 拓展推薦:https://github.com/varHarrie/varharrie.github.io/issues/10
          • 使用頂級 VSCode 擴展來加快開發 JavaScript:https://www.html.cn/archives/9507
          • vscode 插件推薦:https://segmentfault.com/a/1190000006697219

          3. atom

          也是一款免費開源的編輯器,受到很多人的喜愛,但是我本人用的較少,所以插件方面就不推薦了,大家可以按照自己的愛好去尋找。

          4. 科學上網

          每個程序員都應該具備的工具和能力,否則很多事情都無法辦到,至于怎么做,你可以自己查閱資料,這里不就不在多說了。而且下面推薦的很多資源都是需要科學上網之后才能訪問,所以一定要學會。

          5. Google

          在使用「Google」之前必須學會科學上網,不然無法訪問,學會使用搜索可以幫助我們解決很多問題,一個人的知識是有限的,掌握了搜索的技巧才能以不變應萬變,很多時候百度出來的東西重復性很大,最重要的是垃圾信息很多,在百度找不到的答案,在這里很容易找到,Google 是我的必備搜索。

          6. Github

          全球最大的「同性」開源交流社區,沒有賬號的趕緊注冊,在這有很多優秀的資源項目,各種大神。觀摩優秀代碼是我們學習的很好路徑。另外在開發過程中,很多時候任務重、時間緊,應該避免重復造輪子,這里能夠找到你需要的工具或代碼。

          7. Stack Overflow

          國外著名的技術問答交流社區,開發時碰到的很多問題在這里都能找到答案。

          8. SegmentFault

          對應的國內版的技術問答交流社區,如果你英文不好,也可以在這里找找答案。

          9. Markdown

          Markdown 輕量級標記語言,簡潔的語法,讓作者專注內容而非復雜的格式要求,我認為人人都應該掌握,特別是經常寫博客的人。想想你在用 world 時的場景,每次寫完文章之后,不得不話費很多時間進行格式的排版,使用它你就可以避免這些煩惱。

          • Markdown 中文文檔:https://markdown-zh.readthedocs.io/en/latest/

          HTML 篇

          一些準備就緒之后,開始我們的學習之旅,首先我們先從 HTML 開始。

          HTML名為「超文本標記語言」,是整個頁面的結構基礎,它承載了我們的頁面內容。

          1. 基礎

          • w3school 在線教程(http://www.w3school.com.cn/h.asp):內容非常的基礎,適合小白學習,對 HTML 有一個入門了解。
          • freeCodeCamp(https://www.freecodecamp.cn/):一個非常好的入門學習網站,采用闖關的模式,就像游戲打怪升級一樣,非常的有樂趣,準備自學的小伙伴不妨試試。

          2. 進階

          • MDN HTML(https://developer.mozilla.org/zh-CN/docs/Web/HTML):這里的內容質量更好,錯誤更少,內容也更加的全面。
          • HTML 和 CSS 編碼規范(https://codeguide.bootcss.com/):掌握一些代碼技巧,寫出更好,更高質量的代碼。

          CSS 篇

          HTML 承載了頁面的內容,但是有時候會略顯單調與「丑陋」,CSS 的作用就是為這些內容加上樣式,就像一個美女也要有漂亮的外衣去修飾才會更加漂亮,「人靠衣裝馬靠鞍」,網頁的內容也是需要穿上一件漂亮的外衣去吸引用戶。而 CSS 則完成了這個裝飾。

          1. 基礎

          • 學習 CSS 布局(http://zh.learnlayout.com/):帶你一步一步的完成 CSS 的學習。
          • CSS 參考手冊(https://css.doyoe.com/):對CSS可以有一個全面入門的學習。
          • w3school CSS 參考手冊(http://www.w3school.com.cn/cssref/index.asp):同上也是非常基礎的知識,適合入門。

          2. 進階

          書籍:

          《CSS揭秘》(https://book.douban.com/subject/26745943/):非常推薦的一本 CSS 書籍,可以學到很多鮮為人知的技巧。

          在線系列:

          • MDN CSS(https://developer.mozilla.org/zh-CN/docs/Web/CSS):和 HTML 都是 MDN 社區文檔,質量保障。
          • HTML和CSS編碼規范(https://codeguide.bootcss.com/):掌握一些代碼技巧,寫出更好,更高質量的代碼。
          • 大漠老師的CSS系列(https://www.w3cplus.com/CSS3):大漠老師對CSS有非常深入的認識和豐富的實踐經驗,《圖解CSS3:核心技術與案例實戰》的作者。
          • 大漠老師的SASS系列(https://www.w3cplus.com/blog/tags/302.html):大漠老師的 sass 文章系列。
          • SASS中文網(https://www.sasscss.com/):成熟、穩定、強大的 CSS 擴展語言解析器,它可以讓你使用變量,條件語句等書寫 CSS。
          • Stylus官網(https://stylus.bootcss.com/):同樣是 CSS 預編譯器,但它省去了一些符號,讓 CSS 寫起來更加的簡潔,清爽。
          • HTML5和CSS3(https://github.com/qianguyihao/Web/tree/master/07-HTML5%E5%92%8CCSS3):詳解HTML5 和 CSS3。

          知識點:

          • 別說你懂CSS相對單位(http://wuyuying.com/blog/archives/css-in-depth-relative-units/):深入了解 CSS 的相對單位rem,em區別。
          • CSS 進階內容(https://github.com/coconilu/Blog/issues/29):常見知識點的深入了解。
          • Flex 布局教程:語法篇(http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html):阮一峰老師的flex講解。
          • Flex 布局教程:實例篇(http://www.ruanyifeng.com/blog/2015/07/flex-examples.html):阮一峰老師的flex講解。
          • “CSS相關”目錄存檔(https://www.zhangxinxu.com/wordpress/category/css/):張鑫旭大佬的CSS系列文章,深入淺出,《CSS世界》作者。
          • CSS繪制的40種形狀和圖形(http://www.open-open.com/lib/view/open1476240478941.html):利用CSS繪制出的40各種圖形形狀。
          • CSS-大前端(http://www.daqianduan.com/tag/css):一些 CSS 的知識點。

          JavaScript 篇

          有了 HTML 與 CSS,網頁也就有了內容和樣式,但是會缺少與用戶的互動,所有的內容都靜靜的躺在那里死氣沉沉。就好比一個美女穿著漂亮的衣服在你面前一動不動好像也沒有什么吸引力,但如果又唱歌,又跳舞,還向你拋媚眼,那可真就把持不住了。JavaScript 就是給網頁添加這樣的「行為」。

          Javascript 簡史(https://blog.csdn.net/qq_32135281/article/details/81667714):可以簡單了解下,JavaScript 發展由來。

          1. 基礎

          書籍

          • 《JavaScript權威指南 (第6版)》(https://book.douban.com/subject/10549733/):俗稱「犀牛書」,JS 的經典之作,提升JS技能的必備書籍,我的JS基礎知識全都是啃這本書啃下來的,剛開始讀時可能有會有些吃力,但是只要堅持下來收獲滿滿。
          • 《JavaScript高級程序設計(第3版)》(https://book.douban.com/subject/10546125/):俗稱「紅寶書」,JavaScript 超級暢銷書,全書闡述了JavaScript語言實現的各個組成部分,ECMAScript,DOM,BOM,事件,面向對象等等,隨時拿出來翻翻,更加深入了學習 JS。

          在線系列

          除了書籍之外,也有很多優秀的在線教程,可以幫助我們更好的學習。

          • 現代 Javascript 教程(https://zh.javascript.info/):非常全面的JavaScript 學習教程,從基礎到高階,非常詳細,相信你會愛上它的。
          • 廖雪峰的JavaScript教程(https://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000):廖雪峰系列教程。
          • JavaScript 標準參考教程(alpha)(https://javascript.ruanyifeng.com/):阮一峰老師的系列教程,通俗易懂,案例豐富。

          2. 進階

          • JavaScript語言精粹(https://github.com/qibaoguang/Study-Step-by-Step/blob/master/%E8%AF%BB%E4%B9%A6%E7%AC%94%E8%AE%B0/javascript_the_good_parts.md):揭示JavaScript中的精華。
          • JavaScript 秘密花園(http://bonsaiden.github.io/JavaScript-Garden/zh/#other.timeouts):對 JS 一些的核心知識點進行梳理講解,例如:this,閉包/作用域,構造函數,原型等等,都是面試必考知識點。
          • ECMAScript 6 入門(http://es6.ruanyifeng.com/):阮一峰老師ES6入門書籍,全面介紹 ECMAScript 6 新引入的語法特性。
          • JavaScript使用技巧(http://www.jstips.co/zh_CN/):可以認識到一些你平時沒有接觸過的小技巧。
          • 深入理解javascript原型和閉包系列(http://www.cnblogs.com/wangfupeng1988/p/4001284.html):詳細解釋了原型和閉包,看完之后對原型與閉包讓你徹底明白。
          • 大漠老師的JavaScript系列(https://www.w3cplus.com/JavaScript):大漠老師的JavaScript系列文章。
          • JavaScript 算法與數據結構(https://github.com/trekhleb/javascript-algorithms/blob/master/README.zh-CN.md):基于 JavaScript 的算法與數據結構,讓你愉快的學習。
          • JavaScript中的正則表達式(https://blog.csdn.net/qq_32135281/article/details/78274563):我自己的一篇正則表達式的文章,希望對你有幫助。
          • 30分鐘掌握ES6/ES2015核心內容(上)(https://segmentfault.com/a/1190000004365693)
          • 30分鐘掌握ES6/ES2015核心內容(下)(https://segmentfault.com/a/1190000004368132):闡述了一些常用的ES6的知識點。
          • 學用 JavaScript 設計模式(https://www.oschina.net/translate/learning-javascript-design-patterns):闡述JavaScript編程語言中經典和現代的設計模式。
          • 你不懂JS(系列叢書)(https://github.com/getify/You-Dont-Know-JS/tree/1ed-zh-CN)
          • InterviewMap(https://yuchengkai.cn/docs/frontend/#%E5%86%85%E7%BD%AE%E7%B1%BB%E5%9E%8B):聚集了很多知識點,包括JS,瀏覽器,性能等。
          • 30 秒就能理解的 JavaScript 代碼片段(https://www.html.cn/30-seconds-of-code/):讓你更好的理解一些有用的JS代碼片段。

          TypeScript篇

          ES6 的超集擴展,嚴格的數據類型,帶來更好的維護,適合大型項目的開發工作,有人說它是未來的發展趨勢,你說要不要了解?

          • TypeScript 中文手冊(https://typescript.bootcss.com/):官網翻譯版。
          • TypeScript Handbook(中文版)(https://zhongsp.gitbooks.io/typescript-handbook/content/):中文版。
          • RxJS 中文文檔(https://cn.rx.js.org/):中文官網。
          • 30 天精通 RxJS (01):認識 RxJS(https://ithelp.ithome.com.tw/articles/10186104):繁體字可能閱讀起來并沒有那么順暢。

          Jquery篇

          雖說現在已經是單頁面應用時代,有React,Vue 這種強大的框架可以使用,但也不缺乏一些老的項目需要維護,而且在學習之初,可以用它做兩個簡單的應用還是不錯的,可以相對了解下基本用法,它可以讓你更好,更方便的操作DOM。但不建議再深度學習。

          • 《鋒利的jQuery(第2版)》(https://book.douban.com/subject/10792216/):一本很不錯的 Jquery 學習書籍。
          • jQuery API中文文檔(https://www.jquery123.com/):JQuery 中文教程。

          Ajax篇

          掌握了的HTML、CSS、JavaScript時,這時候可以嘗試自己做一些項目了,而項目中肯定會有數據的交互,這時候就是 Ajax 的用武之地了。

          • 廖雪峰AJAX(https://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000/001434499861493e7c35be5e0864769a2c06afb4754acc6000):廖雪峰大佬的博客知識。
          • XMLHttpRequest 對象(https://wangdoc.com/javascript/bom/xmlhttprequest.html):阮一峰老師的AJAX詳解。
          • JSON風格指南(https://github.com/liuxiaodeng/free-programming-books/blob/master/free-programming-books-zh.md#javascript):前后端的交互數據通常都是 JSON 格式,所以了解 JSON 是必要的。

          NodeJS與模塊化

          NodeJs 的出現讓前端發展進入了一個新的領域,并且滋生出專業的 Node 工程師,不僅如此 Node 在前端模塊化,工程化起到很重要的作用,所以了解是必須的,如果感興趣的可以深入學習,可以向全棧工程師發展。

          • Javascript模塊化編程(一)(http://www.ruanyifeng.com/blog/2012/10/javascript_module.html):模塊的寫法
          • Javascript模塊化編程(二):AMD規范
          • Javascript模塊化編程(三):require.js的用法
          • 前端模塊化開發那點歷史(https://github.com/seajs/seajs/issues/588):了解下,前端模塊化的發展。
          • Node.js 官方(https://nodejs.org/zh-cn/)
          • 狼叔:如何正確的學習Node.js(https://github.com/i5ting/How-to-learn-node-correctly):狼叔江湖地位頗高,《更了不起的 Node.js》的作者。
          • 全棧工程師之路-Node.js(http://i5ting.github.io/nodejs-fullstack/)

          框架篇

          隨著日益復雜的用戶需求,與系統的復雜度上升,傳統的開發模式日漸的很難滿足,此時的三大框架孕育而生,讓開發者更加高效,可復用,把關注點都放在數據層的操作,免去那些繁瑣而又重復的視圖操作。

          現在框架的能力已經是前端開發人員必備的技能之一也是趨勢,三大框架的「最終目的」都是一致的,我認為開發者不必糾結于到底應該選擇哪一個學習,可以選擇其中的兩個是最好的。對于剛入門的人來說,建議選擇 Vue 入手,比較簡單,靈活。

          • MVC,MVP 和 MVVM 的圖示(http://www.ruanyifeng.com/blog/2015/02/mvcmvp_mvvm.html):在學習框架之前,你應該了解下MVVM的設計思想。
          • 框架原理(https://yuchengkai.cn/docs/frontend/framework.html):了解一些框架的基本原理。

          1. Angular

          • Angular(https://angular.cn/):Angular官方社區。
          • Angular開發者(http://www.ngfans.net/):大漠窮秋老師維護的站點,Angular中國布道者。
          • NG-ZORRO(https://ng.ant.design/docs/introduce/zh#%E8%AE%BE%E8%AE%A1%E8%A7%84%E8%8C%83):Angular UI 組件庫,阿里巴巴出品。

          2. Vue

          • Vue(https://cn.vuejs.org/index.html):官網,最好的學習資料。
          • 我的Vue進階之路(https://blog.csdn.net/qq_32135281/column/info/29689)
          • 使用vue全家桶制作博客網站(https://www.cnblogs.com/xiaohuochai/p/9228543.html)
          • Element(http://element-cn.eleme.io/#/zh-CN):一個高質量的 Vue UI 組件庫。餓了么前端團隊出品。
          • Vue 項目里戳中你痛點的問題及解決辦法(更新)(https://juejin.im/post/5b174de8f265da6e410e0b4e):做項目難免回去到坑,這里你或許可以找到答案。

          3. React

          React我了解不多,所以就沒什么好推薦的了,大家可自行學習。

          • React官網(https://www.reactjscn.com/)

          圖形可視化

          隨著日益增長的數據,如何利用高效的利用數據,是每個企業都考慮的問題,而人的眼睛看到的東西要勝過閱讀的問題,俗話說「一圖勝千言」就是這個道理,所以數據的可視化就會格外的重要,以下都是我常看的一些技術,書籍,和關注的可視化開源庫。

          • 《HTML5 Canvas核心技術》(https://book.douban.com/subject/24533314/):學習 Canvas 比較好的一本書籍。
          • Canvas系列(https://www.w3cplus.com/search/node/canvas):大漠老師的 Canvas 系列。
          • Echarts(https://www.echartsjs.com/index.html)
          • D3(https://d3js.org/)
          • Highcharts(https://www.highcharts.com.cn/)
          • AntV(https://antv.alipay.com/zh-cn/index.html)
          • Mapv(https://mapv.baidu.com/)

          工程化與版本控制篇

          1. Git

          版本控制工具,很多新手往往把 git 與 github 傻傻分不清楚,二者是不同的東西,一定要去區分清楚。

          • Git教程(https://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000):廖雪峰老師的教程。
          • Learn Git Branching(https://learngitbranching.js.org/):一種有趣的學習 Git 的方式。
          • GitHub 漫游指南(https://github.com/phodal/github):作者是一個極客。
          • git - 簡易指南:http://www.bootcss.com/p/git-guide/

          2. Gulp

          自動化構建工具,項目打包部署前的壓縮合并,節省時間,提高開發效率。

          • Gulp 中文網(https://www.gulpjs.com.cn/):官方教程。
          • gulp詳細入門教程(http://www.ydcss.com/archives/18):非常詳細的實現步驟。

          3. Webpack

          Webpack 是當下最熱門的前端資源模塊化管理和打包工具。它可以將許多松散的模塊按照依賴和規則打包成符合生產環境部署的前端資源。

          • Webpack中文文檔:https://www.webpackjs.com/
          • webpack原理:https://juejin.im/entry/5b0e3eba5188251534379615
          • Webpack揭秘——走向高階前端的必經之路:https://juejin.im/post/5badd0c5e51d450e4437f07a
          • Webpack HMR 原理解析:https://zhuanlan.zhihu.com/p/30669007
          • webpack 熱加載原理探索:http://shepherdwind.com/2017/02/07/webpack-hmr-principle/

          4. Babel

          JavaScript代碼編譯器,可以讓ES6及以上語法轉換成瀏覽器支持的語法,一般會在框架的腳手架中自行配置。

          • Babel(https://babel.bootcss.com/):官網教程。

          5. 代碼質量

          • ESLint(https://eslint.bootcss.com/):javascript代碼檢測工具幫助我們寫出更規范的代碼。

          瀏覽器與HTTP

          • 瀏覽器的常見知識點(https://yuchengkai.cn/docs/frontend/browser.html):需要我們了解的常見知識。
          • 網站安全(https://yuchengkai.cn/docs/frontend/safety.html):幾種常見安全問題。
          • 同源限制(https://wangdoc.com/javascript/bom/same-origin.html)
          • 從URL輸入到頁面展現到底發生什么?(https://github.com/ljianshu/Blog/issues/24)
          • 深入理解瀏覽器的緩存機制(https://github.com/ljianshu/Blog/issues/23)
          • 網頁性能管理詳解(http://www.ruanyifeng.com/blog/2015/09/web-page-performance-in-depth.html)
          • 關于Http協議,你必須要知道的(https://github.com/ljianshu/Blog/issues/22)
          • HTTP 協議(https://github.com/coconilu/Blog/issues/135)
          • HTTP2 協議(https://github.com/coconilu/Blog/issues/134)
          • 瀏覽器同源政策及其規避方法(http://www.ruanyifeng.com/blog/2016/04/same-origin-policy.html)
          • 跨域資源共享 CORS 詳解(http://www.ruanyifeng.com/blog/2016/04/cors.html)
          • 總結 XSS 與 CSRF 兩種跨站攻擊(https://segmentfault.com/a/1190000004623125)

          性能優化

          • 性能優化(https://yuchengkai.cn/docs/frontend/performance.html):常見性能優化。
          • 前端性能優化的七大手段(https://www.cnblogs.com/xiaohuochai/p/9178390.html)
          • 延遲加載(Lazyload)三種實現方式(https://zhuanlan.zhihu.com/p/25455672)
          • 詳解懶加載和預加載(https://www.geekjc.com/post/58d94d0f16a3655650d6fafe)
          • 前端優化帶來的思考,淺談前端工程化(http://www.cnblogs.com/yexiaochai/p/4901341.html)
          • 推薦幾本與Web性能優化有關的書籍(https://w3ctech.com/topic/108)
          • vue + webpack 前端性能優化(https://juejin.im/post/5bc5c106e51d450e7a253e1b)

          SEO

          • SEO優化實戰(https://imweb.io/topic/5682938b57d7a6c47914fc00)

          博客系列

          1. 個人

          現在是一個信息爆炸的時代,網上有很多優秀的博客文章,每個人的精力都是有限的,不可能關注到所有的博客,每個人關注點可能不太一樣,所以關注的個人博客也會不同,這些推薦幾個我比較常看的幾個高質量博客。而且是持續更新的。

          • 阮一峰的個人網站(http://www.ruanyifeng.com/home.html):阮一峰老師江湖地位不必多說,博客不止有技術,現在阿里任職。
          • 廖雪峰的官方網站(https://www.liaoxuefeng.com/):廖雪峰老師寫過很多優秀的系列教程,值得去學習。
          • 張鑫旭(https://www.zhangxinxu.com/):專注前端技術的大牛之一,出版《css世界》一書。
          • W3cplus(https://www.w3cplus.com/):大漠老師在手淘任職,CSS,HTML 有著豐富的經驗。
          • 前端入門和進階學習筆記(https://github.com/qianguyihao/Web):從零開始自學,然后進入京東,記錄作者一路走來的學習筆記。
          • 六小登登(https://blog.csdn.net/qq_32135281):我自己的個人博客,記錄自己的一些學習總結,個人成長,認識思維,雖然自己還是個菜鳥,但一直在路上。

          2. 團隊

          • 奇舞周刊(https://weekly.75team.com/):收集每周前端精華文章。
          • 美團技術團隊(https://tech.meituan.com/):分享一些美團的技術路線。
          • JavaScript Weekly(https://javascriptweekly.com/):每周都會分享一些 JavaScript 優質內容。
          • 印記中文周刊(https://weekly.docschina.org/):如果你對英文有閱讀障礙的話,印記幫你翻譯。
          • 凹凸實驗室(https://aotu.io/index.html):京東團隊。
          • 淘寶前端團隊FED(http://taobaofed.org/):淘寶前端團隊,不必多說了。
          • 網易FEG前端團隊(http://feg.netease.com/):網易的前端團隊,網易的產品一直都是我最喜歡的。
          • IMWeb前端博客(https://www.imweb.io/):騰訊公司前端團隊,負責QQ的相關業務你就知道了,都是億級別。
          • tutorialzine(https://tutorialzine.com/):高質量教程和文章庫。

          項目資源

          • 前端技能匯總(http://html5ify.com/fks/):一個前端工程師需要的技能點和學習資料。
          • You-need-to-know-css(https://lhammer.cn/You-need-to-know-css/#/):一個CSS的優質項目,純 CSS 實現我們項目中很多常用,不常用的樣式。
          • JavaScript libraries(https://www.javascripting.com/):一些優秀的JavaScript 開源庫。
          • awesome-web-dev-books(https://github.com/jobbole/awesome-web-dev-books):前端經典學習書單。
          • 前端 TOP 100(https://www.awesomes.cn/rank):基本涵蓋了所有前端在用的開源項目,我覺得收藏這一個就夠了。

          常用工具

          • CSS Sprites Generator(https://www.toptal.com/developers/css/sprite-generator):雪碧圖的在線制作工具。
          • Lorem Picsum(https://picsum.photos/):好用的圖片臨時占位符。
          • Md2All(http://md.aclickall.com/):優秀的現在 Markdown 編輯器。
          • 優波設計(https://ubuuk.com/):優秀的設計導航網站,幫助你更好的尋找資料。
          • 搬書匠(http://www.banshujiang.cn/):書籍搜索下載。
          • 史萊姆導航(http://www.slimegps.cn/):資源搜索。
          • codePen(https://codepen.io/):在線代碼編輯工具。
          • Iconfont(https://www.iconfont.cn/):阿里的字體圖標庫,支持多種格式,下載圖片,在線使用,SVG等等。
          • Can I use(https://www.caniuse.com/):可以查看瀏覽器兼容 CSS 情況。
          • 在線工具(https://tool.lu/):工具資源導航。

          最后

          以上是我這兩年多一路走來收藏的一些資料,整理這份資料也花了我好幾天的時間,希望能夠在自學的道路上幫到你。

          再次聲明,我并不是什么大神,我自認為技術也沒有到達這個層級,但是我會一直堅持學下去,另外一定不要誤會這里面的知識我全部都會,這些都是我學習的一些資料想整理出來,免去小白的一些不知道如何查閱資料。

          這里的資源可能并不適合每一個人,你也不一定全部都需要,只需要挑選自己想要的部分就行,任何事情并不是越多越好。

          作者:六小登登,個人公眾號:六小登登(ID:liuxiaodengdeng)。目前在某創業公司任職前端開發工作,近 3 年前端開發經驗,愛技術、愛寫作、愛分享。

          聲明:本文為作者投稿,版權歸其個人所有。

          avaScript 是網景(Netscape)公司開發的一種基于客戶端瀏覽器、面向(基于)對象、事件驅動式的網頁腳本語言。JavaScript語言的前身叫作Livescript。

          JavaScript的特點:

          • 簡單、易學、易用;
          • 跨平臺;IE、Navigator
          • 符合ECMA(歐洲計算機制造協會)標準,可移植;
          • 事件驅動式的腳本程序設計思想;
          • 動態、交互式的操作方式。

          JavaScript的作用:

          • 交互式操作;
          • 表單驗證;
          • 網頁特效;
          • Web游戲
          • 服務器腳本開發等。

          JavaScript的編寫環境:

          文本編輯器

          JavaScript的執行平臺:

          Web瀏覽器

          JavaScript的執行方式:

          解釋執行(由上而下)

          JavaScript的版本:

          JavaScript1.0——JavaScript1.4

          瀏覽器對JavaScript的支持:

          JavaScript/IE3.0、JavaScript1.2/IE4.0;

          微軟允許用戶自行設置對JavaScript處理模式。

          JavaScript與Java、VBScript、JScript的關系:

          JavaScript與Java的區別體現在:

          首先,它們是兩個公司開發的不同的兩個產品,Java是SUN公司推出的新一代面向對象的程序設計語言,特別適合于Internet應用程序開發;而JavaScript是Netscape公司的產品,其目的是為了擴展Netscape Navigator功能而開發的一種可以嵌入Web頁面中的基于對象和事件驅動的解釋性語言。

          其次,JavaScript是基于對象的,而Java是面向對象的,即Java是一種真正的面向對象的語言,即使是開發簡單的程序,必須設計對象。JavaScript是種腳本語言,它可以用來制作與網絡無關的,與用戶交互作用的復雜軟件。它是一種基于對象和事件驅動的編程語言。因而它本身提供了非常豐富的內部對象供設計人員使用。

          第三,兩種語言在其瀏覽器中所執行的方式不一樣。Java的源代碼在傳遞到客戶端執行之前,必須經過編譯,因而客戶端上必須具有相應平臺上的仿真器或解釋器,它可以通過編譯器或解釋器實現獨立于某個特定的平臺編譯代碼的束縛。JavaScript是一種解釋性編程語言,其源代碼在發往客戶端執行之前不需經過編譯,而是將文本格式的字符代碼發送給客戶,由瀏覽器解釋執行。

          第四,兩種語言所采取的變量是不一樣的。Java采用強類型變量檢查,即所有變量在編譯之前必須作聲明。JavaScript中變量聲明,采用其弱類型。即變量在使用前不需作聲明,而是解釋器在運行時檢查其數據類型。

          第五,代碼格式不一樣。Java是一種與HTML無關的格式,必須通過像HTML中引用外媒體那么進行裝載,其代碼以字節代碼的形式保存在獨立的文檔中。JavaScript的代碼是一種文本字符格式,可以直接嵌入HTML文檔中,并且可動態裝載。編寫HTML文檔就像編輯文本文件一樣方便。

          第六,嵌入方式不一樣。在HTML文檔中,兩種編程語言的標識不同,JavaScript使用<script>...</script>來標識,而Java使用<applet> ... </applet> 來標識。

          第七,靜態綁定和動態綁定。Java采用靜態聯編,即Java的對象引用必須在編譯時的進行,以使編譯器能夠實現強類型檢查,如不經編譯則就無法實現對象引用的檢查。JavaScript采用動態聯編,即JavaScript的對象引用在運行時進行檢查。

          JavaScript學習教程

          如果想要更高效、更系統地學會javascript,最好采用邊學邊練的學習模式。


          今天分享的這套JavaScript學習教程,講解了前端開發中的核心技術JavaScript,俗稱JS

          內容涵蓋:JavaScript核心語法、JavaScript內置支持類、JavaScript調試、JavaScript DOM編程、JavaScript BOM編程、大量前端小案例、JavaScript事件處理、JavaScript對象、繼承、JSON等知識點,該視頻可以開啟你的WEB前端之路。

          課程目錄

          1. .JavaScript教程-JavaScript概述

          2. .JavaScript教程-HTML嵌入JavaScript代碼的第一種方式1

          3. .JavaScript教程-HTML嵌入JavaScript代碼的第一種方式2

          4. .JavaScript教程-HTML嵌入JavaScript代碼的第二種方式

          5. .JavaScript教程-HTML嵌入JavaScript代碼的第三種方式

          6. JavaScript教程-JS的標識符

          7. .JavaScript教程-JS的變量1

          8. .JavaScript教程-JS的變量2

          9. JavaScript教程-JS的函數初步1

          10. .JavaScript教程-JS的函數初步2

          11. .JavaScript教程-全局變量和局部變量

          12. .JavaScript教程-JS的數據類型

          13. .JavaScript教程-Undefined數據類型

          14. .JavaScript教程-Number數據類型

          15. .JavaScript教程-Boolean數據類型

          16. .JavaScript教程-回顧數據類型

          17. .JavaScript教程-String數據類型

          18. .JavaScript教程-Object數據類型

          19. JavaScript教程-Object數據類型2

          20. .JavaScript教程-Object數據類型3

          21. .JavaScript教程-null undefined NaN的區別以及等同和全等運算符

          22. .JavaScript教程-JS的常用事件

          23. .JavaScript教程-回調函數的概念

          24. .JavaScript教程-注冊事件的兩種方式

          25. JavaScript教程-JS代碼的執行順序

          26. .JavaScript教程-JS代碼的執行順序2

          27. JavaScript教程-捕捉回車鍵

          28. .JavaScript教程-捕捉回車鍵2

          29. .JavaScript教程-void運算符

          30. .JavaScript教程-JS的控制語句

          31. JavaScript教程-設置和獲取文本框的value

          32. JavaScript教程-innerHTML和innerText屬性

          33. .JavaScript教程-正則表達式

          34. .JavaScript教程-郵箱地址的正則表達式

          35. JavaScript教程-擴展字符串的trim函數

          36. .JavaScript教程-回顧JS

          37. JavaScript教程-表單驗證

          38. JavaScript教程-表單驗證2

          39. JavaScript教程-表單驗證3

          40. .JavaScript教程-表單驗證4

          41. .JavaScript教程-復選框的全選和取消全選

          42. .JavaScript教程-獲取下拉列表選中項的value

          43. .JavaScript教程-周期函數setInterval

          44. .JavaScript教程-內置支持類Array

          45. .JavaScript教程-BOM編程window的open和close

          46. .JavaScript教程-BOM編程彈出確認框

          47. .JavaScript教程-(補錄)-將當前窗口設置為頂級窗口

          48. .JavaScript教程-BOM編程history和location對象

          49. .JavaScript教程-JSON在開發中的使用

          50. .JavaScript教程-JSON在開發中的使用2

          51. JavaScript教程-JSON在開發中的使用3

          52. .JavaScript教程-JSON在開發中的使用4

          53. JavaScript教程-JSON在開發中的使用5

          更多Java學習資料,獲取方式:

          關注+轉發本文后私信扣“1”


          主站蜘蛛池模板: 国产精品高清一区二区三区| 一区五十路在线中出| 无码人妻精品一区二区三区蜜桃| 一本AV高清一区二区三区| 国产无码一区二区在线| 91精品一区国产高清在线| 国产激情无码一区二区| AV无码精品一区二区三区| 天堂一区二区三区精品| 国产成人精品一区二三区在线观看 | av一区二区三区人妻少妇| 日韩在线一区视频| 精品成人一区二区三区四区| 亚洲AV无一区二区三区久久| 在线成人一区二区| 一区二区高清在线观看| 搡老熟女老女人一区二区| 韩国资源视频一区二区三区| 久久精品无码一区二区日韩AV| 国产短视频精品一区二区三区| 国产一区二区三区四| 国产成人AV一区二区三区无码| 无码国产精品久久一区免费| 国产亚洲自拍一区| 亚洲国产精品无码第一区二区三区| 亚洲国产成人久久一区久久| 国产手机精品一区二区| 国产日韩高清一区二区三区| 国产伦精品一区二区三区女| 国产精品被窝福利一区| 日韩欧美一区二区三区免费观看 | 成人国产一区二区三区| 在线播放偷拍一区精品| 国产成人精品一区二区三区无码| 男插女高潮一区二区| 国产在线精品一区二区在线观看| 日韩AV无码一区二区三区不卡 | 亚洲日本乱码一区二区在线二产线| 国产一区二区视频免费| 极品尤物一区二区三区| 国产探花在线精品一区二区|