關(guān)于Css的所有講解內(nèi)容

SS課堂筆記

1、CSS的概念

層疊樣式表(英文全稱(chēng)：Cascading Style Sheets) *層疊：多個(gè)樣式可以作用在同一個(gè)html的元素上，同時(shí)生效

是一種用來(lái)表現(xiàn)HTML或XML（標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言的一個(gè)子集）等文件樣式的計(jì)算機(jī)語(yǔ)言。

樣式定義如何顯示 HTML 元素
樣式通常存儲(chǔ)在樣式表中
把樣式添加到 HTML 4.0 中，是為了解決內(nèi)容與表現(xiàn)分離的問(wèn)題
外部樣式表可以極大提高工作效率
外部樣式表通常存儲(chǔ)在 CSS 文件中
多個(gè)樣式定義可層疊為一個(gè)

CSS很像化妝，通過(guò)不同的CSS將同樣的HTML內(nèi)容打造為不同的呈現(xiàn)結(jié)果。

所以，前端程序員相互表白的時(shí)候可以說(shuō)：you are the CSS to my HTML.

這是不是CSS是對(duì)HTML進(jìn)行美化和布局作用的最好總結(jié)？

2、CSS的優(yōu)勢(shì)

功能強(qiáng)大
將內(nèi)容展示和樣式控制分離

降低耦合度。解耦
讓分工協(xié)作更容易
提高開(kāi)發(fā)效率

3、CSS的使用：CSS與html結(jié)合使用

根據(jù)定義CSS的位置不同，分為行內(nèi)樣式、內(nèi)部樣式和外部樣式

3.1 行內(nèi)樣式

也稱(chēng)為內(nèi)聯(lián)樣式

直接在標(biāo)簽中編寫(xiě)樣式，通過(guò)使用標(biāo)簽內(nèi)部的style屬性；

一般在測(cè)試的時(shí)候使用居多：
語(yǔ)法：
<html標(biāo)簽 style="樣式1：值1;樣式2：值2;....樣式N：值N;">hello my css</html標(biāo)簽>
案例：
<div style="color: red;">hello my css</div>

弊端：只能對(duì)當(dāng)前的標(biāo)簽生效，沒(méi)有做到內(nèi)容和樣式相分離，耦合度太高。

3.2 內(nèi)部樣式

定義在head標(biāo)簽內(nèi)，通過(guò)style標(biāo)簽，該標(biāo)簽內(nèi)容就是CSS代碼

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>內(nèi)部樣式</title>
        <style>
            div{
                color: red;
            }
        </style>
    </head>
    <body>
        <div>hello my css</div>
    </body>
</html>

3.3 外部樣式

1、提前定義css資源文件

2、在head標(biāo)簽內(nèi)，定義link標(biāo)簽引入外部樣式文件。

lina.css文件，放在與html頁(yè)面同級(jí)的css文件夾中：
div {
    color: red;
}

html頁(yè)面中的引入
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>外部樣式</title>
        <link rel="stylesheet" href="css/lina.css" />
    </head>
    <body>
        <div>hello my css</div>
    </body>
</html>

作用域的范圍:外部樣式表>內(nèi)部樣式表>行內(nèi)樣式表

優(yōu)先級(jí)：外部樣式表<內(nèi)部樣式表<行內(nèi)樣式表;

同樣的樣式作用在同一個(gè)標(biāo)簽身上：就近原則；不同樣式作用在同一個(gè)標(biāo)簽身上:疊加生效。

4、CSS語(yǔ)法

基本格式：由兩個(gè)主要的部分構(gòu)成：選擇器，以及一條或多條聲明:

選擇器 {
        屬性1:值1;
        屬性2:值2;
        ...
}
選擇器:篩選具有相似特征的元素
屬性和屬性值之間用冒號(hào)分割，不同的屬性之間用分號(hào)隔開(kāi)。

例如：

5、CSS注釋

注釋是用來(lái)解釋你的代碼，并且可以隨意編輯它，瀏覽器會(huì)忽略它。

CSS注釋以 /* 開(kāi)始, 以 */ 結(jié)束

/*這是CSS的注釋*/
div {
    color: red;  /*文字顏色是紅色*/
}

6、基本選擇器：篩選具有相似特征的元素

6.1 id選擇器

選擇具有相同id屬性值的元素，建議html頁(yè)面中的id值唯一

id 選擇器可以為標(biāo)有特定 id 的 HTML 元素指定特定的樣式。

HTML元素以id屬性來(lái)設(shè)置id選擇器,CSS 中 id 選擇器以 "#" 來(lái)定義。

PS： ID屬性不要以數(shù)字開(kāi)頭，數(shù)字開(kāi)頭的ID在 Mozilla/Firefox 瀏覽器中不起作用。

雖然多個(gè)元素可以使用同一個(gè)id選擇器控制樣式，但是不推薦。如果需要同樣的樣式對(duì)多個(gè)標(biāo)簽生效，使用class選擇器。

6.2 class選擇器

選擇具有相同的class屬性值的元素。

class 選擇器用于描述一組元素的樣式，class 選擇器有別于id選擇器，class可以在多個(gè)元素中使用。

class 選擇器在HTML中以class屬性表示, 在 CSS 中，類(lèi)選擇器以一個(gè)點(diǎn)"."號(hào)顯示：

PS：類(lèi)名的第一個(gè)字符不能使用數(shù)字！它無(wú)法在 Mozilla 或 Firefox 中起作用。

6.3 元素選擇器/標(biāo)簽選擇器

選擇具有相同標(biāo)簽名稱(chēng)的元素。

定義選擇器語(yǔ)法：標(biāo)簽名稱(chēng){}；PS：標(biāo)簽名稱(chēng)必須是html提供好的標(biāo)簽。

使用標(biāo)簽選擇器：自動(dòng)使用在所有的同名的標(biāo)簽上

7 優(yōu)先級(jí)

7.1 選擇器的優(yōu)先級(jí)

ID選擇器 > 類(lèi)選擇器 > 標(biāo)簽選擇器

當(dāng)多個(gè)選擇器作用在同一個(gè)標(biāo)簽上的時(shí)候，如果屬性沖突，看優(yōu)先級(jí)；如果不沖突，樣式疊加生效。

7.2 樣式表的優(yōu)先級(jí)

行內(nèi)樣式 > 內(nèi)部樣式 >外部樣式

同樣，三個(gè)樣式表中都有內(nèi)容作用在同一個(gè)html標(biāo)簽的時(shí)候，如果屬性沖突，看優(yōu)先級(jí)；如果不沖突，樣式疊加生效。

8 CSS常用樣式

8.1 color :字體顏色

跟顏色相關(guān)的取值分3種：

1、顏色的單詞 red blue...

2、rgb(紅，綠，藍(lán))三色的取值范圍是0-255 rgb(255,0,0)

