Ajax

Ajax：

1. 是對(duì)現(xiàn)有技術(shù)的綜合利用（xhtml+css；dom動(dòng)態(tài)的顯示和交互脓杉；xml和json進(jìn)行數(shù)據(jù)交換；XMLHttpRequest進(jìn)行異步數(shù)據(jù)查詢）
2. 本質(zhì)：在HTTP協(xié)議的基礎(chǔ)上湖笨，以異步的方式辛润，通過(guò)XMLHttpRequest對(duì)象與服務(wù)器進(jìn)行通信胆数。
3. 作用：實(shí)現(xiàn)頁(yè)面數(shù)據(jù)的局部刷新怒允。

為什么需要ajax

異步：
定義：某段程序的執(zhí)行不阻塞其他程序的執(zhí)行砰嘁，程序的執(zhí)行順序不依賴于程序本身的書(shū)寫(xiě)順序淑蔚。
優(yōu)勢(shì)：不阻塞其他程序的執(zhí)行市殷，從而提升整體執(zhí)行效率。
劣勢(shì)：如果存在多個(gè)異步程序刹衫，無(wú)法判斷它們的執(zhí)行先后順序醋寝。

• 使用異步對(duì)象發(fā)送get請(qǐng)求

        document.querySelector("#username").onblur = function(){
            // 1.獲取用戶數(shù)據(jù)
            var name = this.value;

            // 2，讓異步對(duì)象發(fā)送請(qǐng)求
            // 2.1 創(chuàng)建異步對(duì)象
            var xhr = new XMLHttpRequest();
            // 2.2 設(shè)置 請(qǐng)求行 open(請(qǐng)求方式带迟，請(qǐng)求url):
                // get請(qǐng)求如果有參數(shù)就需要在url后面拼接參數(shù)音羞，
                // post如果有參數(shù)，就在請(qǐng)求體中傳遞
            xhr.open("get","validate.php?username="+name);
            // 2.3 設(shè)置 請(qǐng)求頭 setRequestHeader('key':'value')
                // get方式不需要設(shè)置請(qǐng)求頭
                // post需要設(shè)置 Content-Type:application/x-www-form-urlencoded
            // 2.4 設(shè)置 請(qǐng)求體:發(fā)送請(qǐng)求  send(參數(shù)：key=value&key=value)
                // 如果有參數(shù)仓犬，post應(yīng)該在這個(gè)位置來(lái)傳遞參數(shù)
                // 對(duì)于 get請(qǐng)求不需要在這個(gè)位置來(lái)傳遞參數(shù)
            xhr.send(null);

            // 響應(yīng)報(bào)文：
            // 報(bào)文行：響應(yīng)狀態(tài)碼 響應(yīng)狀態(tài)信息  200 ok
            // 報(bào)文頭：服務(wù)器返回給客戶端的一些額外信息  
            // 報(bào)文體：服務(wù)器返回給客戶端的數(shù)據(jù) responseText:普通字符串  responseXML：符合x(chóng)ml格式的字符串
            // xhr.status:可以獲取當(dāng)前服務(wù)器的響應(yīng)狀態(tài)  200 》成功
            console.log(xhr.status);
            // 一個(gè)真正成功的響應(yīng)應(yīng)該兩個(gè)方面：1.服務(wù)器成功響應(yīng)  2.數(shù)據(jù)已經(jīng)回到客戶端并且可以使用了
            // 監(jiān)聽(tīng)異步對(duì)象的響應(yīng)狀態(tài) readystate
            // 0:創(chuàng)建了異步對(duì)象嗅绰，但是還沒(méi)有真正的去發(fā)送請(qǐng)求
            // 1.調(diào)用了send方法，正在發(fā)送請(qǐng)求
            // 2.send方法執(zhí)行完畢了搀继，已經(jīng)收到服務(wù)器的響應(yīng)內(nèi)容--原始內(nèi)容窘面，還不可以使用
            // 3.正在解析數(shù)據(jù)
            // 4.響應(yīng)內(nèi)容解析完畢，可以使用了
            xhr.onreadystatechange = function(){
                if(xhr.status == 200 && xhr.readyState == 4){
                    console.log(xhr.responseText);
                    console.log("-----------");
                    document.querySelector(".showmsg").innerHTML = xhr.responseText;;
                }
            }
        };

