一個合格的初級前端工程師需要掌握的模塊筆記

NO IMAGE

Github來源:一個合格的初級前端工程師需要掌握的模塊筆記 | 求星星 ✨ | 給個❤️關注,❤️點贊,❤️鼓勵一下作者

大家好,我是魔王哪吒,很高興認識你~~

哪吒人生信條:如果你所學的東西 處於喜歡 才會有強大的動力支撐

每天學習編程,讓你離夢想更新一步,感謝不負每一份熱愛編程的程序員,不論知識點多麼奇葩,和我一起,讓那一顆四處流蕩的心定下來,一直走下去,加油,2021加油!歡迎關注加我vx:xiaoda0423,歡迎點贊、收藏和評論

不要害怕做夢,但是呢,也不要光做夢,要做一個實幹家,而不是空談家,求真力行。

目錄

前言

如果這篇文章有幫助到你,給個❤️關注,❤️點贊,❤️鼓勵一下作者,接收好挑戰了嗎?文章公眾號首發,關注 程序員哆啦A夢 第一時間獲取最新的文章

❤️筆芯❤️~

Web模塊

html基本結構

  1. html標籤是由<>包圍的關鍵詞。
  2. html標籤通常成對出現,分為標籤開頭和標籤結尾。
  3. 有部分標籤是沒有結束標籤的,為單標籤,單標籤必須使用/結尾。
  4. 頁面所有的內容,都在html標籤中。
  5. html標籤分為三部分:標籤名稱,標籤內容,標籤屬性。
  6. html標籤具有語義化,可通過標籤名能夠判斷出該標籤的內容,語義化的作用是網頁結構層次更清晰,更容易被搜索引擎收錄,更容易讓屏幕閱讀器讀出網頁內容。
  7. 標籤的內容是在一對標籤內部的內容。
  8. 標籤的內容可以是其他標籤。

標籤屬性

  1. class屬性:用於定義元素的類名
  2. id屬性:用於指定元素的唯一id,該屬性的值在整個html文檔中具有唯一性
  3. style屬性:用於指定元素的行內樣式,使用該屬性後將會覆蓋任何全局的樣式設定
  4. title屬性:用於指定元素的額外信息
  5. accesskey屬性:用於指定激活元素的快捷鍵
  6. tabindex屬性:用於指定元素在tab鍵下的次序
  7. dir屬性:用於指定元素中內容的文本方向,屬性只有ltrrtl兩種
  8. lang屬性:用於指定元素內容的語言

事件屬性

  1. window窗口事件,onload,在網頁加載結束之後觸發,onunload,在用戶從網頁離開時發生(點擊跳轉,頁面重載,關閉瀏覽器窗口等)
  2. form表單事件,onblur,當元素失去焦點時觸發,onchange,在元素的值被改變時觸發,onfocus,當元素獲得焦點時觸發,onreset,當表單中的重置按鈕被點擊時觸發,onselect,在元素中文本被選中後觸發,onsubmit,在提交表單時觸發
  3. keyboard鍵盤事件,onkeydown,在用戶按下按鍵時觸發,onkeypress,在用戶按下按鍵後,按著按鍵時觸發。該屬性不會對所有按鍵生效,不生效的有,alt,ctrl,shift,esc
  4. mouse鼠標事件,onclick,當在元素上發生鼠標點擊時觸發,onblclick,當在元素上發生鼠標雙擊時觸發,onmousedown,當元素上按下鼠標按鈕時觸發,onmousemove,當鼠標指針移動到元素上時觸發,onmouseout,當元素指針移出元素時觸發,onmouseup,當元素上釋放鼠標按鈕時觸發。Media媒體事件,onabort,當退出時觸發,onwaiting,當媒體已停止播放但打算繼續播放時觸發。

文本標籤

  1. 段落標籤<p></p>,段落標籤用來描述一段文字
  2. 標題標籤<hx></hx>,標題標籤用來描述一個標題,標題標籤總共有六個級別,<h1></h1>標籤在每個頁面中通常只出現一次
  3. 強調語句標籤,<em></em>,用於強調某些文字的重要性
  4. 更加強調標籤,<strong></strong><em>標籤一樣,用於強調文本,但它強調的程度更強一些
  5. 無語義標籤<span></span>,標籤是沒有語義的
  6. 短文本引用標籤<q></q>,簡短文字的引用
  7. 長文本引用標籤<blockquote></blockquote>,定義長的文本引用
  8. 換行標籤<br/>

多媒體標籤

  1. 鏈接標籤,<a></a>
  2. 圖片標籤,<img/>
  3. 視頻標籤,<video></video>
  4. 音頻標籤,<audio></audio>

列表

  1. 無序列表標籤,ul,li<ul></ul>列表定義一個無序列表,<li></li>代表無需列表中的每一個元素
  2. 有序列表,ol,li
  3. 定義列表,<dl></dl>,定義列表通常和<dt></dt><dd></dd>標籤一起使用

表格

  1. 表格標籤<table></table>
  2. 表格的一行<tr></tr>
  3. 表格的表頭<th></th>
  4. 單元格<td></td>
  5. 表格合併,同一行內,合併幾列colspan="2",同一列內,合併幾行rowspan="3"

表單標籤

  1. 表單標籤<form>

<form></form>表單是可以把瀏覽者輸入的數據傳送到服務器端,這樣服務器端程序就可以處理表單傳過來的數據。

<form method="傳送方式" action="服務器文件">

action,瀏覽者輸入的數據被傳送到的地方

method,數據傳送的方式

  1. 輸入標籤<input/>

name:為文本框命名,用於提交表單,後臺接收數據用。

value:為文本輸入框設置默認值。

type:通過定義不同的type類型,input的功能有所不同。

text	單行文本輸入框
password	密碼輸入框(密碼顯示為***)
radio	單選框 (checked屬性用於顯示選中狀態)
checkbox	複選框(checked屬性用於顯示選中狀態)
file	上傳文件
button	普通按鈕
reset	重置按鈕(點擊按鈕,會觸發form表單的reset事件)
submit	提交按鈕(點擊按鈕,會吃飯form表單的submit事件)
email	專門用於輸入 e-mail
url	專門用於輸入 url
number	專門用於number
range	顯示為滑動條,用於輸入一定範圍內的值
date	選取日期和時間(還包含:month、week、time、datetime、datetime-local)
color	選取顏色

button按鈕,下拉選擇框<select></select>

<option value="提交值">選項</option>是下拉選擇框裡面的每一個選項
  1. 文本域:<textarea></textarea>,當用戶想輸入大量文字的時候,使用文本域。cols,多行輸入域的列數,rows,多行輸入域的行數。

其他語義化標籤

  1. 盒子<div></div>
  2. 網頁頭部<header></header>html5新增語義化標籤,定義網頁的頭部,主要用於佈局,分割頁面的結構
  3. 底部信息<footer></footer>html5新增語義化標籤,定義網頁的底部,主要用於佈局,分割頁面的結構
  4. 導航<nav></nav>html5新增語義化標籤,定義一個導航,主要用於佈局,分割頁面的結構
  5. 文章<article></article>html5新增語義化標籤,定義一篇文章,主要用於佈局,分割頁面的結構
  6. 側邊欄<aside></aside>,語義化標籤,定義主題內容外的信息,主要用於佈局,分割頁面的結構。
  7. 時間標籤<time></time>,語義化標籤,定義一個時間

網頁結構

  1. <!DOCTYPE html> 定義文檔類型,告知瀏覽器用哪一種標準解釋HTML
  2. <html></html>可告知瀏覽器其自身是一個 HTML 文檔
  3. <body></body>標籤之間的內容是網頁的主要內容
  4. <head></head>標籤用於定義文檔的頭部,它是所有頭部元素的容器
  5. <title></title>元素可定義文檔的標題
  6. <link>標籤將css樣式文件鏈接到HTML文件內
  7. <meta>定義文檔的元數據

模塊劃分

  1. 常見的企業網站,多由頭部區,展示圖片區域,主題區域,底部信息區域組成
  2. 網頁拆分原則: – 由上到下 – 由內到外

CSS代碼語法

  1. CSS全稱為層疊樣式表(Cascading Style Sheets),它主要是用於定義HTML內容在瀏覽器內的顯示樣式,如文字大小、顏色、字體加粗等。
  2. css代碼通常存放在<style></style>標籤內
  3. css 樣式由選擇符和聲明組成,而聲明又由屬性和值組成
  4. 選擇符{屬性:值}
  5. 選擇符:又稱選擇器,指明網頁中要應用樣式規則的元素

CSS 放置位置

  1. 行內樣式,不建議使用
  2. 內聯式樣式表
  3. 外聯樣式表

CSS的繼承

  1. CSS的某些樣式是具有繼承性的,繼承是一種規則,它允許樣式不僅應用於某個特定html標籤元素,而且應用於其後代。
  2. 不可繼承樣式:display、margin、border、padding、background、height、min-height、max-height、width、min-width、max-width、overflow、position、left、right、top、bottom、z-index、float、clear
  3. 可以繼承的樣式:letter-spacing、word-spacing、white-space、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform、direction、visibility、cursor

選擇器的種類

  1. 標籤選擇器:通過標籤的名字,修改css樣式
  2. 通配符選擇器:選擇頁面中所有的元素
  3. 屬性選擇器
  4. 後代選擇器:選擇某個父元素下面所有的元素
  5. 一級子元素選則器:選擇某個父元素的直接子元素,後代選擇器是選擇父元素的所有子孫元素,一級子元素原則器只選擇第一級子元素,不會再向下查找元素
  6. id選擇器:通過id查找頁面中唯一的標籤
  7. class選擇器:通過特定的class(類)來查找頁面中對應的標籤,以 .class名稱
  8. 偽類選擇器::hover鼠標移入某個元素;:before在某個元素的前面插入內容;:after在某個元素的後面插入內容
  9. 群組選擇器:可以對多個不同的選擇器設置相同的樣式

選擇器的優先級

  1. 當有不同的選擇器對同一個對象進行樣式指定時,並且兩個選擇器有相同的屬性被賦予不同的值時。
  2. 通過測算那個選擇器的權重值最高,應用哪一個選擇器的樣式
  3. 權重計算方式:
標籤選擇器:1
class選擇器:10
id選擇器:100
行內樣式:1000
!important 最高級別,提高樣式權重,擁有最高級別

背景樣式

  1. 背景顏色background-color
  2. 背景圖片background-image
background-image:url(bg01.jpg);
  1. 背景圖片位置background-position
background-position:10px 100px;
// 代表座標x,y軸
  1. 背景圖片重複background-repeat
