JAVA 篇

0、基礎(chǔ)語(yǔ)法

Java基礎(chǔ)語(yǔ)法包括：變量定義、數(shù)據(jù)類型、循環(huán)、選擇、內(nèi)置對(duì)象等。

數(shù)據(jù)類型有string,number,boolean,null,undefined,object等。其中，string,number和boolean是基礎(chǔ)類型,null和undefined是JS中的兩個(gè)特殊類型,object是引用類型。

Java可以通過(guò)typeof來(lái)判斷基礎(chǔ)數(shù)據(jù)類型，但不能夠準(zhǔn)確判斷引用類型, 因此需要用到另外一個(gè)方法，那就是Object的toString,關(guān)于數(shù)據(jù)類型及其判斷可以參考以下博客：數(shù)據(jù)類型詳解和 判斷JS數(shù)據(jù)類型的四種方法

JS常用的內(nèi)置對(duì)象有Date、Array、JSON,RegExp等。 一般來(lái)講，Date和Array用的最頻繁，JSON可以對(duì)對(duì)象和數(shù)組進(jìn)行序列化和反序列化，還有一個(gè)作用就是實(shí)現(xiàn)對(duì)象的深拷貝。

RegExp即正則表達(dá)式，是處理字符串的利器。 關(guān)于數(shù)據(jù)類型和正則表達(dá)式的介紹可以參考博客：ES5對(duì)數(shù)組增強(qiáng)的9個(gè)API和 JS正則表達(dá)式精簡(jiǎn)

1、函數(shù)原型鏈

Java雖然沒(méi)有繼承概念，但Java在函數(shù)Function對(duì)象中建立了原型對(duì)象prototype，并以Function對(duì)象為主線，從上至下，在內(nèi)部構(gòu)建了一條原型鏈。

簡(jiǎn)單來(lái)說(shuō)就是建立了變量查找機(jī)制，當(dāng)訪問(wèn)一個(gè)對(duì)象的屬性時(shí)，先查找對(duì)象本身是否存在，如果不存在就去該對(duì)象所在的原型連上去找，直到Object對(duì)象為止，如果都沒(méi)有找到該屬性才會(huì)返回undefined。

因此我們經(jīng)常會(huì)利用函數(shù)的原型機(jī)制來(lái)實(shí)現(xiàn)JS繼承。關(guān)于函數(shù)原型鏈可參考博客：JS原型對(duì)象和原型鏈

2、函數(shù)作用域

函數(shù)作用域就是變量在聲明它們的函數(shù)體以及這個(gè)函數(shù)體嵌套的任意函數(shù)體內(nèi)都是有定義的。在JS中沒(méi)有會(huì)塊級(jí)作用域，只有函數(shù)作用域，因此JS中還存在著另外一種怪異現(xiàn)象，那就是變量提升。關(guān)于作用域的介紹請(qǐng)參考博客：函數(shù)的作用域和作用域鏈

3、函數(shù)指針 this

this 存在于函數(shù)中，它指向的是該函數(shù)在運(yùn)行時(shí)被調(diào)用的那個(gè)對(duì)象。在實(shí)際項(xiàng)目中，遇到this的坑比較多，因此需要對(duì)this作深入的理解。

Function對(duì)象還提供了call、apply和bind等方法來(lái)改變函數(shù)的this指向，其中call和apply主動(dòng)執(zhí)行函數(shù)，bind一般在事件回調(diào)中使用，而call和apply的區(qū)別只是參數(shù)的傳

遞方式不同。關(guān)于call,apply和bind的用戶請(qǐng)參考博客：詳解JS的call,apply和bind

4、構(gòu)造函數(shù) new

JS中的函數(shù)即可以是構(gòu)造函數(shù)又可以當(dāng)作普通函數(shù)來(lái)調(diào)用，當(dāng)使用new來(lái)創(chuàng)建對(duì)象時(shí)，對(duì)應(yīng)的函數(shù)就是構(gòu)造函數(shù)，通過(guò)對(duì)象來(lái)調(diào)用時(shí)就是普通函數(shù)。

