六月填坑（三）

時間 2019-11-24

標籤六月 6月简体版

原文原文鏈接

1. 清除浮動三欄佈局

父級div定義僞類：after和zoomvue

.clear::after{
    content:'';
    display:block;
    height:0;
    clear:both;
    visibility:hidden
    
}
.clear{ zoom:1}
複製代碼

三欄佈局數組

絕對定位佈局
左中右三個盒子都設置position:absolute;而後分別設置定位
3)flex佈局
父盒子設置display:flex;位於中間的子盒子設置flex:1
4)表格佈局
父盒子設置display:table;左中右三個盒子設置display:table-cell;左右兩個盒子分別設置寬度；
5)網格佈局
父盒子設置display:grid; grid-template-columns:300px auto 300px;

複製代碼

2. transition和animation

<style>     
   #box2{
            height: 100px;
            width: 100px;
            background: blue;
        }
        #box2:hover{
            transform: rotate(180deg) scale(.5, .5);
            background: red;
            transition: background 2s ease, transform 2s ease-in 1s;}
    </style>
</head>
<body>
 <div id="box1">BOX1</div>
 <div id="box2">BOX2</div>
</body>


<style>
        .box{height:100px;width:100px;border:15px solid black;
            animation: changebox 10s ease-in-out   3 alternate paused;
            }
            <!--決定播放狀態-->
        .box:hover{
            animation-play-state: running;
        }
        @keyframes changebox {
            10% {  background:red;  }
            50% {  width:80px;  }
            70% {  border:15px solid yellow;  }
            100% {  width:180px;  height:180px;  }
        }
    </style>

<body>
 <div class="box"></div>
</body>

複製代碼

3.垂直水平居中的方式？以及省略文本...

display: table-cell;
vertical-align: middle;//使子元素垂直居中
text-align: center;//使子元素水平居中

text-overflow:eclipse
white-wrap：no-wrap


複製代碼

4. 原生JS都有哪些方式能夠實現兩個頁面間的通訊？

１）經過url地址欄傳遞參數；例如：點擊列表中的每一條數據，跳轉到一個詳情頁面，在URL中傳遞不一樣的參數區分不一樣的頁面；２）經過本地存儲cookie、localStorage、sessionStorage；例如京東的登錄，把登錄後得到的頁面信息存儲到本地，其餘頁面須要用戶信息的話就從本地的存儲數據中獲取；３）使用iframe 例如在Ａ頁面中嵌入Ｂ頁面，在Ａ中能夠經過一些屬性和實現方法和Ｂ頁面的通訊；４）利用postMessage實現頁面間的通訊例如父窗口往子窗口傳遞信息，子窗口往父窗口傳遞信息瀏覽器

複製代碼

5. SEO

合理的title、description、keywords：搜索對着三項的權重逐個減小，title值強調重點便可，重要關鍵詞不要超過兩次，並且要靠前，不一樣頁面的title要有所不一樣； description把頁面的內容高度歸納，長度合適，不可過度分堆砌關鍵詞，不一樣頁面的description有所不一樣； keywords列舉重要關鍵詞便可；語義化的HTML代碼，符合W3C規範：語義化代碼讓搜索引擎容易理解網頁；重要內容的HTML代碼放在最前：搜索引擎抓取HTML順序是從上到下，有的搜索引擎對抓取長度有限制，因此要保證重要內容必定會被抓取；重要內容不要用JS輸出：爬蟲不會執行JS獲取內容；少用iframe：搜索引擎不會抓取iframe中的內容；非裝飾性圖片必須加alt；提升網站速度：網站速度是搜素引擎排序的一個重要指標；bash

// title標題
<title>標題</title>
// keywords 關鍵詞
<meta name="description" content="關鍵詞1,關鍵詞2,關鍵詞3">
// description 內容摘要
<meta name="description" content="網頁的簡述">

複製代碼

6.頁面加載過程當中可能觸發哪些事件？它們的順序是？