background-repeat:no-repeat
// no-repeat 設置圖像不重複,常用
// round 自動縮放直到適應並填充滿整個容器
// space 以相同的間距平鋪且填充滿整個容器
  1. 背景圖片定位background-attachment
background-attachment:fixed
// 背景圖像是否固定或者隨著頁面的其餘部分滾動
// background-attachment的值可以是scroll(跟隨滾動),fixed(固定)
  1. background縮寫
background:#ff0000 url(bg01.jpg) no-repeat fixed center

字體樣式

  1. 字體族font-family
font-family:"微軟雅黑","黑體";
  1. 字體大小font-size
font-size:12px;

網頁默認字體大小是16px

  1. 字體粗細font-weight
font-weight:400;
normal(默認)
bold(加粗)
bolder(相當於<strong>和<b>標籤)
lighter (常規)
100 ~ 900 整百(400=normal,700=bold)
  1. 字體顏色color
顏色的英文單詞color:red;
十六進制色:color: #FFFF00;
RGB(紅綠藍)color:rgb(255,255,0)
RGBA(紅綠藍透明度)A是透明度在0~1之間取值。color:rgba(255,255,0,0.5)
  1. 字體斜體font-style
font-style:italic
normal 文本正常顯示
italic 文本斜體顯示
oblique 文本傾斜顯示

文本屬性

  1. 行高line-height
line-height:50px;

可以將父元素的高度撐起來

  1. 文本水平對齊方式text-align
left 左對齊
center 文字居中
right 右對齊
  1. 文本所在行高的垂直對齊方式vertical-align
baseline 默認
sub 垂直對齊文本的下標,和<sub>標籤一樣的效果
super 垂直對齊文本的上標,和<sup>標籤一樣的效果
top 對象的頂端與所在容器的頂端對齊
text-top 對象的頂端與所在行文字頂端對齊
middle 元素對象基於基線垂直對齊
bottom 對象的底端與所在行的文字底部對齊
text-bottom 對象的底端與所在行文字的底端對齊
  1. 文本縮進text-indent
text-indent:2em;

通常用在段落開始位置的首行縮進

  1. 字母之間的間距letter-spacing
  2. 單詞之間間距word-spacing
  3. 文本的大小寫text-transform
capitalize 文本中的每個單詞以大寫字母開頭。
uppercase 定義僅有大寫字母。
lowercase 定義僅有小寫字母。
  1. 文本的裝飾text-decoration
none 默認。
underline 下劃線。
overline 上劃線。
line-through 中線。
  1. 自動換行word-wrap
word-wrap: break-word;

基本樣式

  1. 寬度width
width:200px;
定義元素的寬度
  1. 高度height
height:300px
元素默認沒有高度
需要設置高度
可以不定義高度,讓元素的內容將元素撐高
  1. 鼠標樣式cursor

定義鼠標的樣式cursor:pointer

default默認
pointer小手形狀
move移動形狀
  1. 透明度opacity
opacity:0.3
透明度的值0~1之間的數字,0代表透明,1代表完全不透明
透明的元素,只是看不到了,但是還佔據著文檔流
  1. 可見性visibility
visibility:hidden;
visible 元素可見
hidden 元素不可見
collapse 當在表格元素中使用時,此值可刪除一行或一列,不會影響表格的佈局。
  1. 溢出隱藏 overflow

設置當對象的內容超過其指定高度及寬度時如何顯示內容

visible 默認值,內容不會被修剪,會呈現在元素框之外。
hidden 內容會被修剪,並且其餘內容是不可見的。
scroll 內容會被修剪,但是瀏覽器會顯示滾動條以便查看其餘的內容。
auto 如果內容被修剪,則瀏覽器會顯示滾動條以便查看其餘的內容。
  1. 邊框顏色outline

input文本輸入框自帶邊框,且樣式醜陋,我們可以通過outline修改邊框

outline:1px solid #ccc;
outline:none清除邊框

樣式重置

早期的網頁沒有css樣式,為了界面美觀,很多元素自帶margin、padding等樣式,但這些樣式在不同瀏覽器解析的值都不一樣,需要將css樣式重置,保證在不同瀏覽器顯示一致。

清除元素的margin和padding
去掉自帶的列表符
去掉自帶的下劃線

盒模型樣式

  1. 塊狀元素、內聯元素和內聯塊狀元素。

塊級元素:

  • 每個塊級元素都從新的一行開始,並且其後的元素也另起一行。
  • 元素的高度、寬度、行高以及頂和底邊距都可設置。
  • 元素寬度在不設置的情況下,是它本身父容器的100%,除非設定一個寬度。

行內元素:

  • 和其他元素都在一行上
  • 元素的高度、寬度、行高及頂部和底部邊距不可設置
  • 元素的寬度就是它包含的文字或圖片的寬度,不可改變。

行內塊狀元素:

  • 和其他元素都在一行上
  • 元素的高度、寬度、行高以及頂和底邊距都可設置。
  1. 元素分類轉換display

block:將元素轉換為塊級元素

inline:將元素裝換為行級元素

inline-block:將元素轉換為內聯塊元素

none: 將元素隱藏

  1. 描邊border
border:2px solid #f00;

線條的樣式:

dashed(虛線)| dotted(點線)| solid(實線)。

css樣式中允許只為一個方向的邊框設置樣式:

下描邊border-bottom:1px solid red;
上描邊border-top:1px solid red;
右描邊border-right:1px solid red;
左描邊border-left:1px solid red;
  1. 間距margin
div{margin:20px 10px 15px 30px;}
  1. 內填充padding
padding:10px

浮動float

  1. 浮動原理
  • 浮動使元素脫離文檔普通流,漂浮在普通流之上的。

  • 浮動元素依然按照其在普通流的位置上出現,然後儘可能的根據設置的浮動方向向左或者向右浮動,直到浮動元素的外邊緣遇到包含框或者另一個浮動元素為止,且允許文本和內聯元素環繞它。

  • 浮動會產生塊級框(相當於設置了display:block),而不管該元素本身是什麼。

  1. 清除浮動帶來的影響

clear 清除浮動:

none : 不清除(默認值)。
left : 不允許左邊有浮動對象
right : 不允許右邊有浮動對象
both : 不允許兩邊有浮動對象
  1. 利用偽類實現清除浮動
.clearFix {
content="";
display:block;
width:0;
height:0;
clear:both;
}

定位position

  1. 定位功能可以讓佈局變的更加自由。
  2. 層模型–絕對定位(相對於父類)

絕對定位使元素的位置與文檔流無關,因此不佔據空間。這一點與相對定位不同,相對定位實際上被看作普通流定位模型的一部分,因為元素的位置相對於它在普通流中的位置。

#box_relative {
position: absolute;
left: 30px;
top: 20px;
}

如下圖所示:

一個合格的初級前端工程師需要掌握的模塊筆記

如果想為元素設置層模型中的絕對定位,需要設置position:absolute(絕對定位),這條語句的作用將元素從文檔流中拖出來,然後使用left、right、top、bottom屬性相對於其最接近的一個具有定位屬性的父包含塊進行絕對定位。如果不存在這樣的包含塊,則相對於body元素,即相對於瀏覽器窗口。

  1. 層模型–相對定位(相對於原位置)

相對定位是一個非常容易掌握的概念。如果對一個元素進行相對定位,它將出現在它所在的位置上。然後,可以通過設置垂直或水平位置,讓這個元素“相對於”它的起點進行移動。

#box_relative {
position: relative;
left: 30px;
top: 20px;
}

如下圖所示:

一個合格的初級前端工程師需要掌握的模塊筆記

如果想為元素設置層模型中的相對定位,需要設置position:relative(相對定位),它通過left、right、top、bottom屬性確定元素在正常文檔流中的偏移位置。相對定位完成的過程是首先按static(float)方式生成一個元素(並且元素像層一樣浮動了起來),然後相對於原位置移動,移動的方向和幅度由left、right、top、bottom屬性確定,偏移前的位置保留不動。

  1. 層模型–固定定位(相對於網頁窗口)
position:fixed

absolute定位類型類似,但它的相對移動的座標是視圖(屏幕內的網頁窗口)本身。由於視圖本身是固定的,它不會隨瀏覽器窗口的滾動條滾動而變化,除非你在屏幕中移動瀏覽器窗口的屏幕位置,或改變瀏覽器窗口的顯示大小,因此固定定位的元素會始終位於瀏覽器窗口內視圖的某個位置,不會受文檔流動影響,這與background-attachment:fixed屬性功能相同。

瀏覽器默認樣式

  1. 頁邊距

IE默認為10px,通過bodymargin屬性設置

要清除頁邊距一定要清除這兩個屬性值

body { margin:0; padding:0;}
  1. 段間距

IE默認為19px,通過pmargin-top屬性設置

p默認為塊狀顯示,要清除段間距,一般可以設置

p { margin-top:0; margin-bottom:0;}

html5

HTML5 的優勢

  1. 解決跨瀏覽器,跨平臺問題
  2. 增強了 web 的應用程序

HTML5 廢棄元素

frame frameset noframes
acronym applet dir
basefont big center font strike tt

HTML5 新增元素

<header>	用於定義文檔或節的頁眉
<footer>	用於定義文檔或節的頁腳
<article>	用於定義文檔內的文章
<section>	用於定義文檔中的一個區域(或節)
<aside>	用於定義與當前頁面或當前文章的內容幾乎無關的附屬信息
<figure>	用於定義一段獨立的引用,經常與說明(caption)<figcaption>配合使用,通常用在主文中的圖片,代碼,表格等。
<figcaption>	用於表示是與其相關聯的引用的說明/標題,用於描述其父節點<figure>元素裡的其他數據。
<hgroup>	用於對多個<h1>~<h6>元素進行組合
<nav>	用於定義頁面上的導航鏈接部分
<mark>	用於定義高亮文本
<time>	用於顯示被標註的內容是日期或時間(24小時制)
<meter>	用於表示一個已知最大值和最小值的計數器
<progress>	用於表示一個進度條
<audio>	定義聲音,比如音樂或其他音頻流
<video>	定義視頻,比如電影片段或其他視頻流

HTML5 表單相關元素和屬性

