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

文章目錄

一個合格的初級前端工程師需要掌握的模塊筆記
- 前言
- - Web模塊
  - - html基本結構
    - 標簽屬性
    - 事件屬性
    - 文本標簽
    - 多媒體標簽
    - 串列
    - 表格
    - 表單標簽
    - 其他語意化標簽
    - 網頁結構
    - 模塊劃分
    - CSS代碼語法
    - CSS 放置位置
    - CSS的繼承
    - 選擇器的種類
    - 選擇器的優先級
    - 背景樣式
    - 字體樣式
    - 文本屬性
    - 基本樣式
    - 樣式重置
    - 盒模型樣式
    - 浮動float
    - 定位position
    - 瀏覽器默認樣式
  - html5
  - - HTML5 的優勢
    - HTML5 廢棄元素
    - HTML5 新增元素
    - HTML5 表單相關元素和屬性
  - css3
  - - CSS3 新增選擇器
    - CSS3 新增屬性
    - 新增變形影片屬性
    - 3D 變形屬性
    - CSS3 的過渡屬性
    - CSS3 的影片屬性
    - CSS3 新增多列屬性
    - CSS3新增單位
    - 彈性盒模型
  - JavaScript
  - - JavaScript基礎
    - JavaScript資料型別
    - 算術運算
    - 強制轉換
    - 賦值運算
    - 關系運算
    - `“=”、“==”、“===”`有什么區別？
    - 邏輯運算
    - 三元運算
    - 分支回圈
    - switch
    - while
    - do-while
    - for
    - break和continue
    - 陣列
    - 陣列方法
    - 二維陣列
    - 字串
  - 正則運算式
  - - 創建正則運算式
    - 元字符
    - 模式修飾符
    - 正則方法
    - 支持正則的 String方法
  - js物件
  - - 定義物件
    - 物件的資料訪問
    - JSON
    - 內置物件
    - Math 方法
    - Date 方法
  - 面向物件是一種編程思想
  - - 定義物件
    - 原型和原型鏈
    - 原型鏈
    - 原型
  - 常用的JavaScript設計模式
  - - 單體模式
    - 工廠模式
    - 單例模式
  - 函式
  - - 函式的定義
    - 區域變數和全域變數
    - 回傳值
    - 匿名函式
    - 自運行函式
    - 閉包
  - BOM
  - - BOM概述
    - window方法
    - `frames [ ]` 框架集
    - history 歷史記錄
    - location 定位
    - navigator 導航
    - screen 螢屏
    - document 檔案
  - DOM
  - - DOM物件方法
    - 操作DOM間的關系
    - DOM節點屬性
  - 事件
  - - 事件分類
    - 事件物件
    - 事件流
    - 事件流
    - 事件目標
    - 事件委派`(delegate)`
    - 事件監聽
  - jQuery
  - - jQuery 選擇器
    - 屬性選擇器
    - 位置選擇器
    - 后代選擇器
    - 子代選擇器
    - 選擇器物件
    - 子元素
    - DOM操作
    - JQuery 事件
    - 容器適應
    - 標簽樣式操作
    - 滑動
    - 自定義影片
  - AJAX
  - - 作業原理
    - XMLHttpRequest物件
    - XML和HTML的區別
    - get() 和post()
  - HTTP
  - - HTTP訊息結構
    - url請求程序
  - 預加載
  - 懶加載
  - 性能優化
  - - JavaScript代碼優化
    - 提升檔案加載速度
  - webpack
  - - webpack的特點
    - webpack的缺點
    - 安裝
    - webpack基本應用
    - 組態檔入門
  - entry 和 output
  - - module
    - plugins
    - resolve
    - webpack-dev-server
    - 運行
  - vue
  - - MVC模式
    - MVVM模式
    - 基礎語法
    - 實體屬性/方法
    - 生命周期
    - 計算屬性
    - 陣列的更新檢查
    - 事件物件
    - Vue組件
    - 路由使用
    - 路由導航
    - 嵌套路由
    - 命名視圖
- 回看筆者往期高贊文章，也許能識訓更多喔！
- 點贊、收藏和評論
- 我們下期見！

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

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

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

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

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

前言

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

??筆芯??~

Web模塊

html基本結構

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

標簽屬性