rgba（紅，綠，藍(lán),透明度），透明度取值：0-1 0 全透明 1-不透明 0.5 半透明rgba(255,0,0,0.4)

3、#值1值2值3 ：值的范式是00-FF 十六進(jìn)制數(shù)字組成的例如：#FF0000

8.2 width height:寬高

PS：只有塊狀元素可以設(shè)置寬高，行級(jí)元素設(shè)置不生效。

取值方式有2種：

1：數(shù)值絕對(duì)數(shù)字單位是像素PX

2：百分比：占據(jù)父元素的比例

8.3 背景樣式

8.4 文本樣式

8.5 列表樣式

8.6 邊框樣式

10 HTML&CSS調(diào)試?yán)?/h1>
以谷歌瀏覽器為例說(shuō)明。
快捷鍵F12或者工具條中的開(kāi)發(fā)者工具調(diào)出以下內(nèi)容。
在elements中可以看到當(dāng)前頁(yè)面的所有標(biāo)簽，在styles中可以看到html元素對(duì)應(yīng)的樣式。

11 盒子模型

11.1 概念

所有HTML元素可以看作盒子，在CSS中，"box model"這一術(shù)語(yǔ)是用來(lái)設(shè)計(jì)和布局時(shí)使用。

CSS盒模型本質(zhì)上是一個(gè)盒子，封裝周?chē)腍TML元素，它包括：邊距，邊框，填充，和實(shí)際內(nèi)容。

盒模型允許我們?cè)谄渌睾椭車(chē)剡吙蛑g的空間放置元素。

盒子模型說(shuō)明圖：

Margin(外邊距) - 清除邊框外的區(qū)域，外邊距是透明的。
Border(邊框) - 圍繞在內(nèi)邊距和內(nèi)容外的邊框。
Padding(內(nèi)邊距) - 清除內(nèi)容周?chē)膮^(qū)域，內(nèi)邊距是透明的。
Content(內(nèi)容) - 盒子的內(nèi)容，顯示文本和圖像。

11.2 盒子的寬度和高度

元素的實(shí)際寬度和高度：

當(dāng)我們計(jì)算一個(gè)元素實(shí)際在頁(yè)面占有的總寬度計(jì)算公式是這樣的：

總元素寬度=寬度+左填充+右填充+左邊框+右邊框+左邊距+右邊距

元素的總高度最終計(jì)算公式是這樣的：

總元素的高度=高度+頂部填充+底部填充+上邊框+下邊框+上邊距+下邊距

11.3 如果想要設(shè)置的寬度直接就是元素的實(shí)際寬度，通過(guò)box-sizing屬性

12 補(bǔ)充常用樣式

12.1 float 浮動(dòng)

12.1.1 什么是浮動(dòng)

CSS 的 Float（浮動(dòng)），會(huì)使元素向左或向右移動(dòng)，其周?chē)脑匾矔?huì)重新排列。

Float（浮動(dòng)），往往是用于圖像，但它在布局時(shí)一樣非常有用。

12.1.2 元素怎樣浮動(dòng)

元素的水平方向浮動(dòng)，意味著元素只能左右移動(dòng)而不能上下移動(dòng)。

一個(gè)浮動(dòng)元素會(huì)盡量向左或向右移動(dòng)，直到它的外邊緣碰到包含框或另一個(gè)浮動(dòng)框的邊框?yàn)橹埂?/span>

浮動(dòng)元素之后的元素將圍繞它。

浮動(dòng)元素之前的元素將不會(huì)受到影響。

12.1.3 彼此相鄰的浮動(dòng)元素

如果你把幾個(gè)浮動(dòng)的元素放到一起，如果有空間的話，它們將彼此相鄰。

12.1.4 clear--清除浮動(dòng)

元素浮動(dòng)之后，周?chē)脑貢?huì)重新排列，為了避免這種情況，使用 clear 屬性。

clear 屬性指定元素兩側(cè)不能出現(xiàn)浮動(dòng)元素。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>浮動(dòng)</title>
        <style>
            div{
                width: 400px;
                height: 200px;
                margin-bottom: 10px;
            }
        </style>
    </head>
    <body>
        <!--沒(méi)有浮動(dòng)屬性的元素都屬于常規(guī)文檔流：從上往下從左往右依次顯示
            浮動(dòng)的元素都脫離了常規(guī)文檔流；
            為了好理解：大家可以認(rèn)為浮動(dòng)元素屬于一層，非浮動(dòng)元素屬于一層
            如果想要非浮動(dòng)元素不受浮動(dòng)元素的影響，需要使用clear屬性
        -->
        <div style="background: rgba(255,0,0,0.5); float: left;">
            div1-左浮動(dòng)，脫離常規(guī)文檔流，緊貼父元素或者上一個(gè)同方向浮動(dòng)
        </div>
        <div style="background: lawngreen; width: 600px; height: 350px; ">
            div2-未浮動(dòng)，常規(guī)文檔流,
            <br/>PS:此時(shí)div1在div2的上方顯示，因?yàn)閐iv1和div2是不同文檔流中的元素，顯示互不影響
            如果不想讓div2被浮動(dòng)元素影響，需要添加clear屬性。
            添加clear: left;之后div2就會(huì)忽略div1浮動(dòng)的影響，在div1層后面顯示，不會(huì)重疊了，大家可以自己試驗(yàn)一下
        </div>
        <div style="background: lightblue; float: right; width: 1800px;">
            div3-右浮動(dòng)，脫離常規(guī)文檔流，緊貼父元素或者上一個(gè)同方向浮動(dòng)
        </div>
        <div style="background: lightcoral; width: 600px; height: 350px; ">
            div4-未浮動(dòng)，常規(guī)文檔流,
            <br/>PS:此時(shí)div3在div4的上方顯示，因?yàn)閐iv3和div4是不同文檔流中的元素，顯示互不影響
            如果不想讓div4被浮動(dòng)元素影響，需要添加clear屬性。
            添加clear: right;之后div4就會(huì)忽略div3浮動(dòng)的影響，在div3層后面顯示，不會(huì)重疊了，大家可以自己試驗(yàn)一下
            
            clear屬性有三個(gè)取值：left、right、both;分別是取出左浮動(dòng)、有浮動(dòng)和所有浮動(dòng)元素的影響
        </div>
        <div style="background: lavender;">
            div5-未浮動(dòng)，常規(guī)文檔流,
        </div>
    </body>
</html>

12.2 overflow

控制內(nèi)容溢出元素框時(shí)顯示的方式。

overflow屬性有以下值：

值	描述
visible	默認(rèn)值。內(nèi)容不會(huì)被修剪，會(huì)呈現(xiàn)在元素框之外。
hidden	內(nèi)容會(huì)被修剪，并且其余內(nèi)容是不可見(jiàn)的。
scroll	內(nèi)容會(huì)被修剪，但是瀏覽器會(huì)顯示滾動(dòng)條以便查看其余的內(nèi)容。
auto	如果內(nèi)容被修剪，則瀏覽器會(huì)顯示滾動(dòng)條以便查看其余的內(nèi)容。
inherit	規(guī)定應(yīng)該從父元素繼承 overflow 屬性的值。

