整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
理想情況下，開發者只需要實現核心的業務邏輯，其他都可以加載別人已經寫好的模塊。
但是，Javascript不是一種模塊化編程語言，在es6以前，它是不支持”類”（class），所以也就沒有”模塊”（module）了。
首發文章，歡迎關注我的公眾號：Web前端Talk
Javascript社區做了很多努力，在現有的運行環境中，實現”模塊”的效果。
原始寫法
模塊就是實現特定功能的一組方法。
只要把不同的函數（以及記錄狀態的變量）簡單地放在一起，就算是一個模塊。
上面的函數m1()和m2()，組成一個模塊。使用的時候，直接調用就行了。
這種做法的缺點很明顯：”污染”了全局變量，無法保證不與其他模塊發生變量名沖突，而且模塊成員之間看不出直接關系。
對象寫法
為了解決上面的缺點，可以把模塊寫成一個對象，所有的模塊成員都放到這個對象里面
上面的函數m1()和m2()，都封裝在module1對象里。使用的時候，就是調用這個對象的屬性
這樣的寫法會暴露所有模塊成員，內部狀態可以被外部改寫。比如，外部代碼可以直接改變內部計數器的值。
立即執行函數寫法
使用”立即執行函數”（Immediately-Invoked Function Expression，IIFE），可以達到不暴露私有成員的目的
使用上面的寫法，外部代碼無法讀取內部的_count變量。
module就是Javascript模塊的基本寫法。
在es6以前，還沒有提出一套官方的規范,從社區和框架推廣程度而言,目前通行的javascript模塊規范有兩種：CommonJS 和 AMD
CommonJS規范
2009年，美國程序員Ryan Dahl創造了node.js項目，將javascript語言用于服務器端編程。
這標志”Javascript模塊化編程”正式誕生。前端的復雜程度有限，沒有模塊也是可以的，但是在服務器端，一定要有模塊，與操作系統和其他應用程序互動，否則根本沒法編程。
node編程中最重要的思想之一就是模塊，而正是這個思想，讓JavaScript的大規模工程成為可能。模塊化編程在js界流行，也是基于此，隨后在瀏覽器端，requirejs和seajs之類的工具包也出現了，可以說在對應規范下，require統治了ES6之前的所有模塊化編程，即使現在，在ES6 module被完全實現之前，還是這樣。
在CommonJS中,暴露模塊使用module.exports和exports，很多人不明白暴露對象為什么會有兩個,后面會介紹區別
在CommonJS中，有一個全局性方法require()，用于加載模塊。假定有一個數學模塊math.js，就可以像下面這樣加載。
然后，就可以調用模塊提供的方法：
正是由于CommonJS 使用的require方式的推動，才有了后面的AMD、CMD 也采用的require方式來引用模塊的風格
AMD規范
有了服務器端模塊以后，很自然地，大家就想要客戶端模塊。而且最好兩者能夠兼容，一個模塊不用修改，在服務器和瀏覽器都可以運行。
但是，由于一個重大的局限，使得CommonJS規范不適用于瀏覽器環境。還是上一節的代碼，如果在瀏覽器中運行，會有一個很大的問題
第二行math.add(2, 3)，在第一行require(‘math’)之后運行，因此必須等math.js加載完成。也就是說，如果加載時間很長，整個應用就會停在那里等。
這對服務器端不是一個問題，因為所有的模塊都存放在本地硬盤，可以同步加載完成，等待時間就是硬盤的讀取時間。但是，對于瀏覽器，這卻是一個大問題，因為模塊都放在服務器端，等待時間取決于網速的快慢，可能要等很長時間，瀏覽器處于”假死”狀態。
因此，瀏覽器端的模塊，不能采用”同步加載”（synchronous），只能采用”異步加載”（asynchronous）。這就是AMD規范誕生的背景。
AMD是”Asynchronous Module Definition”的縮寫，意思就是”異步模塊定義”。它采用異步方式加載模塊，模塊的加載不影響它后面語句的運行。所有依賴這個模塊的語句，都定義在一個回調函數中，等到加載完成之后，這個回調函數才會運行。
模塊必須采用特定的define()函數來定義。
如果一個模塊不依賴其他模塊，那么可以直接定義在define()函數之中。
如果這個模塊還依賴其他模塊，那么define()函數的第一個參數，必須是一個數組，指明該模塊的依賴性。
當require()函數加載上面這個模塊的時候，就會先加載Lib.js文件。
AMD也采用require()語句加載模塊，但是不同于CommonJS，它要求兩個參數：
第一個參數[module]，是一個數組，里面的成員就是要加載的模塊；第二個參數callback，則是加載成功之后的回調函數。如果將前面的代碼改寫成AMD形式，就是下面這樣：
math.add()與math模塊加載不是同步的，瀏覽器不會發生假死。所以很顯然，AMD比較適合瀏覽器環境。
目前，主要有兩個Javascript庫實現了AMD規范：require.js和curl.js。
CMD規范
CMD (Common Module Definition), 是seajs推崇的規范，CMD則是依賴就近，用的時候再require。它寫起來是這樣的：
CMD與AMD一樣，也是采用特定的define()函數來定義,用require方式來引用模塊
如果一個模塊不依賴其他模塊，那么可以直接定義在define()函數之中。
注意：帶 id 和 dependencies 參數的 define 用法不屬于 CMD 規范，而屬于 Modules/Transport 規范。
AMD和CMD最大的區別是對依賴模塊的執行時機處理不同，而不是加載的時機或者方式不同，二者皆為異步加載模塊。
AMD依賴前置，js可以方便知道依賴模塊是誰，立即加載；
而CMD就近依賴，需要使用把模塊變為字符串解析一遍才知道依賴了那些模塊，這也是很多人詬病CMD的一點，犧牲性能來帶來開發的便利性，實際上解析模塊用的時間短到可以忽略。
ES6標準發布后，module成為標準，標準使用是以export指令導出接口，以import引入模塊，但是在我們一貫的node模塊中，我們依然采用的是CommonJS規范，使用require引入模塊，使用module.exports導出接口。
export語法聲明用于導出函數、對象、指定文件（或模塊）的原始值。
注意：在node中使用的是exports,不要混淆了
export有兩種模塊導出方式：命名式導出（名稱導出）和默認導出（定義式導出），命名式導出每個模塊可以多個，而默認導出每個模塊僅一個。
命名式導出
模塊可以通過export前綴關鍵詞聲明導出對象，導出對象可以是多個。這些導出對象用名稱進行區分，稱之為命名式導出。
我們可以使用*和from關鍵字來實現的模塊的繼承：
模塊導出時，可以指定模塊的導出成員。導出成員可以認為是類中的公有對象，而非導出成員可以認為是類中的私有對象：
模塊導出時，我們可以使用as關鍵字對導出成員進行重命名：
注意，下面的語法有嚴重錯誤的情況：
export在導出接口的時候，必須與模塊內部的變量具有一一對應的關系。直接導出1沒有任何意義，也不可能在import的時候有一個變量與之對應
export a 雖然看上去成立，但是a的值是一個數字，根本無法完成解構，因此必須寫成export {a}的形式。即使a被賦值為一個function，也是不允許的。而且，大部分風格都建議，模塊中最好在末尾用一個export導出所有的接口，例如：
默認導出
默認導出也被稱做定義式導出。命名式導出可以導出多個值，但在在import引用時，也要使用相同的名稱來引用相應的值。而默認導出每個導出只有一個單一值，這個輸出可以是一個函數、類或其它類型的值，這樣在模塊import導入時也會很容易引用。
命名式導出與默認導出
默認導出可以理解為另一種形式的命名導出，默認導出可以認為是使用了default名稱的命名導出。
下面兩種導出方式是等價的：
export使用示例
使用名稱導出一個模塊時：
在另一個模塊（腳本文件）中，我們可以像下面這樣引用：
使用默認導出一個模塊時：
在另一個模塊（腳本文件）中，我們可以像下面這樣引用，相對名稱導出來說使用更為簡單：
import語法聲明用于從已導出的模塊、腳本中導入函數、對象、指定文件（或模塊）的原始值。
import模塊導入與export模塊導出功能相對應，也存在兩種模塊導入方式：命名式導入（名稱導入）和默認導入（定義式導入）。
import的語法跟require不同，而且import必須放在文件的最開始，且前面不允許有其他邏輯代碼，這和其他所有編程語言風格一致。
命名式導入
我們可以通過指定名稱，就是將這些成員插入到當作用域中。導出時，可以導入單個成員或多個成員：
注意，花括號里面的變量與export后面的變量一一對應
通過*符號，我們可以導入模塊中的全部屬性和方法。當導入模塊全部導出內容時，就是將導出模塊（’my-module.js’）所有的導出綁定內容，插入到當前模塊（’myModule’）的作用域中：
導入模塊對象時，也可以使用as對導入成員重命名，以方便在當前模塊內使用：
導入多個成員時，同樣可以使用別名：
導入一個模塊，但不進行任何綁定：
默認導入
在模塊導出時，可能會存在默認導出。同樣的，在導入時可以使用import指令導出這些默認值。
直接導入默認值：
也可以在命名空間導入和名稱導入中，同時使用默認導入：
import使用示例
在import的時候，可以這樣用：
這個語法糖的好處就是import的時候，可以省去花括號{}。
簡單的說，如果import的時候，你發現某個變量沒有花括號括起來（沒有*號），那么你在腦海中應該把它還原成有花括號的as語法。
所以，下面這種寫法你也應該理解了吧：
import后面第一個$是{defalut as $}的替代寫法。
as關鍵字
as簡單的說就是取一個別名,export中可以用，import中其實可以用：
上面這段代碼，export的時候，對外提供的接口是fun，它是a.js內部a這個函數的別名，但是在模塊外面，認不到a，只能認到fun。
import中的as就很簡單，就是你在使用模塊里面的方法的時候，給這個方法取一個別名，好在當前的文件里面使用。之所以是這樣，是因為有的時候不同的兩個模塊可能通過相同的接口，比如有一個c.js也通過了fun這個接口：
如果在b.js中同時使用a和c這兩個模塊，就必須想辦法解決接口重名的問題，as就解決了。
Module.exports
module.exports對象是由模塊系統創建的。 有時這是難以接受的；許多人希望他們的模塊成為某個類的實例。 為了實現這個，需要將期望導出的對象賦值給module.exports。 注意，將期望的對象賦值給exports會簡單地重新綁定到本地exports變量上，這可能不是你想要的。
exports變量是在模塊的文件級別作用域內有效的，它在模塊被執行前被賦于 module.exports 的值。它有一個快捷方式，以便 module.exports.f = … 可以被更簡潔地寫成exports.f = …。 注意，就像任何變量，如果一個新的值被賦值給exports，它就不再綁定到module.exports(其實是exports.屬性會自動掛載到沒有命名沖突的module.exports.屬性)
從Api文檔上面的可以看出，從require導入方式去理解，關鍵有兩個變量(全局變量module.exports，局部變量exports)、一個返回值(module.exports)
demo.js:
每個js文件一創建，都有一個var exports = module.exports = {},使exports和module.exports都指向一個空對象。
module.exports和exports所指向的內存地址相同
者：櫻桃小丸子兒
鏈接：https://www.jianshu.com/p/2273c8d2ef02
介紹js有哪些內置對象？
Object 是 JavaScript 中所有對象的父對象
數據封裝類對象：Object、Array、Boolean、Number 和 String
其他對象：Function、Arguments、Math、Date、RegExp、Error
說出一些寫Javascript的基本規范
1.不要在同一行聲明多個變量。
2.請使用 ===/!==來比較true/false或者數值
3.使用對象字面量替代new Array這種形式
4.不要使用全局函數。
5.Switch語句必須帶有default分支
6.函數不應該有時候有返回值，有時候沒有返回值。
7.For循環必須使用大括號
8.If語句必須使用大括號
9.for-in循環中的變量 應該使用var關鍵字明確限定作用域，從而避免作用域污染。
10.命名規則中構造器函數首字母大寫，如function Person(){}
11.寫注釋。
Javascript有幾種類型的值？你能畫一下他們的內存圖嗎？
數據類型分為兩大類：堆和棧
棧：原始數據類型（Undefined，Null，Boolean，Number、String）
堆：引用數據類型（對象、數組和函數）
兩種類型的區別是：存儲位置不同；原始數據類型直接存儲在棧(stack)中的簡單數據段，占據空間小、大小固定，屬于被頻繁使用數據，所以放入棧中存儲；引用數據類型存儲在堆(heap)中的對象,占據空間大、大小不固定,如果存儲在棧中，將會影響程序運行的性能；
引用數據類型在棧中存儲了指針，該指針指向堆中該實體的起始地址。當解釋器尋找引用值時，會首先檢索其在棧中的地址，取得地址后從堆中獲得實體。
JavaScript創建對象的幾種方式？
1.對象字面量的方式p＝｛｝；
2.用function來模擬無參的構造函數，再定義屬性；
3.用function模擬構造函數，利用this；
4.利用工廠方式（內置對象Object）；
5.利用原型方式來創建；
6.混合方式來創建。
JavaScript作用鏈域
當代碼在一個環境中執行時，會創建變量對象的一個作用域鏈。如果是個函數，則將其活動對象作為變量對象。活動對象在最開始只包含一個arguments對象。而下一個變量對象則來自下一個包含環境。如此一直延續到全局執行環境，這種組織形式即為作用域鏈。內部函數可訪問外部變量，外部變量無法訪問內部函數。注意：js沒有塊級作用域，若要形成塊級作用域，可通過（function（）｛｝）（）；立即執行的形式實現。
JavaScript 開發進階：理解 JavaScript 作用域和作用域鏈
["1","2","3"].map（parseint）答案是多少？
[1, NaN, NaN]
parseInt() 函數可解析一個字符串，并返回一個整數。需要兩個參數 (val, radix)，
其中 radix 表示解析時用的基數。
map 傳了 3 個 (element, index, array)，對應的 radix 不合法導致解析失敗。
["1","2","3"].map（parseint）
算出字符串中出現次數最多的字符是什么，出現了多少次
var str = "adadfdfseffserfefsefseeffffftsdg";
var maxLength = 0;
var result = "";
while(str != ''){
oldStr = str;
str = str.replace(new RegExp(str.charAt(0),"g"),"");
if( oldStr.length-str.length > maxLength){
maxLength = oldStr.length-str.length;
result = getStr + "=" + maxLength;
}
}
alert(result);
編寫一個方法 求一個字符串的字節長度
<script language=”javascript”type=”text/javascript”>
new function(s) // s指最后括號中的參數
{
if(!arguments.length||!s)
//arguments指最下面括號中的參數集， .length指此集合的參數個數
//如果最下面括號中是("你好abc","哈哈"),
那么arguments={"你好abc","哈哈"}, .length=2
//!s 表示參數是否非空
return null;
if(""==s)
return 0;
var l=0;
for(var i=0;i<s.length;i++)
//中文的值都是大于255的，所以“你好”為4個字節，
//可以測試：alert(s.charCodeAt(i));
{
if(s.charCodeAt(i)>255) l+=2; else l++;
}
alert(l);
}
("hello你好，我好,大家好！world!");
</script>
JavaScript中有一個函數，執行對象查找的時候，永遠不會去查找原型，這個函數是？
Object.hasOwnProperty(proName)
其中參數object是必選項，一個對象的實例。
proName是必選項，一個屬性名稱的字符串值。
hasOwnProperty 函數方法是返回一個布爾值，指出一個對象是否具有指定名稱的屬性。此方法無法檢查該對象的原型鏈中是否具有該屬性；該屬性必須是對象本身的一個成員。如果 object 具有指定名稱的屬性，那么JavaScript中hasOwnProperty函數方法返回 true，反之則返回 false。
頁面編碼和被請求資源的編碼如果不一致怎么處理？
a.html 的編碼是gbk或gb2312的。 而引入的js編碼為utf-8的 ，那就需要在引入的時候加上
<script src="http://www.xxx.com/test.js"charset="utf-8"></script>
同理，如果你的頁面是utf-8的，引入的js是gbk的，那么就需要加上charset="gbk"
模塊化開發怎么做？
模塊化就是將js文件按照功能分離，根據需求引入不同的文件中。源于服務器端。
在ES6中提出用工具babel,webpack打包成瀏覽器識別的js來實現模塊化開發，不同的框架和庫的模塊，有很多功能類似比如Node.js中的模塊，Angular.js中的模塊，React.js中的模塊，只要接口Api可以對的上，那么也可以通用。
其他
網站重構的理解？
網站重構：在不改變外部行為的前提下，簡化結構、添加可讀性，而在網站前端保持一致的行為。也就是說是在不改變UI的情況下，對網站進行優化，在擴展的同時保持一致的UI。
對于傳統的網站來說重構通常是：
表格(table)布局改為DIV+CSS
使網站前端兼容于現代瀏覽器(針對于不合規范的CSS、如對IE6有效的)
對于移動平臺的優化
針對于SEO進行優化
深層次的網站重構應該考慮的方面
減少代碼間的耦合
讓代碼保持彈性
嚴格按規范編寫代碼
設計可擴展的API
代替舊有的框架、語言(如VB)
增強用戶體驗
通常來說對于速度的優化也包含在重構中
壓縮JS、CSS、image等前端資源(通常是由服務器來解決)
程序的性能優化(如數據讀寫)
采用CDN來加速資源加載
對于JS DOM的優化
HTTP服務器的文件緩存
AMD和CMD 規范的區別？
AMD規范是 RequireJS 在推廣過程中對模塊定義的規范化產出的，而CMD規范是SeaJS 在推廣過程中對模塊定義的規范化產出的。這些規范的目的都是為了 JavaScript 的模塊化開發，特別是在瀏覽器端的。
主要區別總結為以下三條
1、CMD推崇依賴就近，而AMD推崇依賴前置
2、執行順序上： CMD是延遲執行的，而AMD是提前執行的。
3、api設計角度上：AMD 的 API 默認是一個當多個用，CMD 的 API 嚴格區分，推崇職責單一。比如 AMD 里，require 分全局 require 和局部 require，都叫 require。CMD 里，沒有全局 require，而是根據模塊系統的完備性，提供 seajs.use 來實現模塊系統的加載啟動。CMD 里，每個 API 都簡單純粹。
一個頁面從輸入 URL 到頁面加載顯示完成，這個過程中都發生了什么？（流程說的越詳細越好）
分為4個步驟：
①當發送一個URL請求時，不管這個URL是Web頁面的URL還是Web頁面上每個資源的URL，瀏覽器都會開啟一個線程來處理這個請求，同時在遠程DNS服務器上啟動一個DNS查詢。這能使瀏覽器獲得請求對應的IP地址。
②瀏覽器與遠程Web服務器通過TCP三次握手協商來建立一個TCP/IP連接。該握手包括一個同步報文，一個同步-應答報文和一個應答報文，這三個報文在 瀏覽器和服務器之間傳遞。該握手首先由客戶端嘗試建立起通信，而后服務器應答并接受客戶端的請求，最后由客戶端發出該請求已經被接受的報文。
③一旦TCP/IP連接建立，瀏覽器會通過該連接向遠程服務器發送HTTP的GET請求。遠程服務器找到資源并使用HTTP響應返回該資源，值為200的HTTP響應狀態表示一個正確的響應。
④此時，Web服務器提供資源服務，客戶端開始下載資源。
請求返回后，便進入了我們關注的前端模塊，簡單來說，瀏覽器會解析HTML生成DOM Tree，其次會根據CSS生成CSS Rule Tree，而javascript又可以根據DOM API操作DOM。
WEB應用從服務器主動推送Data到客戶端有那些方式？
JavaScript數據推送
Commet：基于HTTP長連接的服務器推送技術
基于WebSocket的推送方案
SSE（Server-Send Event）：服務器推送數據新方式
者 | 六小登登
責編 | 屠敏
從 2013 年專科畢業開始，一路跌跌撞撞走了很多彎路，做過餐廳服務員，進過工廠干過流水線，做過客服，干過電話銷售可以說經歷相當的“豐富”。
最后的機緣巧合下，走上了前端開發之路，作為一個非計算機專業且低學歷的人來說，自學編程其實不是件容易的事情，不過慶幸的是自己堅持下來了。
目前工作還算不錯，收入在目前所在的城市不算高，不算低，生活也還過得去，繼續加油努力，也希望自己在今后更上一層。
從 2016 年下半年開始，我真正接觸前端，到現在 2 年多的時間。開始之初，我沒有任何的語言基礎，完全從零的小白開始，就連「對象」我都弄不明白，更別說那些高深莫測的什么封裝、繼承、多態等。
當時自己也不知從何入手，怎么辦呢？于是每當自己遇到困難時，就厚著臉皮去請教前輩大牛，然后就是去查閱資料，很多時候自己也很覺得不好意思，現在才發現人很多時候都恥于相別人請教，怕自己丟面子。
但作為一個過來人，我要告訴你請教前輩大牛真的很重要，可以讓你少走很多的彎路，不要怕丟人，沒面子，面子值幾個錢？學到真本事才最重要。沒有技能才叫真的沒有面子。當然了我們在請教別人時，一定要掌握「度」，不要打擾到了別人的工作。
我現在非常感謝前輩們的賜教，也感謝那些在網上寫博客、文章分享的大牛們，給了我們這些自學的小白很多的資料，經驗，心得。從中受益很多。
向優秀的前輩們學習，我開始寫博客，希望也能幫到和我一樣，學渣、從零開始、喜歡技術的一群志同道合的人。
我深知自己的技術并不高，還處在繼續學習的路上，離大牛還差的很遠，我本身也非常敬畏技術，也知道自己的渺小，只希望這篇文章的「學習之路」對于那些「從零開始」學習前端的同學有一些指引作用，不像自己一開始那樣的那么盲目，哪怕對你有一點點的幫助，就足夠了。
說了這么多，下面我們直接進入正題，都是我平時學習和收集的一些資料希望能夠幫到你。
前言
工具篇
工欲善其事，必先利其器，所以在開始之前選擇一個合適好用的編輯器是很重要的，工具不再多，在于好用就行，除了編輯器，我們也要掌握其他的一些工具，才能夠讓我們在學習的道路上更加的順暢。
1. WebStorm
不必多說，前端最強大的編輯器，特別是那無敵的智能提示，但是它的缺點在于如果項目多于大時，出現的卡頓讓很多人苦惱。
2. Visual Studio Code
微軟開源免費產品，受到非常多技術人員的喜愛，基本上成為前端開發者的必備編輯器，強大的插件擴展，可以靈活的打造自己喜歡的風格。給你們送上常用插件列表拿走不謝。
3. atom
也是一款免費開源的編輯器，受到很多人的喜愛，但是我本人用的較少，所以插件方面就不推薦了，大家可以按照自己的愛好去尋找。
4. 科學上網
每個程序員都應該具備的工具和能力，否則很多事情都無法辦到，至于怎么做，你可以自己查閱資料，這里不就不在多說了。而且下面推薦的很多資源都是需要科學上網之后才能訪問，所以一定要學會。
5. Google
在使用「Google」之前必須學會科學上網，不然無法訪問，學會使用搜索可以幫助我們解決很多問題，一個人的知識是有限的，掌握了搜索的技巧才能以不變應萬變，很多時候百度出來的東西重復性很大，最重要的是垃圾信息很多，在百度找不到的答案，在這里很容易找到，Google 是我的必備搜索。
6. Github
全球最大的「同性」開源交流社區，沒有賬號的趕緊注冊，在這有很多優秀的資源項目，各種大神。觀摩優秀代碼是我們學習的很好路徑。另外在開發過程中，很多時候任務重、時間緊，應該避免重復造輪子，這里能夠找到你需要的工具或代碼。
7. Stack Overflow
國外著名的技術問答交流社區，開發時碰到的很多問題在這里都能找到答案。
8. SegmentFault
對應的國內版的技術問答交流社區，如果你英文不好，也可以在這里找找答案。
9. Markdown
Markdown 輕量級標記語言，簡潔的語法，讓作者專注內容而非復雜的格式要求，我認為人人都應該掌握，特別是經常寫博客的人。想想你在用 world 時的場景，每次寫完文章之后，不得不話費很多時間進行格式的排版，使用它你就可以避免這些煩惱。
HTML 篇
一些準備就緒之后，開始我們的學習之旅，首先我們先從 HTML 開始。
HTML名為「超文本標記語言」，是整個頁面的結構基礎，它承載了我們的頁面內容。
1. 基礎
2. 進階
CSS 篇
HTML 承載了頁面的內容，但是有時候會略顯單調與「丑陋」，CSS 的作用就是為這些內容加上樣式，就像一個美女也要有漂亮的外衣去修飾才會更加漂亮，「人靠衣裝馬靠鞍」，網頁的內容也是需要穿上一件漂亮的外衣去吸引用戶。而 CSS 則完成了這個裝飾。
1. 基礎
2. 進階
書籍：
《CSS揭秘》（https://book.douban.com/subject/26745943/）：非常推薦的一本 CSS 書籍，可以學到很多鮮為人知的技巧。
在線系列：
知識點：
JavaScript 篇
有了 HTML 與 CSS，網頁也就有了內容和樣式，但是會缺少與用戶的互動，所有的內容都靜靜的躺在那里死氣沉沉。就好比一個美女穿著漂亮的衣服在你面前一動不動好像也沒有什么吸引力，但如果又唱歌，又跳舞，還向你拋媚眼，那可真就把持不住了。JavaScript 就是給網頁添加這樣的「行為」。
Javascript 簡史（https://blog.csdn.net/qq_32135281/article/details/81667714）：可以簡單了解下，JavaScript 發展由來。
1. 基礎
書籍
在線系列
除了書籍之外，也有很多優秀的在線教程，可以幫助我們更好的學習。
2. 進階
TypeScript篇
ES6 的超集擴展，嚴格的數據類型，帶來更好的維護，適合大型項目的開發工作，有人說它是未來的發展趨勢，你說要不要了解？
Jquery篇
雖說現在已經是單頁面應用時代，有React，Vue 這種強大的框架可以使用，但也不缺乏一些老的項目需要維護，而且在學習之初，可以用它做兩個簡單的應用還是不錯的，可以相對了解下基本用法，它可以讓你更好，更方便的操作DOM。但不建議再深度學習。
Ajax篇
掌握了的HTML、CSS、JavaScript時，這時候可以嘗試自己做一些項目了，而項目中肯定會有數據的交互，這時候就是 Ajax 的用武之地了。
NodeJS與模塊化
NodeJs 的出現讓前端發展進入了一個新的領域，并且滋生出專業的 Node 工程師，不僅如此 Node 在前端模塊化，工程化起到很重要的作用，所以了解是必須的，如果感興趣的可以深入學習，可以向全棧工程師發展。
框架篇
隨著日益復雜的用戶需求，與系統的復雜度上升，傳統的開發模式日漸的很難滿足，此時的三大框架孕育而生，讓開發者更加高效，可復用，把關注點都放在數據層的操作，免去那些繁瑣而又重復的視圖操作。
現在框架的能力已經是前端開發人員必備的技能之一也是趨勢，三大框架的「最終目的」都是一致的，我認為開發者不必糾結于到底應該選擇哪一個學習，可以選擇其中的兩個是最好的。對于剛入門的人來說，建議選擇 Vue 入手，比較簡單，靈活。
1. Angular
2. Vue
3. React
React我了解不多，所以就沒什么好推薦的了，大家可自行學習。
圖形可視化
隨著日益增長的數據，如何利用高效的利用數據，是每個企業都考慮的問題，而人的眼睛看到的東西要勝過閱讀的問題，俗話說「一圖勝千言」就是這個道理，所以數據的可視化就會格外的重要，以下都是我常看的一些技術，書籍，和關注的可視化開源庫。
工程化與版本控制篇
1. Git
版本控制工具，很多新手往往把 git 與 github 傻傻分不清楚，二者是不同的東西，一定要去區分清楚。
2. Gulp
自動化構建工具，項目打包部署前的壓縮合并，節省時間，提高開發效率。
3. Webpack
Webpack 是當下最熱門的前端資源模塊化管理和打包工具。它可以將許多松散的模塊按照依賴和規則打包成符合生產環境部署的前端資源。
4. Babel
JavaScript代碼編譯器，可以讓ES6及以上語法轉換成瀏覽器支持的語法，一般會在框架的腳手架中自行配置。
5. 代碼質量
瀏覽器與HTTP
性能優化
SEO
博客系列
1. 個人
現在是一個信息爆炸的時代，網上有很多優秀的博客文章，每個人的精力都是有限的，不可能關注到所有的博客，每個人關注點可能不太一樣，所以關注的個人博客也會不同，這些推薦幾個我比較常看的幾個高質量博客。而且是持續更新的。
2. 團隊
項目資源
常用工具
最后
以上是我這兩年多一路走來收藏的一些資料，整理這份資料也花了我好幾天的時間，希望能夠在自學的道路上幫到你。
再次聲明，我并不是什么大神，我自認為技術也沒有到達這個層級，但是我會一直堅持學下去，另外一定不要誤會這里面的知識我全部都會，這些都是我學習的一些資料想整理出來，免去小白的一些不知道如何查閱資料。
這里的資源可能并不適合每一個人，你也不一定全部都需要，只需要挑選自己想要的部分就行，任何事情并不是越多越好。
作者：六小登登，個人公眾號：六小登登（ID：liuxiaodengdeng）。目前在某創業公司任職前端開發工作，近 3 年前端開發經驗，愛技術、愛寫作、愛分享。
聲明：本文為作者投稿，版權歸其個人所有。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
