題庫

1.v-show和v-if之間的區別
v-show：元素是一直存在的，當v-show爲false時，元素display:none只是隱藏了而已，生命週期的鉤子函數不會執行。

v-if：判斷是否加載固定的內容，若是爲真，則加載；爲假時，則不加載，生命週期的鉤子函數會執行。

用處：用在權限管理，頁面條件加載。
語法：v-if=「判斷表達式」

通常的，v-if有更高的切換消耗，而v-show有更多的初始化渲染消耗。若是須要頻繁的切換而對安全性無要求，使用v-show。若是在運行時，條件不可能改變，則使用v-if較好。

2.簡述JS的數據類型？
JS的數據類型能夠分爲2中：
基本數據類型，字符串（String）、數字(Number)、布爾(Boolean)、空（Null）、未定義（Undefined）、Symbol(ES6新增)
引用數據類型, 對象(Object)、數組(Array)、函數(Function)。
3.JS==和===之間的區別

• ==兩個等是轉換類型對比值的，
• ===三個等是不會進行轉換的，也就是類型不一樣，必定不會相等的；

1 =="1" //true
 1 === "1" //false

4.如何將一個元素水平垂直居中顯示？

1. 文本元素：line-height+text-align:center
2. 塊級元素

3. ①Flex佈局

   .main{
       width: 100%;
       height: 100%;
       display: flex;
       }
    .son{ 
    margin: auto 
    }

4. ②Flex佈局

   .main{
       width: 100%;
       height: 100%;
       display: flex;
       justify-content: center;
       align-items: center
       }
    .son{  }

5. ③position + transform

   .main{
       width: 100%;
       height: 100%;
       }
    .son{ 
       position: absolute;
       left: 50%;
       top: 50%;
       background-color: red;
       transform: translate3d(-50%,-50%，0)
     }

5.若是瀏覽器不兼容bind方法，你如何封裝bind方法？

1. 完整版

   if (!Function.prototype.bind) {
       Function.prototype.bind = function (oThis) {
           if (typeof this !== 'function') {
               // closest thing possible to the ECMAScript 5
               // internal IsCallable function
               throw new TypeError('Function.prototype.bind - what is trying to be bound is not callable');
           }
   
           var aArgs = Array.prototype.slice.call(arguments, 1),
               fToBind = this,
               fNOP = function () {},
               fBound = function () {
                   console.log(this)
                   // this instanceof fBound === true時,說明返回的fBound被當作new的構造函數調用
                   return fToBind.apply(this instanceof fBound ?
                       this :
                       oThis,
                       // 獲取調用時(fBound)的傳參.bind 返回的函數入參每每是這麼傳遞的
                       aArgs.concat(Array.prototype.slice.call(arguments)));
               };
   
           // 維護原型關係
           if (this.prototype) {
               // Function.prototype doesn't have a prototype property
               fNOP.prototype = this.prototype;
           }
           // 下行的代碼使fBound.prototype是fNOP的實例,所以
           // 返回的fBound若做爲new的構造函數,new生成的新對象做爲this傳入fBound,新對象的__proto__就是fNOP的實例
           fBound.prototype = new fNOP();
   
           return fBound;
       };
     }

2. 簡易版

   if (!Function.prototype.bind) {
    //將bind方法掛在Function的原型上
      Function.prototype.bind = function (oThis) {
        let args = Array.prototype.slice.call(arguments, 1);
        let fToBind = this;
        let fBound = function (...ags) {
            return fToBind.apply(oThis, args.concat(ags))
         }
        return fBound;
       }
     }

6.簡析new關鍵字實例化一個對象的做用？
new關鍵字內部幹了以下三件事（已知構造函數爲Func）：

1. 建立一個空對象，並使該空對象繼承Func.prototype；
2. 執行構造函數，並將this指向剛剛建立的新對象；

3. 返回新對象

   function _new(...args) {
      let constructor = args.shift();
      //建立一個空對象， 繼承構造函數的prototype 的屬性
      let context = Object.create(constructor.prototype);
      //執行構造函數
      let result = constructor.apply(context, args);
      return (typeof result === 'object' && result != null) ? result : context
   }

7.說說你對標籤語義化的理解