注意:overflow 屬性只工作于指定高度的塊元素上。

注意: 在 OS X Lion ( Mac 系統(tǒng)) 系統(tǒng)上，滾動(dòng)條默認(rèn)是隱藏的，使用的時(shí)候才會(huì)顯示 (設(shè)置 "overflow:scroll" 也是一樣的)。

12.3 Display(顯示) 與 Visibility（可見(jiàn)性）

12.3.1 兩者的區(qū)別

display屬性設(shè)置一個(gè)元素應(yīng)如何顯示，visibility屬性指定一個(gè)元素應(yīng)可見(jiàn)還是隱藏。

隱藏一個(gè)元素可以通過(guò)把display屬性設(shè)置為"none"，或把visibility屬性設(shè)置為"hidden"。但是請(qǐng)注意，這兩種方法會(huì)產(chǎn)生不同的結(jié)果。

visibility:hidden可以隱藏某個(gè)元素，但隱藏的元素仍需占用與未隱藏之前一樣的空間。也就是說(shuō)，該元素雖然被隱藏了，但仍然會(huì)影響布局。

display:none可以隱藏某個(gè)元素，且隱藏的元素不會(huì)占用任何空間。也就是說(shuō)，該元素不但被隱藏了，而且該元素原本占用的空間也會(huì)從頁(yè)面布局中消失。

12.3.2 display 改變?cè)氐念?lèi)型

CSS樣式有以下三個(gè)：

display:block -- 顯示為塊級(jí)元素
display:inline -- 顯示為內(nèi)聯(lián)元素
display:inline-block -- 顯示為內(nèi)聯(lián)塊元素，表現(xiàn)為同行顯示并可修改寬高內(nèi)外邊距等屬性

13 復(fù)合選擇器

由兩個(gè)或多個(gè)基礎(chǔ)選擇器，通過(guò)不同方式組合而成的。

可以更準(zhǔn)確更精細(xì)的選擇目標(biāo)元素標(biāo)簽。

13.1 全局選擇器

語(yǔ)法：* {} 一般去掉標(biāo)簽的一些默認(rèn)效果的時(shí)候使用，或者整站通用效果時(shí)使用。但是不推薦，一般將 * 替換為常用標(biāo)簽的名稱(chēng)，并用逗號(hào)分隔，其實(shí)就是使用并集選擇器。

13.2 并集選擇器

并集選擇器（CSS選擇器分組）是各個(gè)選擇器通過(guò),連接而成的，通常用于集體聲明。

語(yǔ)法：選擇器1，選擇器2，......選擇器N{}

意思是多個(gè)選擇器都是通用的樣式。任何形式的選擇器（包括標(biāo)簽選擇器、class類(lèi)選擇器id選擇器等），都可以作為并集選擇器的一部分。

13.3 交集選擇器

條件：交集選擇器由兩個(gè)選擇器構(gòu)成，找到的標(biāo)簽必須滿足：既有標(biāo)簽一的特點(diǎn)，也有標(biāo)簽二的特點(diǎn)。

語(yǔ)法：h3.class{ color:red; }

其中第一個(gè)為標(biāo)簽選擇器，第二個(gè)為class選擇器，兩個(gè)選擇器之間不能有空格，例如div.list。

交集選擇器是并且的意思。即...又...的意思

例如：   table.bg   選擇的是： 類(lèi)名為 .bg  的 表格標(biāo)簽，但用的相對(duì)來(lái)說(shuō)比較少。

13.4 后代選擇器

概念：后代選擇器又稱(chēng)為包含選擇器。

作用：用來(lái)選擇元素或元素組的子孫后代。

其寫(xiě)法就是把外層標(biāo)簽寫(xiě)在前面，內(nèi)層標(biāo)簽寫(xiě)在后面，中間用空格分隔，先寫(xiě)父親爺爺，在寫(xiě)兒子孫子。

  格式：父級(jí) 子級(jí){屬性:屬性值;屬性:屬性值;}

語(yǔ)法：.class h3{color:red;font-size:16px;}

當(dāng)標(biāo)簽發(fā)生嵌套時(shí)，內(nèi)層標(biāo)簽就成為外層標(biāo)簽的后代。

子孫后代都可以這么選擇。或者說(shuō)，它能選擇任何包含在內(nèi) 的標(biāo)簽。

13.5 子元素選擇器

作用：子元素選擇器只能選擇作為某元素子元素(親兒子)的元素。

其寫(xiě)法就是把父級(jí)標(biāo)簽寫(xiě)在前面，子級(jí)標(biāo)簽寫(xiě)在后面，中間跟一個(gè) > 進(jìn)行連接。

語(yǔ)法：.class>h3{color:red;font-size:14px;}

 比如：  .demo > h3 {color: red;}   說(shuō)明  h3 一定是demo 親兒子。  demo 元素包含著h3。

13.6 實(shí)現(xiàn)代碼

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>復(fù)合選擇器</title>
		<style>
			/*全局選擇器：
			 	一般去掉標(biāo)簽的一些默認(rèn)效果的時(shí)候使用，或者整站通用效果時(shí)使用。但是不推薦，
			 */
			*{
				color: #333;/*定義全局文字顏色，統(tǒng)一色彩基調(diào)*/
			}
			/*并集選擇器：通常用于集體聲明
			 	替換全局選擇器；
			 */
			div,p,dldt,dd{
				/*去掉瀏覽器的默認(rèn)樣式*/
				margin: 0;
				padding: 0;
				color: #333;/*定義全局文字顏色，統(tǒng)一色彩基調(diào)*/
			}
			/*交集選擇器*/
			li.myli{
				color: red;
			}
			/*后代選擇器*/
			ul li{
				font-size: 28px;
			}
			.myUL li{
				font-family: "微軟雅黑";
			}
			.myUL li a{
				text-decoration: line-through;
			}
			/*子元素選擇器*/
			.demo>h3{
				color: red;
			}			
		</style>
		
	</head>
	<body>
		<ul>
			<li>li11111111111</li>
			<li class="myli">li22222222222</li>
			<li>li33333333333</li>
			<li>li44444444444<a href="">點(diǎn)擊我試試</a></li>
			<li class="myUL">
				<ul>
					<li>li11111111111</li>
					<li class="myli">li22222222222</li>
					<li>li33333333333</li>
					<li>li44444444444
						<a href="">點(diǎn)擊我試試</a>
					</li>
				</ul>
			</li>
		</ul>
		<ol>
			<li>li11111111111</li>
			<li>li22222222222</li>
			<li>li33333333333</li>
			<li>li44444444444</li>
		</ol>
		<div class="demo">
			div1
			<h3>靜夜思</h3>	
			<ul>
				<li><h3>靜夜思----li</h3></li>
			</ul>
		</div>
		
	</body>