頁面加載時，大體能夠分爲如下幾個步驟：
1）開始解析HTML文檔結構
2）加載外部樣式表及JavaScript腳本
3）解析執行JavaScript腳本
4）DOM樹渲染完成
5）加載未完成的外部資源（如 圖片）
6）頁面加載成功
執行順序：
1）document readystatechange事件
2）document DOMContentLoaded事件
3）window load事件

複製代碼

7. vue 裏面router 和route,query以及params區別

router 爲vueRouter實例 ; $route爲當前router跳轉對象裏面能夠獲取name、path、query、params等cookie

this.$router.push({path:'/user',name:'User',query:{id:5}})

獲取參數： this.$route.query.id

query要用path來引入,例如ths.$router.push({ path:"detail",query:{id:"00"}})，
接收參數爲this.$route.query.id，params要用name來引入，
例如ths.$router.push({ name:"detail",params:{id:"00"}})，接收參數爲this.$route.params.id。以query傳輸的參數會在相似於get傳參，在瀏覽器地址欄中顯示參數。

複製代碼

8. ES5的繼承和ES6的繼承有什麼區別？

ES5繼承是Parent.apply(this),修改父級裏面的this指向， ES6繼承是父級裏面的this，具體爲ES6經過class關鍵字定義類，裏面有構造方法，類之間經過extends關鍵字實現繼承。子類必須在constructor方法中調用super方法，不然新建實例報錯。由於子類沒有本身的this對象，而是繼承了父類的this對象，而後對其調用。若是不調用super方法，子類得不到this對象。session

9. 數據綁定基本的實現以及vue中使用definePorperty()實現監聽者

// 實現一個方法，能夠給 obj 全部的屬性添加動態綁定事件，當屬性值發生變化時會觸發事件
let obj = {
  key_1: 1,
  key_2: 2
}
function func(key) {
  console.log(key + ' 的值發生改變：' + this[key]);
}
bindData(obj, func);
obj.key_1 = 2; // 此時自動輸出 "key_1 的值發生改變：2"
obj.key_2 = 1; // 此時自動輸出 "key_2 的值發生改變：1"


 function bindData(obj, fn) {
    for(let key in obj){
      Object.defineProperty(obj,key,{
        set(newVal){
          if (obj.value!==newVal){
            obj.value = newVal;
            fn.call(obj,key);
          }
        },
        get(){
          return obj.value
        }
      })
    }
 }
 
 
//vue中使用definePorperty()實現監聽者

<input type="text" id="my-name">
<p id="my-name-get"></p>
<script>
    var inputEle = document.getElementById('my-name')
    var pEle = document.getElementById('my-name-get')
    var obj = {}
    Object.defineProperty(obj,'myName',{
        get:function(){
            return obj
        },
        set:function(val){
            inputEle.value = val
            pEle.innerText = val
        }
    })
    inputEle.onkeyup = function(e){
        obj.myName = this.value
    }
</script>
複製代碼

10. 數組去重 [1,2,3]==[1,2,3]的狀況以前去重方法都是引用地址不一樣也是去重

var arr1 = [123, "meili", "123", "mogu", 123];
var arr2 = [123, [1, 2, 3],
  [1, "2", 3],
  [1, 2, 3], "meili"
];
var arr3 = [123, {
  a: 1
}, {
  a: {
    b: 1
  }
}, {
  a: "1"
}, {
  a: {
    b: 1
  }
}, "meili"];
// 去重 [123,[1, "2", 3], [1, 2, 3], "meili"];
function unique(arr) {
  let ret = [];
  let map = new Map();
  let item;
  // ret = arr.filter((item, index) => arr.indexOf(item) === index)
  for (let i = 0; i < arr.length; i++) {
    // 基本類型
    let type = Object.prototype.toString.call(arr[i])
    if (type === '[object Object]' || type === '[object Array]') {
      item = JSON.stringify(arr[i])
    } else {
      item = arr[i]
    }

    if (!map.has(item)) {
      map.set(item, true);
      ret.push(arr[i]);
    }

  }

  return ret

}


console.log(unique(arr2)); //[ 123, [ 1, 2, 3 ], [ 1, '2', 3 ], 'meili' ]
console.log(JSON.stringify([1, 2, 3]) === JSON.stringify([1, 2, 3]));//true
複製代碼