如何在 CentOS 中新增、啟用和禁用一個倉庫

阿新 • • 發佈：2020-12-15

技術標籤：前端 js vue

前端常見的知識點

1.簡單說一下vue中的$nextTick的作用

當資料發生變化頁面dom薰染不出來時可以使用，這個的意思是在頁面渲染完成後執行。

2.當一個頁面需要渲染的資料太多，處理不過來怎麼解決

分頁=》懶載入=》新執行緒

3.請介紹一下cache-control

每一個資源都可以通過cache-control HTTP頭來定義自己的快取策略，Cache-Control頭在HTTP/1.1規範中定義，取代之前用來定義響應快取策略的頭。

4.JavaScript繼承的6種方法

原型鏈繼承
借用建構函式繼承
組合繼承（原型+借用構造）
原型式繼承
寄生式繼承
寄生組合式繼承

5.簡述同步和非同步的區別

同步是阻塞模式，非同步是非阻塞模式。

同步是指的是一個程序在執行某個請求的時候，若該請求需要一段時間才能返回資訊，那麼這個程序將會一直等待下去，直到收到返回資訊才繼續執行下去。

非同步是指程序不需要一直等待下去，而是繼續執行下面的操作，不管其他程序的狀態。當有訊息返回時系統會通知程序進行處理，這樣就可以提高執行效率。

6.img的alt和title的異同？

alt是圖片載入失敗時，顯示在網頁上的代替文字；

title是滑鼠放上面是顯示的文字，title是圖片的描述和進一步說明；

alt是img必要的屬性，而title不是。

7.setTimeout與setInterval有何區別？

setTimeout和setInterval的語法相同，他們都有兩個引數。一個將要執行的程式碼字串，還有一個是以毫秒為單位的時間間隔，當過了那個時間段之後將執行那段程式碼。
區別：setInterval在執行完一次程式碼之後，經過那個固定時間間隔，它還會自動重複執行程式碼。而setTimeout只執行一次那段程式碼。

8.px和em的區別

px的值是固定的，是絕對單位；em的值不是固定的，它是相對單位，em是指當前的預設字號大小的倍數。

9.深度資料拷貝的四種方法

1.遞迴方法進行資料深度拷貝

	function deepclone(obj){
        //首先是判斷obj的型別是物件還是陣列 

        var params = Array.isArray(obj)?{}:[];
        for( key in obj )
            {
                if( obj(key) && typeof obj(key) == 'object' ){
                    params[key] = deeplone(obj[key]);
                }else{
                    params[key] = obj[key]
                }
            }
        return params;
    }
    a = {
        id:1,
        obj:{
        name:'李白',
         age:222
        }
    }
	var b = deepclone(a);
	a.obj.age = 100;
	console.log(a);
	console.log(b);

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片儲存下來直接上傳(img-sPa0nO1E-1608621117495)(C:\Users\glzpcadm\AppData\Roaming\Typora\typora-user-images\1603703318042.png)]

2.JSON.物件的方法實現

function  deepclone(obj){
	var params =JSON.parse( JSON.Stringify(obj));
	return params;
}
    a = {
            id:1,
            obj:{
            name:'李白',
             age:222
            }
        }
	var b = deepclone(a);
	a.obj.age = 100;
	console.log(a);
	console.log(b);

3.用第三方外掛實現Lodash實現深度拷貝

   //先引js檔案
   <script src="https://cdn.bootcdn.net/ajax/libs/lodash.js/4.17.15/lodash.js"></script>
     a = {
                id:1,
                obj:{
                name:'李白',
                 age:222
                }
            }
      b = ._cloneDeep(a,{
       obj:{
                name:'杜甫',
                 age:222
                }
      });
      console.log(a);
      console.log(b);

4.用jquery裡面extend的方法

	 a = {
                id:1,
                obj:{
                name:'李白',
                 age:222
                }
            },
     b = $.extend(a,{
     a.obj.name = '張三'
	 }) 
    console.log(a);
    console.log(b)

10.資料淺拷貝

	//資料的淺拷貝就是增加查詢堆中值的棧中的地址，通過棧的地址就能查詢到堆中的值，堆的值不變。
	let aa = { name:'李白'};
	let bb = aa;
	bb.name = '杜甫';
	console.log(bb);   // { name: '杜甫'}
	console.log(aa);   // { name: '杜甫'}