</html>

13.6 偽類(lèi)選擇器

偽類(lèi)選擇器：和類(lèi)選擇器相區(qū)別類(lèi)選擇器是一個(gè)點(diǎn) 比如 .demo {} 而我們的偽類(lèi) 用 2個(gè)點(diǎn) 就是冒號(hào) 比如 :link{} 。

作用：用于向某些選擇器添加特殊的效果。比如給鏈接添加特殊效果，比如可以選擇第1個(gè)，第n個(gè)元素。

因?yàn)閭晤?lèi)選擇器很多，比如鏈接偽類(lèi)，結(jié)構(gòu)偽類(lèi)等等。我們這里先給大家講解鏈接偽類(lèi)選擇器。

a:link /* 未訪問(wèn)的鏈接 */
a:visited /* 已訪問(wèn)的鏈接 */
a:hover /* 鼠標(biāo)移動(dòng)到鏈接上 */
a:active /* 選定的鏈接 */

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>偽類(lèi)選擇器</title>
		<style>			
			/*偽類(lèi)選擇器*/			
			a:link{
				color: red;/*默認(rèn)顏色是紅色*/	
			}
			a:visited{
				color: blue;/*訪問(wèn)過(guò)的頁(yè)面是藍(lán)色*/	
			}
			a:hover{
				color: green;/*鼠標(biāo)懸浮是綠色*/	
				font-size: 28px;
			}
			a:active{
				color: gold;/*按下鼠標(biāo)不放手是金色*/	
				font-family: "微軟雅黑";
			}
		</style>
		
	</head>
	<body>
		<a href="03-常用樣式.html" target="_blank">常用樣式</a>
		<a href="04-盒子模型1.html" target="_blank">盒子模型</a>
		<a href="05-綜合練習(xí).html" target="_blank">綜合練習(xí)</a>
	</body>
</html>

注意**

寫(xiě)的時(shí)候，他們的順序盡量不要顛倒按照 lvha(四類(lèi)的首字母) 的順序。否則可能引起錯(cuò)誤。
因?yàn)榻墟溄觽晤?lèi)，所以都是利用交集選擇器 a:link a:hover
因?yàn)閍鏈接瀏覽器具有默認(rèn)樣式，所以我們實(shí)際工作中都需要給鏈接單獨(dú)指定樣式。
實(shí)際開(kāi)發(fā)中，我們很少寫(xiě)全四個(gè)狀態(tài)，一般我們寫(xiě)法如下：

a {   /* a是標(biāo)簽選擇器  所有的鏈接 */
       font-weight: 700;
       font-size: 16px;
       color: gray;
}
a:hover {   /* :hover 是鏈接偽類(lèi)選擇器 鼠標(biāo)經(jīng)過(guò) */
       color: red; /*  鼠標(biāo)經(jīng)過(guò)的時(shí)候，由原來(lái)的 灰色 變成了紅色 */
}

13.7 復(fù)合選擇器比對(duì)

選擇器	作用	特征	使用情況	隔開(kāi)符號(hào)及用法
后代選擇器	用來(lái)選擇元素后代	是選擇所有的子孫后代	較多	符號(hào)是空格 p .one
子代選擇器	選擇最近一級(jí)元素	只選親兒子	較少	符號(hào)是> .nav>p
交集選擇器	選擇兩個(gè)標(biāo)簽交集的部分	既是又是	較少	沒(méi)有符號(hào) p.one
并集選擇器	選擇某些相同樣式的選擇器	可以用于集體聲明	較多	符號(hào)是逗號(hào) .nav, .header
鏈接偽類(lèi)選擇器	給鏈接更改狀態(tài)		較多	重點(diǎn)記住 a{} 和 a:hover 實(shí)際開(kāi)發(fā)的寫(xiě)法

his是JavaScript中的一個(gè)關(guān)鍵字，但是又一個(gè)相對(duì)比較特別的關(guān)鍵字，不像function、var、for、if這些關(guān)鍵字一樣，可以很清楚的搞清楚它到底是如何使用的。
this會(huì)在執(zhí)行上下文中綁定一個(gè)對(duì)象，但是是根據(jù)什么條件綁定的呢？在不同的執(zhí)行條件下會(huì)綁定不同的對(duì)象，這也是讓人捉摸不定的地方。
這一次，我們一起來(lái)徹底搞定this到底是如何綁定的吧！

一. 理解this

1.1. 為什么使用this

在常見(jiàn)的編程語(yǔ)言中，幾乎都有this這個(gè)關(guān)鍵字（Objective-C中使用的是self），但是JavaScript中的this和常見(jiàn)的面向?qū)ο笳Z(yǔ)言中的this不太一樣：

常見(jiàn)面向?qū)ο蟮木幊陶Z(yǔ)言中，比如Java、C++、Swift、Dart等等一系列語(yǔ)言中，this通常只會(huì)出現(xiàn)在類(lèi)的方法中。
也就是你需要有一個(gè)類(lèi)，類(lèi)中的方法（特別是實(shí)例方法）中，this代表的是當(dāng)前調(diào)用對(duì)象。
但是JavaScript中的this更加靈活，無(wú)論是它出現(xiàn)的位置還是它代表的含義。

使用this有什么意義呢？下面的代碼中，我們通過(guò)對(duì)象字面量創(chuàng)建出來(lái)一個(gè)對(duì)象，當(dāng)我們調(diào)用對(duì)象的方法時(shí)，希望將對(duì)象的名稱(chēng)一起進(jìn)行打印。

如果沒(méi)有this，那么我們的代碼會(huì)是下面的寫(xiě)法：

在方法中，為了能夠獲取到name名稱(chēng)，必須通過(guò)obj的引用（變量名稱(chēng)）來(lái)獲取。
但是這樣做有一個(gè)很大的弊端：如果我將obj的名稱(chēng)換成了info，那么所有的方法中的obj都需要換成info。

var obj = {
  name: "why",
  running: function() {
    console.log(obj.name + " running");
  },
  eating: function() {
    console.log(obj.name + " eating");
  },
  studying: function() {
    console.log(obj.name + " studying");
  }
}

事實(shí)上，上面的代碼，在實(shí)際開(kāi)發(fā)中，我們都會(huì)使用this來(lái)進(jìn)行優(yōu)化：

當(dāng)我們通過(guò)obj去調(diào)用running、eating、studying這些方法時(shí)，this就是指向的obj對(duì)象

var obj = {
  name: "why",
  running: function() {
    console.log(this.name + " running");
  },
  eating: function() {
    console.log(this.name + " eating");
  },
  studying: function() {
    console.log(this.name + " studying");
  }
}