input新增type類型
color	用來創建一個允 許用戶使用顏色選擇器,或輸入兼容 CSS 語法的顏色代碼的區域
time	生成一個時間選擇器
datetime	生成一個 UTC 的日期時間選擇器
datetime-local	生成一個本地化的日期時間選擇器
date	顯示一個日期輸入區域,可同時使用日期選擇器,結果值包括年、月、日,不包括時間。
month	生成一個月份選擇器,它結果值包括年份和月份, 但不包括日期
week	生成一個選擇的幾周的選擇器
email	生成一個 E-mail 輸入框
number	生成一個只能輸入數字的輸入框
range	生成一個拖動條,通過拖動條,使得用戶只能輸入指定範圍,指定步長的值
search	生成一個專門用於輸入搜索關鍵字的文本框
tel	生成一個只能輸入電話號碼的文本框
url	生成一個 URL 輸入框
HTML5 input新增屬性
placeholder	主要用在文本框,規定可描述輸入字段預期值的簡短的提示信息
autocomplete	為了完成表單的快速輸入,一般瀏覽器提供了自動補全的功能選擇
autofocus	當為某個表單控件增加該屬性後,當瀏覽器打開這個頁面, 這個表單控件會自動獲得焦點
list	為文本框指定一個可用的選項列表,當用戶在文本框中輸 入信息時,會根據輸入的字符,自動顯示下拉列表提示,供用戶從中選擇
pattern	用於驗證表單輸入的內容,通常 HTML5 的 type 屬性,比如 email、tel、 number、url 等,已經自帶了簡單的數據格式驗證功能了,加上 pattern 屬性後, 驗證會更加高效
novalidate	當提交表單時不對其進行驗證
required	必需在提交之前填寫輸入字段
spellcheck	拼寫檢查,為<input>、<textarea>等元素新增屬性
formenctype	規定在發送到服務器之前應該如何對錶單數據進行編碼
formtarget	帶有兩個提交按鈕的表單,會提交到不同的目標窗口
multiple	一次上傳多個文件
maxlength wrap	<textarea>新增<br />maxlength:用於規定文本區域最大字符數。<br />wrap:是否包含換號符(soft/ hard)

css3

CSS3 新增選擇器

  1. 兄弟選擇器

元素 1 ~ 元素 2 第1個元素之後,所有的元素2都會被選擇,且這些元素和第一個元素擁有同一個父元素(兩個元素之間不一定要相鄰)。

  1. 屬性選擇器
  • E[attribute^=value] 用於選取帶有以指定值開頭的屬性值的元素
  • E[attribute$=value] 用於選取屬性值以指定值結尾的元素
  • E[attribute*=value] 用於選取屬性值中包含指定值的元素,位置不限,也不限制整個單詞
  1. 偽類選擇器
  • :root 選擇文檔的根元素,HTML 裡,永遠是<html>元素
  • :last-child 向元素添加樣式,且該元素是它的父元素的最後一個子元素
  • :nth-child(n) 向元素添加樣式,且該元素是它的父元素的第 n 個子元素
  • :nth-last-child(n) 向元素添加樣式,且該元素是它的父元素的倒數第 n 個子 元素
  • :only-child 向元素添加樣式,且該元素是它的父元素的唯一子元素
  • :first-of-type 向元素添加樣式,且該元素是同級同類型元素中第一個元 素
  • :last-of-type 向元素添加樣式,且該元素是同級同類型元素中最後一個 元素
  • :nth-of-type(n) 向元素添加樣式,且該元素是同級同類型元素中第 n 個元 素
  • :nth-last-of-type(n) 向元素添加樣式,且該元素是同級同類型元素中倒數第 n 個元素
  • :only-of-type 向元素添加樣式,且該元素是同級同類型元素中唯一的元素
  • :empty 向沒有子元素(包括文本內容)的元素添加樣式
  1. 偽元素選擇器
  • :enabled 向當前處於可用狀態的元素添加樣式,通常用於定義表單的樣式或者超鏈接的樣式
  • :disabled 向當前處於不可用狀態的元素添加樣式,通常用於定義表單的 樣式或者超鏈接的樣式
  • :checked 向當前處於選中狀態的元素添加樣式
  • :not(selector) 向不是 selector 元素的元素添加樣式
  • :target 向正在訪問的錨點目標元素添加樣式
  • ::selection 向用戶當前選取內容所在的元素添加樣式

CSS3 新增屬性

  1. 新增背景屬性
  • background-clip 設置背景覆蓋範圍 border-box/paddingbox/content-box
  • background-origin 設置背景覆蓋的起點 border-box/paddingbox/content-box
  • background-size 設置背景的大小 cover/contain/長度/百分比
  1. 新增的字體文本相關屬性
  • text-overflow 設置當文本溢出元素框時處理方式 clip/ellipsis
  • word-wrap 規定單詞的換行方式 normal/break-word
  • word-break 規定自動換行的方式 normal/break-all/keep-all
  1. 新增盒模型屬性
  • box-shadow 陰影 h-shadow v-shadow <br />blur spread color inset
  • resize 調整尺寸 none/both/horizontal
  • outline-offset 輪廓的偏移量 length/inherit

新增變形動畫屬性

  1. transform
  • translate(x,y)
  • rotate(angle)
  • scale(x,y)
  • skew(angleX ,angleY)
  1. transform-origin

表示元素旋轉的中心點,默認值為 50% 50%。

  • 第一個值表示元素旋轉中心點的水平位置,它還可以賦值 left、right、center、長度、百分比

  • 第二個值表示元素旋轉中心點的垂直位置,它還可以賦值 top、bottom、 center、長度、百分比。

3D 變形屬性

  1. transform 3D函數

transform 增加了三個變形函數:

  • rotateX:表示元素沿著 x 軸旋轉。
  • rotateY:表示元素沿著 y 軸旋轉。
  • rotateZ:表示元素沿著 z 軸旋轉。
  1. transform-style用來設置嵌套的子元素在 3D 空間中顯示效果。

  2. perspective設置成透視效果,透視效果為近大遠小。

  3. perspective-origin設置 3D 元素所基於的 x 軸和 y 軸,改變 3D 元素的底部位置,該屬性取值同 transform-origin,默認值為 50% 50%。

  4. backface-visibility用來設置當元素背面面向屏幕時是否可見,通常用於設置 不希望用戶看到旋轉元素的背面。

它的屬性值有visible(背面可見,默認值)、 hidden(背面不可見)兩個。

CSS3 的過渡屬性

  • transition-delay 設置過渡的延遲時間
  • transition-duration 設置過渡的過渡時間
  • transition-timing-function 設置過渡的時間曲線
  • transition-property 設置哪條 CSS 使用過渡
  • transition 一條聲明設置 所有過渡屬性

CSS3 的動畫屬性

  1. animation
  • @keyframes 定義動畫選擇器
  • animation-name 使用@keyframes 定義的動畫
  • animation-delay 設置動畫的持續動畫時間
  • animation-timing-function 設置動畫的時間曲線
  • animation-iteration-count 設置動畫播放次數
  • animation-direction 設置動畫反向播放
  • animation-play-state 設置動畫播放狀態
  • transition 一條聲明設置所有動畫屬性

CSS3 新增多列屬性

  • column-count 設置元素應該被分隔的列數
  • column-width 設置列的寬度
  • columns 一條聲明設置列寬和列數 column
  • column-gap 設置列之間的間隔
  • column-span 設置元素應該橫跨的列數
  • column-rule-style 設置列之間間隔的樣式
  • column-rule-color 設置列之間間隔的顏色
  • column-rule-width 設置列之間間隔的寬度
  • column-rule 一條聲明設置列之間間 隔所有屬性

CSS3新增單位

px、em、rem、vh、 vw和% 移動端長度單位

使用CSS單位px、em、rem、vh、 vw等實現頁面佈局。

  • px:絕對單位,頁面按精確像素展示
  • em:相對單位,基準點為父節點字體的大小,如果自身定義了font-size按自身來計算(瀏覽器默認字體是16px),整個頁面內1em不是一個固定的值。

em會根據父級元素的大小而變化,但是如果嵌套了多個元素,要計算它的大小,是很容易出錯的,這樣就引申出了rem

  • rem:相對單位,可理解為”root em”, 相對根節點html的字體大小來計算,CSS3新加屬性。
  • %% 百分比,相對長度單位,相對於父元素的百分比值
  • vw、vh、vmin、vmax 主要用於頁面視口大小布局

vw:viewpoint width,視窗寬度,1vw等於視窗寬度的1%。

vh:viewpoint height,視窗高度,1vh等於視窗高度的1%。

  • vmin:vwvh中較小的那個。
  • vmax:vwvh中較大的那個。

彈性盒模型

彈性盒模型的語法基礎概念

任何一個容器都可以指定彈性佈局

JavaScript

JavaScript基礎

  1. 外部引入js文件:通過<script src="main.js"></script>
  2. 關鍵詞

一個合格的初級前端工程師需要掌握的模塊筆記

  1. 變量名大小寫敏感
  2. 命名規範

JavaScript數據類型

  1. 字符串(String)
  2. 數字(Number)
  3. 布爾值(Boolean)
  4. 未定義(Undefined)
//undefined有兩種結果
//1、真的沒定義
alert(typeof dada); //undefined
//2、定義了,但是沒有放東西進去
var dada;
alert(dada); //undefined

undefined,表示未定義或只聲明未給值的變量

  1. 對象(Object)

js中內置瞭如下的對象:

  • Object 是所有JS對象的超類(基類),JS中的所有對象都是繼承自Object對象的
  • Array 數組對象 定義數組屬性和方法
  • Number 數字對象
  • Boolean 布爾對象 布爾值相關
  • Error 錯誤對象 處理程序錯誤
  • Function 函數對象 定義函數屬性和方法
  • Math 數學對象
  • Date 日期對象
  • RegExp 對象正則表達式對象 定義文本匹配與篩選規則
  • String 字符串對象 定義字符串屬性和方法

算術運算

var y = 3;

一個合格的初級前端工程師需要掌握的模塊筆記

強制轉換

  1. 字符串轉數字parseInt() parseFloat() isNaN()
  2. 數字轉為字符串toString()

賦值運算

  1. 複合的賦值運算符 += -= *= /= %=

關係運算

  1. 關係運算:> < <= >= != == === ==和=== !=和!==

“=”、“==”、“===”有什麼區別?

  1. = 是賦值符號
  2. == 忽略數據類型的判斷 是否相等
  3. === 數值和數據類型都要相等才判斷為相等

邏輯運算

  • 邏輯與&&
  • 邏輯或 ||
  • 邏輯非 !
  • 複合邏輯表達式

三元運算

條件運算符?:
三元運算符:(比較表達式)?結果1:結果2

分支循環

程序運行的三大結構:順序結構、選擇結構、循環結構

  • 單分支選擇:if語句
  • 雙分支選擇:if-else語句
  • 多分支語句:if-else if-else 語句

switch

語法格式