11.import 和require的區別

require是AMD的規範引入方式，是執行時呼叫，所以require可以執行在程式碼的任何地方。require是賦值過程，require的結果就是物件、數字、字串、函式等，在把require的結果賦值給某個變數。
import是ES6的一個語法標準。import是編譯時呼叫，所以必須放在檔案頭部。import是解構的過程。

12.webpack中的loader的作用以及與plugin的區別

loader就是對於模組源的轉換，loader描述了webpack如何處理非javaScript模組，並且在buld資料夾中引入這些依賴。
- 在webpack.config.js中指定loader，module.rules可以指定多個loader。loader從模板路徑解析node_modules
plugin為loader更多的拓展性，目的是解決loader無法實現的其他事，從打包優化和壓縮到重新編譯環境變數，功能強大到用於處理各種各樣的任務。
webpack4預設不需要配置檔案，可以通過mode的選項為webpack指定了一些預設的配置，mode分為：development/production，預設是production.

在webpack4以下的版本需要通過plugin進行環境變數的配置。

13.vue打包後會生成哪些檔案

css檔案
js檔案開發時呼叫js程式碼
app.js裡面存放的是專案的各個頁面的邏輯程式碼
manifest.js是webpack打包生成的一個配置檔案
vendor.js裡面放的是各個頁面的各個元件的程式碼
index.html是前端程式碼入口的一個html檔案

14.var let 和const的區別

宣告過程
- var：遇到有var的作用域，在任何語句執行器都已經完成了宣告和初始化，也就是變數的提升並且拿到Undefined的原因。
- let：解析器進入了一個塊級作用域，發現let關鍵字，然後先宣告變數，並沒有到開始初始化，如果在此作用域提前使用，會報Undefined的錯誤，這就是暫時性死區的由來。等解析到有let那一行時，才會進入初始化的階段，如果那一行時賦值操作，初始化和賦值同時進行。
  
  const和let一樣
記憶體分配
- var會直接在棧記憶體中預分配記憶體的空間，然後等到實際語句執行時，再存對應的變數
變數提升
- var宣告的變數屬於函式作用域，let和const宣告的變數屬於塊級作用域
- var存在變數提升的現象，而let和const沒有此現象
- var可以重複宣告變數，而在同一塊級作用域，let變數不能重新宣告，const不能重新賦值。

	for (var i = 0; i < 10; i++) {
    setTimeout(function(){
        console.log(i);
    },100)
};	
//結果打印出   10個10


    for (let i = 0; i < 10; i++) {
        setTimeout(function(){
            console.log(i);
        },100)
    };
//打印出1-9

15.Vue的響應式原理

當一個vue例項被建立時，vue會遍歷data選項的屬性，用object.defineProperty將它們轉為getter/setter並且在內部追蹤相關依賴，在屬性被訪問和修改時通知變化。

每一個元件例項都有相應的watcher程式例項，它會在元件渲染的過程中把屬性記錄為依賴，之後當依賴項的setter被呼叫時，會通過watcher重新計算，從而使它相關的元件得以更新。

16.Html5的新元素有哪些？

用於繪畫的canvas的元素
用於媒介回放的video和audio元素
對本地的儲存有更好的儲存
新的特殊內容元素，比如article、footer、header、nav、
新的表單控制元件：calendar、date、time、email、url、search

17.ajax請求過程

建立XMLHttpRequest物件
建立一個新的HTTP請求，並指定該HTTP的請求方法、URL以及驗證資訊
設定響應HTTP請求狀態變化的函式
獲取非同步呼叫返回的資料
使用javascript和DOM實現區域性重新整理

18.JS資料型別

基本資料型別和引用資料型別

基本資料型別：Number、String、Boolean、Null、Undefined、Symbol

引用資料型別：Object({}、[])

19.vue引用echart的步驟以及配置

首先先安裝echart包

	npm install echart --save

然後在vue專案中的main.js中全域性引用

	import echarts from "echarts"

然後在專案中建立echarts模板

	<div id="testechart"> </div>

初始化模板

20.讓img在水平居中

<img src="" style="margin: 0.3rem auto;display: table-cell;vertical-align: middle;">

21.如何封裝vue元件屬於父子元件傳值的問題

22.keep-alive作用