• 使用異步對(duì)象發(fā)送post請(qǐng)求

        document.querySelector("#username").onblur = function(){
            // 1.獲取用戶數(shù)據(jù)
            var name = this.value;
            // 2. 讓異步對(duì)象發(fā)送post請(qǐng)求
            // 2.1 創(chuàng)建異步對(duì)象
            var xhr = new XMLHttpRequest();
            // 2.2 設(shè)置請(qǐng)求行 open(請(qǐng)求方式叽躯，請(qǐng)求url)
                // 1.get 需要在url后面拼接參數(shù)(如果有參數(shù))
                // 2.post請(qǐng)求不需要拼接參數(shù)
            xhr.open("post","validate.php");
            // 2.3 設(shè)置請(qǐng)求頭:setRequestHeader()
                // 1.get不需要設(shè)置
                // 2.post需要設(shè)置請(qǐng)求頭：Content-Type:application/x-www-form-urlencoded
            xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
            // .如果沒(méi)有設(shè)置财边，參數(shù)無(wú)法正確的傳遞到服務(wù)器(本質(zhì)上說(shuō)，如果沒(méi)有參數(shù)点骑，也不一定需要設(shè)置酣难，不會(huì)影響請(qǐng)求的發(fā)送)
            // 2.4 設(shè)置請(qǐng)求體 send()
                // 1.get的參數(shù)在url拼接了，所以不需要在這個(gè)函數(shù)中設(shè)置
                // 2.post的參數(shù)在這個(gè)函數(shù)中設(shè)置(如果有參數(shù))
            xhr.send("username="+name);

            // 3.讓異步對(duì)象接收服務(wù)器的響應(yīng)數(shù)據(jù)
            // 一個(gè)成功的響應(yīng)有兩個(gè)條件：1.服務(wù)器成功響應(yīng)了  2.異步對(duì)象的響應(yīng)狀態(tài)為4(數(shù)據(jù)解析完畢可以使用了)
            // 當(dāng)異步對(duì)象的響應(yīng)狀態(tài)發(fā)生改變的時(shí)候黑滴，會(huì)觸發(fā)一個(gè)事件：onreadystatechange
            xhr.onreadystatechange = function(){
                // 判斷服務(wù)器是否響應(yīng)      判斷異步對(duì)象的響應(yīng)狀態(tài)
                if(xhr.status == 200 && xhr.readyState == 4){
                    document.querySelector(".showmsg").innerHTML = xhr.responseText;
                }
            }
        };

Ajax是對(duì)上述兩種請(qǐng)求的封裝憨募。
jQuery中的Ajax參數(shù)如下。

        $.ajax({
            type: "method", //請(qǐng)求方式 get post
            url: "url", //請(qǐng)求url
            data: "data", //請(qǐng)求需要傳遞的參數(shù)
            dataType: "dataType", //服務(wù)器返回格式
            beforeSend: function (param) {

            }, //請(qǐng)求發(fā)起前調(diào)用
            success: function (response) {
                
            }, //請(qǐng)求成功之后的回調(diào)
            complete: function (param) {  

            }, //響應(yīng)完成時(shí)調(diào)用（包括成功或失旛喂颉）
            timeout: 3000 // 請(qǐng)求超時(shí)
        });

跨域

同源：域名馋嗜、協(xié)議、端口完全相同吵瞻。（同源策略：瀏覽器的安全策略葛菇。）

跨域：域名甘磨、協(xié)議或者端口不同。1.不能發(fā)送Ajax請(qǐng)求眯停；2.不能進(jìn)行DOM操作济舆。

跨域方案

• jsonp
  其本質(zhì)是利用了<script src=""></script>標(biāo)簽具有可跨域的特性，由服務(wù)端返回一個(gè)預(yù)先定義好的Javascript函數(shù)的調(diào)用莺债，并且將服務(wù)器數(shù)據(jù)以該函數(shù)參數(shù)的形式傳遞過(guò)來(lái)滋觉，此方法需要前后端配合完成。
• CROS

header( 'Access-Control-Allow-Origin:*' ); 

• 服務(wù)器的反向代理

一次完整的HTTP請(qǐng)求

• 域名解析
• 發(fā)起TCP的3次握手
• 建立TCP連接后發(fā)起http請(qǐng)求
• 服務(wù)器響應(yīng)http請(qǐng)求齐邦，瀏覽器得到html代碼
• 瀏覽器解析html代碼椎侠，對(duì)html代碼中的資源發(fā)起請(qǐng)求（js、css措拇、圖片）
• 瀏覽器對(duì)頁(yè)面進(jìn)行渲染并呈現(xiàn)給用戶

閉包