class屬性：用于定義元素的類名
id屬性：用于指定元素的唯一id，該屬性的值在整個html檔案中具有唯一性
style屬性：用于指定元素的行內樣式，使用該屬性后將會覆寫任何全域的樣式設定
title屬性：用于指定元素的額外資訊
accesskey屬性：用于指定激活元素的快捷鍵
tabindex屬性：用于指定元素在tab鍵下的次序
dir屬性：用于指定元素中內容的文本方向，屬性只有ltr或rtl兩種
lang屬性：用于指定元素內容的語言

事件屬性

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

文本標簽

段落標簽<p></p>，段落標簽用來描述一段文字
標題標簽<hx></hx>，標題標簽用來描述一個標題，標題標簽總共有六個級別，<h1></h1>標簽在每個頁面中通常只出現一次
強調陳述句標簽，<em></em>，用于強調某些文字的重要性
更加強調標簽，<strong></strong>和<em>標簽一樣，用于強調文本，但它強調的程度更強一些
無語意標簽<span></span>，標簽是沒有語意的
短文本參考標簽<q></q>，簡短文字的參考
長文本參考標簽<blockquote></blockquote>，定義長的文本參考
換行標簽<br/>

多媒體標簽

鏈接標簽，<a></a>
圖片標簽，<img/>
視頻標簽，<video></video>
音頻標簽，<audio></audio>

串列

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

表格

表格標簽<table></table>
表格的一行<tr></tr>
表格的表頭<th></th>
單元格<td></td>
表格合并，同一行內，合并幾列colspan="2"，同一列內，合并幾行rowspan="3"

表單標簽

表單標簽<form>

<form></form>表單是可以把瀏覽者輸入的資料傳送到服務器端，這樣服務器端程式就可以處理表單傳過來的資料，

<form method="傳送方式" action="服務器檔案">

action，瀏覽者輸入的資料被傳送到的地方

method，資料傳送的方式

輸入標簽<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>是下拉選擇框里面的每一個選項

文本域：<textarea></textarea>，當用戶想輸入大量文字的時候，使用文本域，cols，多行輸入域的列數，rows，多行輸入域的行數，

其他語意化標簽

盒子<div></div>
網頁頭部<header></header>，html5新增語意化標簽，定義網頁的頭部，主要用于布局，分割頁面的結構
底部資訊<footer></footer>，html5新增語意化標簽，定義網頁的底部，主要用于布局，分割頁面的結構
導航<nav></nav>，html5新增語意化標簽，定義一個導航，主要用于布局，分割頁面的結構
文章<article></article>，html5新增語意化標簽，定義一篇文章，主要用于布局，分割頁面的結構
側邊欄<aside></aside>，語意化標簽，定義主題內容外的資訊，主要用于布局，分割頁面的結構，
時間標簽<time></time>，語意化標簽，定義一個時間

網頁結構

<!DOCTYPE html> 定義檔案型別，告知瀏覽器用哪一種標準解釋HTML
<html></html>可告知瀏覽器其自身是一個 HTML 檔案
<body></body>標簽之間的內容是網頁的主要內容
<head></head>標簽用于定義檔案的頭部，它是所有頭部元素的容器
<title></title>元素可定義檔案的標題
<link>標簽將css樣式檔案鏈接到HTML檔案內
<meta>定義檔案的元資料

模塊劃分

常見的企業網站，多由頭部區，展示圖片區域，主題區域，底部資訊區域組成
網頁拆分原則: – 由上到下 - 由內到外

CSS代碼語法

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

CSS 放置位置

行內樣式，不建議使用
行內式樣式表
外聯樣式表

CSS的繼承

CSS的某些樣式是具有繼承性的，繼承是一種規則，它允許樣式不僅應用于某個特定html標簽元素，而且應用于其后代，
不可繼承樣式：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
可以繼承的樣式：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

選擇器的種類

標簽選擇器:通過標簽的名字，修改css樣式
通配符選擇器:選擇頁面中所有的元素
屬性選擇器
后代選擇器:選擇某個父元素下面所有的元素
一級子元素選則器:選擇某個父元素的直接子元素，后代選擇器是選擇父元素的所有子孫元素，一級子元素原則器只選擇第一級子元素，不會再向下查找元素
id選擇器：通過id查找頁面中唯一的標簽
class選擇器:通過特定的class（類）來查找頁面中對應的標簽，以 .class名稱
偽類選擇器::hover滑鼠移入某個元素;:before在某個元素的前面插入內容;:after在某個元素的后面插入內容
群組選擇器:可以對多個不同的選擇器設定相同的樣式

