http狀態(tài)碼
get和post區(qū)別
-
get ：
字面意思：獲取數(shù)據(jù)
1僵蛛、url長(zhǎng)度是有限制的
2歇拆、在瀏覽器中有緩存
3策治、參數(shù)保留在瀏覽器歷史中 -
post
字面意思：發(fā)送數(shù)據(jù)
1泡一、url長(zhǎng)度是沒有限制的
2厉膀、可實(shí)現(xiàn)上傳文件
3溶耘、不會(huì)緩存
4、參數(shù)位置在send中
5服鹅、請(qǐng)求頭設(shè)置
6凳兵、get的安全性比較差，數(shù)據(jù)在url中對(duì)所有人都是可見的
7企软、post的安全比get好庐扫，數(shù)據(jù)不會(huì)顯示在url中
JavaScript 詳說事件機(jī)制之冒泡、捕獲仗哨、傳播形庭、委托
先捕獲再冒泡
- 事件捕獲--舉栗：
1、當(dāng)鼠標(biāo)點(diǎn)擊或者觸發(fā)dom事件時(shí)厌漂，瀏覽器會(huì)從根節(jié)點(diǎn)開始由外到內(nèi)進(jìn)行事件傳播萨醒，即點(diǎn)擊了子元素，如果父元素通過事件捕獲方式注冊(cè)了對(duì)應(yīng)的事件的話苇倡，會(huì)先觸發(fā)父元素綁定的事件富纸。
- 事件冒泡--舉栗：
1、與事件捕獲恰恰相反旨椒，事件冒泡順序是由內(nèi)到外進(jìn)行事件傳播晓褪，直到根節(jié)點(diǎn)。
如圖解釋：
1综慎、事件捕獲從document到<body>再到<div>后就停止了涣仿。下一個(gè)階段是“處于目標(biāo)階段txt
2、從目標(biāo)階段到示惊，冒泡階段發(fā)生好港，事件又傳播回文檔
- 普通事件onclick
注冊(cè)多個(gè)事件，會(huì)出現(xiàn)后面會(huì)覆蓋前面的事件
- 事件委托addEventListener
自己總結(jié)：
事件委托就是涝涤，多個(gè)子元素需要點(diǎn)擊事件媚狰，這個(gè)時(shí)候可以使用事件委托，父元素設(shè)置點(diǎn)擊事件阔拳，子元素共享父元素的事件
- 事件委托的優(yōu)點(diǎn):
提高性能:每一個(gè)函數(shù)都會(huì)占用內(nèi)存空間崭孤，只需添加一個(gè)事件處理程序代理所有事件,所占用的內(nèi)存空間更少类嗤。
動(dòng)態(tài)監(jiān)聽:使用事件委托可以自動(dòng)綁定動(dòng)態(tài)添加的元素,即新增的節(jié)點(diǎn)不需要主動(dòng)添加也可以一樣具有和其他元素一樣的事件。
對(duì)象的三大特性 封裝辨宠、繼承遗锣、多態(tài)
- 封裝
1、將數(shù)據(jù)與功能組合到一起嗤形，即封裝
2精偿、js對(duì)象就是鍵值對(duì)的集合
3、鍵值對(duì)如果是函數(shù)赋兵，就稱為方法method
4笔咽、對(duì)象就是將屬性與方法封裝起來
5、方法是將過程封裝起來
- 繼承性
所謂繼承就是自己沒有霹期，別人有叶组，拿過來為自己所用，并成為自己的東西
1历造、傳統(tǒng)繼承基于模板
2甩十、js繼承基于對(duì)象
- 優(yōu)點(diǎn)：
1、減少耦合：可以獨(dú)立地開發(fā)吭产、測(cè)試侣监、優(yōu)化、使用臣淤、理解和修改
2橄霉、減輕維護(hù)的負(fù)擔(dān)：可以更容易被程序員理解，并且在調(diào)試的時(shí)候可以不影響其他模塊
3邑蒋、有效地調(diào)節(jié)性能：可以通過剖析確定哪些模塊影響了系統(tǒng)的性能
4酪劫、提高軟件的可重用性
5、降低了構(gòu)建大型系統(tǒng)的風(fēng)險(xiǎn)：即使整個(gè)系統(tǒng)不可用寺董，但是這些獨(dú)立的模塊卻有可能是可用的
6、封裝的左右刻剥、減少耦合性
- 最常用的ES6特性
- let 和 const
- 解構(gòu)賦值
- 函數(shù)
- 字符串?dāng)U展
- 數(shù)組擴(kuò)展
- 新的定義對(duì)象的方式
class, extends(繼承), super, arrow（箭頭） functions（函數(shù)）, template（模板引擎） string（字符串
）, destructuring(結(jié)構(gòu)賦值), default（導(dǎo)出）, rest(重置) arguments（偽數(shù)組）
var遮咖、let、const的區(qū)別
var
變量名污染造虏、之后定義的變量會(huì)覆蓋之前的let:
1御吞、let 定義變量，變量不可以再次(c重復(fù))定義漓藕，但可以改變其值
2陶珠、具有塊級(jí)作用域
3、沒有變量提升享钞，必須先定義再使用
4揍诽、let聲明的變量不會(huì)壓到window對(duì)象中，是獨(dú)立的const:
1、使用const關(guān)鍵字定義常量
2暑脆、 常量是不可變的渠啤，一旦定義，則不能修改其值
4添吗、 初始化常量時(shí)沥曹，必須給初始值
5、具有塊級(jí)作用域
6碟联、沒有變量提升妓美，必須先定義再使用
7、常量也是獨(dú)立的鲤孵，定義后不會(huì)壓入到window對(duì)象中
8壶栋、const有一個(gè)很好的應(yīng)用場(chǎng)景就是，引入第三方庫(kù)裤纹。避免重命名而導(dǎo)致的bug數(shù)組結(jié)構(gòu)賦值
// 情況1委刘，變量和值一一對(duì)應(yīng)
let arr = [5, 9, 10];
let [a, b, c] = arr;
console.log(a, b, c); // 輸出 5 9 10
// 情況2，剩余值
let arr = [5, 9, 10, 8, 3, 2];
let [a, b, ...c] = arr; // ...c 接收剩余的其他值鹰椒，得到的c是一個(gè)數(shù)組
console.log(a, b, c);
// 結(jié)果：
// a = 5,
// b = 9,
// c = [10, 8, 3, 2]
- 對(duì)象結(jié)構(gòu)賦值
- 方便解析對(duì)象中的某些屬性的值
// 情況3锡移，變量名和屬性名一致即可獲取到值，不一定要一一對(duì)應(yīng)
let 漆际 = {a: 'hello', b: 'world'};
console.log(b); // world
// 此時(shí)淆珊，沒有定義變量a，所以使用a會(huì)報(bào)錯(cuò)
// 情況4奸汇，剩余值
let obj = {name:'zs', age:20, gender:'男'};
let {name, ...a} = obj;
console.log(name, a);
// 結(jié)果：
// name = zs
// a = {age: 20, gender: "男"};
-
箭頭函數(shù)
箭頭函數(shù)的基本定義
// 非箭頭函數(shù)
let fn = function (x) {
return x * 2;
}
// 箭頭函數(shù)施符，等同于上面的函數(shù)
let fn = (x) => {
return x * 2;
}
箭頭函數(shù)的特點(diǎn)：
1、形參只有一個(gè)擂找，可以省略小括號(hào)
2戳吝、函數(shù)體只有一句話，可以省略大括號(hào)贯涎，并且表示返回函數(shù)體的
3听哭、箭頭函數(shù)內(nèi)部沒有 arguments
4、箭頭函數(shù)內(nèi)部的 this 指向外部作用域中的 this 塘雳，或者可以認(rèn)為箭頭函數(shù)沒有自己的 this
5陆盘、箭頭函數(shù)不能作為構(gòu)造函數(shù)
- 參數(shù)的默認(rèn)值
// ES5 中給參數(shù)設(shè)置默認(rèn)值的變通做法
function fn(x, y) {
y = y || 'world';
console.log(x, y);
}
fn(1)
// ES6 中給函數(shù)設(shè)置默認(rèn)值
function fn(x, y = 'world') {
console.log(x, y);
}
fn(2)
fn(2,3)
-
rest參數(shù)
rest參數(shù)：剩余參數(shù)，以...修飾符最后一個(gè)參數(shù)败明，把多余的參數(shù)都放到一個(gè)數(shù)組中,可以代替arguments的使用隘马。
注意：rest 參數(shù)只能是最后一個(gè)參數(shù)
代碼舉栗：
// 參數(shù)很多，不確定多少個(gè)妻顶，可以使用剩余參數(shù)
function fn(...values) {
console.log(values); // [6, 1, 100, 9, 10]
}
// 調(diào)用
console.log(fn(6, 1, 100, 9, 10));
代碼舉栗2：
function fn(a, b, ...values) {
console.log(a); // 6
console.log(b); // 1
console.log(values); // [100, 9, 10]
}
// 調(diào)用
console.log(fn(6, 1, 100, 9, 10));
- 內(nèi)置對(duì)象的擴(kuò)展
- Array 的擴(kuò)展
擴(kuò)展運(yùn)算符 ...
數(shù)組實(shí)例的 find() 和 findIndex()
Array.from():偽數(shù)組轉(zhuǎn)數(shù)組
includes()：查找數(shù)組是否存在某個(gè)值酸员，返回true/false - String 的擴(kuò)展
- Number 的擴(kuò)展
- Set
// 合并兩個(gè)數(shù)組
let arr1 = [1, 2];
let arr2 = [3, 4];
let arr3 = [...arr1, ...arr2];
console.log(arr3); // [1, 2, 3, 4]
// 把數(shù)組展開作為參數(shù)蜒车，可以替代 apply
// 求數(shù)組的最大值
let arr = [6, 99, 10, 1];
let max = Math.max(...arr); // 等同于 Math.max(6, 99, 10, 1);
2、Array.from()
- 把偽數(shù)組轉(zhuǎn)換成數(shù)組
- 偽數(shù)組必須有l(wèi)ength屬性沸呐，沒有l(wèi)ength將得到一個(gè)空數(shù)組
- 轉(zhuǎn)換后的數(shù)組長(zhǎng)度醇王，是根據(jù)偽數(shù)組的length決定的
let fakeArr = {
0: 'a',
1: 'b',
2: 'c',
length: 3
};
let arr = Array.from(fakeArr);
console.log(arr); // ['a', 'b', 'c']
// 轉(zhuǎn)數(shù)組的對(duì)象必須有l(wèi)ength值，因?yàn)榈玫降臄?shù)組的成員個(gè)數(shù)是length指定的個(gè)數(shù)
// 上例中崭添，如果length為2寓娩，則得到的數(shù)組為 ['a', 'b']
數(shù)組實(shí)例的 find() 和 findIndex()
- find和findIndex方法，會(huì)遍歷傳遞進(jìn)來的數(shù)組
- 回調(diào)函數(shù)有三個(gè)參數(shù)呼渣，分別表示數(shù)組的值棘伴、索引及整個(gè)數(shù)組
- 回調(diào)函數(shù)中return的是一個(gè)條件，find和findIndex方法的返回值就是滿足這個(gè)條件的第一個(gè)元素或索引
- find 找到數(shù)組中第一個(gè)滿足條件的成員并返回該成員屁置，如果找不到返回undefined焊夸。
- findIndex 找到數(shù)組中第一個(gè)滿足條件的成員并返回該成員的索引，如果找不到返回 -1蓝角。
findIndex 的使用和 find 類似阱穗，只不過它查找的不是值，而是下標(biāo)
// 語法結(jié)構(gòu)
let arr = [1, 2, 4, 0, -4, 3, -2, 9];
arr.find(function (item, index, self) {
console.log(item); // 數(shù)組中的每個(gè)值
console.log(index); // 數(shù)組中的每個(gè)索引/下標(biāo)
console.log(self); // 當(dāng)前的數(shù)組
});
// 用法：找數(shù)組中第一個(gè)小于0的數(shù)字
let arr = [1, 2, 4, 0, -4, 3, -2, 9];
let result = arr.find(function (item) {
return item < 0; //遍歷過程中使鹅，根據(jù)這個(gè)條件去查找
});
console.log(result); // -4
- 數(shù)組實(shí)例的 includes()
判斷數(shù)組是否包含某個(gè)值揪阶，返回 true / false
參數(shù)1，必須患朱，表示查找的內(nèi)容
參數(shù)2鲁僚，可選，表示開始查找的位置裁厅，0表示開頭的位置
let arr = [1, 4, 3, 9];
console.log(arr.includes(4)); // true
console.log(arr.includes(4, 2)); // false冰沙， 從2的位置開始查，所以沒有找到4
console.log(arr.includes(5)); // false
template模板引擎string模板字符串
模板字符串
- 模板字符串解決了字符串拼接不便的問題
- 模板字符串使用反引號(hào) ` 括起來內(nèi)容
- 模板字符串中的內(nèi)容可以換行
- 變量在模板字符串中使用 ${name} 來表示执虹，不用加 + 符號(hào)
Number的擴(kuò)展
ES6 將全局方法parseInt()和parseFloat()拓挥，移植到Number對(duì)象上面，行為完全保持不變袋励。
- Number.parseInt()
- Number.parseFloat()
Set
ES6 提供了新的數(shù)據(jù)結(jié)構(gòu) Set撞叽。它類似于數(shù)組，但是成員的值都是唯一的插龄，沒有重復(fù)的值。
基本使用：
// 1. 基本使用
let set = new Set();
// 得到一個(gè)空的Set對(duì)象
// 2科展、去重
var arr = [2, 3, 5, 4, 5, 2, 2]
console.log(...new Set(arr))
Set本身是一個(gè)構(gòu)造函數(shù)均牢，用來生成 Set 數(shù)據(jù)結(jié)構(gòu)。
Set的特點(diǎn)就是該對(duì)象里面的成員不會(huì)有重復(fù)才睹。
定義對(duì)象簡(jiǎn)潔的方式
let name = 'zhangsan', age = 20, gender = '女';
ES6 雖好徘跪，但是有兼容性問題甘邀，IE7-IE11 基本不支持 ES6
解決：降級(jí)處理
降級(jí)處理 babel 的使用步驟
- 安裝 Node.js
- 命令行中安裝 babel
- 配置文件 .babelrc
- 運(yùn)行
import引入模塊
-
default導(dǎo)出模塊
說說Cookie和Session的區(qū)別？
1垮庐、Cookie和Session都是會(huì)話技術(shù)松邪，Cookie是運(yùn)行在客戶端，Session是運(yùn)行在服務(wù)器端哨查。
2逗抑、Cookie有大小限制以及瀏覽器在存cookie的個(gè)數(shù)也有限制，Session是沒有大小限制和服務(wù)器的內(nèi)存大小有關(guān)寒亥。
3邮府、Cookie有安全隱患，通過攔截或本地文件找得到你的cookie后可以進(jìn)行攻擊溉奕。
4褂傀、Session是保存在服務(wù)器端上會(huì)存在一段時(shí)間才會(huì)消失，如果session過多會(huì)增加服務(wù)器的壓力加勤。
localStorage和sessionStorage一樣都是用來存儲(chǔ)客戶端臨時(shí)信息的對(duì)象仙辟。
- localStorage生命周期是永久，除非手動(dòng)刪除
- sessionStorage 瀏覽器關(guān)閉鳄梅，存儲(chǔ)的數(shù)據(jù)也就被清空了
Vue常用的指令
v-bind====
:綁定屬性
v-on === @click 綁定一個(gè)事件監(jiān)聽器
v-for實(shí)現(xiàn)表單輸入和應(yīng)用狀態(tài)之間的雙向綁定
v-if v-else v-if-else實(shí)現(xiàn)表單輸入和應(yīng)用狀態(tài)之間的雙向綁定
v-show根據(jù)條件展示元素內(nèi)部css屬性為display：none/block
v-model：實(shí)現(xiàn)表單輸入和應(yīng)用狀態(tài)之間的雙向綁定
-
vue插值表達(dá)式
v-bind 簡(jiǎn)寫 ：
js方式 雙大括號(hào)
{{}}
v-text 插入文本
vue父?jìng)髯?br>
子：this.$emit('事件名',數(shù)據(jù))
父: :事件名="在data里定義一個(gè)數(shù)組/對(duì)象"
vue子傳父
父：在組件屬性post="數(shù)據(jù)"
子：props:[post]//接受數(shù)據(jù)--直接使用
-
axios和ajax的區(qū)別
區(qū)別總結(jié)1
axios是通過promise實(shí)現(xiàn)對(duì)ajax技術(shù)的一種封裝叠国，就像jQuery實(shí)現(xiàn)ajax封裝一樣。
簡(jiǎn)單來說： ajax技術(shù)實(shí)現(xiàn)了網(wǎng)頁的局部數(shù)據(jù)刷新卫枝，axios實(shí)現(xiàn)了對(duì)ajax的封裝煎饼。
區(qū)別總結(jié)2
ajax和axios區(qū)別
Ajax是一種創(chuàng)建交互式網(wǎng)頁應(yīng)用的網(wǎng)頁開發(fā)技術(shù)
ajax = 異步JavaScript和XML(標(biāo)準(zhǔn)通用標(biāo)記語言的子集)
Ajax是一種用于創(chuàng)建快速動(dòng)態(tài)網(wǎng)頁的技術(shù)
Ajax是一種在無需加載整個(gè)網(wǎng)頁的情況下，能夠更新部分網(wǎng)頁的技術(shù)
通過在后臺(tái)與服務(wù)器進(jìn)行少量數(shù)據(jù)交互校赤，ajax可以使網(wǎng)頁實(shí)現(xiàn)異步更新吆玖，可以在不重新加載整個(gè)網(wǎng)頁的情況下，對(duì)網(wǎng)頁的某部分進(jìn)行更新
傳統(tǒng)的網(wǎng)頁（不適用Ajax）,如果需要重新更新內(nèi)容马篮，必須重載整個(gè)網(wǎng)頁頁面
axios: 用于瀏覽器和node.js的基于Promise的HTTP客戶端
1 從瀏覽器制作XML HttpRequests
2 讓HTTP從node.js的請(qǐng)求
3 支持Promise API
4 攔截請(qǐng)求和響應(yīng)
5 轉(zhuǎn)換請(qǐng)求和響應(yīng)數(shù)據(jù)
6 取消請(qǐng)求
7 自動(dòng)轉(zhuǎn)換為JSON數(shù)據(jù)
8 客戶端支持防止XSRF
VueX狀態(tài)管理
-
State:
vuex中的數(shù)據(jù)源沾乘，我們需要保存的數(shù)據(jù)就保存在這里，可以在頁面通過 this.$store.state來獲取我們定義的數(shù)據(jù)浑测；
創(chuàng)建vuex實(shí)例
const store = new vuex.store({
state: {
count:1
}
})
在組件直接使用
舉栗:
<h2>{{this.$store.state.count}}</h2>
`然后在頁面上就可以看到 1`
- Getters:
Getter相當(dāng)于vue中的computed計(jì)算屬性翅阵，getter 的返回值會(huì)根據(jù)它的依賴被緩存起來，且只有當(dāng)它的依賴值發(fā)生了改變才會(huì)被重新計(jì)算迁央，這里我們可以通過定義vuex的Getter來獲取掷匠，Getters 可以用于監(jiān)聽、state中的值的變化岖圈，返回計(jì)算后的結(jié)果讹语，這里我們修改Hello World.vue文件如下：
state：存儲(chǔ)狀態(tài)（變量）
getters：對(duì)數(shù)據(jù)獲取之前的再次編譯，可以理解為state的計(jì)算屬性蜂科。我們?cè)诮M件中使用 $sotre.getters.fun()
mutations：修改狀態(tài)顽决，并且是同步的短条。在組件中使用$store.commit('',params)。這個(gè)和我們組件中的自定義事件類似才菠。
actions：異步操作茸时。在組件中使用是$store.dispath('')
modules：store的子模塊，為了開發(fā)大型項(xiàng)目赋访，方便狀態(tài)管理而使用的可都。這里我們就不解釋了，用起來和上面的一樣进每。