已知：在javascript中我纪，全局變量太多，容易造成污染丐吓。如果是局部變量浅悉，根據(jù)javascript的垃圾回收機(jī)制，當(dāng)局部作用域的函數(shù)執(zhí)行完畢券犁，里面的變量就會(huì)被銷(xiāo)毀术健，其占用內(nèi)存就被釋放。

定義：能夠讀取其他函數(shù)內(nèi)部變量的函數(shù)粘衬。由于在javascript語(yǔ)言中荞估，只有函數(shù)內(nèi)部的子函數(shù)才能讀取局部變量，因此可以把閉包簡(jiǎn)單理解成“定義在一個(gè)函數(shù)內(nèi)部的函數(shù)”色难。

用途：

• 可以在函數(shù)外部讀取函數(shù)內(nèi)部成員
• 讓函數(shù)內(nèi)部成員始終存活在內(nèi)存中

特點(diǎn)：

• 函數(shù)嵌套函數(shù)
• 內(nèi)部函數(shù)可以訪問(wèn)外部函數(shù)的變量
• 參數(shù)和變量不會(huì)被回收

for(var i = 0; i < 3; i++) {
  setTimeout(function () {
    console.log(i)
  }, 0)
}

遞歸

定義： 函數(shù)在內(nèi)部調(diào)用自身本身泼舱，這個(gè)函數(shù)就是遞歸函數(shù)。
注意：使用遞歸時(shí)枷莉，要防止棧溢出。

function factorial (num) {
  if (num <= 1) {
    return 1
  } else {
    return num * factorial(num - 1)
  }
}
console.log(factorial(4)) //24

面向?qū)ο?/h3>

定義：面向?qū)ο缶褪菍?duì)面向過(guò)程進(jìn)行封裝尺迂。每一個(gè)對(duì)象都是功能中心笤妙，具有明確分工，可以完成接受信息噪裕，處理數(shù)據(jù)蹲盘，發(fā)出信息等任務(wù)。

特性：

• 封裝性
• 繼承性
• 多態(tài)性

原型鏈

定義：實(shí)例對(duì)象的_proto_屬性膳音，指向原型對(duì)象召衔。對(duì)應(yīng)構(gòu)造函數(shù)的原型屬性prototype，也指向原型對(duì)象祭陷。當(dāng)對(duì)象查找屬性時(shí)苍凛，如果自身沒(méi)有趣席，就會(huì)根據(jù)_proto_向它的原型進(jìn)行查找，如果也沒(méi)有醇蝴，則向原型的原型進(jìn)行查找宣肚，直到查到Object.prototype._proto_為null。這樣就構(gòu)成了原型鏈悠栓。

    // 構(gòu)造函數(shù) -- 屬性
    function Student(name, age, sex) {
      this.name = name;
      this.age = age;
      this.sex = sex;
    }
    // 構(gòu)造函數(shù) -- 方法
    Student.prototype.sayHi = function () {
      console.log('大家好霉涨，我是' + this.name);
    }

    // new兩個(gè)實(shí)例
    var s1 = new Student('lilei', 18, '男');
    var s2 = new Student('hmm', 18, '女');

    // s1.__proto__  等于  Student.prototype
    console.log(s1.__proto__ === Student.prototype); // true

    // constructor 記錄創(chuàng)建該對(duì)象的構(gòu)造函數(shù)
    console.log(s1.constructor === Student); // true

原型鏈圖

MVVM

M：model -- 數(shù)據(jù)模型

V：view -- 視圖模型

VM：view-model -- 一個(gè)同步model和view的對(duì)象

MVVM

git常用命令

• 初始化倉(cāng)庫(kù) -- git init
• 下載項(xiàng)目及其代碼歷史 -- git clone [url]
• 添加本地目錄所有文件到暫存區(qū) -- git add .
• 提交暫存區(qū)到倉(cāng)庫(kù)區(qū) -- git commit -m [msg]
• 上傳本地指定分支到遠(yuǎn)程倉(cāng)庫(kù) -- git push [remote] [branch]
• 取出遠(yuǎn)程倉(cāng)庫(kù)的變化，并與本地分支合并 -- git pull [remote] [branch]

CDN托管

CDN：全稱 Content Delivery Network惭适，即內(nèi)容分發(fā)網(wǎng)絡(luò)笙瑟。

基本思路： 盡可能避開(kāi)互聯(lián)網(wǎng)上影響數(shù)據(jù)傳輸速度和穩(wěn)定性的瓶頸和環(huán)節(jié)，使內(nèi)容傳輸?shù)母祚荆€(wěn)定往枷。