keep-alive是Vue提供的一個抽象元件，用來對元件進行快取，從而節省效能，由於是一個抽象元件，所以在v頁面渲染完畢後不會被渲染成一個DOM元素。

	當元件在keep-alive內被切換時元件的**activated、deactivated**這兩個生命週期鉤子函式會被執行

23.事件迴圈和回撥佇列巨集觀和微觀任務執行順序

考察的是事件迴圈和回撥佇列。注意以下幾點：
Promise 優先於 setTimeout 巨集任務，所以 setTimeout 回撥會最後執行
Promise 一旦被定義就會立即執行
Promise 的 resolve 和 reject 是非同步執行的回撥。所以 resolve() 會被放到回撥佇列中，在主函式執行完和 setTimeout 之前呼叫
await 執行完後，會讓出執行緒。async 標記的函式會返回一個 Promise 物件

        async function async1() {
            console.log('async1 start');
            await async2();
            console.log('async1 end');
        }

        async function async2() {
            console.log('async2');
        }

        console.log('script start');

        setTimeout(()=>{
            console.log('setTimeout');
        },0)

        async1();

        new Promise((resolve)=>{
            console.log('promise1');
            resolve();
        }).then(()=>{
            console.log('promise2');
        });

        console.log('script end');

結果：

        script start
        async1 start
        async2
        promise1
        script end
        async1 end
        promise2
        setTimeout

解析：

首先，事件迴圈從巨集任務（macrostack）佇列開始，這個時候，巨集任務佇列中，只有一個 script (整體程式碼)任務。從巨集任務佇列中取出一個任務來執行。
首先執行 console.log(‘script start’)，輸出 ‘script start’
遇到 setTimeout 把 console.log(‘setTimeout’) 放到 macrotask 佇列中
執行 aync1() 輸出 ‘async1 start’ 和 ‘async2’ ,把 console.log(‘async1 end’) 放到 micro 佇列中
執行到 promise ，輸出 ‘promise1’ ，把 console.log(‘promise2’) 放到 micro 佇列中
執行 console.log(‘script end’)，輸出 ‘script end’
macrotask 執行完成會執行 microtask ，把 microtask quene 裡面的 microtask 全部拿出來一次性執行完，所以會輸出 ‘async1 end’ 和 ‘promise2’
開始新一輪的事件迴圈，去除執行一個 macrotask 執行，所以會輸出 ‘setTimeout’

24.this出現的場景分為四類

1、有物件就指向呼叫物件

2、沒呼叫物件就指向全域性物件：window是js中的全域性物件

3、用new構造就指向新物件

4、通過apply或者call或bind來改變this的指向

25.箭頭函式和普通函式的區別

樣式不同，箭頭函式時=>，普通函式是函式名 function
箭頭函式不能作為建構函式使用，也就不能使用new的關鍵字
箭頭函式不能繫結arguments，可以使用剩餘引數來代替
箭頭函式會捕獲其所在上下文的this值，作為自己的this值，定義的時候就確定了
箭頭函式沒有原型屬性

26.vue中的data為啥是函式

因為元件是可以複用的，JS裡物件是引用關係，如果元件data是一個物件，沒有子元件中的data屬性值就會相互汙染產生副作用，所以一個元件的data必須是一個函式。

27.promise和async-await有什麼區別？

promise是一個非同步程式設計解決方案，減少程式碼量，提高程式碼的可讀性，有效的解決了回撥地獄問題，可以鏈式呼叫。

async作為一個關鍵字放到函式的前面，呼叫該函式會返回一個promise物件，功能和promise差不多，但是async-await，await關鍵字只能放在async函式裡面，它等待的是promise物件的執行完畢，並放回結果。

28.js事件迴圈是一種什麼機制？

在js的執行機制中，把任務分為同步任務和非同步任務，其中非同步任務又分為巨集任務和微任務。js

29.git新增ssh

//生成密匙
ssh-keygen -t rsa -C "[email protected]"

30.vue init webpack 專案名和 vue create 專案名區別

vue init webpack 是vue-cli2.x的初始化方式，可以使用github上面的一些模板來初始化專案，webpack是官方推薦的標準模板名

vue create 是vue-cli3.x的初始化方式，目前模板是固定的，模板選項可自由配置，創建出來的是vue-cli3的專案，與cue-cli2專案結構不同，配置方法不同，具體配置方法參考官方文件。

31.狀態碼

	已定義範圍	分類