選擇器的優先級

當有不同的選擇器對同一個物件進行樣式指定時，并且兩個選擇器有相同的屬性被賦予不同的值時，
通過測算那個選擇器的權重值最高，應用哪一個選擇器的樣式
權重計算方式:

標簽選擇器：1

class選擇器：10

id選擇器：100

行內樣式：1000

!important 最高級別，提高樣式權重，擁有最高級別

背景樣式

背景顏色background-color
背景圖片background-image

background-image:url(bg01.jpg);

背景圖片位置background-position

background-position:10px 100px;

// 代表坐標x，y軸

背景圖片重復background-repeat

background-repeat:no-repeat

// no-repeat 設定影像不重復，常用

// round 自動縮放直到適應并填充滿整個容器

// space 以相同的間距平鋪且填充滿整個容器

背景圖片定位background-attachment

background-attachment:fixed

// 背景影像是否固定或者隨著頁面的其余部分滾動

// background-attachment的值可以是scroll（跟隨滾動），fixed（固定）

background縮寫

background:#ff0000 url(bg01.jpg) no-repeat fixed center

字體樣式

字體族font-family

font-family:"微軟雅黑","黑體";

font-size:12px;

網頁默認字體大小是16px

字體粗細font-weight

font-weight:400;

normal（默認）
bold（加粗）
bolder（相當于<strong>和<b>標簽）
lighter （常規）
100 ~ 900 整百（400=normal，700=bold）

字體顏色color

顏色的英文單詞color:red;

十六進制色：color: #FFFF00;

RGB(紅綠藍)color:rgb(255,255,0)

RGBA（紅綠藍透明度）A是透明度在0~1之間取值，color:rgba(255,255,0,0.5)

字體斜體font-style

font-style:italic

normal 文本正常顯示

italic 文本斜體顯示

oblique 文本傾斜顯示

文本屬性

行高line-height

line-height:50px;

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

文本水平對齊方式text-align

left 左對齊
center 文字居中
right 右對齊

文本所在行高的垂直對齊方式vertical-align

baseline 默認

sub 垂直對齊文本的下標，和<sub>標簽一樣的效果

super 垂直對齊文本的上標，和<sup>標簽一樣的效果

top 物件的頂端與所在容器的頂端對齊

text-top 物件的頂端與所在行文字頂端對齊

middle 元素物件基于基線垂直對齊

bottom 物件的底端與所在行的文字底部對齊

text-bottom 物件的底端與所在行文字的底端對齊

文本縮進text-indent

text-indent:2em;

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

字母之間的間距letter-spacing
單詞之間間距word-spacing
文本的大小寫text-transform

capitalize 文本中的每個單詞以大寫字母開頭，

uppercase 定義僅有大寫字母，

lowercase 定義僅有小寫字母，

文本的裝飾text-decoration

none 默認，
underline 下劃線，
overline 上劃線，
line-through 中線，

自動換行word-wrap

word-wrap: break-word;

基本樣式

寬度width

width:200px;
定義元素的寬度

高度height

height:300px
元素默認沒有高度
需要設定高度
可以不定義高度，讓元素的內容將元素撐高

滑鼠樣式cursor

定義滑鼠的樣式cursor:pointer

default默認
pointer小手形狀
move移動形狀

透明度opacity

opacity:0.3

透明度的值0~1之間的數字，0代表透明，1代表完全不透明

透明的元素，只是看不到了，但是還占據著檔案流

可見性visibility

visibility:hidden;

visible 元素可見

hidden 元素不可見

collapse 當在表格元素中使用時，此值可洗掉一行或一列，不會影響表格的布局，

溢位隱藏 overflow

設定當物件的內容超過其指定高度及寬度時如何顯示內容

visible 默認值，內容不會被修剪，會呈現在元素框之外，
hidden 內容會被修剪，并且其余內容是不可見的，
scroll 內容會被修剪，但是瀏覽器會顯示滾動條以便查看其余的內容，
auto 如果內容被修剪，則瀏覽器會顯示滾動條以便查看其余的內容，

邊框顏色outline

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

outline:1px solid #ccc;

outline:none清除邊框

樣式重置

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

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

盒模型樣式

塊狀元素、行內元素和行內塊狀元素，