傳統(tǒng)網(wǎng)絡(luò)訪問(wèn)形式

1. 用戶輸入域名
2. 瀏覽器解析域名，得到對(duì)應(yīng)的ip地址
3. 瀏覽器根據(jù)ip地址今阳，向域名的主機(jī)發(fā)起數(shù)據(jù)訪問(wèn)請(qǐng)求
4. 瀏覽器拿到域名主機(jī)返回的數(shù)據(jù)师溅，而進(jìn)行網(wǎng)頁(yè)的渲染

CDN網(wǎng)絡(luò)訪問(wèn)形式

1. 用戶輸入域名
2. 瀏覽器對(duì)域名進(jìn)行解析，CDN對(duì)此過(guò)程進(jìn)行了調(diào)整盾舌，使用戶能夠就近訪問(wèn)（CDN服務(wù)來(lái)提供最近的機(jī)器）
   解析庫(kù)函數(shù)得到該域名對(duì)應(yīng)的CNAME記錄 =》 瀏覽器再次對(duì)CNAME進(jìn)行解析墓臭，得到實(shí)際的ip地址
3. 瀏覽器向CDN緩存服務(wù)器發(fā)起數(shù)據(jù)請(qǐng)求
4. 緩存服務(wù)器根據(jù)瀏覽器提供的域名，通過(guò)Cache內(nèi)部專(zhuān)用DNS解析得到域名的實(shí)際ip地址妖谴，再由緩存服務(wù)器向此實(shí)際ip地址提交訪問(wèn)請(qǐng)求
5. 緩存服務(wù)器拿到數(shù)據(jù)后： 本地保存窿锉，以備后用； 把數(shù)據(jù)返回給瀏覽器
6. 瀏覽器拿到緩存服務(wù)器返回的數(shù)據(jù)膝舅，對(duì)頁(yè)面進(jìn)行渲染

靜態(tài)資源放不同域名的原因

• 方便CDN緩存
• 突破瀏覽器并發(fā)限制
  并發(fā)限制：同一時(shí)刻嗡载，同一域名下的請(qǐng)求數(shù)有一定的限制，超出限制后的請(qǐng)求不被接受仍稀。
• 節(jié)省cookie帶寬
  登錄需要在請(qǐng)求中攜帶cookie洼滚，請(qǐng)求靜態(tài)資源不需要，分開(kāi)放在不同的域名下技潘，可以節(jié)省cookie帶寬

注意：

1. DNS解析也費(fèi)時(shí)間遥巴，域名太多，解析時(shí)間過(guò)長(zhǎng)享幽，訪問(wèn)速度變慢
2. 如果域名采用https協(xié)議铲掐，則需要安裝更多的證書(shū)，加大了操作難度

ES6新增內(nèi)容（列舉常用部分）

• 變量聲明
  let -- 聲明變量值桩，不存變量提升摆霉，只在let聲明所在的塊級(jí)作用域里有效
  const -- 聲明常量，只在const聲明所在的塊級(jí)作用域里有效
• 箭頭函數(shù)
  語(yǔ)法更簡(jiǎn)潔。
  this指向： 1. 箭頭函數(shù)的this指向不可變携栋； 2.誰(shuí)定義指向誰(shuí)搭盾，而不是誰(shuí)調(diào)用指向誰(shuí)
• 模塊導(dǎo)出/導(dǎo)入
  export
  export default
  import

jQuery鏈?zhǔn)骄幊?/h3>