switch(num){ //表達式
case 1:
//執行代碼塊1
break;  //中斷執行,跳出
...
default:  //默認,其他都不是的情況下執行
//執行代碼塊
break;
}
//強調:break非常重要,如果不加break的話,程序會一直繼續往下執行;

while

語法格式:

while循環的特點:不知道具體執行的次數時,使用最合適

while(條件表達式){
//要重複執行的代碼段 - 循環體
}

do-while

語法格式:

do{
//循環體
}while(循環條件判斷);
  • do-while是先執行循環體,再檢測循環條件。
  • do-while能保證循環體至少執行一次。
  • 其他循環無法保證循環至少執行一次。

for

for(1循環變量初始化;2循環條件判斷;4循環變量的修改){
3循環體
}

break和continue

  1. break 退出循環
  2. continue 跳過本次循環,繼續下一次循環

數組

  1. 數組定義
var arr = new Array();
var arr = [];
  1. 字面量方式定義
var arr = ["1","2"];
  1. 向數組賦值
arr[0] = "1";
arr[1] = "2";
alert(arr[0]+","+arr[1]);
  1. 數組索引
arr[0]+","+arr[1]
  1. 數組長度
//語法
arr.length
//最後一個元素的索引
arr.length-1

數組方法

  1. indexOf

數組可以通過indexOf()來搜索一個指定的元素的位置,如未找到返回 -1

  1. concat

concat()方法把當前的 數組 和 另一個 數組連接起來,並返回一個新的 數組

var newArr = arr1.concat(arr2,"dada");
  1. push和pop

push()向數組的末尾添加若干元素,pop() 則把 數組的最後一個元素刪除掉

arr.push("a","b");
console.log(arr);
arr.pop();
console.log(arr);
//空數組繼續pop不會報錯,而是返回undefined
  1. unshift和shift

unshift() 向數組前面添加若干元素,shift() 則把數組的第一個元素刪除掉

arr.unshift("a","b");
arr.shift();
  1. slice

slice() 截取數組的部分元素,然後返回一個新的數組

console.log(arr.slice(0,3)); //從索引0開始,到索引3結束,但不包括3
console.log(arr.slice(3));  //從索引3開始到結束

如果不給slice()傳遞任何參數,就會從頭到尾截取所有元素。利用這一點,可以很容易的複製一份新的數組

  1. sort

sort() 可以對當前數組排序

var arr = ["b","c","a"];
arr.sort();
arr;//["a","b","c"]
  1. reverse

reverse() 把整個數組的元素給掉個個

  1. join

join() 方法把數組的每個元素用指定的字符串連接起來

var arr = ["a","b","c"];
arr.join("-"); //"a-b-c"
  1. splice

可以從指定的索引開始刪除若干元素,然後再從該位置添加若干元素

二維數組

var arr = [[1,2,3],["a","b","c"],"dadaqianduan"];
var x = arr[1][1]; //b

字符串

  1. 字符串屬性length-字符串的長度屬性
  2. slice()
slice(start[,end]),start--開始索引 end--結束索引
  1. substr()
substr(start[,length]),start:開始,取length個字符
  1. split()

split([separator[,limit]]),按條件分割字符串,返回數組

  1. indexOf()

在父串中首次出現的位置,從0開始!沒有返回-1

  1. lastIndexOf()

倒序查找

  1. charAt(index)

charAt(index) 指定索引的字符

  1. toLowerCase()

轉小寫

  1. toUpperCase()

轉大寫

正則表達式

創建正則表達式

var reg = new RegExp("a","i");
// 將匹配字母a,第二個參數i,表示匹配時不分大小寫

元字符

一個合格的初級前端工程師需要掌握的模塊筆記

一個合格的初級前端工程師需要掌握的模塊筆記

模式修飾符

一個合格的初級前端工程師需要掌握的模塊筆記

正則方法

  1. test方法

檢索字符串中指定的值。

  1. exec方法

該方法用於檢索字符串中的正則表達式的匹配,該函數返回一個數組,其中存放匹配的結果。如果未找到匹配,則返回值為 null

支持正則的 String方法

一個合格的初級前端工程師需要掌握的模塊筆記

js對象

定義對象

//使用new運算符
var obj = new Object();
//字面量
var obj={
name:"dadaqianduan",
age:12,
sex:"男"
}

對象的數據訪問

//用.語法
obj.name
//用[]語法
obj["name"]

JSON

json(JavaScript Object Notation),是一種輕量級的數據交換格式。

var man = {
"name":"dadaqianduan",
"age":12,
"sex":"男"
};

內置對象

  • Object 是所有JS對象的超類(基類),JS中的所有對象都是繼承自Object對象的
  • Array 數組對象
  • Number 數字對象
  • Boolean 布爾對象
  • Error 錯誤對象
  • Function 函數對象
  • Math 數學對象
  • Date 日期對象
  • RegExp 對象正則表達式對象
  • String 字符串對象

Math 方法

  • abs() 絕對值 (去除正負)
  • random() 隨機數,0-1之間的隨機數,1不會出現
  • round() 四捨五入
  • floor(x) 下舍入(向下取整)
  • ceil(x) 上舍入(向上取整)
  • max(x,y) x 和 y 中的最大值
  • min(x,y) x 和 y 中的最小值
  • cos(x) x的餘弦
  • sin(x) x的正弦
  • sqrt(x) 返回x的平方根
  • pow(3,4) 返回34次方

Date 方法

  • getFullYear() 返回 年(4位)
  • getMouth() 返回 月(0–11)
  • getDate() 返回 日期
  • getDay() 返回 星期 (0-6)
  • getHours() 返回 小時
  • getMinutes() 返回 分鐘
  • getSeconds() 返回秒
  • getTime() 返回1970年1月1日午夜到指定日期(字符串)的毫秒數
  • setFullYear() 設置 年份
  • setMouth() 設置 月
  • setDate() 設置 天
  • setHours() 設置小時
  • setMinutes() 設置 分鐘
  • setSeconds() 設置 秒
  • setTime() 使用毫秒的形式設置時間對象
//判斷閏年
function runYear(year){
if(year%4==0 && year%100!=0 || year%400==0){
return true;
}
};

面向對象是一種編程思想

  1. 類是一個抽象的概念
  2. 對象:具體的事物
  3. 類是對象的抽象,對象是類的具體實例
  4. 類不佔用內存,對象佔用內存空間
  5. 對象的訪問 聲明對象
  6. 遍歷對象 – for in 循環

定義對象

  1. 字面量創建
  2. 工廠模式
// 工廠模式中的函數,首字母大寫
function Cat(n,c){
return {
name:n,
color:c,
say:function(){
alert("dadaqianduan")
}
}
}
  1. 構造函數

Javascript提供了一個構造函數(Constructor)模式。

所謂”構造函數”,其實就是一個普通函數,但是內部使用了this變量。

對構造函數使用new運算符,就能生成實例,並且this變量會綁定在實例對象上。

構造函數首字母大寫

構造函數中的this,指向的 實例化的對象

function Cat(n,c){
this.name=n;
this.color=c;
}

生成實例對象

var cat1 = new Cat("dadaqianduan","黃色")
// 自動含有一個constructor屬性,指向它們的構造函數

實例:自動含有一個constructor屬性,指向它們的構造函數

alert(cat1.constructor == Cat); //true
  1. Javascript還提供了一個instanceof運算符

驗證 原型對象 與 實例對象 之間的關係。

var txt = 'dadaqianduan';
alert(txt instanceof String); //false
var age = 123123;
alert(age instanceof Number); //false
var res = /\d/;
alert(res instanceof RegExp); //true
var arr = [];
alert(arr instanceof Array); //true

原型和原型鏈

構造函數都有一個prototype屬性,指向 另一個對象 。這個對象的 所有屬性和方法,都會被構造函數的實例繼承。

所有的函數都是 Function 的實例。

在構造函數上都有一個 原型 屬性prototype,prototype也是一個對象;這個對象上有一個 constructor 屬性,該屬性指向的就是構造函數。

實例對象上有一個_proto_屬性,該屬性也指向原型對象,該屬性不是標準屬性,不可以用在編程中,該屬性用於瀏覽器內部使用。

constructor

  1. constructor是構造函數 創建的實例的屬性,該屬性的作用是 指向 創建當前對象的 構造函數。
son.constructor == parent; // true

每個原型都有一個constructor屬性,指向該關聯的構造函數。

function Person() {
}
console.log(Person===Person.prototype.constructor)  //true

關係圖:

一個合格的初級前端工程師需要掌握的模塊筆記

區分一下普通對象和函數對象

function f1(){};
var f2 = function(){};
var f3 = new function(){};
var o1 = {};
var o2 = new Object();
var o3 = new f1();
console.log(typeof Object); //function
console.log(typeof Function);//function
console.log(typeof f1) //function
console.log(typeof f2) // function
console.log(typeof f3) //function
console.log(typeof o1) //object
console.log(typeof o2) //object
console.log(typeof o3)// object
  1. JavaScript中,原型是一個對象,原型的作用是 實現對象的繼承。
  2. JavaScript中的所有函數對象中,都存在一個屬性,prototype,該屬性對應當前對象的原型。
  3. 所有的JavaScript對象,都存在一個_proto_屬性,_proto_屬性指向實例對象的構造函數的原型。
var p = new Person(); // 實例對象
console.log(p._proto_ === Person.prototype); // true

p是實例對象, Personp的構造函數。 p_proto_屬性 指向 構造函數 Person的原型。

js是如何通過原型進行繼承的:

var parent = function(name) {
this.name = name;
}
parent.prototype.getName = function() {
return this.name;
}
var son = new parent("dadaqianduan");
console.log(son.getName()); // dadaqianduan

son繼承了parent的原型中的函數屬性getName

原型鏈

除了Objectprototype的原型是null外,所有的對象 和 原型 都有自己的原型,對象的原型 指向 原型對象。

在層級多的關係中,多個原型層層相連 則 構成了 原型鏈。

在查找一個對象的屬性時,如當前對象找不到該屬性,就會沿著原型鏈一直往上查找,直到找到為止,如果到了原型鏈頂端,沒找到,則返回undefined

原型

  1. 所有引用類型都有一個__proto__屬性
  2. 所有函數都有一個prototype屬性
  3. 所有引用類型的__proto__屬性指向它構造函數的prototype

構造函數和實例原型之間的關係:

Person(構造函數) 的 prototype 指向 Person.prototype

一個合格的初級前端工程師需要掌握的模塊筆記

  1. __proto__

每個對象,除null外,都有的屬性叫__proto__,這個屬性會指向該對象的原型。

function Person() {
}
var person = new Person();
console.log(person.__proto__ === Person.prototype); // true

關係圖:

一個合格的初級前端工程師需要掌握的模塊筆記

