## 經典bug:1.模板引擎的渲染## 難點:### 0.vue總結#### 指令:```jsVue.directive('指令名稱',{ //自定義指令的生命周期函數 bind(){}, //參數1el 參數2binding inserted(){}, update(){},})//當bind和update函數內部的業務邏輯一模一樣的時候,可以簡寫Vue.directive('指令名稱', (el,binding)=>{})```#### 組件:```js//全局指令Vue.directive('mycolor',{ inserted(el,binding){ el.style.color = binding.value }})//全局過濾器Vue.filter('fmtName', function (v, arg) { // v 就是需要過濾的原始數據 也就是管道符|左邊的內容 var data = arg + v // 返回處理好的數據 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: {? },? //定義當前vue實例用到的任何函數? methods: {? },? //生命周期函數? created:{? },//? mounted(){? },? updated(){? },? //計算屬性? computed:{? },? watch:{? ? ? handler(){? ? ? },? ? ? deep: true? },})```組件是用來封裝重復的視圖一:定義組件(1) 1.創建組件的模板對象```jsvar login=Vue.extend({? // template 是用來寫視圖代碼的地方? template: '
登錄
'})``` 2.使用Vue.component()注冊組件```jsVue.component('login',login)```二:定義組價(2)```jsVue.component('register',{template: '
注冊
',})```三:定義組件(3)定義組件的第三種方法: template里面的結構使用選擇器選擇頁面中的元素注意: template使用的選擇器選擇的模板元素必須寫在Vue托管區域外,模板便簽`````jsVue.component('account',{template: '#account',})```注意:1.template里面的選擇器的模板元素必須寫在Vue托管區域外2.模板標簽叫做(也有別的寫法,不推薦)3.組件模板必須有一個唯一的根元素4.組件內部的data屬性必須在當前組件的模板中進行使用5.所有組件的模板都是定義在托管區域外的,都是平級的,不存在嵌套6.組件名稱,組件的屬性名稱,組件的事件名稱如果使用了駝峰命名法,都必須使用純小寫,并用連接符-鏈接#### 路由:前端路由: 通過瀏覽器的特性(window.location.hash)實現無刷新的頁面跳轉路由傳參中的this.$route(分別表示routes數組里的對應的路由對象,每次打印的都不一樣,是用來獲取參數的)? this.$router(每次打印的都一樣,指的是用new VueRouter創建出來的路由對象,主要用于頁面間的跳轉)#### 組件生命周期:```js? ? ? ? ? ? ? ? ? ? ? ? 數據初始化(created)? ? ? ? 初始化階段? ? ? ? ? ? ? ? ? ? ? ? 頁面初始化(mounted)? ? ? ? ? ? ? ? ? ? ? ? ? ? 運行階段 updated? ? ? ? ? ? ? ? ? ? ? ? 銷毀階段 destoryed? ? ? ? ? ? ? ? ? ? ? ? 生命周期函數,只需要搞清楚生命周期函數的執行時期和執行的特點,在實際開發中到低可以寫什么代碼? ? beforeCreate? ? ? ? 執行時機: 當vue實例一被初始化時,vue對象唄創建時觸發.? ? ? ? 特點: 此時vue實例上什么都沒有!? ? ? ? 沒用? ? ? ? created? ? ? ? 執行時機: 當vue實例被創建完成時,所有屬性和方法都已經掛在完畢是執行.? ? ? ? 特點: 此時vue實例data中的屬性和methods中的方法(filteds,directive)都已經綁定到實例上了? ? ? ? 實際運用: 1.數據的初始化. 2.發送網絡請求? ? ? ? beforeMount? ? ? ? 執行時機: vue的dom已經渲染到頁面了,但是使用的各種指令還沒被正確解析,如果獲取真實dom,獲取的還會帶有各種指令? ? ? ? 特點: dom還還帶著各種指令? ? ? ? 實際運用: 沒用? ? ? ? mounted? ? ? ? 執行時機: vue的dom已經渲染到頁面了, 同時各種指令已經正確解析了? ? ? ? 特點: 真實dom已經完全渲染完畢? ? ? ? 實際運用: 只要涉及到獲取真實dom,就會用? ? ? ? beforeUpdate? ? ? ? 執行時機: 當data中數據發送改變的時候? ? ? ? 特點: data中的數據已經發送了變化,但是頁面還沒有重新渲染過來? ? ? ? 實際運用: 很少用到? ? ? ? updated 執行時機: 當data中數據發送改變的時候 特點: data中的數據已經發送了變化,頁面重新渲染完成? ? ? ? 實際運用: 設計到數據變化時會用到? ? ? ? beforeDestory? ? ? ? 執行時機: 當vue實例被銷毀時,執行? ? ? ? 特點: 雖然已經接收到銷毀的信息,但是data和methods還可以繼續使用? ? ? ? 實際運用: 清除不在使用的變量, 比如: 清除定時器的操作? ? ? ? destoryed? ? ? ? 執行時機: 當vue實例被銷毀時,執行? ? ? ? 特點: 涼了? ? ? ? 實際運用: 不用```-------------------------### 1.JSON.parse() 和JSON.stringftyJSON.parse()? `[{},{}]`JSON.stringify() 方法用于將 JavaScript 值轉換為 JSON 字符串? ? ? ? ? ? ? ? `"[{},{}]"`-------------### 2.ES5 中引入的部分數組方法1> forEach2> map3> filter4> some5> every6> indexOf7> lastIndexOf---------------------------------### 3.函數的四種調用模式:1. 函數模式? - 函數的定義方式? ? - 表達式? ? - 聲明式? ? - Function? - 單獨獨立調用的就是函數? - this表達全局對象? - 任何自調用都是函數模式2. 方法模式? - 區分? ? 方法本身就是函數,但是方法不是單獨獨立的調用,而是通過一個對象調用? - this表示引導方法的對象3. 構造器函數? constructor? - 區分? ? 使用 new 關鍵字引導? - 執行步驟? ? var p = new Person();? ? new 是一個運算符, 專門用來申請創建對象,創建出來的隊象傳遞給構造函數的 this利用構造函數對其初始化? ? function Person () {? ? ?this.name = 'jim',? ? ?this.age = 19.? ? ?this.gender = 'male'? ? }? - 返回值? ? 如果不寫return語句, 那么構造函數默認返回 this 如果在構造函數中寫上 return 語句, 并緊跟基本類型(return num , return 1223), 則忽略this? - 如果調用構造函數的時候, 構造函數沒有參數, 圓括號是可以省略的4. 上下文調用? 就是 環境調用模式 => 在不同環境下的不同調用模式? 簡單說就是統一一種格式, 可以實現 函數模式與方法模式? - 語法(區分)? ? - call 形式? ? ? 函數名.call()? ? - apply 形式? ? ? 函數名.apply()? - 用法? ? call() 和 apply() 的區別和作用？? ? apply()函數有兩個參數：第一個參數是上下文，第二個參數是參數組成的數組。如果上下文是null，則使用全局對象代替。 如：function.apply(this,[1,2,3]);? ? call()的第一個參數是上下文，后續是實例傳入的參數序列。 如：function.call(this,1,2,3);? ? // bind call apply? - 都可以改變this指向? - 只能函數使用? ? ```? ? function fn (a, b) {? ? ? ? console.log('兒童節快樂！', a + b)? ? ? ? console.log(this)? ? }? ? // console.dir(fn)? ? var arr = [45, 56]? ? var obj = {name: 666}? ? // 1. call 是一個方法call(this指向, 傳遞參數) call借用函數同時改變this之后幫其調用? ? /* fn.call(arr, 66, 100)? ? // 2. apply等同與call 區別就是傳遞參數? ? fn.apply(arr, [66, 100]) */? ? // 3. bind 但是它不會幫我們調用? ? var ff = fn.bind(obj, 46545, 56161465)? ? // console.log(ff)? ? ff()? ? ```? ? ```? ? // 4. this的使用? ? var btn = document.querySelector('.btn')? ? btn.onclick = function() {? ? ? ? console.log('中國桃之鄉襄陽')? ? ? ? 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 使用箭頭函數? 優點 就是沒有this指向? ? ? ? setTimeout(() =>{? ? ? ? ? ? // console.log(that) // 我想讓這句話打印button怎么辦? ? ? ? ? ? console.log(this)? ? ? ? }, 1000)? ? ? ? // 箭頭函數? 是es6中的新語法? ? ? ? // var fn = function (a, b) {}? ==》var fn = (a, b) => {}? ? }? ? ```------------------------------------### 4.事件隊列:定時函數事件函數ajax回調函數前段開發中, 三種情況有事件隊列1. 主線程已經空閑2. 任務滿足觸發條件? - 定時函數(延時時間已經到達)? - 事件函數(特定事件被觸發)? - ajax的回調函數(服務器端有數據響應)常見的面試題```jsconsole.log(1);setTimeout(function(){? console.log(2);},10);console.log(3);//結果為1,3,2//先執行主線程中的代碼,打印1,3再執行事件隊列中的函數,打印2```-----------------------------------------### 5.數組,對象操作(基礎api)數組的方法```1.push(); 方法：在數組的最后面添加內容，返回值是添加后數組的長度2.pop() 方法：把數組的最后一個刪除，返回值是刪除的那一項3.unshift() 方法：在數組的最前面添加內容，返回值是添加后數組的長度4.shift() 方法：刪除數組中的第一項，返回值是刪除的那一項5.concat() 方法：拼接數組6.join() 方法：把數組中的每一項用特定的字符串連接起來7.slice(a,b) 方法： 從索引a開始截取（包括a），一直截取到b（不包括b），如果里面只有一個參數，，那么就直接截取到末尾，不會改變原來的數組? ? > var arr = [1,2,3,4,5];? ? > var a = arr.slice(-8,3);? =>等同于：arr.slice(0,3)? //如果第一個參數是負數，就用數組的長度跟這個負數相加，如果相加后的數字小于等于0，就表示從索引0開始截取，如果大于0，就表示從相加之后的那個數字索引開始截取? ? > 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)? //如果第二個參數是負數的話，就用數組的長度跟第二個參數相加，表示截取到相加之后的那個數字索引? ? >console.log(c);? //[2,3]? ? var d = arr.slice(-4,-2);? =>等同于：arr.slice(1,3)? 如果兩個參數都是負數的話，就結合上面兩種情況? ? >console.log(d);? //[2,3]8.splice(a,b,c); 方法：從索引a開始截取b個元素，并用c替換截取的元素，并改變原來的數組，如果只有一個參數，表示從這個索引開始截取到末尾splice(a,b) 方法里面如果第一個參數為負數的話，使用方法跟slice() 方法一樣，如果第二個參數為負數的話，表示截取的是一個空數組9.sort(function (a,b){return a-b}); 數組排序方法10.reverse(); 方法：數組翻轉方法11.forEach(function (ele,index){console.log(ele,index)}); 方法：遍歷數組，傳入一個回調函數，里面有三個參數，第一個是元素值，第二個是索引，第三個是數組12.every(function (ele){return ele > 20}); 傳入一個回調函數，返回值是boolean類型值? 例子：var arr = [1,2,3,4,5];? var a = arr.every(function (ele){ return ele > 3});? console.log(a);? //false? ? 數組里只要有一個數字小于3就返回false13.map(function (ele){return ele + 10}); 或 map(Math.sprt); 讓數組中的每一個元素按照函數的方法去執行，返回一個新的數組14.filter(functoon (ele){return ele < 50}); 起到過濾作用， 讓數組中的每一個元素按照函數的方法去執行，把符合條件的元素放到一個新的數組中返回15.eval(arr.join('+')); 如果數組中的每一項都是數字的話，用這個方法可以求數組中的數字之和? ? 例子：var arr = [1,2,3,4,5];? ? var a = eval(arr.join('+'));? ? console.log(a);? ? //15```字符串的方法```字符串最大的特點就是不可變1.charAt();方法： 找到索引對應的字符串2.charCodeAt();方法 ：返回索引對應的字符串的ASCII碼3.string.fromCharCode();方法 ：獲取ASCII碼對應的字符串4.concat();方法：拼接字符串5.slice(a,b);方法： 從索引a開始截取（包括a），一直截取到索引b（不包括b），如果里面只有一個參數，就直接截取到末尾slice(a,b); 如果里面的參數是負數的話，使用方法跟數組中的slice()方法一樣6.substring(a,b)方法：從索引a開始截取（包括a），一直截取到索引b（不包括b），如果里面只有一個 參數那么就直接截取到末尾substring(a,b); 如果第一個參數為負數的話，會自動轉化為0，從索引0開始截取substring(a,b); 如果第二個參數為負數的話，會自動轉化為0，并且會把第一個參數和第二個參數的位置互換例子：var str = 'hello world';var a = str.substring(3,-7); => 等同于 str.substring(0,3);console.log(a); //hel? ? substring(a,b);? 如果兩個參數都是負數的話，截取到的是空字符串7.substr(a,c); 方法： 從索引a開始截取c個元素? ? substr(a,b);? 如果第一個參數為負數的話，跟數組中slice()使用方法一樣? ? substr(a,b);? 如果第二個參數為負數，或者兩個參數都是負數的話，截取到的是空字符串8.indexOf();方法：從前往后查找字符串對應的索引9.lastIndexOf();方法：從后往前查找字符串對應的索引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();方法：轉小寫13.toUpperCase(); 方法：轉大寫14.toLocaleCompare();方法：比較15.search();方法：返回字符串對應的索引16.match();方法：返回找到的字符串，沒有就返回null17.split();方法：用指定的字符串隔開，并以數組的方式返回```--------------------------------### 6.js的三大特性:1. 繼承? 解決代碼冗余2. 封裝? 將抽象出來的屬性和對屬性的操作封裝在一起,屬性被保護在內部,程序的其他部分只能用特定的操作來對屬性進行操作.3. 多態? 指一個引用(類型)在不同情況下的多種狀態。js天生擁有多態-------------------------------------------------------------------------------------### 7.形參和實參:調用的是實參, 聲明的是實參```success: fucntion(res)? // 形參obj.success(res)? //實參```-------------------------------------------------------------------------------------### 8.跨域怎么解決 --- (jsonp和cors) 原理:其本質是利用了 script: src 天然的可跨域的特性, 由服務器端返回一個預先定義好的JavaScript函數的調用, 并且將服務器數據已改函數的形式傳遞過來,需要后端配合.? ---只能以get傳遞**常見解決ajax****跨域的方式：jsonp****，cors****等**。我們著重學習jsonp.**1.**靜態script標簽的src屬性進行跨域請求（了解）缺點：不支持動態的傳遞參數**2.**動態創建script標簽，通過標簽的src屬性發送請求（重點掌握）```jsvar script = document.createElement('script');script.src = 'http://xxx.com/data.php?flag='+flag;var head = document.getElementByTagName('head')[0];head.appendChild(script);```優點：可以動態的傳遞參數。缺點：動態創建script標簽發出去的請求是異步請求。**jsonp****的本質**：(1) 主要是利用了script標簽的天然的跨域特性來發送請求(2) 它的實現方式: 在發送請求的時候傳遞一個函數名到后臺, 后臺的返回數據的時候回返回這個函數的調用形式,并且在()中拼接參數(3) ajax和jsonp的本質不同, ajax的核心是通過XMLHttpRequest來發送請求, 而jsonp是通過script標簽來實現請求的發送CORS在后臺加一個允許跨域的頭-------------------------------------------------------------------------------------### 9.cookie session 和 localstoragesessionStorage用于本地存儲一個會話（session）中的數據，這些數據只有在同一個會話中的頁面才能訪問并且當會話結束后數據也隨之銷毀。因此sessionStorage不是一種持久化的本地存儲，僅僅是會話級別的存儲。而localStorage用于持久化的本地存儲，除非主動刪除數據，否則數據是永遠不會過期的。web storage和cookie的區別Web Storage的概念和cookie相似，區別是它是為了更大容量存儲設計的。Cookie的大小是受限的，并且每次你請求一個新的頁面的時候Cookie都會被發送過去，這樣無形中浪費了帶寬，另外cookie還需要指定作用域，不可以跨域調用。除此之外，Web Storage擁有setItem,getItem,removeItem,clear等方法，不像cookie需要前端開發者自己封裝setCookie，getCookie。但是Cookie也是不可以或缺的：Cookie的作用是與服務器進行交互，作為HTTP規范的一部分而存在 ，而Web Storage僅僅是為了在本地“存儲”數據而生。```var keyArr = [];keyArr.push(keyword);// 將關鍵字數組存儲在本地localStorage.setItem('keyArr', JSON.stringify(keyArr));```cookie和session的區別數據持久化存儲在服務器，為session技術。```為了實現業務邏輯的連續性，將部分信息持久化存儲在服務器端，可以保證數據的安全性及各個腳本之間的共享。SESSION數據是基于COOKIE的。當瀏覽器不同時，COOKIE數據不同，對應的SESSION文件也不同，無法讀取到SESSION數據。從HTTP協議，為什么SESSION是基于COOKIE的？瀏覽器請求a.php時：PHP腳本中，基于不同瀏覽器、使用特定的算法，生成瀏覽器對應的唯一身份信息。并判斷該瀏覽器對應的SESSION文件是否存在。不存在則創建以session開頭，后綴以與瀏覽器對應的字符串身份信息。響應時，PHP腳本會將當前SESSION會話的會話名稱（文件名一部分），以COOKIE數據的形式返回給瀏覽器（在setcookie協議項中，COOKIE數據名為PHPSESSID）。瀏覽器再次請求本網站的任意頁面時，自動攜帶名為PHPSESSID的COOKIE數據，PHP按照會話名稱，查找對應session文件，將數據讀取到$_SESSION數組中。```數據持久化存儲在瀏覽器，為cookie技術。```什么是cookie?當你在瀏覽網站的時候，WEB 服務器會先送一小小資料放在你的計算機上，Cookie 會幫你在網站上所打的文字或是一些選擇，都紀錄下來。當下次你再光臨同一個網站,WEB 服務器會先看看有沒有它上次留下的 Cookie 資料，有的話，就會依據 Cookie里的內容來判斷使用者，送出特定的網頁內容給你。允許服務器腳本（PHP腳本）在瀏覽器端存儲數據，并以此跟蹤及識別用戶的技術。數據設置后，瀏覽器再次請求服務器指定頁面時，將相關的數據(身份信息)發送給服務器腳本，供腳本使用。 cookie本質為簡單數據(string 類型)，基本操作邏輯為增刪改查設置cookiesetcookie(名，值，有效期，有效路徑， 有效的域名);```## [1.? session]()與COOKIE之間的區別與聯系### [1)? ? ? 區別]()l? **從存儲位置**：?? ? ? COOKIE存儲在瀏覽器，SESSION存儲的服務器端。l? **數據安全****性：**?? ? ? session存儲在服務器端，不易獲取，更加安全。（COOKIE存儲安全性要求不高的信息）l? **通過HTTP協議傳輸的數據量：**每次請求，COOKIE傳輸量較大。傳遞該網站相關的全部的COOKIE數據。l? **支持的數據類型：**COOKIE支持字符串，SESSION幾乎所有的數據類型。?? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ### [2)? ? ? 聯系]()l? 都是用來解決HTTP協議的無狀態、無記憶的不足之處，以實現業務的連續性，如登錄及購物車模塊的實現。l? 二者都是會話技術的范疇 。l? SESSION需要依賴COOKIE（瀏覽器的身份信息，存儲瀏覽器對應會話的名稱）進行數據的傳遞。禁用COOKIE后，session無法正常使用）。 ------------------------------------### 10.Promise這么一看就明白了，Promise是一個構造函數，自己身上有all、reject、resolve這幾個眼熟的方法，原型上有then、catch等同樣很眼熟的方法。這么說用Promise new出來的對象肯定就有then、catch方法嘍，沒錯。那就new一個玩玩吧。```var p = new Promise(function(resolve, reject){? ? //做一些異步操作? ? setTimeout(function(){? ? ? ? console.log('執行完成');? ? ? ? resolve('隨便什么數據');? ? }, 2000);});```Promise的構造函數接收一個參數，是函數，并且傳入兩個參數：resolve，reject，分別表示異步操作執行成功后的回調函數和異步操作執行失敗后的回調函數。其實這里用“成功”和“失敗”來描述并不準確，按照標準來講，resolve是將Promise的狀態置為fullfiled，reject是將Promise的狀態置為rejected。不過在我們開始階段可以先這么理解，后面再細究概念。在上面的代碼中，我們執行了一個異步操作，也就是setTimeout，2秒后，輸出“執行完成”，并且調用resolve方法。這時候你應該有兩個疑問：1.包裝這么一個函數有毛線用？2.resolve('隨便什么數據');這是干毛的？我們繼續來講。在我們包裝好的函數最后，會return出Promise對象，也就是說，執行這個函數我們得到了一個Promise對象。還記得Promise對象上有then、catch方法吧？這就是強大之處了，看下面的代碼：```runAsync().then(function(data){? ? console.log(data);? ? //后面可以用傳過來的數據做些其他操作? ? //......});```在runAsync()的返回上直接調用then方法，then接收一個參數，是函數，并且會拿到我們在runAsync中調用resolve時傳的的參數。運行這段代碼，會在2秒后輸出“執行完成”，緊接著輸出“隨便什么數據”。這時候你應該有所領悟了，原來then里面的函數就跟我們平時的回調函數一個意思，能夠在runAsync這個異步任務執行完成之后被執行。這就是Promise的作用了，簡單來講，就是能把原來的回調寫法分離出來，在異步操作執行完后，用鏈式調用的方式執行回調函數。```runAsync1().then(function(data){? ? console.log(data);? ? return runAsync2();}).then(function(data){? ? console.log(data);? ? return runAsync3();}).then(function(data){? ? console.log(data);});```這樣能夠按順序，每隔兩秒輸出每個異步回調中的內容，在runAsync2中傳給resolve的數據，能在接下來的then方法中拿到。運行結果如下： 在then方法中，你也可以直接return數據而不是Promise對象，在后面的then中就可以接收到數據了，比如我們把上面的代碼修改成這樣：```runAsync1().then(function(data){? ? console.log(data);? ? return runAsync2();}).then(function(data){? ? console.log(data);? ? return '直接返回數據';? //這里直接返回數據}).then(function(data){? ? console.log(data);});```那么輸出就變成了這樣：-------------------------------------------------------------------------------------### 11.forEach和jq中的each數組的循環 forEach方法```jsvar arr =? [1,2,3,4];//遍歷數組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
的容器設置如下{? ? display:table-cell;? ? text-align:center;? ? vertical-align:middle;}```-------------------------------------------------------------------------------------### 13.rem的用法``````--------------------------------------------------------### 14.this的指向問題this對象的理解 this總是指向函數的直接調用者（而非間接調用者）;----------函數定義的時候this是沒有指向的,只有在調用的時候才有指向,----------如果函數包含多個對象,盡管這個函數是被最外層的調用的,也是指向上一層的函數如果有new關鍵字，this指向new出來的那個對象； 在事件中，this指向觸發這個事件的對象，特殊的是，IE中的attachEvent中的this總是指向全局對象Window。構造函數里的thisnew做了什么（1）創建一個空對象，并且 this 變量引用該對象，同時還繼承了該函數的原型。 （2）屬性和方法被加入到 this 引用的對象中。 （3）新創建的對象由 this 所引用，并且最后隱式的返回 this 。箭頭函數里的this指向箭頭函數里的this指向與箭頭函數外的this指向相同```jsdocument.getElementByID('btn').onclick = function(){? var this = This;? setTimeout(function(){? ? This.style.backgroundColor = 'red';? })}```--------------------------------------------------### 15.清楚浮動的方法清除浮動有哪些方式？比較好的方式是哪一種？ (Q1) （1）父級div定義height。 （2）結尾處加空div標簽clear:both。 （3）父級div定義偽類:after和zoom。 （4）父級div定義overflow:hidden。（5）父級div定義overflow:auto。 （6）父級div也浮動，需要定義寬度。 （7）父級div定義display:table。 （8）結尾處加br標簽clear:both。(Q2) 比較好的是第3種方式，好多網站都這么用。頁面導入樣式時，使用link和@import有什么區別？ （1）link屬于XHTML標簽，除了加載CSS外，還能用于定義RSS, 定義rel連接屬性等作用；而@import是CSS提供的，只能用于加載CSS; （2）頁面被加載的時，link會同時被加載，而@import引用的CSS會等到頁面被加載完再加載; （3）import是CSS2.1 提出的，只在IE5以上才能被識別，而link是XHTML標簽，無兼容問題。----------------------------------------### 17.你有哪些性能優化的方法？ （1） 減少http請求次數：CSS Sprites, JS、CSS源碼壓縮、圖片大小控制合適；網頁Gzip，CDN托管，data緩存 ，圖片服務器。 （2） 前端模板 JS+數據，減少由于HTML標簽導致的帶寬浪費，前端用變量保存AJAX請求結果，每次操作本地變量，不用請求，減少請求次數 （3） 用innerHTML代替DOM操作，減少DOM操作次數，優化javascript性能。 （4） 當需要設置的樣式很多時設置className而不是直接操作style。 （5） 少用全局變量、緩存DOM節點查找的結果。減少IO讀取操作。（6） 避免使用CSS Expression（css表達式)又稱Dynamic properties(動態屬性)。 （7） 圖片預加載，將樣式表放在頂部，將腳本放在底部? 加上時間戳。----------------------------------------### 18.請求報文和響應報文#### 請求行:如請求方式, 請求的頁面, 遵循的協議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```#### 請求頭:如通知服務器, 瀏覽器支持的數據類型?請求中，所有當前要用到的協議項的集合，即瀏覽器在發送真正請求數據之前，事先告訴服務器的一些信息（一般是瀏覽器自身的信息），并且每個協議項都要獨占一行。#### 請求體: 請求數據，主要是通過表單提交的數據。?? ? ? 消息體（entity-body），請求體。只有POST方式提交的數據才會在請求數據中出現。一般使用application/x-www-form-urlencoded方式對表單數據進行編碼，文件上傳時必須使用multipart/form-data方式。#### 請求數據: 提交的核心數據: post數據#### 狀態行(響應行):請求資源成功,失敗,或者其他狀態HTTP/1.1 200 ok#### 響應頭:通知瀏覽器一些信息, 如返回數據的類型, 使用什么字符集顯示數據#### 響應體:請求的HTML,PHP輸出語句返回的數據.-------------------------------------------### 19.閉包的理解一、變量的作用域要理解閉包，首先必須理解Javascript特殊的變量作用域。變量的作用域無非就是兩種：全局變量和局部變量。Javascript語言的特殊之處，就在于函數內部可以直接讀取全局變量。二、如何從外部讀取局部變量？出于種種原因，我們有時候需要得到函數內的局部變量。但是，前面已經說過了，正常情況下，這是辦不到的，只有通過變通方法才能實現。那就是在函數的內部，再定義一個函數。Js代碼```jsfunction f1(){ ? n=999;? function f2(){? alert(n); // 999? }}```在上面的代碼中，函數f2就被包括在函數f1內部，這時f1內部的所有局部變量，對f2都是可見的。但是反過來就不行，f2內部的局部變量，對f1 就是不可見的。這就是Javascript語言特有的“鏈式作用域”結構（chain scope），子對象會一級一級地向上尋找所有父對象的變量。所以，父對象的所有變量，對子對象都是可見的，反之則不成立。既然f2可以讀取f1中的局部變量，那么只要把f2作為返回值，我們不就可以在f1外部讀取它的內部變量了嗎！```jsfunction f1(){ n=999; function f2(){alert(n); } return f2; }var result=f1();result(); // 999```四、閉包的用途閉包可以用在許多地方。它的最大用處有兩個，一個是前面提到的可以讀取函數內部的變量，另一個就是讓這些變量的值始終保持在內存中。五、使用閉包的注意點1）由于閉包會使得函數中的變量都被保存在內存中，內存消耗很大，所以不能濫用閉包，否則會造成網頁的性能問題，在IE中可能導致內存泄露。解決方法是，在退出函數之前，將不使用的局部變量全部刪除。2）閉包會在父函數外部，改變父函數內部變量的值。所以，如果你把父函數當作對象（object）使用，把閉包當作它的公用方法（Public Method），把內部變量當作它的私有屬性（private value），這時一定要小心，不要隨便改變父函數內部變量的值。```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地址對應后臺的一個資源(后端路由一定會涉及到數據請求)? ? 前端路由: 通過瀏覽器的特性(window.location.hash/window.history)實現無刷新的跳轉頁面### 24.es6模塊規范化(導入導出)? import```js//全部導出 一個js文件中只能出現一次export default? 出現export default 就不能出現exportfunciton tool() {? console.log('工具函數')}export default {tool:tool}? //utils就是導出的對象import utils from './utils.js'utils.tool()``````js//按需導出 可以出現多次export funciton tool() {? console.log('工具函數')}//對應的導出方式是export function tool(){}//花括號中的變量必須和導出時的變量名稱同名//按需導入import {tool} from './utils.js'```
need-to-insert-img
