進階攻略|前端完整的學習路線

衆所周知css並不能算是一們真正意義上的「編程」語言，它自己沒法未完成像其它編程語言同樣的嵌套、繼承、設置變量等工做。爲了解決css的不足，開發者們想到了編寫一種對css進行預處理的「中間語言」，能夠實現一些「編程」語言纔有的功能，而後自動編譯成css供瀏覽識別，這樣既必定程度上彌補了css的不足，也無需一種新的語言來代替css以供瀏覽器識別。因而css預處理語言SASS就應運而生了。

進階階段

互聯網的快速發展和激烈競爭，用戶體驗成爲一個重要的關注點，致使專業前端工程師成爲熱門職業，各大公司對前端工程師的需求量都很大，要求也愈來愈高，優秀的前端工程師更是稀缺，學完以上的基礎，作完項目，差很少就能夠了嗎？答案是No，想要成爲一個更加優秀的工程師，進階階段攻略必不可少。

快速開發框架和基礎庫

Express簡介：http://www.runoob.com/nodejs/nodejs-express-framework.html

MVC簡介：http://www.runoob.com/design-pattern/mvc-pattern.html

jQuery ：http://www.jq22.com/jq1-jq4

Zepto教程：http://www.runoob.com/w3cnote/zepto-js-source-analysis.html

Swiper 教程：http://www.swiper.com.cn/

iScroll教程： http://wiki.jikexueyuan.com/project/iscroll-5/

Sea.js 手冊與文檔：http://www.zhangxinxu.com/sp/seajs/docs/zh-cn/module-definition.html

MooTool 中文手冊：http://www.chinamootools.com/

模塊化

ES6 Module整理：http://www.javashuo.com/article/p-tciiupjf-cv.html

CommonJS中文網：http://www.php.cn/js-tutorial-360130.html

webpack 教程：http://www.runoob.com/w3cnote/webpack-tutorial.html

browserify 教程：http://www.gulpjs.com.cn/docs/recipes/browserify-with-globs/

JS模塊化工具requirejs教程：http://www.runoob.com/w3cnote/requirejs-tutorial-1.html

ECMAScript 語法 : http://www.w3school.com.cn/js/pro_js_syntax.asp

Gulp構建化工具官網:https://gulpjs.com/

SuperSlide.js教程： http://www.superslide2.com/

zoom.js教程：http://lab.hakim.se/zoom-js/

Node.js教程:http://www.runoob.com/nodejs/nodejs-tutorial.html

UI框架：這裏就不一一介紹了，參考上一篇文章：《前端最全的框架總結》

WeUI：http://www.runoob.com/w3cnote/weui-for-weixin-web.html

Highcharts 圖表教程：http://www.runoob.com/highcharts/highcharts-tutorial.html

ionic 教程：http://www.runoob.com/ionic/ionic-tutorial.html

Framework教程： http://www.w3cplus.com/resource/tags/187.html

NPM 使用介紹:http://www.runoob.com/nodejs/nodejs-npm.html

Framework即架構，它是一個語言開發軟件，提供了軟件開發的框架，使開發更具工程性、簡便性和穩定性。NET Framework經過COM Interop（COM互操做）技術支持COM+和MTS。一個傳統的COM應用程序可以調用一個.NET組件，同時.NET組件（在.NET中稱爲.NET Assembly）也可以調用一個COM組件。這一很是強大的雙向互操做特性使你能夠在應用程序中混合使用兩類技術。

高級階段

在前端這個行業摸爬滾打久了，天然學到的東西會愈來愈多，在大多數人眼裏，互聯網前端開發是一個有着高薪水、高職業榮譽感的行業。沒錯，隨着互聯網大環境的快速崛起，HTML5的發展，絕對屬於既有「錢景」還有前景的的朝陽行業。高收入、前景光明，即便對前端開發的要求愈來愈高，也仍是有許多新人願意來一試身手，紛紛打破頭往這個行業裏面涌。從小白到前端大神的華麗轉身就在此咯

PHP教程：http://www.runoob.com/php/php-tutorial.html

Ruby教程：http://www.runoob.com/ruby/ruby-tutorial.html

MySQL教程：http://www.runoob.com/mysql/mysql-tutorial.html

Redis 教程:http://www.runoob.com/redis/redis-tutorial.htm

MongoDB 教程：http://www.runoob.com/mongodb/mongodb-tutorial.html

Hybrid混合式開發： http://www.infoq.com/cn/articles/hybrid-app-development-combat/

Linux教程:http://www.runoob.com/linux/linux-tutorial.html

Vue.js 入門教程：http://www.runoob.com/w3cnote/vue-js-quickstart.html