關係圖:

一個合格的初級前端工程師需要掌握的模塊筆記

關係圖:

一個合格的初級前端工程師需要掌握的模塊筆記

梳理:

寫一個構造函數Person,一般構造函數區別與普通函數要求首字母大寫:

function Person(){}

prototype原型

原型 是 一個對象,在原型prototype 上定義的屬性,通過“繼承”,實現 實例 也有這個屬性。

繼承 是在 new操作符內部實現的。

構造函數 內部 有個 prototype的屬性,通過這個屬性就能訪問到 原型。

Person是構造函數,Person.prototype是原型。

  1. 實例

有構造函數,可以在原型上創建可繼承的屬性,通過new操作符創建實例:

function Person(){}
person = new Person()
da = person instanceof Person // 檢查person是否是Person的實例
da // true
// 繼承
function Person() {}
Person.prototype.name = 'dadaqianduan.cn'
person = new Person()
da = person.name // 實例繼承的屬性
da // 'dadaqianduan.cn'
  1. proto

實例通過_proto_訪問到原型。

function Person() {}
Person.prototype.name = 'dadaqianduan.cn'
person = new Person()
da = person.__proto__ === Person.prototype
da // true
  1. constructor構造函數

原型也可以通過constructor訪問到構造函數

function Person() {}
Person.prototype.name = 'dadaqianduan.cn'
person = new Person
da = Person.prototype.constructor === Person
da // true

小結

  1. 所有引用類型(函數,數組,對象)都擁有__proto__屬性。
  2. 所有函數擁有prototype屬性。
  3. 每個實例對象(Object)都有一個私有屬性,為__proto__指向它的構造函數的原型對象(prototype)。該原型對象也有一個自己的原型對象__proto__,層層向上直到一個對象的原型對象為nullnull 沒有原型,並作為這個原型鏈中的最後一個環節。

常用的JavaScript設計模式

百度百科:

  設計模式(Design pattern)是一套被反覆使用、多數人知曉的、經過分類編目的、代碼設計經驗的總結。

  使用設計模式是為了可重用代碼、讓代碼更容易被他人理解、保證代碼可靠性。 毫無疑問,設計模式於己於他人於系統都是多贏的;設計模式使代碼編制真正工程化;設計模式是軟件工程的基石脈絡,如同大廈的結構一樣。

單體模式

單體是一個用來劃分 命名空間並將一批相關的屬性和方法組織在一起的對象,如果它可以被實例化,那麼它只能被實例化一次。

特點:

(1)可以來劃分命名空間,從而清除全局變量所帶來的危險。

(2)利用分支技術來來封裝瀏覽器之間的差異。

(3)可以把代碼組織的更為一體,便於閱讀和維護。

工廠模式

工廠模式的定義:

提供創建對象的接口,意思就是根據領導(調用者)的指示(參數),生產相應的產品(對象)。

  1. 創建一個對象常常需要複雜的過程,所以不適合在一個複雜的對象中。
  2. 創建對象可能會導致大量的重複代碼,也可能提供不了足夠級別的抽象。

工廠就是把成員對象的創建工作轉交給一個外部對象,好處在於消除對象之間的耦合(也就是相互影響)。

分類:

簡單工廠模式:使用一個類,通常為單體,來生成實例。

複雜工廠模式定義:將其成員對象的實列化推到子類中,子類可以重寫父類接口方法以便創建的時候指定自己的對象類型。

父類只對創建過程中的一般性問題進行處理,這些處理會被子類繼承,子類之間是相互獨立的,具體的業務邏輯會放在子類中進行編寫。

應用場景:

以下幾種情景下工廠模式特別有用:

(1)對象的構建十分複雜;

(2)需要依賴具體環境創建不同實例;

(3)處理大量具有相同屬性的小對象。

單例模式

單例模式定義了一個對象的創建過程,此對象只有一個單獨的實例,並提供一個訪問它的全局訪問點。也可以說單例就是保證一個類只有一個實例,實現的方法一般是先判斷實例存在與否,如果存在直接返回,如果不存在就創建了再返回,這就確保了一個類只有一個實例對象。

使用閉包方式來實現單例:

var single = (function(){
var unique;
function getInstance(){
    // 如果該實例存在,則直接返回,否則就對其實例化
if( unique === undefined ){
unique = new Construct();
}
return unique;
}
function Construct(){
// ... 生成單例的構造函數的代碼
}
return {
getInstance : getInstance
}
})();

unique是返回對象的引用,而 getInstance是靜態方法獲得實例。Construct 是創建實例的構造函數。

可以通過 single.getInstance() 來獲取到單例,並且每次調用均獲取到同一個單例。這就是 單例模式 所實現的效果。

應用場景:

  1. 單例模式是一種常用的模式,有一些對象我們往往只需要一個,比如全局緩存、瀏覽器的window對象。
  2. 藉助單例模式,可以把代碼組織的更為一致,方便閱讀與維護。

函數

函數的定義

// 使用關鍵字function 定義函數
// 定義函數,吃飯
function dada(){
console.log("點餐");
console.log("拿筷子");
console.log("吃東西");
}

局部變量和全局變量

  1. 變量的作用域
  • 函數體內的變量:局部變量,僅在函數體內可以使用
  • 函數體外的變量:全局變量,對全局可見
  1. 局部變量
function da(){
var dadada = "dada";//局部變量
alert(dadada);
}
da(); //調用
alert(dadada); //報錯訪問不到,函數體外對dadada不可見
  1. 全局變量
var da = "我是全局變量";
function home(){
var da = "我是局部變量";
alert(da);
}
home();
-----------------------
var a=3;  //全局
function da(){
alert(a); //3
var b=5;
alert(b);//5
}
da();
console.log(b); //報錯,訪問不到

典型錯誤,不使用var聲明的變量也是全局變量(不建議這樣用)

function dada(){         
da = "123";  //全局變量         
}         
dada();         
alert(da);         

返回值

return的含義

//理解返回值
function getNum(){
return 2; //return的作用,將函數的結果返回給當前函數名
}
var result = getNum(); //如果希望返回值保存,就放在變量中;
console.log(result);  //2

return使用方法

  • return只能返回一個數據
  • 如果函數中沒有return,則返回undefined

return可以用來結束一個函數

function Fun(){
console.log("helloweb");
return;
console.log("我還會執行嗎?");
}
Fun();
function fn(){
for(var i=0;i<10;i++){
if(i == 3){ //循環3次就return
break;   
}
console.log("誰最帥!"); //打印3次
}
return "看return會不會執行我"; //return不執行,break執行
}

匿名函數

//使用函數表達式定義函數
//say本質上是一個指向函數對象的變量,我們稱為函數變量
var say = function(){
console.log("hello");
};
say();
var oBtn = document.getElementById("box");
oBth.onclick = function(){
alert("你點擊我啦");
}

自運行函數

示例:

function fn(){
//這裡是代碼
}
fn(); //運行fn函數
----------------------
var fn = function(){
//這裡是代碼
}
fn(); //運行fn函數
---------------------
//(fn)() 等價於 fn()
(function(){
//這裡是代碼
})()

閉包

閉包 (closure)有權訪問另外一個函數作用域中的變量的函數。

創建閉包的常見方式有:

  • 在一個函數內部創建另外一個函數,並且把這個函數return出去。
  • 用函數為元素綁定事件,當事件發生時,還可以操作該函數中的變量。

特性

  1. 可以讀取其它函數內部的變量
  2. 讓這些變量的值始終保持在內存中

示例:

//方式1----函數內部return一個函數
function run(){
var a=10;
return function(){
a++;
console.log(a);
};
};
var b=run();
//alert(b);   //b是一個函數
b();//可以訪問另外一個作用域中變量的函數
//方式2--函數內部為綁定事件
function addClick(){
var txt="abcd";
document.getElementById('box').onclick=function(){
alert(txt);
}
};
addClick();
//方式3--函數內部將變量作為回調函數的參數
function play(num,fn){
if(num>10){
return fn && fn(num);
};
};
var ss=play(20,function(n){
return n+1;
});
console.log(ss);

BOM

BOM概述

BOM(browser object model)瀏覽器對象模型

BOM提供了獨立於內容而與瀏覽器窗口進行交互的對象、載入頁面的相關信息,其核心對象是window對象

BOM 沒有相關標準,每個瀏覽器都定義了自己的屬性,並且,都有其自己對BOM的實現方式

W3C雖然沒有為BOM統一制定標準,但是其中的窗口對象、導航對象等,因功能趨同,實際上已經成為默認的標準

window方法

  • alert() 提示框
  • confirm() 帶有確認 取消 按鈕的提示框
  • prompt() 帶有可輸入內容的文本域的提示框
  • setInterval() 間隔定時器,可按照指定的週期(以毫秒計)來調用函數或計算表達式
  • setTimeout() 超時定時器,在指定的毫秒數後調用函數
  • clearInterval() 清除間隔定時器
  • clearTimeout() 清除超時定時器
  • requestAnimationFrame 幀定時器

frames [ ] 框架集

把瀏覽器窗口分成幾個窗框,每個窗框同時取得多個URL地址,顯示不同網頁內容。

history 歷史記錄

  • window.history.go(1) 前進(跳轉)
  • window.history.go(-1) 後退(跳轉)
  • window.history.forward() 前進
  • window.history.back() 後退

location 定位

  • window.location.href='http://www.baidu.com/' 頁面跳轉
  • window.location.reload() 頁面重載

navigator 導航

window.navigator.userAgent 瀏覽器類型、版本、操作系統類型、瀏覽器引擎類型等信息

screen 屏幕

window.screen.width 返回當前屏幕寬度(分辨率值)
window.screen.height 返回當前屏幕高度(分辨率值)

document 文檔

windowdocument的屬性,代表所有html的元素,這部分是js主要操作的部分,因此這部分必須規範,才能進行統一開發。因此,W3C將這部分進行了規範—DOM標準。

DOM

DOM(document object model )文檔對象模型,定義了表示和修改文檔所需的對象、行為和屬性,以及這些對象之間的關係。

DOM對象方法

  • getElementById(id) 通過id獲取DOM對象(對象)
  • getElementsByTagName(tag) 通過標籤獲取DOM對象(“類似數組”對象)
  • getElementsByName(name) 通過name獲取DOM對象(“類似數組”對象)
  • getElementsByClassName(class) 通過class獲取DOM對象(IE8以下不支持)

操作DOM間的關係

  • createElement(tag) 創建元素
  • removeChild(對象) 刪除元素
  • appendChild(對象) 插入元素
  • replaceChild(替換對象,被替換對象) 替換元素
  • insertBefore(對象,目標對象) 前部插入