塊級元素:

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

行內元素:

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

行內塊狀元素:

和其他元素都在一行上
元素的高度、寬度、行高以及頂和底邊距都可設定，

元素分類轉換display

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

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

inline-block：將元素轉換為行內塊元素

none: 將元素隱藏

描邊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;

間距margin

div{margin:20px 10px 15px 30px;}

內填充padding

padding:10px

浮動float

浮動原理

浮動使元素脫離檔案普通流，漂浮在普通流之上的，
浮動元素依然按照其在普通流的位置上出現，然后盡可能的根據設定的浮動方向向左或者向右浮動，直到浮動元素的外邊緣遇到包含框或者另一個浮動元素為止，且允許文本和行內元素環繞它，
浮動會產生塊級框（相當于設定了display:block），而不管該元素本身是什么，

清除浮動帶來的影響

clear 清除浮動：

none : 不清除（默認值），

left : 不允許左邊有浮動物件
right : 不允許右邊有浮動物件
both : 不允許兩邊有浮動物件

利用偽類實作清除浮動

.clearFix {
  	content="";
  	display:block;
  	width:0;
  	height:0;
  	clear:both;
}

定位position

定位功能可以讓布局變的更加自由，
層模型–絕對定位（相對于父類）

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

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

如下圖所示：

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

層模型–相對定位（相對于原位置）

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

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

如下圖所示：

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

層模型–固定定位（相對于網頁視窗）

position:fixed

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

瀏覽器默認樣式

頁邊距

IE默認為10px，通過body的margin屬性設定

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

body { margin:0; padding:0;}

段間距

IE默認為19px，通過p的margin-top屬性設定

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

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

html5

HTML5 的優勢

解決跨瀏覽器，跨平臺問題
增強了 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 ~ 元素 2 第1個元素之后，所有的元素2都會被選擇，且這些元素和第一個元素擁有同一個父元素（兩個元素之間不一定要相鄰），

屬性選擇器

E[attribute^=value] 用于選取帶有以指定值開頭的屬性值的元素
E[attribute$=value] 用于選取屬性值以指定值結尾的元素
E[attribute*=value] 用于選取屬性值中包含指定值的元素，位置不限，也不限制整個單詞

偽類選擇器

: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 向沒有子元素（包括文本內容）的元素添加樣式

偽元素選擇器

:enabled 向當前處于可用狀態的元素添加樣式，通常用于定義表單的樣式或者超鏈接的樣式
:disabled 向當前處于不可用狀態的元素添加樣式，通常用于定義表單的樣式或者超鏈接的樣式
:checked 向當前處于選中狀態的元素添加樣式
:not(selector) 向不是 selector 元素的元素添加樣式
:target 向正在訪問的錨點目標元素添加樣式
::selection 向用戶當前選取內容所在的元素添加樣式

CSS3 新增屬性

新增背景屬性

background-clip 設定背景覆寫范圍 border-box/paddingbox/content-box
background-origin 設定背景覆寫的起點 border-box/paddingbox/content-box
background-size 設定背景的大小 cover/contain/長度/百分比

新增的字體文本相關屬性

text-overflow 設定當文本溢位元素框時處理方式 clip/ellipsis
word-wrap 規定單詞的換行方式 normal/break-word
word-break 規定自動換行的方式 normal/break-all/keep-all

新增盒模型屬性

box-shadow 陰影 h-shadow v-shadow <br />blur spread color inset
resize 調整尺寸 none/both/horizontal
outline-offset 輪廓的偏移量 length/inherit

新增變形影片屬性

transform

translate(x,y)
rotate(angle)
scale(x,y)
skew(angleX ,angleY)

transform-origin

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

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

3D 變形屬性

transform 3D函式

transform 增加了三個變形函式：

rotateX：表示元素沿著 x 軸旋轉，
rotateY：表示元素沿著 y 軸旋轉，
rotateZ：表示元素沿著 z 軸旋轉，

transform-style用來設定嵌套的子元素在 3D 空間中顯示效果，
perspective設定成透視效果，透視效果為近大遠小，
perspective-origin設定 3D 元素所基于的 x 軸和 y 軸，改變 3D 元素的底部位置，該屬性取值同 transform-origin，默認值為 50% 50%，
backface-visibility用來設定當元素背面面向螢屏時是否可見，通常用于設定不希望用戶看到旋轉元素的背面，

