web前端開發-博客目錄

          web前端開發是一個新的領域，知識鏈接範圍廣，處於設計與後端數據交互的橋樑，而且如今不少web前端相關語言標準，框架庫都在高速發展。在學習過程當中也經常處於煩躁與迷茫，有時候一直在想如何可以使本身更加系統化學習和積累，在看了不少對於web前端開發知識技能樹總結圖的時候有一個想法，本身根據理解總結一個web前端開發知識技能樹，而且創建一個與之相匹配的博客文章目錄，之後這就是整個博客的入口，之後添加修改相關知識總結，都在此目錄進行操做。

      做爲工業設計專業轉前端的學生，最開始對後端及數據庫開發認識不深，後面學到PHP和Mysql，特別是瞭解到淘寶爲表明的大型web開發須要解決的問題，例如知乎上：爲何不少看起來不是很複雜的網站，好比 Facebook 須要大量頂尖高手來開發？天天使用的互聯網產品，看似簡單易用，背後卻凝聚着不可思議的智慧與勞動。也忽然感覺到前端工做所貢獻的力量實際上是那麼微乎其微。因此，但願本身可以擴展本身的視野和眼界，不能僅看設計與前端，也可以有後端，數據庫，服務器，操做系統方面的學習和積累。以一個解決問題，塑造更好地產品的角度去學習和思考。

      總結花費的時間遠大於學習的時間，須要不少思考與比較，梳理不一樣知識板塊之間的關係與影響。特別是一些解決問題思路的總結是很重要的。

      目前時間和具體實踐關係不少知識遠遠沒有完成好，但願可以創建好的框架基礎知識，不浮躁，踏實作好。

     

      主要總結思路：

                          1. web程序如何訪問                     訪問原理和傳輸協議，TCP/IP，http，https

                          2. 如何創建web程序                      web標準的學習，HTML，CSS，JavaScript，JSON，XML等

                          3. web程序運行環境                      瀏覽器內核，移動端，兼容性，性能優化，SEO，web安全等

                          4. 如何更有效開發程序                    類庫框架（UI圖標，Boostrap,JQuery,JQ Mobile,,requireJs,MVC,NodeJs,FIS)等          

                          5. 如何更有效維護管理程序             編輯工具，效率工具，版本管理，調試，測試…

 

                          6. 向前延伸：用戶體驗設計             交互設計，界面設計，UI設計，動效設計…      

                          7. 向後延伸：後端開發                   PHP,NodeJs,Mysql,操做系統…

     

      理想是豐滿的，現實的骨幹的，先作好基礎…

 

1. Web訪問原理與傳輸協議

           1.1 Web訪問原理    從輸入URL到頁面加載完成的過程當中都發生了什麼事情？對web程序優化的影響？

           1.2 瀏覽器渲染頁面原理    瀏覽器加載代碼，迴流等機制如何影響開發者編寫代碼？對頁面加載優化的影響？

           1.3 HTTP協議    客戶端與服務器端如何進行通訊 

                          1.3.1 HTTP協議 首部字段      客戶端與服務器端如何通訊  緩存？狀態碼？頁面編碼？認證？

                          1.3.2 確保Web安全的HTTPS      HTTP協議主要存在哪些安全隱患？ 如何解決？

                          1.3.3 基於HTTP功能追加的協議     HTTP協議性能瓶頸，SPDY,WebSocket

 