appendChild replaceChild insertBefore 都具有移動對象的功能

節點屬性:

父節點	parentNode
第一級所以子節點	childNodes
第一個子節點	firstChild
最後一個子節點	lastChild
前一個兄弟節點	previousSbiling
後一個兄弟節點	nextSibling

克隆節點:

cloneNode( 布爾值 ) 
true:複製本節點以及所有子節點 
false:只複製節點本身

DOM節點屬性

  • setAttribute("屬性名",屬性值) 設置屬性
  • getAttribute( 屬性名 ) 獲取屬性
  • removeAttribute( 屬性名 ) 刪除屬性:
  • hasAttributes(屬性名) 判斷屬性是否存在(返回ture/false

事件

var oDiv=document.getElementById('box');
oDiv.onclick=function(){   
alert('hello world'); 
};
  1. addEventListener( ) 增加事件監聽
  2. removeEventListener( ) 刪除事件監聽

事件分類

  • window事件
  1. onload 加載(某個頁面或圖像被完成)
  2. onunload 用戶退出頁面
  3. onresize 窗口或框架被調整尺寸
  4. onscroll 滾動條事件
  • 鼠標事件
onclick 鼠標點擊
ondblclick 鼠標雙擊
onmousedown 鼠標按鍵按下
onmouseup 鼠標按鍵被鬆開
onmouseout 鼠標從某元素移開
onmouseover 鼠標被移到某元素之上
onmouseenter 鼠標進入某元素
onmouseleave 鼠標離開某元素
onmousemove 鼠標移動
oncontextmenu 右鍵菜單
  • input事件
onblur 元素失去焦點。
onfocus 元素獲得焦點。input輸入框
onchange 內容改變時觸發。
  • 鍵盤事件
onkeydown 按鍵按下
onkeypress 按鍵按下並釋放
onkeyup 按鍵釋放
  • form事件
onreset 表單重置(重置按鈕)
onsubmit 表單提交(form內有text被聚焦,直接回車可觸發onsubmit)

事件對象

獲取事件數據,不同的事件會有不同數據

oDiv.onclick=function(ev){
//ev就是事件對象
}

事件流

  1. 對象的默認行為
  2. 阻止默認行為:event.preventDefaut()

事件流

事件流方向:捕獲 → 事件目標→冒泡

  1. 事件捕獲
  2. 事件目標
  3. 事件冒泡 與 阻止事件冒泡

事件目標

ev.targrt
ev.target.nodeName
ev.target.tagName

事件委派(delegate)

原理: 將事件綁定在父級上,利用事件冒泡原理,通過判斷事件的“目標元素”來觸發父級上綁定的事件

作用

  • 不用分別為子元素綁定事件
  • 為未知元素綁定事件

事件監聽

可以為一個元素,同時綁定多個事件

obj.addEventListener(事件,回調函數,冒泡/捕獲) ;
btn.addEventListener("click",function(ev){ //ev 事件對象
alert('dadaqianduan');
},false)   //false 冒泡階段

jQuery

一款輕量級的js庫
豐富的DOM選擇器
簡單的事件操作
重新封裝方法,讓操作DOM屬性更簡單
鏈式操作
豐富的動畫效果
Ajax操作支持
瀏覽器兼容
插件擴展開發,可擴展性強
不能向後兼容
插件兼容性
多個插件衝突

jQuery 選擇器

  • id選擇器
$('#box')
  • class選擇器
$('.box')
  • 標記選擇器
$('p')
  • * 代表所有標籤

屬性選擇器

  • [attribute] 匹配包含給定屬性的元素
  • [attribute=value] 匹配給定的屬性是某個特定值的元素
  • [attribute!=value] 匹配給定的屬性不是某個特定值的元素
  • [attribute^=value] 匹配給定的屬性是以某些值開始的元素
  • [attribute$=value] 配給定的屬性是以某些值結尾的元素
  • [attribute*=value] 匹配給定的屬性是以包含某些值的元素

位置選擇器

:first匹配第一個元素

:last獲取最後一個元素

:not 去除所有與給定選擇器匹配的元素

:even 匹配所有索引值為偶數的元素,從 0 開始計數

:odd 匹配所有索引值為奇數的元素,從 0 開始計數

:eq 匹配一個給定索引值的元素

:gt 匹配所有大於給定索引值的元素

:lt 匹配所有小於給定索引值的元素

後代選擇器

$("選擇器1 選擇器2 ……")

子代選擇器

$("選擇器1>選擇器2>……")

選擇器對象

$("選擇器").each(function(index){this}) 選擇器對象的遍歷
$("選擇器").find() 找前面選擇器匹配到的元素的子元素
$("選擇器").not() 在前面選擇器匹配到的元素中去除某個或某多個
$("選擇器").add() 在前面選擇器中在追加節點

子元素

:first-child 匹配第一個子元素
:last-child 匹配最後一個子元素
:first-of-type 選擇所有相同的元素名稱的第一個兄弟元素
:last-of-type 選擇所有相同的元素名稱的最後一個兄弟元素
:nth-child 匹配其父元素下的第N個子或奇偶元素
:nth-last-child() 選擇所有他們父元素的第n個子元素。計數從最後一個元素開始到第一個
:nth-last-of-type() 選擇的所有他們的父級元素的第n個子元素,計數從最後一個元素到第一個
:nth-of-type() 選擇同屬於一個父元素之下,並且標籤名相同的子元素中的第n個
:only-child 如果某個元素是父元素中唯一的子元素,那將會被匹配
:only-of-type 選擇所有沒有兄弟元素,且具有相同的元素名稱的元素。

表單

:input 匹配所有 input, textarea, select 和 button 元素
:text 匹配所有的單行文本框
:password 匹配所有密碼框
:radio 匹配所有單選按鈕
:checkbox 匹配所有複選框
:submit 匹配所有提交按鈕
:image 匹配所有圖像域
:reset 匹配所有重置按鈕
:button 匹配所有按鈕
:file 匹配所有文件域
:hidden 匹配所有隱藏域

表單對象屬性

:enabled 匹配所有可用元素
:disabled 匹配所有禁用元素
:checked 匹配所有選中的被選中元素
:selected 匹配所有選中的option元素

DOM操作

  1. 查找獲取
text() - 設置或返回所選元素的文本內容
html() - 設置或返回所選元素的內容
val() - 設置或返回表單字段的值
  1. 內部插入
append() 向每個匹配的元素內部追加內容
appendTo() 把所有匹配的元素追加到另一個指定的元素集合中
prepend() 向每個匹配的元素內部前置內容
prependTo() 把所有匹配的元素前置到另一個、指定的元素集合中
  1. 外部插入
after() 在每個匹配的元素之後插入內容
before() 在每個匹配的元素之前插入內容
insertAfter() 把所有匹配的元素插入到另一個、指定的元素集合的後面
insertBefore() 把所有匹配的元素插入到另一個、指定的元素集合的前面
  1. 包裹
wrap() 把所有匹配的元素用其他元素的結構化標記包裹起來
unwrap() 這個方法將移出元素的父元素。
wrapAll() 將所有匹配的元素用單個元素包裹起來
wrapInner() 將每一個匹配的元素的子內容(包括文本節點)用一個HTML結構包裹起來
  1. 替換
replaceWith() 將所有匹配的元素替換成指定的HTML或DOM元素
replaceAll() 用匹配的元素替換掉所有 selector匹配到的元素
  1. 刪除
empty() 刪除匹配的元素集合中所有的子節點
remove() 從DOM中刪除所有匹配的元素
  1. 克隆
clone() 克隆匹配的DOM元素並且選中這些克隆的副本

JQuery 事件

頁面載入

$(document).ready(function(){
})
//簡寫方式
$(function(){
})

事件綁定

$("#box").on("click",function(){
/**/
})
$("#box").off("click,mousemove");

容器適應

獲取元素的寬高有以下幾種方法:

$(選擇器).width() | innerWidth() | outerWidth()
$(選擇器).height() | innerHeight() | outerHeight()
innerWidth()和innerHeight()是指元素裡面內容的寬高加上內邊距的寬高;
outerWidth()和outerHeight()是指元素裡面內容的寬高加上內邊距的寬高和邊框;

獲取窗口的寬高的方法如下:

$(window).width()
$(window).height()

標籤樣式操作

$(選擇器).css (樣式屬性名[,值])	方法設置或返回被選元素的一個或多個樣式 屬性
$(選擇器).addClass(類別名)	增加類別樣式
$(選擇器).removeClass(類別名)	去除類別樣式
$(選擇器).toggleClass(類別名)	交替使用類別樣式:有這個類別樣式就去除,沒有就追加;

滑動

show() 顯示元素
hide() 隱藏元素
slidDown() 向下滑動顯示
slideUp() 向上滑動收起隱藏
slideToggle() 交替滑動狀態
fadeIn() 淡入
fadeOut() 淡出
fadeTo() 動畫到指定透明度
fadeToggle() 交替淡出、淡入狀態

自定義動畫

animate() 自定義動畫
stop() 停止所有在指定元素上正在運行的動畫
delay() 設置一個延時來推遲執行隊列中之後的項目
finish() 停止當前正在運行的動畫,刪除所有排隊的動畫,並完成匹配元素所有的動畫

AJAX

$.ajax()
$.get() 通過遠程 HTTP GET 請求載入信息
$.post() 通過遠程 HTTP POST 請求載入信息
$.getJSON() 通過 HTTP GET 請求載入 JSON 數據

工作原理

AJAX = 異步 JavaScript 和 XML

在瀏覽器中輸入url地址請求服務器時,是通過Ajax發送http請求給服務器,服務的響應結果也是先返回給Ajax,先Ajax處理之後在返回給瀏覽器顯示在頁面。

XMLHttpRequest對象

//第一步:
xhr = new XMLHttpRequest();
//第二步
xhr.open("post","test.php");
//第三步:
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
//第四步:
xhr.send("a=1&b=2");
//第五步:
xhr.onreadystatechange=function(){
if(xhr.status==200 && xhr.readyState==4){
var result=xhr.responseText;//獲取到結果
alert(result);
}
}

XML和HTML的區別

一個合格的初級前端工程師需要掌握的模塊筆記

get() 和post()

$.get(url,data,callback,dataType)
$.post(url,data,callback,dataType)

AJAX工作原理

Ajax的基本格式如下:

$.ajax({
url:'請求的資源',
type:'請求方式get|post',
data:'發送數據 名=值&名=值',
dataType:'回傳值的類型',
success:function(res){ res接收返回值
}
})

HTTP

HTTP(超文本傳輸協議)是一種通信協議,它允許將超文本標記語言(HTML)文檔從Web服務器傳送到客戶端的瀏覽器。

HTTP消息結構

  • request line

請求行:第一行必須是請求行,用來說明請求類型、要訪問的資源以及使用的HTTP版本。

  • header

請求頭:用來說明服務器要使用的附加信息。

  • blank line

空白行:請求頭部與請求體之間必須有一個空白行,必不可少

  • body

請求體:也叫請求正文,可以添加任意的其他數據

狀態行:

Host	接受請求的服務器地址,可以是:IP:端口 或 域名
User-Agent	發送請求的應用程序名稱(瀏覽器信息)
Connection	指定與連接相關的屬性,如:Connection:Keep-Alive
Accept-Charset	客戶端可以接受的編碼格式
Accept-Encoding	客戶端可以接受的數據壓縮格式
Accept-Language	客戶端可以接受的語言
referer	當前請求來自哪個鏈接(防盜連)
content-type	請求的文件類型
cookie	該網站相關的會話信息

url請求過程

  1. 首先客戶端與服務器需要建立連接。
  2. 建立連接後,客戶端發送一個請求給服務器,請求方式的格式為:統一資源標識符(URL)、協議版本號,客戶端信息和可能的內容。
  3. 服務器接到請求後,給予相應的響應信息,其格式為一個狀態行,包括信息的協議版本號、一個成功或錯誤的代碼status Code狀態碼),後邊服務器信息實體信息和可能的內容。
  4. 客戶端接收完, 服務器所返回的信息後,與服務器斷開連接。