鏈?zhǔn)骄幊蹋a更簡(jiǎn)潔刻两。原理增蹭，獲取操作之后，用return this返回獲取操作的對(duì)象磅摹。

        function Person (name) {
            this.name = name;
            this.sayHi = function () {
                console.log("你好滋迈，我是" + this.name);
                return this; //返回當(dāng)前對(duì)象，鏈?zhǔn)骄幊痰脑?            }
            this.eat = function () {  
                console.log("我愛(ài)吃韭菜+大蒜");
            }
        }
        var beauty = new Person("西施");
        beauty.sayHi().eat(); //你好户誓，我是西施  我愛(ài)吃韭菜+大蒜

預(yù)解析

定義：在當(dāng)前作用域下饼灿，js運(yùn)行之前，將var 和 function關(guān)鍵字的聲明提升帝美，并在內(nèi)存中安排好碍彭，然后從上往下的執(zhí)行。

• 聲明提升悼潭，賦值不會(huì)提升庇忌。
• 先提升var，再提升function舰褪。

DOM節(jié)點(diǎn)的基本操作

• 增 -- 添加節(jié)點(diǎn)

        var body = document.body;
        var div = document.createElement('div');
        body.appendChild(div);

• 刪 -- 刪除節(jié)點(diǎn)

        body.removeChild(div)

• 改 -- 替換節(jié)點(diǎn)皆疹，插入節(jié)點(diǎn)

        body.replaceChild(text,div);
        body.insertBefore(div, firstEle);

• 查 -- id 標(biāo)簽名 name 類(lèi)名 選擇器

        // id
        var div = document.getElementById('main');
        // 標(biāo)簽名
        var div = document.getElementsByTagName('div');
        // name
        var inputs = document.getElementsByName('hobby');
        // 類(lèi)名
        var mains = document.getElementsByClassName('main');
        // 選擇器
        var text = document.querySelector('#text');
        var boxes = document.querySelectorAll('.box');

Number String Boolean 轉(zhuǎn)換

• 轉(zhuǎn)換成String
  toString()
  String()
  + 號(hào)進(jìn)行拼接
• 轉(zhuǎn)換成Number
  Number()
  parseInt()
  parseFloat()
  +（正號(hào)）或者 - 0
• 轉(zhuǎn)換成Boolean
  Boolean()
  條件語(yǔ)句的隱式轉(zhuǎn)換

Flex布局 -- 元素水平垂直居中

        .parent {
            display:flex;
            align-items: center;/*垂直居中*/
            justify-content: center;/*水平居中*/
            width:100%;
            height: 500px;
            background-color:pink;
        }
        .children {
            background-color:skyblue;
        }

內(nèi)存泄漏 內(nèi)存溢出

• 內(nèi)存泄漏 memory leak
  程序申請(qǐng)內(nèi)存后，無(wú)法釋放已經(jīng)申請(qǐng)的空間占拍。
• 內(nèi)存溢出 out of memory
  程序申請(qǐng)內(nèi)存是略就，沒(méi)有足夠的內(nèi)存空間供其使用。

兩個(gè)變量交換值 -- 不使用中間變量

        var a = 1;
        var b = 2;
        a = a + b;
        b = a - b;
        a = a - b;
        console.log(a);
        console.log(b);

頁(yè)面回流重繪

頁(yè)面呈現(xiàn)流程

• 頁(yè)面呈現(xiàn)流程

1. 根據(jù)文檔生成DOM樹(shù)
   (包括 display: none)
2. 在DOM樹(shù)的基礎(chǔ)上晃酒，根據(jù)節(jié)點(diǎn)的幾何屬性（margin/padding/width/height）等生成render樹(shù)
   (不包括 display: none | 包括 visibility: hidden)
3. 在render樹(shù)基礎(chǔ)上進(jìn)一步渲染
   (包括 color,outline)

• 回流 重繪
  回流：reflow表牢。當(dāng)render樹(shù)中的內(nèi)容，因?yàn)榇笮∵吘嗟劝l(fā)生改變而需要重建的過(guò)程贝次，叫做回流崔兴。
  重繪：repaint。當(dāng)元素的部分屬性變化蛔翅，不會(huì)引起布局變化恼布，而需要重新渲染的過(guò)程，叫做重繪搁宾。
  回流一定伴隨著重繪，但是重繪不一定回流倔幼。

• 什么引起回流

1. DOM樹(shù)結(jié)構(gòu)變化
2. 元素位置變化
3. 元素尺寸變化 -- margin盖腿、padding、height、width翩腐、border
4. 內(nèi)容改變（文本鸟款，圖片）而引起的計(jì)算值的width和height的改變
5. 頁(yè)面渲染初始化
6. 瀏覽器窗口尺寸改變 -- resize

• 如何減少回流重繪

1. 將改變樣式的操作一次完成，使用className
2. 將要操作的元素進(jìn)行離線處理茂卦，處理完后一起更新
   DocumentFragment何什，不屬于DOM樹(shù)，將其插入DOM樹(shù)時(shí)等龙，插入的是子孫節(jié)點(diǎn)处渣。是一個(gè)游離在DOM樹(shù)之外的很有用的占位符。
   使用display: none蛛砰，因?yàn)閐isplay: none的元素不會(huì)出現(xiàn)在render樹(shù)上罐栈。
