## 經(jīng)典bug:1.模板引擎的渲染## 難點:### 0.vue總結(jié)#### 指令:```jsVue.directive('指令名稱',{ //自定義指令的生命周期函數(shù) bind(){}, //參數(shù)1el 參數(shù)2binding inserted(){}, update(){},})//當(dāng)bind和update函數(shù)內(nèi)部的業(yè)務(wù)邏輯一模一樣的時候,可以簡寫Vue.directive('指令名稱', (el,binding)=>{})```#### 組件:```js//全局指令Vue.directive('mycolor',{ inserted(el,binding){ el.style.color = binding.value }})//全局過濾器Vue.filter('fmtName', function (v, arg) { // v 就是需要過濾的原始數(shù)據(jù) 也就是管道符|左邊的內(nèi)容 var data = arg + v // 返回處理好的數(shù)據(jù) return data})//組件Vue.component('組件',{ data(){ return{ time: new Date(), color: 'red' } }, template: `

{{time | fmtTime}}

`,? //局部過濾器? filters: {? ? fmtTime(time){? ? ? console.log(time);? ? ? var y = time.getFullYear();? ? ? var m = time.getMonth() + 1;? ? ? var d = time.getDate();? ? ? return y + '/' + m + '/' + d? ? }? },})Vue.component('two', {? ? data() {? ? ? return {? ? ? ? time: new Date(),? ? ? ? color: 'red'? ? ? }? ? },? ? template: `

{{time}}