普通函數(shù)的創(chuàng)建有：顯式聲明、匿名定義、new Function() 等三種方式。

當(dāng)通過(guò)new來(lái)創(chuàng)建一個(gè)新對(duì)象時(shí)，JS底層將新對(duì)象的原型鏈指向了構(gòu)造函數(shù)的原型對(duì)象，于是就在新對(duì)象和函數(shù)對(duì)象之間建立了一條原型鏈，通過(guò)新對(duì)象可以訪問(wèn)到函數(shù)對(duì)象原型prototype中的方法和屬性。new的詳細(xì)介紹請(qǐng)參考博客：理解JS中的new運(yùn)算符

5、閉包

閉包其實(shí)是一個(gè)主動(dòng)執(zhí)行的代碼塊，這個(gè)代碼塊的特殊之處是可以永久保存局部變量，但又不污染全局變量，可以形成一個(gè)獨(dú)立的執(zhí)行過(guò)程，因此我們經(jīng)常用閉包來(lái)定義組件。關(guān)于閉包的介紹請(qǐng)參考：干貨分享：讓你分分鐘學(xué)會(huì)JS閉包

6、單線程和異步隊(duì)列

setTimeout和setInterval是JS內(nèi)置的兩個(gè)定時(shí)器，使用很簡(jiǎn)單，但這兩個(gè)方法背后的原理卻不簡(jiǎn)單。

我們知道，JS是單線程語(yǔ)言，在瀏覽器中，當(dāng)JS代碼被加載時(shí)，瀏覽器會(huì)為其分配一個(gè)主線程來(lái)執(zhí)行任務(wù)(函數(shù))，主線程會(huì)形成一個(gè)全局執(zhí)行環(huán)境，執(zhí)行環(huán)境采用棧的方式將待執(zhí)行任務(wù)按順序依次來(lái)執(zhí)行。

但在瀏覽器中有一些任務(wù)是非常耗時(shí)的，比如http請(qǐng)求、定時(shí)器、事件回調(diào)等，為了保證其他任務(wù)的執(zhí)行效率不被影響，JS在執(zhí)行環(huán)境中維護(hù)了一個(gè)異步隊(duì)列(也叫工作線程)，并將這些任務(wù)放入隊(duì)列中進(jìn)行等待，這些任務(wù)的執(zhí)行時(shí)機(jī)并不確定，只有當(dāng)主線程的任務(wù)執(zhí)行完成以后，才會(huì)去檢查異步隊(duì)列中的任務(wù)是否需要開(kāi)始執(zhí)行。這就是為什么setTimeout(fn,0) 始終要等到最后執(zhí)行的原因。關(guān)于單線程和異步隊(duì)列問(wèn)題請(qǐng)參考：setTimeout（0）

7、異步通訊 Ajax技術(shù)

Ajax是瀏覽器專門用來(lái)和服務(wù)器進(jìn)行交互的異步通訊技術(shù)，其核心對(duì)象是,通過(guò)該對(duì)象可以創(chuàng)建一個(gè)Ajax請(qǐng)求。為了防止XSS攻擊，瀏覽器對(duì)Ajax做了限制，不允許Ajax跨域請(qǐng)求服務(wù)器,就是只能訪問(wèn)當(dāng)前域名下的url。

當(dāng)然，如果確信你的站點(diǎn)不存在跨域的風(fēng)險(xiǎn)，可以在服務(wù)端主動(dòng)開(kāi)啟跨域請(qǐng)求。 也可以直接通過(guò)CORS或JSONP來(lái)實(shí)現(xiàn)。

JSONP是利用腳本()跨域能力來(lái)模擬Ajax請(qǐng)求。