它的屬性值有visible（背面可見，默認值）、 hidden（背面不可見）兩個，

CSS3 的過渡屬性

transition-delay 設定過渡的延遲時間
transition-duration 設定過渡的過渡時間
transition-timing-function 設定過渡的時間曲線
transition-property 設定哪條 CSS 使用過渡
transition 一條宣告設定所有過渡屬性

CSS3 的影片屬性

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：vw和vh中較小的那個，
vmax：vw和vh中較大的那個，

彈性盒模型

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

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

JavaScript

JavaScript基礎

外部引入js檔案：通過<script src="main.js"></script>
關鍵詞

變數名大小寫敏感
命名規范

JavaScript資料型別

字串(String)
數字（Number）
布林值（Boolean）
未定義（Undefined）

//undefined有兩種結果
//1、真的沒定義
alert(typeof dada); //undefined

//2、定義了，但是沒有放東西進去
var dada;
alert(dada); //undefined

undefined，表示未定義或只宣告未給值的變數

物件（Object）

js中內置了如下的物件：

Object 是所有JS物件的超類(基類），JS中的所有物件都是繼承自Object物件的
Array 陣列物件定義陣列屬性和方法
Number 數字物件
Boolean 布爾物件布林值相關
Error 錯誤物件處理程式錯誤
Function 函式物件定義函式屬性和方法
Math 數學物件
Date 日期物件
RegExp 物件正則運算式物件定義文本匹配與篩選規則
String 字串物件定義字串屬性和方法

算術運算

var y = 3;

強制轉換

字串轉數字parseInt() parseFloat() isNaN()
數字轉為字串toString()

賦值運算

復合的賦值運算子 += -= *= /= %=

關系運算

關系運算：> < <= >= != == === ==和=== !=和!==

`“=”、“==”、“===”`有什么區別？

= 是賦值符號
== 忽略資料型別的判斷是否相等
=== 數值和資料型別都要相等才判斷為相等

邏輯運算

邏輯與&&
邏輯或 ||
邏輯非 !
復合邏輯運算式

三元運算

條件運算子？：

三元運算子：(比較運算式)？結果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

break 退出回圈
continue 跳過本次回圈，繼續下一次回圈

陣列

陣列定義

var arr = new Array();
var arr = [];

字面量方式定義

var arr = ["1","2"];

向陣列賦值

arr[0] = "1";
arr[1] = "2";
alert(arr[0]+","+arr[1]);

陣列索引

arr[0]+","+arr[1]

陣列長度

//語法
arr.length

//最后一個元素的索引
arr.length-1

陣列方法

indexOf

陣列可以通過indexOf()來搜索一個指定的元素的位置，如未找到回傳 -1

concat

concat()方法把當前的陣列和另一個陣列連接起來，并回傳一個新的陣列

var newArr = arr1.concat(arr2,"dada");

push和pop

push()向陣列的末尾添加若干元素，pop() 則把陣列的最后一個元素洗掉掉

arr.push("a","b");
console.log(arr);

arr.pop();
console.log(arr);

//空陣列繼續pop不會報錯，而是回傳undefined

unshift和shift

unshift() 向陣列前面添加若干元素，shift() 則把陣列的第一個元素洗掉掉

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

slice

slice() 截取陣列的部分元素，然后回傳一個新的陣列

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

console.log(arr.slice(3));  //從索引3開始到結束

如果不給slice()傳遞任何引數，就會從頭到尾截取所有元素，利用這一點，可以很容易的復制一份新的陣列

sort

sort() 可以對當前陣列排序

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

reverse

reverse() 把整個陣列的元素給掉個個

join

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

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

splice

可以從指定的索引開始洗掉若干元素，然后再從該位置添加若干元素

二維陣列

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

字串

字串屬性length-字串的長度屬性
slice()

slice(start[,end])，start--開始索引 end--結束索引

substr()

substr(start[,length])，start：開始，取length個字符

split()

split([separator[,limit]])，按條件分割字串，回傳陣列

indexOf()

在父串中首次出現的位置，從0開始！沒有回傳-1

lastIndexOf()

倒序查找

charAt(index)

charAt(index) 指定索引的字符

toLowerCase()

轉小寫

toUpperCase()

轉大寫

正則運算式

創建正則運算式

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

元字符

模式修飾符

正則方法

test方法

檢索字串中指定的值，

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) 回傳3的4次方

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;
	}
};