AngularJS教程：http://www.runoob.com/angularjs/angularjs-tutorial.html

React.js 教程：http://www.runoob.com/react/react-tutorial.html

Require.js 教程： http://requirejs.org/

BackBone中文文檔：http://www.css88.com/doc/backbone/

Knockout.js 教程：http://www.aizhengli.com/knockoutjs/knockoutjs.html

Ember.js教程：https://emberjs.com/

ECMAScript6:http://blog.csdn.net/daily886/article/details/53765658

微信小程序開發資源匯：http://www.runoob.com/w3cnote/wx-xcx-repo.html

移動端教程：http://www.runoob.com/w3cschool-app

完整線路圖：http://blog.csdn.net/u011047006/article/details/52597178

polymer中文網：https://polymer-zh.cn/

Deft.js官網：http://deftjs.org/

ASP.NET MVC教程：http://www.runoob.com/aspnet/mvc-intro.html

拓展技能

前端的技術多到學不完，因此，對於開發中經常使用的，必定要多看多練，作到對某一項精通，其他的都是換湯不換藥，再輔助性道德進行學習，能夠不斷拓展本身的知識面，下面是一些拓展技能，雖不涉及技術，但必定能夠提升自身的競爭力。花瓣，必應，千圖本是設計師的網站，做爲前端工程師，有時也會充當UI的角色

SEO優化:http://www.searcheo.cn/post/seo.html

站長之家：http://www.chinaz.com/

Python基礎教程：http://www.runoob.com/python/python-tutorial.html

必應網：https://cn.bing.com/

花瓣網：https://huaban.com/

千圖網：http://www.58pic.com/

開發工具

Web市場上有不少Web前端開發工具，有的是開源的，能夠免費的使用它們用來教學或調試程序，有的使用方便，有的擁有強大的功能等，每一種都有不一樣的優點。咱們能夠從中學習適合本身是工具。Web前端開發工具種類不少，因此極大地知足了不一樣需求的開發人員的不一樣需求等等。這些平臺頗有趣，交互性強，特別適用於初學者。

Markdown菜鳥教程網：http://blog.csdn.net/simplebam/article/category/6685809

Eclipse 教程：http://www.runoob.com/eclipse/eclipse-tutorial.html

ps使用教程：http://www.16xx8.com/

HBuilder 使用教程:http://www.runoob.com/w3cnote/hbuilder-intro.html

WebStorm使用教程：https://www.jetbrains.com/webstorm/

Dreamweaver：http://www.qinxue.com/220.html?sysref=dreamweaver

Github 簡明教程：http://www.runoob.com/w3cnote/git-guide.html

SVN 教程：http://www.runoob.com/svn/svn-tutorial.html

Google使用全攻略：https://www.w3cschool.cn/googlesyqgl/

nodepad++：

輕量化，軟件下載下來只有6MB，解壓後不過10MB左右，其中還包括了語言文件幫助文件等。綠色開源，Notepad++是一款符合GPL協議的開源軟件，一樣能夠在官方下載ZIP包解壓即用。和不少文本編輯器同樣，提供了代碼補全，代碼高亮功能，但其中有的需依賴插件的擴展。

Fireworks：

是Adobe推出的一款網頁做圖軟件，軟件能夠加速 Web 設計與開發，是一款建立與優化 Web 圖像和快速構建網站與 Web 界面原型的理想工具。Fireworks 不只具有編輯矢量圖形與位圖圖像的靈活性，還提供了一個預先構建資源的公用庫，

Sublime：

Sublime Text具備漂亮的用戶界面和強大的功能，例如代碼縮略圖，Python的插件，代碼段等。還可自定義鍵綁定，菜單和工具欄。Sublime Text 的主要功能包括：拼寫檢查，書籤，完整的 Python API ， Goto 功能，即時項目切換，多選擇，多窗口等等。Sublime Text 是一個跨平臺的編輯器，同時支持Windows、Linux、Mac OS X等操做系統。

編譯工具：

Grunt 教程：http://www.w3cplus.com/blog/tags/372.html

Gulp 基於流的自動化構建工具：http://www.gulpjs.com.cn/

Brunch 構建工具：http://hao.jobbole.com/brunch/

Yeoman構建工具：http://www.jianshu.com/p/9f3e6bcdb274

webpack：http://www.runoob.com/w3cnote/webpack-tutorial.html

babel編譯工具：http://www.ruanyifeng.com/blog/2016/01/babel.html

Git版本管理：http://www.uml.org.cn/pzgl/201204285.asp

前端工具庫：http://www.qdfuns.com/tools.php

另外，還有不少工做中使用的工具，在下一篇文章《前端工程師必備工具》有完整的介紹，敬請期待。未完待續。。