1XX	100-101	資訊提示
2XX	200-206	成功
3XX	300-305	重定向
4XX	400-415	客戶端錯誤
5XX	500-505	伺服器錯誤

200 OK 伺服器成功處理了請求（這個是我們見到最多的）
301/302 Moved Permanently（重定向）請求的URL已移走。Response中應該包含一個Location URL, 說明資源現在所處的位置
304 Not Modified（未修改）客戶的快取資源是最新的，要客戶端使用快取
404 Not Found 未找到資源
501 Internal Server Error伺服器遇到一個錯誤，使其無法對請求提供服務

axios與ajax的區別及優缺點

區別：axios是通過Promise實現對ajax技術的一種封裝，就像jquery對ajax的封裝一樣，簡單的來說ajax是實現資料的區域性重新整理，axios實現了對ajax的封裝，axios有的ajxa都有，ajax有的axios不一定有。

總結：axios就是ajax，ajxa不只是axios.。

ajax：

1.本身是針對MVC程式設計，不符合前端的MVVM的浪潮

2.基於原生的XHR開發，XHR本身的架構不清晰，已經可fetch的替代方案，jquery整個專案太大，單純使用的ajax卻要引入整個jquery非常不合理

3.ajax不支援瀏覽器的back按鈕

4.安全問題ajax暴露了與伺服器互動的細節

5.對搜尋引擎的支援比較弱

6.破壞了程式的異常機制

7.不容易除錯

axios：

1.從node.js建立http請求

2.支援Promise API

3.客戶端防止CSRF（網站惡意利用）

4.提供了一些併發請求的介面

33.jquery和vue的區別

jquery:只是針對原生JS的API選擇器等等進行了封裝，便於操作dom，本質還是操作DOM實現邏輯，資料和介面還是連載一起的。使用於需要操作dom的業務：動畫，互動效果，頁面特效。

VUE:MVVM模型，將資料層和檢視層完全分離開，不僅對api進行封裝，還提供可一系列的解決方案。事件的驅動機制，主要操作的是資料而不是頻繁的操作DOM。

34.JavaScript是單執行緒還是多執行緒

多執行緒要考慮執行緒之間的資源搶佔，死鎖，衝突之類一系列問題。JavaScript作為一門客戶端指令碼，貌似沒有多執行緒的一些列問題。那麼JavaScript是單執行緒還是多執行緒？通過查資料總結了JavaScript執行的原理。如下：

一、為什麼JavaScript是單執行緒？

JavaScript語言的一大特點就是單執行緒，也就是說，同一個時間只能做一件事。那麼，為什麼JavaScript不能有多個執行緒呢？這樣能提高效率啊。

JavaScript的單執行緒，與它的用途有關。作為瀏覽器指令碼語言，JavaScript的主要用途是與使用者互動，以及操作DOM。這決定了它只能是單執行緒，否則會帶來很複雜的同步問題。比如，假定JavaScript同時有兩個執行緒，一個執行緒在某個DOM節點上新增內容，另一個執行緒刪除了這個節點，這時瀏覽器應該以哪個執行緒為準？

為了利用多核CPU的計算能力，HTML5提出Web Worker標準，允許JavaScript指令碼建立多個執行緒，但是子執行緒完
全受主執行緒控制，且不得操作DOM。所以，這個新標準並沒有改變JavaScript單執行緒的本質。

二、任務佇列

單執行緒就意味著，所有任務需要排隊，前一個任務結束，才會執行後一個任務。如果前一個任務耗時很長，後一個任務就不得不一直等著。

如果排隊是因為計算量大，CPU忙不過來，倒也算了，但是很多時候CPU是閒著的，因為IO裝置（輸入輸出裝置）很慢（比如Ajax操作從網路讀取資料），不得不等著結果出來，再往下執行。

JavaScript語言的設計者意識到，這時主執行緒完全可以不管IO裝置，掛起處於等待中的任務，先執行排在後面的任務。等到IO裝置返回了結果，再回過頭，把掛起的任務繼續執行下去。

於是，所有任務可以分成兩種，一種是同步任務（synchronous），另一種是非同步任務（asynchronous）。同步任務指的是，在主執行緒上排隊執行的任務，只有前一個任務執行完畢，才能執行後一個任務；非同步任務指的是，不進入主執行緒、而進入”任務佇列”（task queue）的任務，只有”任務佇列”通知主執行緒，某個非同步任務可以執行了，該任務才會進入主執行緒執行。