① 讓標籤有本身的含義；
② html語義化就是讓頁面的內容結構化，便於對瀏覽器、搜索引擎解析；
③ 在沒有樣式CCS狀況下也以一種文檔格式顯示，而且是容易閱讀的；
④ 搜索引擎的爬蟲依賴於標記來肯定上下文和各個關鍵字的權重，利於 SEO；
⑤ 使閱讀源代碼的人對網站更容易將網站分塊，便於閱讀維護理解。
8.清除浮動的方法
1.父級div定義 height

• 原理：父級div手動定義height，就解決了父級div沒法自動獲取到高度的問題。
• 優勢：簡單、代碼少、容易掌握
• 缺點：只適合高度固定的佈局，要給出精確的高度，若是高度和父級div不同時，會產生問題

2，結尾處加空div標籤 clear:both

• 原理：添加一個空div，利用css提升的clear:both清除浮動，讓父級div能自動獲取到高度
• 優勢：簡單、代碼少、瀏覽器支持好、不容易出現怪問題
• 缺點：很多初學者不理解原理；若是頁面浮動佈局多，就要增長不少空div，讓人感受很很差

3，父級div定義 僞類:after 和 zoom

• 原理：IE8以上和非IE瀏覽器才支持:after，原理和方法2有點相似，zoom(IE轉有屬性)可解決ie6,ie7浮動問題
• 優勢：瀏覽器支持好、不容易出現怪問題（目前：大型網站都有使用，如：騰迅，網易，新浪等等）
• 缺點：代碼多、很多初學者不理解原理，要兩句代碼結合使用才能讓主流瀏覽器都支持

4，父級div定義 overflow:hidden

• 原理：必須定義width或zoom:1，同時不能定義height，使用overflow:hidden時，瀏覽器會自動檢查浮動區域的高度
• 優勢：簡單、代碼少、瀏覽器支持好
• 缺點：不能和position配合使用，由於超出的尺寸的會被隱藏。

9.深度克隆函數deepclone?

• JSON

  function deepclone(object){
     return JSON.parse(JSON.stringify(object))  
  }

• 遞歸

  function deepClone(obj) {
   var _toString = Object.prototype.toString;
  
  // null, undefined, non-object, function
  if (!obj || typeof obj !== 'object') {
       return obj;
     }
  
   // DOM Node
   if (obj.nodeType && 'cloneNode' in obj) {
     return obj.cloneNode(true);
   }
  
   // Date
   if (_toString.call(obj) === '[object Date]') {
     return new Date(obj.getTime());
   }
  
   // RegExp`請輸入代碼`
   if (_toString.call(obj) === '[object RegExp]') {
     var flags = [];
     if (obj.global) {
         flags.push('g');
     }
     if (obj.multiline) {
         flags.push('m');
     }
     if (obj.ignoreCase) {
         flags.push('i');
     }
  
     return new RegExp(obj.source, flags.join(''));
    }
  
   var result = Array.isArray(obj) ? [] :
        obj.constructor ? new obj.constructor() : {};
   
    for (var key in obj) {
       result[key] = deepClone(obj[key]);
   }
   
   return result;
     }

10.Javascript有哪些方法定義對象

• 對象字面量：var obj = {};
• 構造函數：var obj = new Object();
• Object.create():let obj = Object.create(Object.prototype);

11.localStorage和sessionStorage的異同

• localStorage有效期爲永久，sessionStorage有效期爲頂層窗口關閉前
• 同源文檔能夠讀取並修改localStorage數據，sessionStorage只容許同一個窗口下的文檔訪問，如經過iframe引入的同源文檔。
• Storage對象一般被當作普通javascript對象使用：經過設置屬性來存取字符串值，也能夠經過setItem(key, value)設置，getItem(key)讀取，removeItem(key)刪除，clear()刪除全部數據，length表示已存儲的數據項數目，key(index)返回對應索引的key

12.typeof有哪幾種結果？
string ,number,undefined , boolean, function, object
13.CSS3新特性

• CSS3實現圓角（border-radius），陰影（box-shadow），
• 對文字加特效（text-shadow），線性漸變（gradient），旋轉（transform）
• transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);// 旋轉,縮放,定位,傾斜
• 增長了更多的CSS選擇器 ，多背景 rgba
• 在CSS3中惟一引入的僞類是 ::selection.
• 媒體查詢，多欄佈局
• border-image