所以我們會(huì)發(fā)現(xiàn)，在某些函數(shù)或者方法的編寫(xiě)中，this可以讓我們更加便捷的方式來(lái)引用對(duì)象，在進(jìn)行一些API設(shè)計(jì)時(shí)，代碼更加的簡(jiǎn)潔和易于復(fù)用。

當(dāng)然，上面只是應(yīng)用this的一個(gè)場(chǎng)景而已，開(kāi)發(fā)中使用到this的場(chǎng)景到處都是，這也是為什么它不容易理解的原因。

1.2. this指向什么

我們先說(shuō)一個(gè)最簡(jiǎn)單的，this在全局作用域下指向什么？

這個(gè)問(wèn)題非常容易回答，在瀏覽器中測(cè)試就是指向window
所以，在全局作用域下，我們可以認(rèn)為this就是指向的window

console.log(this); // window

var name = "why";
console.log(this.name); // why
console.log(window.name); // why

但是，開(kāi)發(fā)中很少直接在全局作用域下去使用this，通常都是在函數(shù)中使用。

所有的函數(shù)在被調(diào)用時(shí)，都會(huì)創(chuàng)建一個(gè)執(zhí)行上下文：

這個(gè)上下文中記錄著函數(shù)的調(diào)用棧、函數(shù)的調(diào)用方式、傳入的參數(shù)信息等；
this也是其中的一個(gè)屬性；

我們先來(lái)看一個(gè)讓人困惑的問(wèn)題：

定義一個(gè)函數(shù)，我們采用三種不同的方式對(duì)它進(jìn)行調(diào)用，它產(chǎn)生了三種不同的結(jié)果

// 定義一個(gè)函數(shù)
function foo() {
  console.log(this);
}

// 1.調(diào)用方式一: 直接調(diào)用
foo(); // window

// 2.調(diào)用方式二: 將foo放到一個(gè)對(duì)象中,再調(diào)用
var obj = {
  name: "why",
  foo: foo
}
obj.foo() // obj對(duì)象

// 3.調(diào)用方式三: 通過(guò)call/apply調(diào)用
foo.call("abc"); // String {"abc"}對(duì)象

上面的案例可以給我們什么樣的啟示呢？

1.函數(shù)在調(diào)用時(shí)，JavaScript會(huì)默認(rèn)給this綁定一個(gè)值；
2.this的綁定和定義的位置（編寫(xiě)的位置）沒(méi)有關(guān)系；
3.this的綁定和調(diào)用方式以及調(diào)用的位置有關(guān)系；
4.this是在運(yùn)行時(shí)被綁定的；

那么this到底是怎么樣的綁定規(guī)則呢？一起來(lái)學(xué)習(xí)一下吧

二. this綁定規(guī)則

我們現(xiàn)在已經(jīng)知道this無(wú)非就是在函數(shù)調(diào)用時(shí)被綁定的一個(gè)對(duì)象，我們就需要知道它在不同的場(chǎng)景下的綁定規(guī)則即可。

2.1. 默認(rèn)綁定

什么情況下使用默認(rèn)綁定呢？獨(dú)立函數(shù)調(diào)用。

獨(dú)立的函數(shù)調(diào)用我們可以理解成函數(shù)沒(méi)有被綁定到某個(gè)對(duì)象上進(jìn)行調(diào)用；

案例一：普通函數(shù)調(diào)用

該函數(shù)直接被調(diào)用，并沒(méi)有進(jìn)行任何的對(duì)象關(guān)聯(lián)；
這種獨(dú)立的函數(shù)調(diào)用會(huì)使用默認(rèn)綁定，通常默認(rèn)綁定時(shí)，函數(shù)中的this指向全局對(duì)象（window）；

function foo() {
  console.log(this); // window
}

foo();

案例二：函數(shù)調(diào)用鏈（一個(gè)函數(shù)調(diào)用另外一個(gè)函數(shù)）

所有的函數(shù)調(diào)用都沒(méi)有被綁定到某個(gè)對(duì)象上；

// 2.案例二:
function test1() {
  console.log(this); // window
  test2();
}

function test2() {
  console.log(this); // window
  test3()
}

function test3() {
  console.log(this); // window
}
test1();

案例三：將函數(shù)作為參數(shù)，傳入到另一個(gè)函數(shù)中

function foo(func) {
  func()
}

function bar() {
  console.log(this); // window
}

foo(bar);

我們對(duì)案例進(jìn)行一些修改，考慮一下打印結(jié)果是否會(huì)發(fā)生變化：

這里的結(jié)果依然是window，為什么呢？
原因非常簡(jiǎn)單，在真正函數(shù)調(diào)用的位置，并沒(méi)有進(jìn)行任何的對(duì)象綁定，只是一個(gè)獨(dú)立函數(shù)的調(diào)用；

function foo(func) {
  func()
}

var obj = {
  name: "why",
  bar: function() {
    console.log(this); // window
  }
}

foo(obj.bar);

2.2. 隱式綁定

另外一種比較常見(jiàn)的調(diào)用方式是通過(guò)某個(gè)對(duì)象進(jìn)行調(diào)用的：

也就是說(shuō)它的調(diào)用位置中，是通過(guò)某個(gè)對(duì)象發(fā)起的函數(shù)調(diào)用。

案例一：通過(guò)對(duì)象調(diào)用函數(shù)

foo的調(diào)用位置是obj.foo()方式進(jìn)行調(diào)用的
那么foo調(diào)用時(shí)this會(huì)隱式地被綁定到obj對(duì)象上

function foo() {
  console.log(this); // obj對(duì)象
}

var obj = {
  name: "why",
  foo: foo
}

obj.foo();

案例二：案例一的變化

我們通過(guò)obj2又引用了obj1對(duì)象，再通過(guò)obj1對(duì)象調(diào)用foo函數(shù)；
那么foo調(diào)用的位置上其實(shí)還是obj1被綁定了this；

function foo() {
  console.log(this); // obj對(duì)象
}

var obj1 = {
  name: "obj1",
  foo: foo
}

var obj2 = {
  name: "obj2",
  obj1: obj1
}

obj2.obj1.foo();

案例三：隱式丟失

結(jié)果最終是window，為什么是window呢？
因?yàn)閒oo最終被調(diào)用的位置是bar，而bar在進(jìn)行調(diào)用時(shí)沒(méi)有綁定任何的對(duì)象，也就沒(méi)有形成隱式綁定；
相當(dāng)于是一種默認(rèn)綁定；

function foo() {
  console.log(this);
}

var obj1 = {
  name: "obj1",
  foo: foo
}

// 講obj1的foo賦值給bar
var bar = obj1.foo;
bar();

2.3. 顯示綁定

隱式綁定有一個(gè)前提條件：