面向物件是一種編程思想

類是一個抽象的概念
物件：具體的事物
類是物件的抽象，物件是類的具體實體
類不占用記憶體，物件占用記憶體空間
物件的訪問宣告物件
遍歷物件 – for in 回圈

定義物件

字面量創建
工廠模式

// 工廠模式中的函式，首字母大寫

function Cat(n,c){
    return {
        name:n,
        color:c,
        say:function(){
          alert("dadaqianduan")
        }
    }
}

建構式

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

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

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

在JavaScript中，原型是一個物件，原型的作用是實作物件的繼承，
在JavaScript中的所有函式物件中，都存在一個屬性，prototype，該屬性對應當前物件的原型，
所有的JavaScript物件，都存在一個_proto_屬性，_proto_屬性指向實體物件的建構式的原型，

var p = new Person(); // 實體物件

console.log(p._proto_ === Person.prototype); // true

p是實體物件, Person是p的建構式， 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

原型鏈

除了Object的prototype的原型是null外，所有的物件和原型都有自己的原型，物件的原型指向原型物件，

在層級多的關系中，多個原型層層相連則構成了原型鏈，

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

原型

所有參考型別都有一個__proto__屬性
所有函式都有一個prototype屬性
所有參考型別的__proto__屬性指向它建構式的prototype

建構式和實體原型之間的關系：

Person（建構式）的 prototype 指向 Person.prototype

__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是原型，

實體

有建構式，可以在原型上創建可繼承的屬性，通過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'

proto

實體通過_proto_訪問到原型，

function Person() {}
Person.prototype.name = 'dadaqianduan.cn'

person = new Person()

da = person.__proto__ === Person.prototype

da // true

constructor建構式

原型也可以通過constructor訪問到建構式

function Person() {}
Person.prototype.name = 'dadaqianduan.cn'
person = new Person

da = Person.prototype.constructor === Person
da // true

小結

所有參考型別（函式，陣列，物件）都擁有__proto__屬性，
所有函式擁有prototype屬性，
每個實體物件(Object)都有一個私有屬性，為__proto__指向它的建構式的原型物件(prototype)，該原型物件也有一個自己的原型物件__proto__，層層向上直到一個物件的原型物件為null，null 沒有原型，并作為這個原型鏈中的最后一個環節，

常用的JavaScript設計模式

百度百科：

設計模式（Design pattern）是一套被反復使用、多數人知曉的、經過分類編目的、代碼設計經驗的總結，

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

單體模式

單體是一個用來劃分命名空間并將一批相關的屬性和方法組織在一起的物件，如果它可以被實體化，那么它只能被實體化一次，

特點：

（1）可以來劃分命名空間，從而清除全域變數所帶來的危險，

（2）利用分支技術來來封裝瀏覽器之間的差異，

（3）可以把代碼組織的更為一體，便于閱讀和維護，

工廠模式

工廠模式的定義：

提供創建物件的介面，意思就是根據領導（呼叫者）的指示（引數），生產相應的產品（物件），

創建一個物件常常需要復雜的程序，所以不適合在一個復雜的物件中，
創建物件可能會導致大量的重復代碼，也可能提供不了足夠級別的抽象，

工廠就是把成員物件的創建作業轉交給一個外部物件，好處在于消除物件之間的耦合(也就是相互影響)，

分類：

簡單工廠模式：使用一個類，通常為單體，來生成實體，

復雜工廠模式定義：將其成員物件的實列化推到子類中，子類可以重寫父類介面方法以便創建的時候指定自己的物件型別，

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

應用場景：

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

（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() 來獲取到單例，并且每次呼叫均獲取到同一個單例，這就是 單例模式 所實作的效果，

應用場景：

單例模式是一種常用的模式，有一些物件我們往往只需要一個，比如全域快取、瀏覽器的window物件，
借助單例模式，可以把代碼組織的更為一致，方便閱讀與維護，

函式

函式的定義

// 使用關鍵字function 定義函式

// 定義函式，吃飯
function dada(){
  console.log("點餐");
  console.log("拿筷子");
  console.log("吃東西")；
}

區域變數和全域變數

變數的作用域

函式體內的變數：區域變數，僅在函式體內可以使用
函式體外的變數：全域變數，對全域可見

區域變數