CORS是一個(gè)W3C標(biāo)準(zhǔn)，全稱是"跨域資源共享"（Cross-origin resource sharing）。它允許瀏覽器向跨源服務(wù)器，發(fā)出請(qǐng)求，從而克服了AJAX只能同源使用的限制。 關(guān)于CORS的介紹請(qǐng)參考：跨域資源共享 CORS 詳解

8、DOM對(duì)象 document

document對(duì)象里保存著整個(gè)web頁(yè)面dom結(jié)構(gòu)，在頁(yè)面上所有的元素最終都會(huì)映射為一個(gè)dom對(duì)象。 document也提供了很多api來(lái)查找特定的dom對(duì)象，比如getElementById,querySelector等等。

9、事件系統(tǒng) Event

事件是用戶與頁(yè)面交互的基礎(chǔ)，到目前為止，DOM事件從PC端的 鼠標(biāo)事件(mouse) 發(fā)展到移動(dòng)端的 觸摸事件(touch) 和 手勢(shì)事件(guesture)

由于DOM結(jié)構(gòu)可能會(huì)多層嵌套，因此也衍生出了兩種事件流：事件捕獲和事件冒泡，后者最常用。利用事件冒泡機(jī)制可以實(shí)現(xiàn)很多功能，比如頁(yè)面點(diǎn)擊統(tǒng)計(jì)。關(guān)于兩種事件流的介紹請(qǐng)參考：事件冒泡和捕獲

除此之外，在頁(yè)面初始化、滾動(dòng)、隱藏、返回等操作時(shí)分別內(nèi)置了/onDOMContentLoaded、onscroll、onvisibility和onhashchange等事件，如果想要捕獲這些事件，需要通過(guò)addEventLisener/attachEvent來(lái)進(jìn)行綁定。

10、全局對(duì)象 window

在JS中，當(dāng)一段JS代碼在瀏覽器中被加載執(zhí)行，JS引擎會(huì)在內(nèi)存中構(gòu)建一個(gè)全局執(zhí)行環(huán)境，執(zhí)行環(huán)境的作用是保證所有的函數(shù)能按照正確的順序被執(zhí)行，而window對(duì)象則是這個(gè)執(zhí)行環(huán)境中的一個(gè)全局對(duì)象，window對(duì)象中內(nèi)置了很多操作api和對(duì)象，document對(duì)象就是其中一個(gè)。關(guān)于JS執(zhí)行環(huán)境的介紹請(qǐng)參考博客：深入理解JS執(zhí)行細(xì)節(jié)

CSS 篇

css是用來(lái)對(duì)html進(jìn)行修飾的一門語(yǔ)言。

1、選擇器

css的選擇器有很多種，常用的有類選擇器、標(biāo)簽選擇器、ID選擇器、后代選擇器、群組選擇器、偽類選擇器(before/after)、兄弟選擇器(+~)、屬性選擇器等等。

2、定位 position

定位一般有相對(duì)定位(relative)、絕對(duì)定位(absolute)、固定定位(fixed)，relative和absolute在移動(dòng)端用的最多，fixed 在移動(dòng)端有兼容性問(wèn)題，因此不推薦使用，在移動(dòng)端替代fixed的方案是 absolute+內(nèi)部滾動(dòng)。

3、浮動(dòng) float

設(shè)置float為left或right，就能使該元素脫離文檔流，向左或向右浮動(dòng)。一般在做宮格模式布局時(shí)會(huì)用到，如果子元素全部設(shè)置為浮動(dòng)，則父元素是塌陷的，這時(shí)就需要清除浮動(dòng)，清除浮動(dòng)的方法也很多，常用的方法是在元素末尾加空元素設(shè)置clear:both, 更高級(jí)一點(diǎn)的就給父容器設(shè)置before/after來(lái)模擬一個(gè)空元素，還可以直接設(shè)置overflow:auto/hidden。除過(guò)浮動(dòng)可以實(shí)現(xiàn)宮格模式，行內(nèi)盒子(inline-block)和table也可以。