必須在調(diào)用的對(duì)象內(nèi)部有一個(gè)對(duì)函數(shù)的引用（比如一個(gè)屬性）；
如果沒(méi)有這樣的引用，在進(jìn)行調(diào)用時(shí)，會(huì)報(bào)找不到該函數(shù)的錯(cuò)誤；
正是通過(guò)這個(gè)引用，間接地將this綁定到了這個(gè)對(duì)象上；

如果我們不希望在 對(duì)象內(nèi)部 包含這個(gè)函數(shù)的引用，同時(shí)又希望在這個(gè)對(duì)象上進(jìn)行強(qiáng)制調(diào)用，該怎么做呢？

JavaScript所有的函數(shù)都可以使用call和apply方法（這個(gè)和Prototype有關(guān)）。

它們兩個(gè)的區(qū)別這里不再展開(kāi)；
其實(shí)非常簡(jiǎn)單，第一個(gè)參數(shù)是相同的，后面的參數(shù)，apply為數(shù)組，call為參數(shù)列表；

這兩個(gè)函數(shù)的第一個(gè)參數(shù)都要求是一個(gè)對(duì)象，這個(gè)對(duì)象的作用是什么呢？就是給this準(zhǔn)備的。
在調(diào)用這個(gè)函數(shù)時(shí)，會(huì)將this綁定到這個(gè)傳入的對(duì)象上。

因?yàn)樯厦娴倪^(guò)程，我們明確地綁定了this指向的對(duì)象，所以稱(chēng)之為 顯示綁定。

2.3.1. call、apply

通過(guò)call或者apply綁定this對(duì)象

顯示綁定后，this就會(huì)明確地指向綁定的對(duì)象

function foo() {
  console.log(this);
}

foo.call(window); // window
foo.call({name: "why"}); // {name: "why"}
foo.call(123); // Number對(duì)象,存放時(shí)123

2.3.2. bind函數(shù)

如果我們希望一個(gè)函數(shù)總是顯示的綁定到一個(gè)對(duì)象上，可以怎么做呢？

方案一：自己手寫(xiě)一個(gè)輔助函數(shù)（了解）

我們手動(dòng)寫(xiě)了一個(gè)bind的輔助函數(shù)
這個(gè)輔助函數(shù)的目的是在執(zhí)行foo時(shí)，總是讓它的this綁定到obj對(duì)象上

function foo() {
  console.log(this);
}

var obj = {
  name: "why"
}

function bind(func, obj) {
  return function() {
    return func.apply(obj, arguments);
  }
}

var bar = bind(foo, obj);

bar(); // obj對(duì)象
bar(); // obj對(duì)象
bar(); // obj對(duì)象

方案二：使用Function.prototype.bind

function foo() {
  console.log(this);
}

var obj = {
  name: "why"
}

var bar = foo.bind(obj);

bar(); // obj對(duì)象
bar(); // obj對(duì)象
bar(); // obj對(duì)象

2.3.3. 內(nèi)置函數(shù)

有些時(shí)候，我們會(huì)調(diào)用一些JavaScript的內(nèi)置函數(shù)，或者一些第三方庫(kù)中的內(nèi)置函數(shù)。

這些內(nèi)置函數(shù)會(huì)要求我們傳入另外一個(gè)函數(shù)；
我們自己并不會(huì)顯示的調(diào)用這些函數(shù)，而且JavaScript內(nèi)部或者第三方庫(kù)內(nèi)部會(huì)幫助我們執(zhí)行；
這些函數(shù)中的this又是如何綁定的呢？

案例一：setTimeout

setTimeout中會(huì)傳入一個(gè)函數(shù)，這個(gè)函數(shù)中的this通常是window

setTimeout(function() {
  console.log(this); // window
}, 1000);

為什么這里是window呢？

這個(gè)和setTimeout源碼的內(nèi)部調(diào)用有關(guān)；
setTimeout內(nèi)部是通過(guò)apply進(jìn)行綁定的this對(duì)象，并且綁定的是全局對(duì)象；

案例二：數(shù)組的forEach

數(shù)組有一個(gè)高階函數(shù)forEach，用于函數(shù)的遍歷：

在forEach中傳入的函數(shù)打印的也是Window對(duì)象；
這是因?yàn)槟J(rèn)情況下傳入的函數(shù)是自動(dòng)調(diào)用函數(shù)（默認(rèn)綁定）；

var names = ["abc", "cba", "nba"];
names.forEach(function(item) {
  console.log(this); // 三次window
});

我們是否可以改變?cè)摵瘮?shù)的this指向呢？

forEach參數(shù)

var names = ["abc", "cba", "nba"];
var obj = {name: "why"};
names.forEach(function(item) {
  console.log(this); // 三次obj對(duì)象
}, obj);

案例三：div的點(diǎn)擊

如果我們有一個(gè)div元素：

注意：省略了部分代碼

  <style>
    .box {
      width: 200px;
      height: 200px;
      background-color: red;
    }
  </style>

  <div class="box"></div>

獲取元素節(jié)點(diǎn)，并且監(jiān)聽(tīng)點(diǎn)擊：

在點(diǎn)擊事件的回調(diào)中，this指向誰(shuí)呢？box對(duì)象；
這是因?yàn)樵诎l(fā)生點(diǎn)擊時(shí)，執(zhí)行傳入的回調(diào)函數(shù)被調(diào)用時(shí)，會(huì)將box對(duì)象綁定到該函數(shù)中；

var box = document.querySelector(".box");
box.onclick = function() {
  console.log(this); // box對(duì)象
}

所以傳入到內(nèi)置函數(shù)的回調(diào)函數(shù)this如何確定呢？

某些內(nèi)置的函數(shù)，我們很難確定它內(nèi)部是如何調(diào)用傳入的回調(diào)函數(shù)；
一方面可以通過(guò)分析源碼來(lái)確定，另一方面我們可以通過(guò)經(jīng)驗(yàn)（見(jiàn)多識(shí)廣）來(lái)確定；
但是無(wú)論如何，通常都是我們之前講過(guò)的規(guī)則來(lái)確定的；

2.4. new綁定

JavaScript中的函數(shù)可以當(dāng)做一個(gè)類(lèi)的構(gòu)造函數(shù)來(lái)使用，也就是使用new關(guān)鍵字。

使用new關(guān)鍵字來(lái)調(diào)用函數(shù)時(shí)，會(huì)執(zhí)行如下的操作：

1.創(chuàng)建一個(gè)全新的對(duì)象；
2.這個(gè)新對(duì)象會(huì)被執(zhí)行Prototype連接；
3.這個(gè)新對(duì)象會(huì)綁定到函數(shù)調(diào)用的this上（this的綁定在這個(gè)步驟完成）；
4.如果函數(shù)沒(méi)有返回其他對(duì)象，表達(dá)式會(huì)返回這個(gè)新對(duì)象；

// 創(chuàng)建Person
function Person(name) {
  console.log(this); // Person {}
  this.name = name; // Person {name: "why"}
}

var p = new Person("why");
console.log(p);