`,? //局部指令? ? directives: {? ? ? myfocus: {? ? ? ? inserted(el, binding) {? ? ? ? ? console.log(el);? ? ? ? ? console.log(binding);? ? ? ? ? el.focus()? ? ? ? }? ? ? }? ? }? })var vm = new Vue({? el:'#app',? data: {? },? //定義當(dāng)前vue實例用到的任何函數(shù)? methods: {? },? //生命周期函數(shù)? created:{? },//? mounted(){? },? updated(){? },? //計算屬性? computed:{? },? watch:{? ? ? handler(){? ? ? },? ? ? deep: true? },})```組件是用來封裝重復(fù)的視圖一:定義組件(1) 1.創(chuàng)建組件的模板對象```jsvar login=Vue.extend({? // template 是用來寫視圖代碼的地方? template: '

登錄

'})``` 2.使用Vue.component()注冊組件```jsVue.component('login',login)```二:定義組價(2)```jsVue.component('register',{template: '

注冊

',})```三:定義組件(3)定義組件的第三種方法: template里面的結(jié)構(gòu)使用選擇器選擇頁面中的元素注意: template使用的選擇器選擇的模板元素必須寫在Vue托管區(qū)域外,模板便簽`````jsVue.component('account',{template: '#account',})```注意:1.template里面的選擇器的模板元素必須寫在Vue托管區(qū)域外2.模板標(biāo)簽叫做(也有別的寫法,不推薦)3.組件模板必須有一個唯一的根元素4.組件內(nèi)部的data屬性必須在當(dāng)前組件的模板中進行使用5.所有組件的模板都是定義在托管區(qū)域外的,都是平級的,不存在嵌套6.組件名稱,組件的屬性名稱,組件的事件名稱如果使用了駝峰命名法,都必須使用純小寫,并用連接符-鏈接#### 路由:前端路由: 通過瀏覽器的特性(window.location.hash)實現(xiàn)無刷新的頁面跳轉(zhuǎn)路由傳參中的this.$route(分別表示routes數(shù)組里的對應(yīng)的路由對象,每次打印的都不一樣,是用來獲取參數(shù)的)? this.$router(每次打印的都一樣,指的是用new VueRouter創(chuàng)建出來的路由對象,主要用于頁面間的跳轉(zhuǎn))#### 組件生命周期:```js? ? ? ? ? ? ? ? ? ? ? ? 數(shù)據(jù)初始化(created)? ? ? ? 初始化階段? ? ? ? ? ? ? ? ? ? ? ? 頁面初始化(mounted)? ? ? ? ? ? ? ? ? ? ? ? ? ? 運行階段 updated? ? ? ? ? ? ? ? ? ? ? ? 銷毀階段 destoryed? ? ? ? ? ? ? ? ? ? ? ? 生命周期函數(shù),只需要搞清楚生命周期函數(shù)的執(zhí)行時期和執(zhí)行的特點,在實際開發(fā)中到低可以寫什么代碼? ? beforeCreate? ? ? ? 執(zhí)行時機: 當(dāng)vue實例一被初始化時,vue對象唄創(chuàng)建時觸發(fā).? ? ? ? 特點: 此時vue實例上什么都沒有!? ? ? ? 沒用? ? ? ? created? ? ? ? 執(zhí)行時機: 當(dāng)vue實例被創(chuàng)建完成時,所有屬性和方法都已經(jīng)掛在完畢是執(zhí)行.? ? ? ? 特點: 此時vue實例data中的屬性和methods中的方法(filteds,directive)都已經(jīng)綁定到實例上了? ? ? ? 實際運用: 1.數(shù)據(jù)的初始化. 2.發(fā)送網(wǎng)絡(luò)請求? ? ? ? beforeMount? ? ? ? 執(zhí)行時機: vue的dom已經(jīng)渲染到頁面了,但是使用的各種指令還沒被正確解析,如果獲取真實dom,獲取的還會帶有各種指令? ? ? ? 特點: dom還還帶著各種指令? ? ? ? 實際運用: 沒用? ? ? ? mounted? ? ? ? 執(zhí)行時機: vue的dom已經(jīng)渲染到頁面了, 同時各種指令已經(jīng)正確解析了? ? ? ? 特點: 真實dom已經(jīng)完全渲染完畢? ? ? ? 實際運用: 只要涉及到獲取真實dom,就會用? ? ? ? beforeUpdate? ? ? ? 執(zhí)行時機: 當(dāng)data中數(shù)據(jù)發(fā)送改變的時候? ? ? ? 特點: data中的數(shù)據(jù)已經(jīng)發(fā)送了變化,但是頁面還沒有重新渲染過來? ? ? ? 實際運用: 很少用到? ? ? ? updated 執(zhí)行時機: 當(dāng)data中數(shù)據(jù)發(fā)送改變的時候 特點: data中的數(shù)據(jù)已經(jīng)發(fā)送了變化,頁面重新渲染完成? ? ? ? 實際運用: 設(shè)計到數(shù)據(jù)變化時會用到? ? ? ? beforeDestory? ? ? ? 執(zhí)行時機: 當(dāng)vue實例被銷毀時,執(zhí)行? ? ? ? 特點: 雖然已經(jīng)接收到銷毀的信息,但是data和methods還可以繼續(xù)使用? ? ? ? 實際運用: 清除不在使用的變量, 比如: 清除定時器的操作? ? ? ? destoryed? ? ? ? 執(zhí)行時機: 當(dāng)vue實例被銷毀時,執(zhí)行? ? ? ? 特點: 涼了? ? ? ? 實際運用: 不用```-------------------------### 1.JSON.parse() 和JSON.stringftyJSON.parse()? `[{},{}]`JSON.stringify() 方法用于將 JavaScript 值轉(zhuǎn)換為 JSON 字符串? ? ? ? ? ? ? ? `"[{},{}]"`-------------### 2.ES5 中引入的部分?jǐn)?shù)組方法1> forEach2> map3> filter4> some5> every6> indexOf7> lastIndexOf---------------------------------### 3.函數(shù)的四種調(diào)用模式:1. 函數(shù)模式? - 函數(shù)的定義方式? ? - 表達式? ? - 聲明式? ? - Function? - 單獨獨立調(diào)用的就是函數(shù)? - this表達全局對象? - 任何自調(diào)用都是函數(shù)模式2. 方法模式? - 區(qū)分? ? 方法本身就是函數(shù),但是方法不是單獨獨立的調(diào)用,而是通過一個對象調(diào)用? - this表示引導(dǎo)方法的對象3. 構(gòu)造器函數(shù)? constructor? - 區(qū)分? ? 使用 new 關(guān)鍵字引導(dǎo)? - 執(zhí)行步驟? ? var p = new Person();? ? new 是一個運算符, 專門用來申請創(chuàng)建對象,創(chuàng)建出來的隊象傳遞給構(gòu)造函數(shù)的 this利用構(gòu)造函數(shù)對其初始化? ? function Person () {? ? ?this.name = 'jim',? ? ?this.age = 19.? ? ?this.gender = 'male'? ? }? - 返回值? ? 如果不寫return語句, 那么構(gòu)造函數(shù)默認(rèn)返回 this 如果在構(gòu)造函數(shù)中寫上 return 語句, 并緊跟基本類型(return num , return 1223), 則忽略this? - 如果調(diào)用構(gòu)造函數(shù)的時候, 構(gòu)造函數(shù)沒有參數(shù), 圓括號是可以省略的4. 上下文調(diào)用? 就是 環(huán)境調(diào)用模式 => 在不同環(huán)境下的不同調(diào)用模式? 簡單說就是統(tǒng)一一種格式, 可以實現(xiàn) 函數(shù)模式與方法模式? - 語法(區(qū)分)? ? - call 形式? ? ? 函數(shù)名.call()? ? - apply 形式? ? ? 函數(shù)名.apply()? - 用法? ? call() 和 apply() 的區(qū)別和作用？? ? apply()函數(shù)有兩個參數(shù)：第一個參數(shù)是上下文间影，第二個參數(shù)是參數(shù)組成的數(shù)組贰逾。如果上下文是null水泉，則使用全局對象代替。 如：function.apply(this,[1,2,3]);? ? call()的第一個參數(shù)是上下文饲趋，后續(xù)是實例傳入的參數(shù)序列果覆。 如：function.call(this,1,2,3);? ? // bind call apply? - 都可以改變this指向? - 只能函數(shù)使用? ? ```? ? function fn (a, b) {? ? ? ? console.log('兒童節(jié)快樂颓芭！', a + b)? ? ? ? console.log(this)? ? }? ? // console.dir(fn)? ? var arr = [45, 56]? ? var obj = {name: 666}? ? // 1. call 是一個方法call(this指向, 傳遞參數(shù)) call借用函數(shù)同時改變this之后幫其調(diào)用? ? /* fn.call(arr, 66, 100)? ? // 2. apply等同與call 區(qū)別就是傳遞參數(shù)? ? fn.apply(arr, [66, 100]) */? ? // 3. bind 但是它不會幫我們調(diào)用? ? var ff = fn.bind(obj, 46545, 56161465)? ? // console.log(ff)? ? ff()? ? ```? ? ```? ? // 4. this的使用? ? var btn = document.querySelector('.btn')? ? btn.onclick = function() {? ? ? ? console.log('中國桃之鄉(xiāng)襄陽')? ? ? ? console.log(this)? ? ? ? // 4.1 使用that var that = this? ? ? ? /* setTimeout(function() {? ? ? ? ? ? // console.log(that) // 我想讓這句話打印button怎么辦? ? ? ? }, 1000) */? ? ? ? // 4.2 使用bind改變this指向? ? ? ? /* setTimeout(function() {? ? ? ? ? ? // console.log(that) // 我想讓這句話打印button怎么辦? ? ? ? ? ? console.log(this)? ? ? ? }.bind(this), 1000) */? ? ? ? // 4.3 使用箭頭函數(shù)? 優(yōu)點 就是沒有this指向? ? ? ? setTimeout(() =>{? ? ? ? ? ? // console.log(that) // 我想讓這句話打印button怎么辦? ? ? ? ? ? console.log(this)? ? ? ? }, 1000)? ? ? ? // 箭頭函數(shù)? 是es6中的新語法? ? ? ? // var fn = function (a, b) {}? ==》var fn = (a, b) => {}? ? }? ? ```------------------------------------### 4.事件隊列:定時函數(shù)事件函數(shù)ajax回調(diào)函數(shù)前段開發(fā)中, 三種情況有事件隊列1. 主線程已經(jīng)空閑2. 任務(wù)滿足觸發(fā)條件? - 定時函數(shù)(延時時間已經(jīng)到達)? - 事件函數(shù)(特定事件被觸發(fā))? - ajax的回調(diào)函數(shù)(服務(wù)器端有數(shù)據(jù)響應(yīng))常見的面試題```jsconsole.log(1);setTimeout(function(){? console.log(2);},10);console.log(3);//結(jié)果為1,3,2//先執(zhí)行主線程中的代碼,打印1,3再執(zhí)行事件隊列中的函數(shù),打印2```-----------------------------------------### 5.數(shù)組,對象操作(基礎(chǔ)api)數(shù)組的方法```1.push(); 方法：在數(shù)組的最后面添加內(nèi)容，返回值是添加后數(shù)組的長度2.pop() 方法：把數(shù)組的最后一個刪除挥萌，返回值是刪除的那一項3.unshift() 方法：在數(shù)組的最前面添加內(nèi)容绰姻，返回值是添加后數(shù)組的長度4.shift() 方法：刪除數(shù)組中的第一項，返回值是刪除的那一項5.concat() 方法：拼接數(shù)組6.join() 方法：把數(shù)組中的每一項用特定的字符串連接起來7.slice(a,b) 方法： 從索引a開始截纫佟（包括a）狂芋，一直截取到b（不包括b），如果里面只有一個參數(shù)憨栽，帜矾，那么就直接截取到末尾翼虫，不會改變原來的數(shù)組? ? > var arr = [1,2,3,4,5];? ? > var a = arr.slice(-8,3);? =>等同于：arr.slice(0,3)? //如果第一個參數(shù)是負(fù)數(shù)，就用數(shù)組的長度跟這個負(fù)數(shù)相加黍特，如果相加后的數(shù)字小于等于0蛙讥，就表示從索引0開始截取，如果大于0灭衷，就表示從相加之后的那個數(shù)字索引開始截取? ? > console.log(a);? //[1,2,3]? 從索引0開始截取? ? > var b = slice(-4,3);? =>等同于：arr.slice(1,3)? ? ? ? > console.log(b);? //[2,3]? ? 從索引1開始截取? ? >var c = arr.slice(1,-2);? =>等同于：arr.slice(1,3)? //如果第二個參數(shù)是負(fù)數(shù)的話次慢，就用數(shù)組的長度跟第二個參數(shù)相加，表示截取到相加之后的那個數(shù)字索引? ? >console.log(c);? //[2,3]? ? var d = arr.slice(-4,-2);? =>等同于：arr.slice(1,3)? 如果兩個參數(shù)都是負(fù)數(shù)的話翔曲，就結(jié)合上面兩種情況? ? >console.log(d);? //[2,3]8.splice(a,b,c); 方法：從索引a開始截取b個元素迫像，并用c替換截取的元素，并改變原來的數(shù)組瞳遍，如果只有一個參數(shù)闻妓，表示從這個索引開始截取到末尾splice(a,b) 方法里面如果第一個參數(shù)為負(fù)數(shù)的話，使用方法跟slice() 方法一樣掠械，如果第二個參數(shù)為負(fù)數(shù)的話由缆，表示截取的是一個空數(shù)組9.sort(function (a,b){return a-b}); 數(shù)組排序方法10.reverse(); 方法：數(shù)組翻轉(zhuǎn)方法11.forEach(function (ele,index){console.log(ele,index)}); 方法：遍歷數(shù)組，傳入一個回調(diào)函數(shù)猾蒂，里面有三個參數(shù)均唉，第一個是元素值，第二個是索引肚菠，第三個是數(shù)組12.every(function (ele){return ele > 20}); 傳入一個回調(diào)函數(shù)舔箭，返回值是boolean類型值? 例子：var arr = [1,2,3,4,5];? var a = arr.every(function (ele){ return ele > 3});? console.log(a);? //false? ? 數(shù)組里只要有一個數(shù)字小于3就返回false13.map(function (ele){return ele + 10}); 或 map(Math.sprt); 讓數(shù)組中的每一個元素按照函數(shù)的方法去執(zhí)行，返回一個新的數(shù)組14.filter(functoon (ele){return ele < 50}); 起到過濾作用蚊逢， 讓數(shù)組中的每一個元素按照函數(shù)的方法去執(zhí)行层扶，把符合條件的元素放到一個新的數(shù)組中返回15.eval(arr.join('+')); 如果數(shù)組中的每一項都是數(shù)字的話，用這個方法可以求數(shù)組中的數(shù)字之和? ? 例子：var arr = [1,2,3,4,5];? ? var a = eval(arr.join('+'));? ? console.log(a);? ? //15```字符串的方法```字符串最大的特點就是不可變1.charAt();方法： 找到索引對應(yīng)的字符串2.charCodeAt();方法 ：返回索引對應(yīng)的字符串的ASCII碼3.string.fromCharCode();方法 ：獲取ASCII碼對應(yīng)的字符串4.concat();方法：拼接字符串5.slice(a,b);方法： 從索引a開始截壤雍伞（包括a）镜会，一直截取到索引b（不包括b），如果里面只有一個參數(shù)奢讨，就直接截取到末尾slice(a,b); 如果里面的參數(shù)是負(fù)數(shù)的話稚叹，使用方法跟數(shù)組中的slice()方法一樣6.substring(a,b)方法：從索引a開始截取（包括a）拿诸，一直截取到索引b（不包括b）扒袖，如果里面只有一個 參數(shù)那么就直接截取到末尾substring(a,b); 如果第一個參數(shù)為負(fù)數(shù)的話，會自動轉(zhuǎn)化為0亩码，從索引0開始截取substring(a,b); 如果第二個參數(shù)為負(fù)數(shù)的話季率，會自動轉(zhuǎn)化為0，并且會把第一個參數(shù)和第二個參數(shù)的位置互換例子：var str = 'hello world';var a = str.substring(3,-7); => 等同于 str.substring(0,3);console.log(a); //hel? ? substring(a,b);? 如果兩個參數(shù)都是負(fù)數(shù)的話描沟，截取到的是空字符串7.substr(a,c); 方法： 從索引a開始截取c個元素? ? substr(a,b);? 如果第一個參數(shù)為負(fù)數(shù)的話飒泻，跟數(shù)組中slice()使用方法一樣? ? substr(a,b);? 如果第二個參數(shù)為負(fù)數(shù)鞭光，或者兩個參數(shù)都是負(fù)數(shù)的話，截取到的是空字符串8.indexOf();方法：從前往后查找字符串對應(yīng)的索引9.lastIndexOf();方法：從后往前查找字符串對應(yīng)的索引10.replace();方法 ：替換字符串> var str = "Welcome to Microsoft!";> str.replace(/Microsoft/, 'wahaha')11.trim();方法：把字符串兩邊的空格去掉用正則表達式可以把字符串中所有的空格都去掉例子：var reg = /\s+/;var str = ' hello? world? ';var a = str.replace(reg,'');console.log(a);? //helloworld12.toLowerCase();方法：轉(zhuǎn)小寫13.toUpperCase(); 方法：轉(zhuǎn)大寫14.toLocaleCompare();方法：比較15.search();方法：返回字符串對應(yīng)的索引16.match();方法：返回找到的字符串泞遗，沒有就返回null17.split();方法：用指定的字符串隔開惰许，并以數(shù)組的方式返回```--------------------------------### 6.js的三大特性:1. 繼承? 解決代碼冗余2. 封裝? 將抽象出來的屬性和對屬性的操作封裝在一起,屬性被保護在內(nèi)部,程序的其他部分只能用特定的操作來對屬性進行操作.3. 多態(tài)? 指一個引用(類型)在不同情況下的多種狀態(tài)。js天生擁有多態(tài)-------------------------------------------------------------------------------------### 7.形參和實參:調(diào)用的是實參, 聲明的是實參```success: fucntion(res)? // 形參obj.success(res)? //實參```-------------------------------------------------------------------------------------### 8.跨域怎么解決 --- (jsonp和cors) 原理:其本質(zhì)是利用了 script: src 天然的可跨域的特性, 由服務(wù)器端返回一個預(yù)先定義好的JavaScript函數(shù)的調(diào)用, 并且將服務(wù)器數(shù)據(jù)已改函數(shù)的形式傳遞過來,需要后端配合.? ---只能以get傳遞**常見解決ajax****跨域的方式：jsonp****史辙，cors****等**汹买。我們著重學(xué)習(xí)jsonp.**1.**靜態(tài)script標(biāo)簽的src屬性進行跨域請求（了解）缺點：不支持動態(tài)的傳遞參數(shù)**2.**動態(tài)創(chuàng)建script標(biāo)簽，通過標(biāo)簽的src屬性發(fā)送請求（重點掌握）```jsvar script = document.createElement('script');script.src = 'http://xxx.com/data.php?flag='+flag;var head = document.getElementByTagName('head')[0];head.appendChild(script);```優(yōu)點：可以動態(tài)的傳遞參數(shù)聊倔。缺點：動態(tài)創(chuàng)建script標(biāo)簽發(fā)出去的請求是異步請求晦毙。**jsonp****的本質(zhì)**：(1) 主要是利用了script標(biāo)簽的天然的跨域特性來發(fā)送請求(2) 它的實現(xiàn)方式: 在發(fā)送請求的時候傳遞一個函數(shù)名到后臺, 后臺的返回數(shù)據(jù)的時候回返回這個函數(shù)的調(diào)用形式,并且在()中拼接參數(shù)(3) ajax和jsonp的本質(zhì)不同, ajax的核心是通過XMLHttpRequest來發(fā)送請求, 而jsonp是通過script標(biāo)簽來實現(xiàn)請求的發(fā)送CORS在后臺加一個允許跨域的頭-------------------------------------------------------------------------------------### 9.cookie session 和 localstoragesessionStorage用于本地存儲一個會話（session）中的數(shù)據(jù)，這些數(shù)據(jù)只有在同一個會話中的頁面才能訪問并且當(dāng)會話結(jié)束后數(shù)據(jù)也隨之銷毀耙蔑。因此sessionStorage不是一種持久化的本地存儲见妒，僅僅是會話級別的存儲。而localStorage用于持久化的本地存儲甸陌，除非主動刪除數(shù)據(jù)须揣，否則數(shù)據(jù)是永遠不會過期的。web storage和cookie的區(qū)別Web Storage的概念和cookie相似钱豁，區(qū)別是它是為了更大容量存儲設(shè)計的返敬。Cookie的大小是受限的，并且每次你請求一個新的頁面的時候Cookie都會被發(fā)送過去寥院，這樣無形中浪費了帶寬，另外cookie還需要指定作用域涛目，不可以跨域調(diào)用秸谢。除此之外，Web Storage擁有setItem,getItem,removeItem,clear等方法霹肝，不像cookie需要前端開發(fā)者自己封裝setCookie估蹄，getCookie。但是Cookie也是不可以或缺的：Cookie的作用是與服務(wù)器進行交互沫换，作為HTTP規(guī)范的一部分而存在 臭蚁，而Web Storage僅僅是為了在本地“存儲”數(shù)據(jù)而生。```var keyArr = [];keyArr.push(keyword);// 將關(guān)鍵字?jǐn)?shù)組存儲在本地localStorage.setItem('keyArr', JSON.stringify(keyArr));```cookie和session的區(qū)別數(shù)據(jù)持久化存儲在服務(wù)器讯赏，為session技術(shù)垮兑。```為了實現(xiàn)業(yè)務(wù)邏輯的連續(xù)性，將部分信息持久化存儲在服務(wù)器端漱挎，可以保證數(shù)據(jù)的安全性及各個腳本之間的共享系枪。SESSION數(shù)據(jù)是基于COOKIE的。當(dāng)瀏覽器不同時磕谅，COOKIE數(shù)據(jù)不同私爷，對應(yīng)的SESSION文件也不同雾棺，無法讀取到SESSION數(shù)據(jù)。從HTTP協(xié)議衬浑，為什么SESSION是基于COOKIE的捌浩？瀏覽器請求a.php時：PHP腳本中，基于不同瀏覽器工秩、使用特定的算法尸饺，生成瀏覽器對應(yīng)的唯一身份信息。并判斷該瀏覽器對應(yīng)的SESSION文件是否存在拓诸。不存在則創(chuàng)建以session開頭侵佃，后綴以與瀏覽器對應(yīng)的字符串身份信息。響應(yīng)時奠支，PHP腳本會將當(dāng)前SESSION會話的會話名稱（文件名一部分）馋辈，以COOKIE數(shù)據(jù)的形式返回給瀏覽器（在setcookie協(xié)議項中，COOKIE數(shù)據(jù)名為PHPSESSID）倍谜。瀏覽器再次請求本網(wǎng)站的任意頁面時迈螟，自動攜帶名為PHPSESSID的COOKIE數(shù)據(jù)，PHP按照會話名稱尔崔，查找對應(yīng)session文件答毫，將數(shù)據(jù)讀取到$_SESSION數(shù)組中。```數(shù)據(jù)持久化存儲在瀏覽器季春，為cookie技術(shù)洗搂。```什么是cookie?當(dāng)你在瀏覽網(wǎng)站的時候，WEB 服務(wù)器會先送一小小資料放在你的計算機上载弄，Cookie 會幫你在網(wǎng)站上所打的文字或是一些選擇耘拇，都紀(jì)錄下來。當(dāng)下次你再光臨同一個網(wǎng)站,WEB 服務(wù)器會先看看有沒有它上次留下的 Cookie 資料宇攻，有的話惫叛，就會依據(jù) Cookie里的內(nèi)容來判斷使用者，送出特定的網(wǎng)頁內(nèi)容給你逞刷。允許服務(wù)器腳本（PHP腳本）在瀏覽器端存儲數(shù)據(jù)嘉涌，并以此跟蹤及識別用戶的技術(shù)。數(shù)據(jù)設(shè)置后夸浅，瀏覽器再次請求服務(wù)器指定頁面時仑最，將相關(guān)的數(shù)據(jù)(身份信息)發(fā)送給服務(wù)器腳本，供腳本使用帆喇。 cookie本質(zhì)為簡單數(shù)據(jù)(string 類型)词身，基本操作邏輯為增刪改查設(shè)置cookiesetcookie(名，值番枚，有效期法严，有效路徑损敷， 有效的域名);```## [1.? session]()與COOKIE之間的區(qū)別與聯(lián)系### [1)? ? ? 區(qū)別]()l? **從存儲位置**：?? ? ? COOKIE存儲在瀏覽器，SESSION存儲的服務(wù)器端深啤。l? **數(shù)據(jù)安全****性：**?? ? ? session存儲在服務(wù)器端拗馒，不易獲取，更加安全溯街。（COOKIE存儲安全性要求不高的信息）l? **通過HTTP協(xié)議傳輸?shù)臄?shù)據(jù)量：**每次請求诱桂，COOKIE傳輸量較大。傳遞該網(wǎng)站相關(guān)的全部的COOKIE數(shù)據(jù)呈昔。l? **支持的數(shù)據(jù)類型：**COOKIE支持字符串挥等，SESSION幾乎所有的數(shù)據(jù)類型。?? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ### [2)? ? ? 聯(lián)系]()l? 都是用來解決HTTP協(xié)議的無狀態(tài)堤尾、無記憶的不足之處肝劲，以實現(xiàn)業(yè)務(wù)的連續(xù)性，如登錄及購物車模塊的實現(xiàn)郭宝。l? 二者都是會話技術(shù)的范疇 辞槐。l? SESSION需要依賴COOKIE（瀏覽器的身份信息，存儲瀏覽器對應(yīng)會話的名稱）進行數(shù)據(jù)的傳遞粘室。禁用COOKIE后榄檬，session無法正常使用）。 ------------------------------------### 10.Promise這么一看就明白了衔统，Promise是一個構(gòu)造函數(shù)鹿榜，自己身上有all、reject锦爵、resolve這幾個眼熟的方法犬缨，原型上有then、catch等同樣很眼熟的方法棉浸。這么說用Promise new出來的對象肯定就有then、catch方法嘍刺彩，沒錯迷郑。那就new一個玩玩吧。```var p = new Promise(function(resolve, reject){? ? //做一些異步操作? ? setTimeout(function(){? ? ? ? console.log('執(zhí)行完成');? ? ? ? resolve('隨便什么數(shù)據(jù)');? ? }, 2000);});```Promise的構(gòu)造函數(shù)接收一個參數(shù)创倔，是函數(shù)嗡害，并且傳入兩個參數(shù)：resolve，reject畦攘，分別表示異步操作執(zhí)行成功后的回調(diào)函數(shù)和異步操作執(zhí)行失敗后的回調(diào)函數(shù)霸妹。其實這里用“成功”和“失敗”來描述并不準(zhǔn)確，按照標(biāo)準(zhǔn)來講知押，resolve是將Promise的狀態(tài)置為fullfiled叹螟，reject是將Promise的狀態(tài)置為rejected鹃骂。不過在我們開始階段可以先這么理解，后面再細究概念罢绽。在上面的代碼中畏线，我們執(zhí)行了一個異步操作，也就是setTimeout良价，2秒后寝殴，輸出“執(zhí)行完成”，并且調(diào)用resolve方法明垢。這時候你應(yīng)該有兩個疑問：1.包裝這么一個函數(shù)有毛線用蚣常？2.resolve('隨便什么數(shù)據(jù)');這是干毛的？我們繼續(xù)來講痊银。在我們包裝好的函數(shù)最后抵蚊，會return出Promise對象，也就是說曼验，執(zhí)行這個函數(shù)我們得到了一個Promise對象泌射。還記得Promise對象上有then、catch方法吧鬓照？這就是強大之處了熔酷，看下面的代碼：```runAsync().then(function(data){? ? console.log(data);? ? //后面可以用傳過來的數(shù)據(jù)做些其他操作? ? //......});```在runAsync()的返回上直接調(diào)用then方法，then接收一個參數(shù)豺裆，是函數(shù)拒秘，并且會拿到我們在runAsync中調(diào)用resolve時傳的的參數(shù)。運行這段代碼臭猜，會在2秒后輸出“執(zhí)行完成”躺酒，緊接著輸出“隨便什么數(shù)據(jù)”。這時候你應(yīng)該有所領(lǐng)悟了蔑歌，原來then里面的函數(shù)就跟我們平時的回調(diào)函數(shù)一個意思羹应，能夠在runAsync這個異步任務(wù)執(zhí)行完成之后被執(zhí)行。這就是Promise的作用了次屠，簡單來講园匹，就是能把原來的回調(diào)寫法分離出來，在異步操作執(zhí)行完后劫灶，用鏈?zhǔn)秸{(diào)用的方式執(zhí)行回調(diào)函數(shù)裸违。```runAsync1().then(function(data){? ? console.log(data);? ? return runAsync2();}).then(function(data){? ? console.log(data);? ? return runAsync3();}).then(function(data){? ? console.log(data);});```這樣能夠按順序，每隔兩秒輸出每個異步回調(diào)中的內(nèi)容本昏，在runAsync2中傳給resolve的數(shù)據(jù)供汛，能在接下來的then方法中拿到。運行結(jié)果如下： 在then方法中，你也可以直接return數(shù)據(jù)而不是Promise對象怔昨，在后面的then中就可以接收到數(shù)據(jù)了雀久，比如我們把上面的代碼修改成這樣：```runAsync1().then(function(data){? ? console.log(data);? ? return runAsync2();}).then(function(data){? ? console.log(data);? ? return '直接返回數(shù)據(jù)';? //這里直接返回數(shù)據(jù)}).then(function(data){? ? console.log(data);});```那么輸出就變成了這樣：-------------------------------------------------------------------------------------### 11.forEach和jq中的each數(shù)組的循環(huán) forEach方法```jsvar arr =? [1,2,3,4];//遍歷數(shù)組arr.forEach(function(value,index){? console.log();});``````jsvar arr = ['娃哈哈','爽歪歪','冰紅茶','雪碧'];arr.forEach((value, index)=>{? console.log(index + '===' + value);})```jq中的each方法```js$('.imgUl>li').each(function (i,v) {? $('