3. 不要經(jīng)常訪問(wèn)會(huì)引起瀏覽器flush隊(duì)列的屬性，若要高頻訪問(wèn)泥畅，緩存到變量
4. 將需要多次重排的元素荠诬，position屬性設(shè)為absolute或fixed，這樣元素脫離了標(biāo)準(zhǔn)流位仁，它的變化不會(huì)影響到其他元素
5. 盡量不要使用表格布局柑贞，沒(méi)有定寬（高）的表格，寬度（高度）是由最后一行決定的聂抢，很可能最后一行的寬度超出之前的列寬钧嘶，引起整體回流，多次計(jì)算才能確定涛浙。

js中垃圾回收機(jī)制

• 標(biāo)記清除
  當(dāng)變量進(jìn)入環(huán)境時(shí)康辑，垃圾回收器給變量標(biāo)記“進(jìn)入環(huán)境”；當(dāng)變量離開(kāi)環(huán)境時(shí)轿亮，則標(biāo)記為“離開(kāi)環(huán)境”疮薇。標(biāo)記為“離開(kāi)環(huán)境”的變量，會(huì)被回收內(nèi)存我注。
  
  標(biāo)記清除

• 引用計(jì)數(shù)
  跟蹤記錄每個(gè)值被引用的次數(shù)按咒，當(dāng)引用的次數(shù)變?yōu)?時(shí)，它所占用的內(nèi)存就被釋放但骨。
  
  引用計(jì)數(shù)

this關(guān)鍵字

誰(shuí)調(diào)用指向誰(shuí)励七。沒(méi)調(diào)用指向Window。

VUE

• VUE生命周期

• 組件之間的傳值
  VUEX
  父子傳值奔缠，兄弟傳值

• 插值表達(dá)式 閃爍

<style>
[v-cloak] {
  display: none;
}
</style>
<p v-cloak>{{msg}}</p>

給元素加上v-cloak指令掠抬，當(dāng)vue文件加載完畢之后，v-cloak會(huì)被刪除校哎。

• v-if 和 v-show 的區(qū)別
  v-if ： 通過(guò)添加/刪除DOM元素來(lái)控制元素的顯示/隱藏两波，異步數(shù)據(jù)渲染時(shí)使用
  v-show：通過(guò)控制 display: none樣式來(lái)控制元素的顯示/隱藏瞳步，涉及大量DOM操作時(shí)使用

• router 和 route 的區(qū)別
  router：VueRouter的實(shí)例，全局路由器對(duì)象腰奋，里面有很多子屬性和子對(duì)象
  route：當(dāng)前正在跳轉(zhuǎn)的路由對(duì)象单起，可以從里面獲取name,path,params等

• vue頁(yè)面跳轉(zhuǎn)

1. router-link to

  <p>
    <!-- 使用 router-link 組件來(lái)導(dǎo)航. -->
    <!-- 通過(guò)傳入 `to` 屬性指定鏈接. -->
    <!-- <router-link> 默認(rèn)會(huì)被渲染成一個(gè) `<a>` 標(biāo)簽 -->
    <router-link to="/foo">Go to Foo</router-link>
    <router-link to="/bar">Go to Bar</router-link>
  </p>

2. 配置路由

const routes = [
  {path: '/foo', component: foo}
]

3. 編程式導(dǎo)航

this.$router.push({path: '/foo'})

• vue操作DOM元素
  ref 結(jié)合 this.$ref
  

window.onload 和 $(function(){})的區(qū)別

• window.onload
  整個(gè)頁(yè)面加載完畢之后觸發(fā)（包括頁(yè)面上的資源）；
  只執(zhí)行最后一個(gè)劣坊，之前的會(huì)被最后一個(gè)給覆蓋掉嘀倒。
• $(function(){})
  dom加載完畢之后就會(huì)執(zhí)行；
  有多個(gè)時(shí)局冰，按照順序依次執(zhí)行测蘑。

link 和 @import 引入css區(qū)別

• link是xhtml標(biāo)簽，頁(yè)面載入時(shí)同時(shí)加載
• @import時(shí)在css2.1提出的锐想，低版本的瀏覽器不支持帮寻，頁(yè)面完全載入以后才加載

媒體查詢

    <style>
        @media screen and (max-width: 1600px) {
            body {
                background-color:pink;
            }
        }

        @media screen and (max-width: 300px) {
            body {
                background-color:lightblue;
            }
        }        
    </style>

max-width：大 >> 小
min-width：小 >> 大

<!-- 另一種寫(xiě)法 -->
 <link rel="stylesheet" media="screen and (max-width: 600px)" href="small.css" />

width：瀏覽器可視寬度。
device-width：設(shè)備屏幕的寬度赠摇。