4、盒子模型 Box

盒子模型是css最重要的一個(gè)概念，也是css布局的基石。 常見(jiàn)的盒子模型有塊級(jí)盒子(block)和行內(nèi)盒子(inline-block)，盒子最關(guān)鍵的幾個(gè)屬性包括margin、border、padding和content,這幾個(gè)元素可以設(shè)置盒子和盒子之間的關(guān)系以及盒子和內(nèi)容之間的關(guān)系。還有一個(gè)問(wèn)題是計(jì)算盒子的大小，需要注意的是，box-sizing屬性的設(shè)置會(huì)影響盒子的width和height。只有普通文檔流中塊框的垂直外邊距才會(huì)發(fā)生外邊距合并。行內(nèi)框、浮動(dòng)框或絕對(duì)定位之間的外邊距不會(huì)合并。

5、彈性布局 Flex

Flex布局的容器是一個(gè)伸縮容器，首先容器本身會(huì)更具容器中的元素動(dòng)態(tài)設(shè)置自身大小；然后當(dāng)Flex容器被應(yīng)用一個(gè)大小時(shí)（width和height），將會(huì)自動(dòng)調(diào)整容器中的元素適應(yīng)新大小。Flex容器也可以設(shè)置伸縮比例和固定寬度，還可以設(shè)置容器中元素的排列方向（橫向和縱向）和是否支持元素的自動(dòng)換行。有了這個(gè)神器，做頁(yè)面布局的可以方便很多了。注意，設(shè)為Flex布局以后，子元素的float、clear和vertical-align屬性將失效。

6、過(guò)渡 Transition 、旋轉(zhuǎn) Transform

應(yīng)用transform可以對(duì)元素進(jìn)行平移(translate)、旋轉(zhuǎn)(rotate)、放大縮小(scale)、傾斜(skew)等處理，而transition使css屬性值(包括transform)在一段時(shí)間內(nèi)平滑的過(guò)渡。使用transition和transform就可以實(shí)現(xiàn)頁(yè)面的滑動(dòng)切換效果。

7、動(dòng)畫(huà) Animation

Animation首先需要設(shè)置一個(gè)動(dòng)畫(huà)函數(shù)，然后以這個(gè)動(dòng)畫(huà)的方式來(lái)改變?cè)氐腸ss屬性之的變化，動(dòng)畫(huà)可以被設(shè)置為永久循環(huán)演示。 和transition相比，animation設(shè)置動(dòng)畫(huà)效果更靈活更豐富，二者還有一個(gè)區(qū)別是：transition只能通過(guò)主動(dòng)改變?cè)氐腸ss值才能觸發(fā)動(dòng)畫(huà)效果，而animation一旦被應(yīng)用，就開(kāi)始執(zhí)行動(dòng)畫(huà)。

8、雪碧圖 sprite

對(duì)于大型站點(diǎn)，為了減少http請(qǐng)求的次數(shù)，一般會(huì)將常用的小圖標(biāo)排到一個(gè)大圖中，頁(yè)面加載時(shí)只需請(qǐng)求一次網(wǎng)絡(luò)， 然后在css中通過(guò)設(shè)置background-position來(lái)控制顯示所需要的小圖標(biāo)。

9、字體圖標(biāo) iconfont

所謂字體圖標(biāo)就是將常用的圖標(biāo)轉(zhuǎn)化為字體資源存在文件中，通過(guò)在CSS中引用該字體文件，然后可以直接通過(guò)控制字體的css屬性來(lái)設(shè)置圖標(biāo)的樣式，字體圖標(biāo)的好處是其不受屏幕分辨率的影響，并且可以任意修改圖標(biāo)的顏色。本文由深圳網(wǎng)站建設(shè)公司博納網(wǎng)絡(luò)編輯整理，希望您能對(duì)網(wǎng)站建設(shè)程序工作有一個(gè)初步的了解。