' + (i+1) + '

').appendTo($('.btnOl'))})```-------------------------------------------------------------------------------------### 12.垂直居中```js// 方法一：已知元素的高寬#div1{? ? background-color:#6699FF;? ? width:200px;? ? height:200px;? ? position: absolute;? ? ? ? //父元素需要相對定位? ? top: 50%;? ? left: 50%;? ? margin-top:-100px ;? //二分之一的height，width? ? margin-left: -100px;? ? } //方法二:未知元素的高寬? #div1{? ? width: 200px;? ? height: 200px;? ? background-color: #6699FF;? ? margin:auto;? ? position: absolute;? ? ? ? //父元素需要相對定位? ? left: 0;? ? top: 0;? ? right: 0;? ? bottom: 0;? ? }那么問題來了朱监，如何垂直居中一個

?（用更簡便的方法岸啡。）#container? ? //

need-to-insert-img

的容器設(shè)置如下{? ? display:table-cell;? ? text-align:center;? ? vertical-align:middle;}```-------------------------------------------------------------------------------------### 13.rem的用法``````--------------------------------------------------------### 14.this的指向問題this對象的理解 this總是指向函數(shù)的直接調(diào)用者（而非間接調(diào)用者）;----------函數(shù)定義的時候this是沒有指向的,只有在調(diào)用的時候才有指向,----------如果函數(shù)包含多個對象,盡管這個函數(shù)是被最外層的調(diào)用的,也是指向上一層的函數(shù)如果有new關(guān)鍵字，this指向new出來的那個對象赫编； 在事件中巡蘸，this指向觸發(fā)這個事件的對象，特殊的是擂送，IE中的attachEvent中的this總是指向全局對象Window悦荒。構(gòu)造函數(shù)里的thisnew做了什么（1）創(chuàng)建一個空對象，并且 this 變量引用該對象嘹吨，同時還繼承了該函數(shù)的原型搬味。 （2）屬性和方法被加入到 this 引用的對象中。 （3）新創(chuàng)建的對象由 this 所引用蟀拷，并且最后隱式的返回 this 碰纬。箭頭函數(shù)里的this指向箭頭函數(shù)里的this指向與箭頭函數(shù)外的this指向相同```jsdocument.getElementByID('btn').onclick = function(){? var this = This;? setTimeout(function(){? ? This.style.backgroundColor = 'red';? })}```--------------------------------------------------### 15.清楚浮動的方法清除浮動有哪些方式？比較好的方式是哪一種问芬？ (Q1) （1）父級div定義height悦析。 （2）結(jié)尾處加空div標(biāo)簽clear:both。 （3）父級div定義偽類:after和zoom此衅。 （4）父級div定義overflow:hidden强戴。（5）父級div定義overflow:auto。 （6）父級div也浮動挡鞍，需要定義寬度骑歹。 （7）父級div定義display:table。 （8）結(jié)尾處加br標(biāo)簽clear:both墨微。(Q2) 比較好的是第3種方式道媚，好多網(wǎng)站都這么用。頁面導(dǎo)入樣式時翘县，使用link和@import有什么區(qū)別最域？ （1）link屬于XHTML標(biāo)簽，除了加載CSS外炼蹦，還能用于定義RSS, 定義rel連接屬性等作用；而@import是CSS提供的狸剃，只能用于加載CSS; （2）頁面被加載的時掐隐，link會同時被加載，而@import引用的CSS會等到頁面被加載完再加載; （3）import是CSS2.1 提出的，只在IE5以上才能被識別虑省，而link是XHTML標(biāo)簽匿刮，無兼容問題。----------------------------------------### 17.你有哪些性能優(yōu)化的方法探颈？ （1） 減少http請求次數(shù)：CSS Sprites, JS熟丸、CSS源碼壓縮、圖片大小控制合適伪节；網(wǎng)頁Gzip光羞，CDN托管，data緩存 怀大，圖片服務(wù)器纱兑。 （2） 前端模板 JS+數(shù)據(jù)，減少由于HTML標(biāo)簽導(dǎo)致的帶寬浪費化借，前端用變量保存AJAX請求結(jié)果潜慎，每次操作本地變量，不用請求蓖康，減少請求次數(shù) （3） 用innerHTML代替DOM操作铐炫，減少DOM操作次數(shù)，優(yōu)化javascript性能蒜焊。 （4） 當(dāng)需要設(shè)置的樣式很多時設(shè)置className而不是直接操作style倒信。 （5） 少用全局變量、緩存DOM節(jié)點查找的結(jié)果山涡。減少IO讀取操作堤结。（6） 避免使用CSS Expression（css表達式)又稱Dynamic properties(動態(tài)屬性)。 （7） 圖片預(yù)加載鸭丛，將樣式表放在頂部竞穷，將腳本放在底部? 加上時間戳。----------------------------------------### 18.請求報文和響應(yīng)報文#### 請求行:如請求方式, 請求的頁面, 遵循的協(xié)議GET的方式:```GET http://www.test.com/day07/student/edit.php?stu_id=1 HTTP/1.1```POST的方式:```POST http://www.test.com/day07/student/update.php?stu_id=1 HTTP/1.1```#### 請求頭:如通知服務(wù)器, 瀏覽器支持的數(shù)據(jù)類型?請求中鳞溉，所有當(dāng)前要用到的協(xié)議項的集合瘾带，即瀏覽器在發(fā)送真正請求數(shù)據(jù)之前，事先告訴服務(wù)器的一些信息（一般是瀏覽器自身的信息）熟菲，并且每個協(xié)議項都要獨占一行看政。#### 請求體: 請求數(shù)據(jù)，主要是通過表單提交的數(shù)據(jù)抄罕。?? ? ? 消息體（entity-body）允蚣，請求體。只有POST方式提交的數(shù)據(jù)才會在請求數(shù)據(jù)中出現(xiàn)呆贿。一般使用application/x-www-form-urlencoded方式對表單數(shù)據(jù)進行編碼嚷兔，文件上傳時必須使用multipart/form-data方式森渐。#### 請求數(shù)據(jù): 提交的核心數(shù)據(jù): post數(shù)據(jù)#### 狀態(tài)行(響應(yīng)行):請求資源成功,失敗,或者其他狀態(tài)HTTP/1.1 200 ok#### 響應(yīng)頭:通知瀏覽器一些信息, 如返回數(shù)據(jù)的類型, 使用什么字符集顯示數(shù)據(jù)#### 響應(yīng)體:請求的HTML,PHP輸出語句返回的數(shù)據(jù).-------------------------------------------### 19.閉包的理解一、變量的作用域要理解閉包冒晰，首先必須理解Javascript特殊的變量作用域同衣。變量的作用域無非就是兩種：全局變量和局部變量。Javascript語言的特殊之處壶运，就在于函數(shù)內(nèi)部可以直接讀取全局變量耐齐。二、如何從外部讀取局部變量蒋情？出于種種原因埠况，我們有時候需要得到函數(shù)內(nèi)的局部變量。但是恕出，前面已經(jīng)說過了询枚，正常情況下，這是辦不到的浙巫，只有通過變通方法才能實現(xiàn)金蜀。那就是在函數(shù)的內(nèi)部，再定義一個函數(shù)的畴。Js代碼```jsfunction f1(){　? n=999;? function f2(){? alert(n); // 999? }}```在上面的代碼中渊抄，函數(shù)f2就被包括在函數(shù)f1內(nèi)部，這時f1內(nèi)部的所有局部變量丧裁，對f2都是可見的护桦。但是反過來就不行，f2內(nèi)部的局部變量煎娇，對f1 就是不可見的二庵。這就是Javascript語言特有的“鏈?zhǔn)阶饔糜颉苯Y(jié)構(gòu)（chain scope），子對象會一級一級地向上尋找所有父對象的變量缓呛。所以催享，父對象的所有變量，對子對象都是可見的哟绊，反之則不成立因妙。既然f2可以讀取f1中的局部變量，那么只要把f2作為返回值票髓，我們不就可以在f1外部讀取它的內(nèi)部變量了嗎攀涵！```jsfunction f1(){ n=999; function f2(){alert(n); } return f2; }var result=f1();result(); // 999```四、閉包的用途閉包可以用在許多地方洽沟。它的最大用處有兩個以故，一個是前面提到的可以讀取函數(shù)內(nèi)部的變量，另一個就是讓這些變量的值始終保持在內(nèi)存中裆操。五怒详、使用閉包的注意點1）由于閉包會使得函數(shù)中的變量都被保存在內(nèi)存中鳄乏，內(nèi)存消耗很大，所以不能濫用閉包棘利，否則會造成網(wǎng)頁的性能問題，在IE中可能導(dǎo)致內(nèi)存泄露朽缴。解決方法是善玫，在退出函數(shù)之前，將不使用的局部變量全部刪除密强。2）閉包會在父函數(shù)外部茅郎，改變父函數(shù)內(nèi)部變量的值。所以或渤，如果你把父函數(shù)當(dāng)作對象（object）使用系冗，把閉包當(dāng)作它的公用方法（Public Method），把內(nèi)部變量當(dāng)作它的私有屬性（private value）薪鹦，這時一定要小心掌敬，不要隨便改變父函數(shù)內(nèi)部變量的值。```jsvar name = "The Window";var object = {　　name : "My Object",　　getNameFunc : function(){　　　　return function(){　　　　　　return this.name;　　　};　　}};alert(object.getNameFunc()()); //The Windowvar name = "The Window";var object = {　　name : "My Object",　　getNameFunc : function(){? ? ? obj = this;　　　　return function(){　　　　　　return obj.name;　　　};　　}};alert(object.getNameFunc()()); // My Object```-----------------------------------------### 20.絕對路徑與相對路徑--------------------------------------------------------### 21.DOM樹---------------------------### 22.url獲取值```1.url中的值: /***/:id? 使用params獲取``````2.url中的值: /***?id=3&name=zs? 使用query獲取```---------------------------### 23.路由? ? 后端路由:一個前端的URL地址對應(yīng)后臺的一個資源(后端路由一定會涉及到數(shù)據(jù)請求)? ? 前端路由: 通過瀏覽器的特性(window.location.hash/window.history)實現(xiàn)無刷新的跳轉(zhuǎn)頁面### 24.es6模塊規(guī)范化(導(dǎo)入導(dǎo)出)? import```js//全部導(dǎo)出 一個js文件中只能出現(xiàn)一次export default? 出現(xiàn)export default 就不能出現(xiàn)exportfunciton tool() {? console.log('工具函數(shù)')}export default {tool:tool}? //utils就是導(dǎo)出的對象import utils from './utils.js'utils.tool()``````js//按需導(dǎo)出 可以出現(xiàn)多次export funciton tool() {? console.log('工具函數(shù)')}//對應(yīng)的導(dǎo)出方式是export function tool(){}//花括號中的變量必須和導(dǎo)出時的變量名稱同名//按需導(dǎo)入import {tool} from './utils.js'```

need-to-insert-img