2.5. 規(guī)則優(yōu)先級(jí)

學(xué)習(xí)了四條規(guī)則，接下來(lái)開(kāi)發(fā)中我們只需要去查找函數(shù)的調(diào)用應(yīng)用了哪條規(guī)則即可，但是如果一個(gè)函數(shù)調(diào)用位置應(yīng)用了多條規(guī)則，優(yōu)先級(jí)誰(shuí)更高呢？

1.默認(rèn)規(guī)則的優(yōu)先級(jí)最低

毫無(wú)疑問(wèn)，默認(rèn)規(guī)則的優(yōu)先級(jí)是最低的，因?yàn)榇嬖谄渌?guī)則時(shí)，就會(huì)通過(guò)其他規(guī)則的方式來(lái)綁定this

2.顯示綁定優(yōu)先級(jí)高于隱式綁定

顯示綁定和隱式綁定哪一個(gè)優(yōu)先級(jí)更高呢？這個(gè)我們可以測(cè)試一下：

結(jié)果是obj2，說(shuō)明是顯示綁定生效了

function foo() {
  console.log(this);
}

var obj1 = {
  name: "obj1",
  foo: foo
}

var obj2 = {
  name: "obj2",
  foo: foo
}

// 隱式綁定
obj1.foo(); // obj1
obj2.foo(); // obj2

// 隱式綁定和顯示綁定同時(shí)存在
obj1.foo.call(obj2); // obj2, 說(shuō)明顯式綁定優(yōu)先級(jí)更高

3.new綁定優(yōu)先級(jí)高于隱式綁定

結(jié)果是foo，說(shuō)明是new綁定生效了

function foo() {
  console.log(this);
}

var obj = {
  name: "why",
  foo: foo
}

new obj.foo(); // foo對(duì)象, 說(shuō)明new綁定優(yōu)先級(jí)更高

4.new綁定優(yōu)先級(jí)高于bind

new綁定和call、apply是不允許同時(shí)使用的，所以不存在誰(shuí)的優(yōu)先級(jí)更高

function foo() {
  console.log(this);
}

var obj = {
  name: "obj"
}

var foo = new foo.call(obj);

new和call同時(shí)使用

但是new綁定是否可以和bind后的函數(shù)同時(shí)使用呢？可以

結(jié)果顯示為foo，那么說(shuō)明是new綁定生效了

function foo() {
  console.log(this);
}

var obj = {
  name: "obj"
}

// var foo = new foo.call(obj);
var bar = foo.bind(obj);
var foo = new bar(); // 打印foo, 說(shuō)明使用的是new綁定

優(yōu)先級(jí)總結(jié)：

new綁定 > 顯示綁定（bind）> 隱式綁定 > 默認(rèn)綁定

三. this規(guī)則之外

我們講到的規(guī)則已經(jīng)足以應(yīng)付平時(shí)的開(kāi)發(fā)，但是總有一些語(yǔ)法，超出了我們的規(guī)則之外。（神話故事和動(dòng)漫中總是有類(lèi)似這樣的人物）

3.1. 忽略顯示綁定

如果在顯示綁定中，我們傳入一個(gè)null或者undefined，那么這個(gè)顯示綁定會(huì)被忽略，使用默認(rèn)規(guī)則：

function foo() {
  console.log(this);
}

var obj = {
  name: "why"
}

foo.call(obj); // obj對(duì)象
foo.call(null); // window
foo.call(undefined); // window

var bar = foo.bind(null);
bar(); // window

3.2. 間接函數(shù)引用

另外一種情況，創(chuàng)建一個(gè)函數(shù)的間接引用，這種情況使用默認(rèn)綁定規(guī)則。

我們先來(lái)看下面的案例結(jié)果是什么？

(num2 = num1)的結(jié)果是num1的值；

var num1 = 100;
var num2 = 0;
var result = (num2 = num1);
console.log(result); // 100

我們來(lái)下面的函數(shù)賦值結(jié)果：

賦值(obj2.foo = obj1.foo)的結(jié)果是foo函數(shù)；
foo函數(shù)被直接調(diào)用，那么是默認(rèn)綁定；

function foo() {
  console.log(this);
}

var obj1 = {
  name: "obj1",
  foo: foo
}; 

var obj2 = {
  name: "obj2"
}

obj1.foo(); // obj1對(duì)象
(obj2.foo = obj1.foo)();  // window

3.3. ES6箭頭函數(shù)

在ES6中新增一個(gè)非常好用的函數(shù)類(lèi)型：箭頭函數(shù)

這里不再具體介紹箭頭函數(shù)的用法，可以自行學(xué)習(xí)。

箭頭函數(shù)不使用this的四種標(biāo)準(zhǔn)規(guī)則（也就是不綁定this），而是根據(jù)外層作用域來(lái)決定this。

我們來(lái)看一個(gè)模擬網(wǎng)絡(luò)請(qǐng)求的案例：

這里我使用setTimeout來(lái)模擬網(wǎng)絡(luò)請(qǐng)求，請(qǐng)求到數(shù)據(jù)后如何可以存放到data中呢？
我們需要拿到obj對(duì)象，設(shè)置data；
但是直接拿到的this是window，我們需要在外層定義：var _this = this
在setTimeout的回調(diào)函數(shù)中使用_this就代表了obj對(duì)象

var obj = {
  data: [],
  getData: function() {
    var _this = this;
    setTimeout(function() {
      // 模擬獲取到的數(shù)據(jù)
      var res = ["abc", "cba", "nba"];
      _this.data.push(...res);
    }, 1000);
  }
}

obj.getData();

上面的代碼在ES6之前是我們最常用的方式，從ES6開(kāi)始，我們會(huì)使用箭頭函數(shù)：

為什么在setTimeout的回調(diào)函數(shù)中可以直接使用this呢？
因?yàn)榧^函數(shù)并不綁定this對(duì)象，那么this引用就會(huì)從上層作用域中找到對(duì)應(yīng)的this

var obj = {
  data: [],
  getData: function() {
    setTimeout(() => {
      // 模擬獲取到的數(shù)據(jù)
      var res = ["abc", "cba", "nba"];
      this.data.push(...res);
    }, 1000);
  }
}

obj.getData();

思考：如果getData也是一個(gè)箭頭函數(shù)，那么setTimeout中的回調(diào)函數(shù)中的this指向誰(shuí)呢？

答案是window；
依然是不斷的從上層作用域找，那么找到了全局作用域；
在全局作用域內(nèi)，this代表的就是window

var obj = {
  data: [],
  getData: () => {
    setTimeout(() => {
      console.log(this); // window
    }, 1000);
  }
}

obj.getData();

四. this面試題

4.1. 面試題一：

var name = "window";
var person = {
  name: "person",
  sayName: function () {
    console.log(this.name);
  }
};
function sayName() {
  var sss = person.sayName;
  sss(); 
  person.sayName(); 
  (person.sayName)(); 
  (b = person.sayName)(); 
}
sayName();