2. 如何創建Web程序-Web標準  對Web標準的理解

           2.1 Web標準之結構—HTML      

                          2.1.1 結構語義化思想        如何理解結構語義化？

                          2.1.2 HTML經常使用知識點總結        XHTML與HTML，DOCTYPE，meta，塊級與行級元素等

                          2.1.3 HTML5新增語義化結構標籤        DOCTYPE聲明，佈局結構標籤，其它經常使用結構，兼容性處理

                          2.1.4 HTML5新增經常使用API      canvas,SVG,地理定位，web存儲 

           2.2 Web標準之樣式—CSS      

                          2.2.1 CSS樣式來源與層疊規則        瀏覽器如何加載和解析CSS

                          2.2.2 選擇符及優先級     

                          2.2.3 頁面呈現文字修飾        

                          2.2.4 頁面佈局定位          盒模型，定位機制，Float，Position，Display

                          2.2.5 響應式         頁面及其組件都保證靈活性  文字，導航，框，表格，總體佈局等。

                          2.2.6 經常使用總體佈局       多列布局，列寬度是固定寬度仍是自適應

                          2.2.7 CSS3新屬性       漸變，多圖片背景，RGBA，文字特效，轉換，過渡，動畫，多列，媒體查詢等

 

           2.3 Web標準之行爲—JavaScript      

                          2.3.1 JavaScript概要組成部分        靜態，基於對象，事件驅動； ECMAScript,DOM和BOM

                          2.3.2 基本語法和數據類型        Number,Boolean,String,Null,Undefined,Object

                          2.3.3 運算符和操做符          

                          2.3.4 經常使用語句       

                          2.3.5 函  數        JS預解析，函數變量提高申明，執行環境，做用域，arguments,this,閉包

                          2.3.6 對  象        對象屬性和方法，對象屬性特性 ，原型與原型鏈，面向對象設計

 

                          2.3.7 內置對象        內建全局單例對象，內建對象

                          2.3.8 正則表達式        匹配特殊字符，匹配模式，匹配方法

                          2.3.9 BOM瀏覽器對象模型        核心：widow對象，Location，Navigator，Screen，History

                          2.3.9 DOM文檔對象模型        實際工做中更多考慮JQuery操做

                          2.3.9 事件        事件流，事件對象，組織默認行爲，組織事件傳播，事件委託

 

           其餘經常使用Web標準 

           2.4 Ajax    

                          2.4.1 Ajax        異步獲取數據

                          2.4.2 Ajax緩存        緩存控制

                          2.4.3 Ajax跨域請求        JSONP

                          2.4.4 JQurey中的Ajax        將Ajax一些操做封裝成函數

           2.5 JSON     輕量級數據交換格式

                          2.5.1 JSON        JSON字符串，JSON對象，相互轉換

           2.6 XML     數據交換格式      

                          2.6.1 XML          擴展標記語言,感受沒有JSON輕量好操做

 

3. Web程序運行環境

           3.1 瀏覽器內核      

           3.2 移動端              

           3.3 兼容性      

                          3.3.1 常見HTML&CSS兼容性總結         

                          3.3.2 CSS Hack

           3.4 性能優化      

                          3.4.1 根據web訪問流程的各個階段能夠如何進行優化   1. 瀏覽器緩存  2.查詢DNS  3.創建鏈接   4.發送請求   5.等待響應   6.接收數據   7.處理元素   8.渲染元素  

           3.5 前端必須理解的SEO

           3.6 Web安全         同源策略 、 XSS跨站點攻擊 、CSRF跨站點請求僞造 、 點擊劫持 、SQL注入、盜鏈

 

 

4. 庫類學習

           4.1 UI圖標管理系統    fontAwesome 圖標系統(官網)  利用文字代替圖標

           4.2 HTML&CSS開發框架 Bootstrap(官網)    

           4.3 JavaScript 庫  jQuery(官網)      選擇器、事件、DOM操做、Ajax等及其插件  

           4.4 移動端框架  jQuery  Mobile(官網)     頁面設置、頁面過渡、頁面事件、頁面經常使用組件、經常使用事件等

           4.5 模塊化  AMD (requriejs) CMD (seajs)

           4.6 MVC MVVM  Ember.js  Angular.js  Vue.js 

 

5. 工具效率管理學習

           5.1 圖片處理工具    Photoshop  Cutterman切圖工具

           5.2 編輯工具    Sublime Text(Zencoding 經常使用插件和快捷鍵）  Webstorm

           5.3 調試工具    Chrome控制檯  Firebug

           5.4 效率工具    Grunt (ugligy,concat,cssmin,jshint,csslint,watch)  Gulp

           5.5 前端集成解決方案    百度FIS

           5.6 版本管理工具    Github  Git

 

6. 用戶體驗設計

           6.1 用戶體驗系統設計方法      所作的一個實際產品設計案例：家庭安全管家

 

 

     

7. 後端開發

           7.1 NodeJs

           7.2 WAMP(Window,Apache,Mysql與PHP)

 

備註：不少都不完善，但願慢慢變得完善，健壯。就像本身編寫的程序同樣…..