如果在以上過程中的某一步出現錯誤,那麼產生錯誤的信息將返回到客戶端。對於用戶來說,這些過程是由HTTP自己完成的,用戶只要用鼠標點擊,等待信息顯示就可以了。

預加載

預加載:將所有所需的資源提前請求加載到本地,後面在需要使用就直接從緩存中存取資源

  1. 使用image對象
<img src="" style="display:none"/>
  1. 使用image對象
var image = new Image();
image.src="";
  1. 使用XMLHttpRequest對象
xmlhttprequest.onreadystatechange=callback;
xmlhttprequest.onprogress=progressCallback;
xmlhttprequest.open("GET",http://xx.jpg,true);
xmlhttprequest.send();
function callback(){
if(xmlhttprequest.readyState=4 && xmlhttprequest.status==200){
var responseText=xmlhttprequest.responseText;
}else{
console.log("Request was unsuccessful" + xmlhttprequest.status);
}
}
function progressCallback(e){
c=e||event;
if(e.lengthComputable){
console.log("Received"+e.loaded+"of"+e.total+"bytes");
}
}

懶加載

首屏加載,技術上顯示要用的技術就是圖片懶加載,即到可視區域再加載。

性能優化

JavaScript代碼優化

  1. 代碼與結構分離
  2. 樣式與結構的分離
  3. 數據與代碼分離
  • AMD:Asynchronous Module Definition,即異步模塊加載機制。
  • CMD:Common Module Definition,即通用模塊定義規範
  • 導出(export)與導入(import)兩個模塊

提升文件加載速度

  1. 合併JavaScript代碼,儘可能少的使用script標籤。
  2. 無堵塞加載JavaScript
  3. 動態創建script標籤來加載

webpack

webpack是一個module bundler(模塊構建工具),由於 JavaScript 應用程序的複雜性不斷增加,構建工具已成為 web 開發中不可或缺的一部分。它幫助我們去打包、編譯和管理項目需要的眾多資源文件和依賴庫。

webpack支持CommonJSAMD和ES6模塊系統,並且兼容多種JS書寫規範,可以處理模塊間的依賴關係,所以具有更強大的JS模塊化的功能,它能壓縮圖片,對CSS、js文件進行語法檢查、壓縮、編譯打包。

webpack的特點

  1. 可以很好的用於單頁應用
  2. 同時支持 require()import 模塊語法
  3. 允許非常前沿的 code splitting(代碼分割) 特性
  4. 熱加載可以讓 React、Vue.js 和其它類似框架的本地開發更快
  5. 它是目前最受歡迎的構建工具

webpack的缺點

  1. 不適合 web 開發的初學者
  2. 對於 CSS、圖片和其它非 JS 資源文件時,需要先混淆處理
  3. 文檔不夠完善
  4. 變化很大,不同版本的使用方法存在較大差異

安裝

  1. 全局安裝:
//安裝全局webpack
npm install webpack -g
//安裝全局webpack-cli
npm install webpack-cli -g

webpack基本應用

SPA(single page web application) 單頁應用程序,是webpack打包的典型應用

示例,主要的幾個部分組成:

index.html	主文件
JS文件	可能有多個JS文件,可通過webpack合併打包為一個文件
CSS文件	可能有多個CSS文件,可通過webpack合併打包為一個文件
圖片	可通過webpack壓縮優化

示例:

//a.js
var run=function(){
console.log("aaa");
};
//node CommonJS模塊
//module.exports.run=run;
//ES6語法
export default {run};
//b.js
var play=function(arg){
console.log(arg);
};
//node CommonJS模塊
//module.exports.play=play;
//ES6語法
export default {play};
//index.js
//node CommonJS 引入js模塊
//var a=require("./a.js");
//var b=require("./b.js");
//ES6 引入js模塊
import a from "./a.js";
import b from "./b.js";
var txt = "hello world";
a.run();
b.play(txt);

dist文件夾(存放打包後的文件,可以先不創建,打包時可以自動創建)-dis,dist,bulit

打包:

webpack --mode development

配置文件入門

默認的配置文件名為:webpack.config.js

核心概念

一個配置文件的基本結構如下:

//配置項
module.exports={
//入口  
entry:".....",
//輸出配置     
output:{......},
//模塊    
module: {......},
//解析         
resolve:{......},        
//插件(數組)
plugins:[......],
//開發服務器    
devServer:{......}  
};
entry	入口 定義入口文件,默認入口文件:./src/index.js
output	輸出 定義出口文件,默認出口文件:./dist/main.js
resolve	解析 路徑映射、省略後綴名等
module	模塊 定義不同loader,讓 webpack 能夠處理非 JavaScript 模塊
plugins	插件 擴展webpack功能
devServer	開發服務器 用於配置webpack-dev-server選項

設置配置文件自動完成:

// webpack是基於node構建的,只支持CommonJS模塊
module.exports={  
//入口配置
entry:'./src/js/main.js',  
//出口配置
output:{  
path:__dirname +'/dist', //輸出目錄  __dirname:本文件所在硬盤路徑(node全局變量)
filename:'js/main.js' //文件名稱(可以有子目錄)
}
};

修改webpack.json文件

webpack.json中的"scripts"下增加:

"scripts": {  
"dev": "webpack --mode development",
"build": "webpack --mode production"  
},  

執行打包

npm run dev

entry 和 output

  1. entry 入口配置 是指頁面中的入口文件。也就是打包從哪個文件開始。默認入口文件:./src/index.js

  2. output 出口配置 是指生成的文件輸出到哪個地方去,默認出口文件:./dist/main.js,主要有以下屬性:

path	輸出路徑
filename	輸出文件名

示例:

//入口
entry: {   
index: './src/js/main.js',  
},
//輸出
output: {
path: __dirname + "/dist",//打包後的文件存放的地方
filename:"main.js"//打包後輸出的文件名
},

module

webpack 只能打包js文件(只理解 JavaScript語法),無法識別其他語法的文件,如果要讓webpack打包其他文件,首先需要讓webpack識別不同文件,這就需要特別的模塊,這種模塊統稱為loader

loader分類

轉換編譯	script-loader,babel-loader,ts-loader,coffee-loader
處理樣式	style-loader,css-loader,less-loader,sass-loader,postcss-loader
處理文件	raw--loader,url-loader,file-loader
處理數據	csv-loader,xml-loader
處理模板語言	html-loader,pug-loader,jade-loader,markdown-loader
清理和測試	mocha-loader,eslint-loader

常用loader

css-loader	解析css語句
style-loader	將css-loader解析後的文本,添加<style>標籤
babel-loader	將ES6+、JSX語法轉成ES5低版本語法
url-loader	
url-loader對未設置或者小於limit byte設置的圖片以base64的格式進行轉換 
對於大於limit byte的圖片用file-loader進行解析
file-loader	
解析項目中的url引入(包括img的src和background的url) 
修改打包後文件引用路徑,使之指向正確的文件
less-loader	less編譯器
vue-loader	
Vue也推出了自己的vue-loader,可以方便的打包 .vue文件 的代碼
在vue-cli(快速構建單頁應用的腳手架)中得到應用。

css loader

//index.js
import a from "./a.js";
import b from "./b.js";
var txt = "hello world";
a.run();
b.play(txt);
//打包css文件
import "./style.css";  //注意:是相對路徑

安裝loaderloader也是依賴包,需要安裝)

npm install css-loader --save-dev
npm install style-loader --save-dev

module中定義ccs模塊相關的配置:

module: {
rules: [
{
test: /.css$/, //正則
//把css添加到html的style標籤裡(style-loader要先加載)
loader: ['style-loader','css-loader'],  //loader或者use
exclude: /node_modules/, //正則 排除node_modules目錄
}
]
},

babel loader

babel是一個 js 編譯器,它通過語法轉換器支持最新版本的 JavaScript (包括JSX、TypeScript等新語法)。 這些插件允許你立刻使用新語法,無需等待瀏覽器支持。

使用Babel首先要配置 .babelrc 文件,該文件用來設置轉碼規則和插件(json格式),存放在項目的根目錄下。

tips:在linux系統中,rc結尾的文件通常代表運行時自動加載的文件、配置等等。

.babelrc配置文件中,主要是對預設(presets) 和 插件(plugins) 進行配置。.babelrc配置文件一般為如下:

{
"presets": [
["env",{"modules":false}] //modules是配置項
],  
"plugins": [
[ "transform-runtime",{"polyfill":false}]  //polyfill是配置項
]
}

預設 對js最新的語法糖進行編譯,並不負責轉譯新增的api和全局對象。

插件 控制如何轉換代碼,babel默認只轉換新的js語法,而不轉換新的API

plugins

插件(plugins)可以擴展webpack的功能,loader不能做的處理都能交給plugin來做。

如:HtmlWebpackPlugin 插件簡化了HTML文件的創建,可以通過模板文件,生成一個HTML文件

resolve

resolve(譯:解析)配置webpack如何尋找模塊對應的文件。

