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