這道面試題非常簡(jiǎn)單，無(wú)非就是繞一下，希望把面試者繞暈：

function sayName() {
  var sss = person.sayName;
  // 獨(dú)立函數(shù)調(diào)用，沒(méi)有和任何對(duì)象關(guān)聯(lián)
  sss(); // window
  // 關(guān)聯(lián)
  person.sayName(); // person
  (person.sayName)(); // person
  (b = person.sayName)(); // window
}

4.2. 面試題二：

var name = 'window'
var person1 = {
  name: 'person1',
  foo1: function () {
    console.log(this.name)
  },
  foo2: () => console.log(this.name),
  foo3: function () {
    return function () {
      console.log(this.name)
    }
  },
  foo4: function () {
    return () => {
      console.log(this.name)
    }
  }
}

var person2 = { name: 'person2' }

person1.foo1(); 
person1.foo1.call(person2); 

person1.foo2();
person1.foo2.call(person2);

person1.foo3()();
person1.foo3.call(person2)();
person1.foo3().call(person2);

person1.foo4()();
person1.foo4.call(person2)();
person1.foo4().call(person2);

下面是代碼解析：

言

隨著現(xiàn)代網(wǎng)頁(yè)應(yīng)用的復(fù)雜性日益增加，傳統(tǒng)的窗口管理工具已無(wú)法滿足開(kāi)發(fā)者和用戶的需求。WinBox，一款前沿的 HTML5 網(wǎng)絡(luò)窗口管理器，以其輕量級(jí)、高性能和完全可定制的特性，正引領(lǐng)著界面管理的革新。

一、輕量級(jí)與高性能

在追求速度和效率的時(shí)代，WinBox 以極簡(jiǎn)的核心打造，體積輕巧卻功能強(qiáng)大。它通過(guò)優(yōu)化的代碼和算法，確保在各種設(shè)備和平臺(tái)上都能提供流暢的體驗(yàn)。無(wú)論是桌面環(huán)境還是移動(dòng)設(shè)備，WinBox 均能無(wú)縫集成，實(shí)現(xiàn)快速響應(yīng)。

二、無(wú)依賴(lài)項(xiàng)

WinBox 設(shè)計(jì)之初就致力于獨(dú)立性，無(wú)需額外插件或庫(kù)的支持即可運(yùn)行。這意味著更少的兼容性問(wèn)題，以及更易于集成到任何現(xiàn)有的網(wǎng)頁(yè)項(xiàng)目中。開(kāi)發(fā)團(tuán)隊(duì)可以專(zhuān)注于功能的實(shí)現(xiàn)，而不必?fù)?dān)心底層的支撐問(wèn)題。

三、完全可定制

定制化是 WinBox 的一大亮點(diǎn)。它提供了豐富的 API 和樣式選項(xiàng)，允許開(kāi)發(fā)者根據(jù)自己的品牌和用戶體驗(yàn)需求，調(diào)整窗口管理器的外觀和行為。從顏色主題到動(dòng)畫(huà)效果，從布局結(jié)構(gòu)到交互邏輯，WinBox 讓每一個(gè)細(xì)節(jié)都盡在掌握。

四、開(kāi)源優(yōu)勢(shì)

作為一款開(kāi)源工具，WinBox 擁有活躍的社區(qū)支持和不斷的功能迭代。開(kāi)源意味著透明度和參與度，任何人都可以為項(xiàng)目貢獻(xiàn)代碼，報(bào)告 bug，或是提出新的想法。這樣的協(xié)作精神確保了 WinBox 能夠不斷進(jìn)化，適應(yīng)未來(lái)的挑戰(zhàn)。

五、應(yīng)用場(chǎng)景

無(wú)論是管理系統(tǒng)界面、開(kāi)發(fā)復(fù)雜的單頁(yè)應(yīng)用（SPA），還是創(chuàng)建交互式的數(shù)據(jù)可視化平臺(tái)，WinBox 都能夠提供堅(jiān)實(shí)的基礎(chǔ)。它的靈活性和易用性使得從初創(chuàng)公司到大型企業(yè)，各種規(guī)模的開(kāi)發(fā)團(tuán)隊(duì)都可以從中受益。

使用示例

<!DOCTYPE html>
<html>
<head>
    <title>WinBox.js 示例</title>
    <link rel="stylesheet" type="text/css" href="winbox.min.css">
    <script src="winbox.min.js"></script>
</head>
<body>
    <button onclick="openWindow()">打開(kāi)窗口</button>

    <script>
        function openWindow() {
            new WinBox({
                title: '示例窗口',
                width: 300,
                height: 200,
                content: '這是一個(gè)使用 WinBox.js 創(chuàng)建的窗口。'
            });
        }
    </script>
</body>
</html>

在上面的代碼中，我們首先引入了 WinBox.js 的樣式表和腳本文件。然后，在頁(yè)面上添加了一個(gè)按鈕，點(diǎn)擊該按鈕將調(diào)用 openWindow 函數(shù)來(lái)創(chuàng)建一個(gè)新的窗口。

在 openWindow 函數(shù)中，我們使用 new WinBox() 構(gòu)造函數(shù)創(chuàng)建了一個(gè)新的窗口對(duì)象。通過(guò)傳遞一個(gè)配置對(duì)象作為參數(shù)，我們可以設(shè)置窗口的標(biāo)題、寬度、高度和內(nèi)容等屬性。在這個(gè)例子中，我們?cè)O(shè)置了窗口的標(biāo)題為 "示例窗口"，寬度為 300 像素，高度為 200 像素，并指定了窗口的內(nèi)容為一段文本。

當(dāng)用戶點(diǎn)擊按鈕時(shí)，將會(huì)彈出一個(gè)新窗口，顯示指定的標(biāo)題和內(nèi)容。你可以根據(jù)需要進(jìn)一步自定義窗口的外觀和行為，例如添加按鈕、表單或其他交互元素。建議查看官網(wǎng)更過(guò)示例：

WinBox.js Modern HTML5 Window Manager

結(jié)語(yǔ)

WinBox 是一個(gè)強(qiáng)大的HTML5窗口管理器。隨著 HTML5 技術(shù)的不斷成熟，WinBox 也將繼續(xù)發(fā)展，為開(kāi)發(fā)者提供一個(gè)更加強(qiáng)大、靈活和高效的開(kāi)發(fā)工具。現(xiàn)在就加入 WinBox 社區(qū)，共同塑造網(wǎng)絡(luò)界面管理的未來(lái)。

在線咨詢

上一篇：手把手教你HTML5實(shí)現(xiàn)定位當(dāng)前地理位置
下一篇：怎么說(shuō)你才會(huì)聽(tīng)？如何在親密關(guān)系中提建議

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷(xiāo)服務(wù)商