alias	(譯:別名)通過別名將原來導入路徑映射成一個新的導入路徑
extensions	(譯:擴展)數組 導入模塊時,可以省略的文件後綴名
resolve: {
alias: {
"@": path.join(__dirname,"./src") //將項目根目錄下的src目錄,映射為 @
},
extensions:[".js", ".json"]
}

其他配置項示例:

devtool	是否生成以及如何生成sourcemap
devserver	開啟一個本地開發服務器
watch	監聽文件變化並自動打包
watchoption	用來定製watch模式的選項
performance	打包後命令行如何展示性能提示,如果超過某個大小是警告還是報錯

webpack-dev-server

webpack-dev-server是一個小型的web服務器,可以自動監視項目文件的變化,自動刷新瀏覽器,其HMRHot Module Replacement 熱模塊替換)方式只替換更新的部分,而不是重載頁面,大大提高了刷新效率。

需要本地安裝 webpack和webpack-cli
npm install webpack --save-dev
npm install webpack-cli --save-dev
npm install webpack-dev-server --save-dev

webpack.config.js配置文件:

let path=require("path");
//HtmlWebpackPlugin插件
let HtmlWebpackPlugin=require('html-webpack-plugin');
let htmlPlugin=new HtmlWebpackPlugin({  
filename:"index.html", //生成的新文件
template:__dirname+"/src/index_temp.html",  //模板文件
minify:{ //壓縮
removeComments:true,  //刪除註釋
collapseWhitespace:true  //合併空格
},
});
//配置項
module.exports = {
//輸入
entry:'./src/js/main.js',//主入口文件
//輸出
output: {
path: __dirname + "/dist",	//打包後的文件存放的地方
filename:"main.js"			//打包後輸出的文件名
},
//模塊
module: {
rules: [
{
test: /.css$/, //正則 解析css文件
//把css添加到html的style標籤裡(style-loader要先加載)
use: ['style-loader','css-loader'],
exclude: /node_modules/, //正則 必須要寫exclude!!
},
{
test: /\.js$/,
use: 'babel-loader',
exclude: /node_modules/, //正則 必須要寫exclude!!
},
]
},
//插件
plugins:[
htmlPlugin        
],
//解析
resolve: {
alias: {
"@": path.join(__dirname,"./src") //將項目根目錄下的src目錄,映射為 "@"
},
extensions:['.js', '.json']
},
//開發服務器
devServer: {
inline:true,	//支持dev-server自動刷新
port:"8080",	//端口
open:true,		//自動打開默認瀏覽器
},
}

webpack-dev-serve.cmd是定義在.bin目錄中的

"scripts": {
"dev": "webpack-dev-server --hot",
"build": "webpack --mode production"
}

運行

npm start

vue

MVC模式

MVC模式是移動最廣泛的軟件架構之一,把應用程序強制性地劃分為三部分:模型(Model)、視圖(View)和控制器(Controller)。

MVVM模式

MVVM模式是把MVC模式的Controller改成ViewModelView的變化會自動更新ViewModel,ViewModel的變化也會自動同步到View上顯示。

基礎語法

示例:

el	 	把 Vue 實例掛載到DOM元素上,通過id綁定html元素
data	 	數據對象,Vue實例的數據(注意:數據不要與methods中的方法重名)
methods	 	事件對象,包含事件所要觸發的函數(注意:方法名不要與data中的數據重名)
computed	 	計算屬性
watch	 	監聽器
directives	 	自定義指令
鉤子(hook)函數(8個)	 	hook(鉤子)函數,不同生命週期引發的動作
路由鉤子函數(3個)	 	路由組件在不同狀態時觸發
components	 	組件容器
template	 	定義模板,可以是字符串,也可以是”#“選擇器
props	 	用於接收來自父組件的數據
router	 	路由
store	 	vuex 狀態

實例屬性/方法

vm.$el	Vue 實例使用的根 DOM 元素
vm.$data	Vue的data配置項
vm.$options	用於當前 Vue 實例的初始化選項
vm.$props	當前組件接收到的 props 對象
vm.$parent	父實例(如果當前實例有的話)
vm.$root	當前組件樹的根 Vue 實例
vm.$children	當前實例的直接子組件
vm.$refs	原生DOM元素或子組件註冊引用信息
vm.$slots	用來訪問被插槽分發的內容
vm.$router	全局路由(vue-router插件)
vm.$store	vuex 狀態對象(vuex插件)

方法

vm.$emit()	子組件可以使用 $emit 觸發父組件的自定義事件
vm.$set()	Vue.set的別名
設置對象的屬性, 這個方法主要用於避開 Vue 不能檢測屬性被添加的限制
vm.$watch	偵聽數據變化
vm.$on()	監聽當前實例上的自定義事件。事件可以由vm.$emit觸發。回調函數會接收所有傳入事件觸發函數的額外參數。
vm.$mount	可以使用 vm.$mount() 手動掛載(Vue 實例化時沒有 el 選項)
vm.$destroy	完全銷燬一個實例。清理它與其它實例的連接,解綁它的全部指令及事件監聽器。
觸發 beforeDestroy 和 destroyed 的鉤子。
屬性綁定指令
v-bind	動態改變dom標籤上的屬性<br />v-bind :class="" 簡寫 :class=""

生命週期

4個階段:創建→掛載→更新→銷燬

beforeCreate	實例創建前	
created	實例創建後	初始化數據(Ajax數據請求,獲取Vuex狀態、路由切換等)
beforeMount	載入前	
mounted	載入後	需要操作DOM時(應用第三方插件等)
beforeUpdate	更新前	
updated	更新後	通過事件修改數據、v-model引發數據變化、AJAX異步更新數據
beforeDestroy	實例銷燬前	
destroyed	實例銷燬後	切換路由(組件將被銷燬)

計算屬性

多次訪問計算屬性會立即返回之前的計算結果,而不必再次執行函數。

計算屬性具有緩存

數組的更新檢查

push()、pop()、shift()、unshift()
splice()、sort()、reverse()	
變異方法,可觸發視圖更新
filter(), concat() 和 slice()	
非變異方法,不觸發視圖更新
它們可以返回新數組,用新數組替換舊數組,就可以刷新視圖

事件對象

event.type	觸發的事件類型
event.target	觸發事件的HTML元素
event.preventDefault( )	阻止事件的默認行為
event.stopPropagation( )	阻止事件冒泡

Vue組件

  1. 創建組件
let myTemp={
template:'#temp', //模板id
data: function(){ //必須為函數(閉包)
return { //必須有return,返回值為對象{}
title:"dadaqianduan"
}
}
  1. 註冊組件
//在components配置項中註冊組件
let app=new Vue({
el:"#box",
components:{myTemp}
});
//全局註冊組件,還可以使用Vue.component方法(僅限全局註冊,不建議使用)
Vue.component('myTemp',MyTemp);
  1. 使用組件
<!--在Vue實例中使用組件-->
<div id='box'>
<!--組件名如果用駝峰定義,改為短橫線命名-->
<my-temp></my-temp>
</div>
  1. 事件通信
  • 父子組件之間的數據操作,是通過props屬性和$emit()方法來實現的

路由使用

定義路由包括路由路徑(path)、路由名稱(name)、路由組件對象(component

routes: [
{
path: '/',        // 路由路徑 
name: 'home',     // 路由名稱
component: Home   // 路由組件對象 
},
{
path: '/users',
name: 'Users',
component: UserComponent
},
{
path: '/about',
name: 'about',  
component: () => import( './views/About.vue')
}
]
  1. 動態路由
routes: [
{
path: '/users/:username/post/:postid',
name: 'Users',
component: UserComponent,
}
]
/user/:username	
/user/tom	
{username:'tom'}
/user/:username/post/:postId	
/user/tom/post/3	
{username:'tom',postId:'3'}

路由導航

  1. 路由導航守衛

什麼是路由導航守衛可以簡單理解為路由組件的生命週期回調函數。

// 路由導航守衛
// 作用:在第一次進入當前路由組件之前被調用
// 使用場景:獲取ajax數據
beforeRouteEnter(to, from, next) {
// to:表示要進入的路由組件
// from:表示將要離開的路由組件
// next:表示後續操作函數
// 此時還未進入到組件中,故不能使用this獲取當前組件的實例
next(function(app) {
// 進入到當前組件後,才執行的回調
// 此時回調參數 app 表示當前組件的實例對象
axios.get('/users/' + app.id).then(res => {
app.user = res.data.data;
});
});
}
beforeRouteUpdate(to, from, next) {
// 此時,可以使用this表示當前組件對象
const app = this;
// 發送ajax請求
// this表示切換前的狀態
// to表示要切換到的路由對象 route
axios.get('/users/' + to.params.id).then(res => {
app.user = res.data.data;
});
// 執行後續
next();
}
  1. 編程式路由導航
methods: {
login(){
if(登陸成功){
//實現頁面跳轉
this.$router.push('/');
}
}
}
  1. push()

跳轉到指定的路由地址, 並把當前地址寫入到history中,參數可以是字符串路徑或描述地址信息的對象

字符串	router.push('home')
對象	router.push({path:'home'})
命名的路由	router.push({name:user,params:{userId:1}})
  1. replace( ):跳轉到指定路由,它不會向 history 添加新記錄,而是替換掉當前的 history 記錄。

  2. 全局路由導航守衛

示例:

// 全局路由導航守衛
router.beforeEach((to, from, next) => {  
});

嵌套路由

children: [
{
path: "",
component: 路由名
},
{
path: "路徑名",
component: 路由名
}
]

命名視圖

使用<router-view> 可以使用 name 屬性為其設置名稱,即命名路由的視圖簡稱命名視圖。

示例:

<router-view/> 
<router-view name="content"></router-view> 
import About from './views/About.vue';
routes: [  
{
path: "/about",
name: "about",
components: {
default: About,
content: UserComponent
}
}
]

回看筆者往期高贊文章,也許能收穫更多喔!

❤️關注+點贊+收藏+評論+轉發❤️,原創不易,鼓勵筆者創作更好的文章

點贊、收藏和評論

我是Jeskson(達達前端),感謝各位人才的:點贊、收藏和評論,我們下期見!(如本文內容有地方講解有誤,歡迎指出☞謝謝,一起學習了)

我們下期見!

文章持續更新,可以微信搜一搜「 程序員哆啦A夢 」第一時間閱讀,回覆【資料】有我準備的一線大廠資料,本文 www.dadaqianduan.cn/#/ 已經收錄

github收錄,歡迎Stargithub.com/webVueBlog/…

相關文章

Flutter使用Riverpod+Retrofit構建MVVM開發模式

教你寫出高性能JavaScript

花五分鐘把代碼註釋也規範一哈子?

Mondrian多維分析引擎數據緩存功能分析與擴展實現