35.git將一個分支的程式碼移動到另一分支上

Git把當前分支上的修改轉移到另一個分支上：

1.先在當前分支commit

2.獲取本次commit的ID
（會獲取到一個長id如：ae71cfaf9e865682e2c008aa867e8fbef7a19f7f）

git rev-parse HEAD

3.切換到新分支

git checkout -b fenzhi_name

4.在新分支上執行

git cherry-pick ae71cfaf9e865682e2c008aa867e8fbef7a19f7f

5.所有修改過的程式碼已提交到了當前新分支，git push 就好

36.推送遠端分支

git push --set-upstream origin mengkun

37.請簡述XMLHttpRequest、JSONP的適用場景，並且針對兩種請求形式簡述如何檢測請求錯誤

1.XMLHttpRequest是瀏覽器端與伺服器端進行資料請求時頁面進行無重新整理修改，支援get、post請求，一般用於非跨域場景。如果需要XMLHttpServer進行跨域請求資料，則需要通過CORS頭支援。JSONP應用於跨域請求，只支援get請求。
2.XMLHttpRequst異常判斷一般是通過該物件的readyState和狀態碼status來判斷，JSONP的異常是通過onerror事件和超時timer來判斷。

完成一個 getTags 函式，可以檢測當前頁面用到了哪些標籤，函式返回包含標籤的字串的陣列，比如頁面如下

<html>
  <head></head>
  <body>
    <div></div>
    <p></p>
  </body>
</html>

在頁面中執行 getTags() 之後，函式就返回陣列 [‘html’, ‘head’ ‘body’, ‘div’, ‘p’] (順序不重要)。
注意：
1、標籤名稱使用小寫
2、請使用ES5語法
3、答題時不要使用第三方外掛

(function getTags () {
        var list1 = document.getElementsByTagName("*"); //ES5語法，返回HTMLCollection
        var list2 = document.querySelectorAll("*"); //ES6語法，返回nodeList
        var tags = Array.prototype.slice.call(list1)
        console.log(tags.map(function (item) {
            return item.tagName.toLowerCase()
        }))

    })()

39.js統計數組裡資料出現的次數

var names = ['Alice', 'Bob', 'Tiff', 'Bruce', 'Alice'];
var countedNames = names.reduce((obj, name) => { 
  if (name in obj) {
    obj[name]++
  } else {
    obj[name]=1
  }
  return obj
}, {})
//reduce的第二個引數就是obj的初始值
console.log(countedNames)
// { 'Alice': 2, 'Bob': 1, 'Tiff': 1, 'Bruce': 1 }

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片儲存下來直接上傳(img-ueNrOT2a-1608621117498)(C:\Users\glzpcadm\AppData\Roaming\Typora\typora-user-images\1608174358042.png)]

let data = ['a','b','a','b','c','c','d']
let datas = data.reduce((obj,data)=>{
if( data in obj){
    obj[data] = true
}else{
    obj[data] =false
}
return obj;
},{})

function getEleNums(data) {
 var map = {}
 for (i = 0; i < data.length; i++) {
     var key = data[i]
     if (map[key]) {
         map[key] += 1
     } else {
         map[key] = 1
     }
 }
 return map
}
var data = ['b','a','c','a','b','b','b','c','c','a','c','a','a','a','b','c']
console.log(getEleNums(data))
a: 6 b: 5 c: 5

function paddingNum(num){
	return num.toLoaclString()
}
paddingNum(15246546.4654654)

true
false
undefined
number
function
object
a1
NaN
true
true

eNums(data) {
var map = {}
for (i = 0; i < data.length; i++) {
var key = data[i]
if (map[key]) {
map[key] += 1
} else {
map[key] = 1
}
}
return map
}
var data = [‘b’,‘a’,‘c’,‘a’,‘b’,‘b’,‘b’,‘c’,‘c’,‘a’,‘c’,‘a’,‘a’,‘a’,‘b’,‘c’]
console.log(getEleNums(data))
a: 6 b: 5 c: 5


 [外鏈圖片轉存中...(img-MowAcFpK-1608621117499)] 

```js
function paddingNum(num){
	return num.toLoaclString()
}
paddingNum(15246546.4654654)

[外鏈圖片轉存中…(img-JNEEL4Dz-1608621117500)]

true
false
undefined
number
function
object
a1
NaN
true
true