function da(){
  var dadada = "dada"；//區域變數
  alert(dadada);
}
da(); //呼叫
alert(dadada); //報錯訪問不到，函式體外對dadada不可見

全域變數

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----函式內部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 檔案

window的document的屬性，代表所有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'); 
};

addEventListener( ) 增加事件監聽
removeEventListener( ) 洗掉事件監聽

事件分類

window事件

onload 加載（某個頁面或影像被完成）
onunload 用戶退出頁面
onresize 視窗或框架被調整尺寸
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就是事件物件
}

事件流

物件的默認行為
阻止默認行為：event.preventDefaut()

事件流

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

事件捕獲
事件目標
事件冒泡與阻止事件冒泡

事件目標

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操作

查找獲取

text() - 設定或回傳所選元素的文本內容
html() - 設定或回傳所選元素的內容
val() - 設定或回傳表單欄位的值

內部插入

append() 向每個匹配的元素內部追加內容
appendTo() 把所有匹配的元素追加到另一個指定的元素集合中

prepend() 向每個匹配的元素內部前置內容
prependTo() 把所有匹配的元素前置到另一個、指定的元素集合中

外部插入

after() 在每個匹配的元素之后插入內容
before() 在每個匹配的元素之前插入內容

insertAfter() 把所有匹配的元素插入到另一個、指定的元素集合的后面
insertBefore() 把所有匹配的元素插入到另一個、指定的元素集合的前面

包裹

wrap() 把所有匹配的元素用其他元素的結構化標記包裹起來
unwrap() 這個方法將移出元素的父元素，

wrapAll() 將所有匹配的元素用單個元素包裹起來
wrapInner() 將每一個匹配的元素的子內容(包括文本節點)用一個HTML結構包裹起來

替換

replaceWith() 將所有匹配的元素替換成指定的HTML或DOM元素
replaceAll() 用匹配的元素替換掉所有 selector匹配到的元素

洗掉

empty() 洗掉匹配的元素集合中所有的子節點
remove() 從DOM中洗掉所有匹配的元素

克隆

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請求程序

首先客戶端與服務器需要建立連接，
建立連接后，客戶端發送一個請求給服務器，請求方式的格式為：統一資源識別符號（URL）、協議版本號，客戶端資訊和可能的內容，
服務器接到請求后，給予相應的回應資訊，其格式為一個狀態行，包括資訊的協議版本號、一個成功或錯誤的代碼（status Code狀態碼），后邊服務器資訊、物體資訊和可能的內容，
客戶端接收完, 服務器所回傳的資訊后，與服務器斷開連接，

如果在以上程序中的某一步出現錯誤，那么產生錯誤的資訊將回傳到客戶端，對于用戶來說，這些程序是由HTTP自己完成的，用戶只要用滑鼠點擊，等待資訊顯示就可以了，

預加載

預加載：將所有所需的資源提前請求加載到本地，后面在需要使用就直接從快取中存取資源

使用image物件

<img src="" style="display:none"/>

使用image物件

var image = new Image();
image.src="";

使用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代碼優化

代碼與結構分離
樣式與結構的分離
資料與代碼分離

AMD：Asynchronous Module Definition，即異步模塊加載機制，
CMD:Common Module Definition，即通用模塊定義規范
匯出（export）與匯入（import）兩個模塊

提升檔案加載速度

合并JavaScript代碼，盡可能少的使用script標簽，
無堵塞加載JavaScript，
動態創建script標簽來加載

webpack

webpack是一個module bundler（模塊構建工具），由于 JavaScript 應用程式的復雜性不斷增加，構建工具已成為 web 開發中不可或缺的一部分，它幫助我們去打包、編譯和管理專案需要的眾多資源檔案和依賴庫，

webpack支持CommonJS、AMD和ES6模塊系統，并且兼容多種JS書寫規范，可以處理模塊間的依賴關系，所以具有更強大的JS模塊化的功能，它能壓縮圖片，對CSS、js檔案進行語法檢查、壓縮、編譯打包，

webpack的特點

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

webpack的缺點

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

安裝

全域安裝：

//安裝全域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

entry 入口配置是指頁面中的入口檔案，也就是打包從哪個檔案開始，默認入口檔案：./src/index.js
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";  //注意：是相對路徑

安裝loader（loader也是依賴包，需要安裝）

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服務器，可以自動監視專案檔案的變化，自動重繪瀏覽器，其HMR（Hot 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改成ViewModel，View的變化會自動更新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組件

創建組件

let myTemp={
template:'#temp', //模板id
data: function(){ //必須為函式(閉包)
    return { //必須有return，回傳值為物件{}
        title:"dadaqianduan"
    }
}

注冊組件

//在components配置項中注冊組件
let app=new Vue({
    el:"#box",
    components：{myTemp}
});

//全域注冊組件，還可以使用Vue.component方法（僅限全域注冊，不建議使用）
Vue.component('myTemp'，MyTemp）；

使用組件

<!--在Vue實體中使用組件-->
<div id='box'>
  	<!--組件名如果用駝峰定義，改為短橫線命名-->
    <my-temp></my-temp>
</div>

事件通信

父子組件之間的資料操作，是通過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')
    }
  ]

動態路由

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'}

路由導航

路由導航守衛

什么是路由導航守衛可以簡單理解為路由組件的生命周期回呼函式，

// 路由導航守衛
// 作用：在第一次進入當前路由組件之前被呼叫
// 使用場景：獲取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();
}

編程式路由導航

methods: {
    login(){
        if(登陸成功){
        	//實作頁面跳轉
        	this.$router.push('/');
        }
    }
}

push()

跳轉到指定的路由地址，并把當前地址寫入到history中，引數可以是字串路徑或描述地址資訊的物件

字串	router.push('home')
物件	router.push({path:'home'})
命名的路由	router.push({name:user,params:{userId:1}})

replace( )：跳轉到指定路由，它不會向 history 添加新記錄，而是替換掉當前的 history 記錄，
全域路由導航守衛

示例：

// 全域路由導航守衛
	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
  }
}
]

回看筆者往期高贊文章，也許能識訓更多喔！

Vue.js筆試題解決業務中常見問題
【初級】個人分享Vue前端開發教程筆記
達達前端個人web分享92道JavaScript面試題附加回答
【圖文并茂，點贊收藏哦！】重學鞏固你的Vuejs知識體系
【思維導圖】前端開發-鞏固你的JavaScript知識體系
14期-連肝7個晚上，總結了計算機網路的知識點！（共66條）

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

點贊、收藏和評論

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

我們下期見！

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

github收錄，歡迎Star：https://github.com/webVueBlog/WebFamily

程式員哆啦A夢

CSDN認證博客專家 CSDN博客專家簡書萬粉優秀創作掘金優秀作者

我是程式員哆啦A夢，藍胖子，簡書萬粉優秀創作者，掘金優秀作者、CSDN博客專家，云+社區社區活躍作者，致力于打造一系列能夠幫助程式員提高的優質文章，網站@http://www.dadaqianduan.cn

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/257122.html

標籤：其他

上一篇：氣泡浮動背景特效 html+css

下一篇：手動實作vue2.0的雙向資料系結原理

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

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

文章目錄

前言

Web模塊

html基本結構

標簽屬性

事件屬性

文本標簽

多媒體標簽

串列

表格

表單標簽

其他語意化標簽

網頁結構

模塊劃分

CSS代碼語法

CSS 放置位置

CSS的繼承

選擇器的種類

選擇器的優先級

背景樣式

字體樣式

文本屬性

基本樣式

樣式重置

盒模型樣式

浮動float

定位position

瀏覽器默認樣式

html5

HTML5 的優勢

HTML5 廢棄元素

HTML5 新增元素

HTML5 表單相關元素和屬性

css3

CSS3 新增選擇器

CSS3 新增屬性

新增變形影片屬性

3D 變形屬性

CSS3 的過渡屬性

CSS3 的影片屬性

CSS3 新增多列屬性

CSS3新增單位

彈性盒模型

JavaScript

JavaScript基礎

JavaScript資料型別

算術運算

強制轉換

賦值運算

關系運算

“=”、“==”、“===”有什么區別？

邏輯運算

三元運算

分支回圈

switch

while

do-while

for

break和continue

陣列

陣列方法

二維陣列

字串

正則運算式

創建正則運算式

元字符

模式修飾符

正則方法

支持正則的 String方法

js物件

定義物件

物件的資料訪問

JSON

內置物件

Math 方法

Date 方法

面向物件是一種編程思想

定義物件

`“=”、“==”、“===”`有什么區別？

`frames [ ]` 框架集

事件委派`(delegate)`