雜記

時間 2021-02-17

標籤 javascript php css html 前端 vue java node react jquery 欄目 JavaScript 简体版

原文原文鏈接

js 單線程

JavaScript 的單線程，與它的用途有關。JavaScript瀏覽器腳本語言，JavaScript 的主要用途是實現用戶互動，及操做 DOM。這決定了它只能是單線程，不然會帶來很複雜的同步問題。
爲了利用多核 CPU 的計算能力，HTML5 提出 Web Worker 標準，容許 JavaScript 腳本建立多個線程，可是子線程徹底受主線程控制，且不得操做 DOM。因此，這個新標準並無改變 JavaScript 單線程的本質。

異步與同步

同步概念
同步是阻塞模式。當一個方法被調用時，調用者須要等待該方法執行完畢並返回才能繼續執行，咱們稱這個方法是同步方法。javascript
異步概念
異步是非阻塞模式。當一個方法被調用時當即返回，並獲取一個線程執行該方法內部的業務，調用者不用等待該方法執行完畢，咱們稱這個方法爲異步方法php

舉個生活中的例子:css

同步就像你冬天早上起來上班，須要先把水燒好後再去洗臉刷牙,這樣一來你就會以爲時間不夠用，那麼此時異步就能節約不少的時間，你能夠在燒熱水的時間內，完成洗漱等事情，不須要等待熱水燒好。html

DOM 事件流傳播

事件捕獲階段（當你使用事件捕獲時，父級元素先觸發，子級元素後觸發，即 div 先觸發，p 後觸發。）
處於目標階段
事件冒泡階段（當你使用事件冒泡時，子級元素先觸發，父級元素後觸發，即 p 先觸發，div 後觸發）

阻止事件流方式：

q1:阻止冒泡方式有哪些?前端
1. IE：事件對象.cancelBubble=true;
2. 火狐：事件對象.stopPropagation();
q2:阻止瀏覽器的默認行爲有哪些？vue
1. event.preventDefault(); //現代瀏覽器
2. event.returnValue = false; //IE 低版本及部分現代瀏覽器。
3. return false;//兼容性比較好最好用在代碼的最後面。

DOM2 級事件和普通（傳統）事件區別：

1.捕獲由外向內傳播；冒泡由內向外。
2.傳統事件不支持捕獲；DOM2級事件支持捕獲。
3.傳統事件多個相同的事件名，會覆蓋 ；DOM2級事件會依次執行。
4.DOM2級事件有兼容性的。

事件委託？

概念:利用冒泡原理，把某個子元素事件委託給父元素執行java

target、this、currentTarget 的區別

target:觸發事件的某個具體對象，只會出如今事件流的目標階段（誰觸發誰命中，因此確定是目標階段）
currentTarget:綁定事件的對象，恆等於 this，可能出如今事件流的任意一個階段中。
一般狀況下 terget 和 currentTarget 是一致的，咱們只要使用 terget 便可，但有一種狀況必須區分這三者的關係，那就是在父子嵌套的關係中，父元素綁定了事件，單擊了子元素（根據事件流，在不阻止事件流的前提下他會傳遞至父元素，致使父元素的事件處理函數執行），這時候 currentTarget 指向的是父元素，由於他是綁定事件的對象，而 target 指向了子元素，由於他是觸發事件的那個具體對象，以下代碼和截圖所示：

<div id="one">

  <div id="three"></div>

</div>

one.addEventListener('click',function(e){

    console.log(e.target);  //three

    console.log(e.currentTarget);  //one

},false);

target：得到觸發事件的標籤，currentTarget：獲得綁定事件的標籤node

盒模型的種類？

標準盒模型和怪異盒模型react

聖盃佈局和雙飛翼佈局

功能相同，佈局原理就是：兩邊固定中間自適應；實現功能方法不相同而已。jquery

css 定位方式有那些？

position 的值爲:static,relative,absolute,fixed,sticky

默認定位：
position:static

相對定位：
position:relative
參照物是自身,不脫離文檔流

絕對定位：
position:absolute;
參照物是父元素，遵循就近原則，尋找父元素及其爺爺元素中設置 position:relative 屬性進行定位，脫離文檔流；若是都不設置定位屬性，就以根元素<html>進行定位。

固定定位：
position:fixed
參照物是可視區窗口，脫離文檔流

sticky 元素僅在其父元素內生效.

css 和 js

css 是樣式表
js 是動態腳本語言
文件後綴名不一樣

rem 和 em 區別

主要區別就是瀏覽器根據誰轉化成 px 單位,
rem 依據的是 html 的 font-size，1rem 等於 16px,
em 依據的是父元素的 font-size
@media 能夠作到響應式佈局

js 變量提高的

咱們習慣將 var a = 2;看作是一個聲明，而實際上 javascript 引擎並不這麼認爲。它將 var a 和 a = 2 看作是兩個單獨的聲明，第一個是編譯階段的任務，而第二個則是執行階段的任務。

this 指向，如何改變 this 指向以及他們的區別是什麼？

誰調用它就指向誰

箭頭函數中的 this 指向問題，指向的是它的環境

普通函數調用，此時 this 指向 window
構造函數調用，this 指向實例對象
對象方法調用，此時 this 指向該方法所屬的對象
經過事件綁定，此時 this 指向綁定事件的對象

改變 this 指向及區別
call 和 apply 區別是參數不一樣
bind 是建立一個新函數，與被調函數有相同的函數體

map 和 forEach 有什麼區別？

forEach()返回值是 undefined，不能夠鏈式調用。

二、 map()返回一個新數組，原數組不會改變。

三、沒有辦法終止或者跳出 forEach()循環，除非拋出異常，因此想執行一個數組是否知足什麼條件，返回布爾值，能夠用通常的 for 循環實現，或者用 Array.every()或者 Array.some();

四、 &dollar;.each()方法規定爲每一個匹配元素規定運行的函數，能夠返回 false 可用於及早中止循環。
https://www.cnblogs.com/shenp...

var ,let 和 const 區別

在做用域方面：
var 不存在塊級做用域概念,
let 存在塊級做用域概念,
在變量提高方面：
var 聲明的存在變量提高
let const 聲明的變量不存在變量提高，let 定義的變量要在聲明後調用,由於暫時性死區
在重複聲明方面：
var 能夠屢次聲明，let 不存在多此聲明
const 和 let 基本相同，惟一不一樣的是 const 聲明的變量一旦賦值就不能再改變了

seo 優化（搜索引擎優化）

1.head 頭部寫入 keyword 及描述信息。

web 性能優化

減小 http 請求
使用 css scripts
樣式放在頭部，js 放在底部
壓縮組件
使用 CDN

原生寄成方式

call，apply 構造函數繼承
prototype 繼承

//call，apply 構造函數繼承
    // 須要將Child改寫以下，apply相似，但缺陷就是訪問不到Parent.prototype的屬性了
    function Child() {
    Parent.call(this);
    this.dog = "dog";
    }

    prototype 繼承

    // 這樣直接將Parent.prototype賦給Child.prototype的繼承方式不可取，由於在改變Child.prototype裏的屬性會同時改變Parent.prototype
    Child.prototype = Parent.prototype; // 不能訪問構造函數屬性，只能訪問原型

    // Object.create(Parent.prototype)構造的對象是一個空對象且它的原型指向Parent.prototype，因此這裏的Parent.prototype是空對象，連接到了Parent.prototype，並不會影響到Parent.prototype
    Child.prototype = Object.create(Parent.prototype); // 不能訪問構造函數屬性，只能訪問原型

    // 這種繼承方式是將實例化後的Parent對象賦給Child的prototype，既能夠訪問Parent構造函數裏邊的屬性，也能夠訪問原型屬性
    Child.prototype = new Parent();

    // 以上任一操做完成後這一步必須操做，是將Child的構造函數指向自身，不然在執行完繼承以後，實例化的對象構造函數是Parent
    Child.prototype.constructor = Child;

爲何要使用深拷貝？

在改變新的數組（對象）的時候，不改變原數組（對象）

深拷貝和淺拷貝

淺拷貝：將原對象或原數組的引用（地址）直接賦給新對象,新數組，新對象／數組只是原對象的一個引用。
深拷貝：將原對象的各項屬性的「值」（數組的全部元素）拷貝給新的對象和數組，是「值」而不是「引用」。

移動端開發須要注意什麼問題？

一 meta 標籤的使用

<meta
  name="viewport"
  content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
/>

二手機適配等比縮放的方法:
@media 標籤

三佈局

flex
em 和 rem
柵格化佈局
百分比佈局

四文本處理

單行文本溢出

overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;

多行文本溢出

display:-webkit-box !important
overflow:hidden;
text-overflow:ellipsis;
word-break:break-all;
-webkit-box-orient:vertical;
-webkit-line-clamp:2;(數字2表示隱藏兩行)

get 和 post 區別

get 傳輸不安全，由於數據放在請求的 url 中；post 全部操做用戶是看不到的
get 傳輸數據量小，由於受到 url 長度的限制；post 傳輸的數據量較大，通常不受限制
get 執行效率比 post 更好。get 是 form 提交的默認方式。

如何解決移動端開發出現 1px 問題？

border-img
background-image

jq 中的綁定事件，有什麼區別？

on 支持事件委託
bind 不支持事件委託
one 爲每個匹配元素的特定事件（像 click）綁定一個一次性的事件處理函數

jq 中常見的元素選擇方式有哪些，如何獲取屬性值？

一選擇器:

id 選擇器: &dollar;("#ID 名")
class 選擇器: &dollar;(".class 名")
節點選擇器：&dollar;("標籤名")

二屬性選擇器：

&dollar;("div[id]") 選擇全部含有 ID 屬性的 div 元素
&dollar;("input[name='keyicom']") 選擇全部的 name 屬性等於的 div 元素
&dollar;("input[name!='keyicom']") 選擇全部 name 屬性不等於 keyicom 的 div 元素
&dollar;("input[name^="keyicom"]") 選擇全部 name 屬性以 keyicom 開頭的 input 元素
$("input[name$="keyicom"]") 選擇全部 name 屬性以 keyicom 結尾的 input 元素
&dollar;("input[name*="keyicom"]") 選擇全部 name 屬性以 keyicom 結尾的 input 元素

bom 和 dom 有什麼區別，常見的 bom 對象有哪些？

BOM 是 Browser Object Model 縮寫，即瀏覽器對象模型
Dom 是 Document Object Model 縮寫，即文檔對象模型

常見的 bom 對象有哪些

window 對象——BOM 核心
document 對象
location 對象
得到當前頁面的 URL，並重定向到新的頁面
- location.herf
- location.port
navigator 對象
得到與瀏覽器有關的信息
userAgent 是最經常使用的屬性，用來完成瀏覽器判斷
screen 對象
主要用來獲取用戶的屏幕信息。
history 對象
- back() 返回上一頁。
- forward() 返回下一頁

go(「參數」) -1 表示上一頁，1 表示下一頁。

咱們在頁面裏如何設置一個單選框，如何作一個下拉框？

<form action="">
        <input type="radio" name="" value="喜歡"/>
        <input type="radio" name="" value="不喜歡"/>
      </form>
      <label for="">愛好</label>

      <form action="">
        <option value="讀書">讀書</option>
        <option value="運動">運動</option>
      </form>

在 css 中默認有什麼方式佈局

流式佈局
左右佈局
左側固定右側自適應
左中右佈局
flex 佈局

有一個 div，如何設置背景顏色，如何讓 div 半透明？

background-color:rgba(255,255,255,.9)

js 中如何實現頁面跳轉?

location.href

如何獲取用戶的瀏覽器是什麼？

navigator.userAgent

原生 js 事件傳播流程是什麼？

事件捕獲
處於目標階段
事件冒泡階段

input 輸入框有哪些類型？

viewport

數組去重

雙層 for 循環嵌套

for (var i = 0; i < arr.length; i++) {
  for (var j = i + 1; j < arr.length; j++) {
    if (arr[i] == arr[j]) {
      //若是第一個等於第二個，splice方法刪除第二個
      arr.splice(j, 1);
      j--;
    }
  }
}

es5 方法，Ie8 如下不支持

var arrs = [];
//遍歷當前數組
for (var i = 0; i < array.length; i++) {
  //若是臨時數組裏沒有當前數組的當前值，則把當前值push到新數組裏面
  if (arrs.indexOf(array[i]) == -1) {
    arrs.push(array[i]);
  }
}
return arrs;

es6 利用 set 去重

function newArr(arr) {
  return Array.from(new Set(arr));
}

sort 去重

function unique(arr) {
    if (!Array.isArray(arr)) {
        console.log('type error!')
        return;
    }
    arr = arr.sort()
    var arrry= [arr[0]];
    for (var i = 1; i < arr.length; i++) {
        if (arr[i] !== arr[i-1]) {
            arrry.push(arr[i]);
        }
    }
    return arrry;
}
利用sort()排序方法，而後根據排序後的結果進行遍歷及相鄰元素比對

語義化標籤及好處

頁面結構化，
有利於後期維護，
有利於搜索引擎抓取，

媒體查詢

@media 針對不一樣的媒體類型定義不一樣的樣式。

js 中獲取寬度

clientWidth
offsetWidth

面向對象（封裝繼承多態）

封裝把相關的信息（不管數據或方法）存儲在對象中的能力
繼承從另外一個類（或多個類）得來類的屬性和方法的能力
多態編寫能以多種方法運行的函數或方法的能力

設計模式

工廠模式
觀察者模式
單例模式
混合模式

排序算法（冒泡，選擇排序，。。。）

冒泡排序
選擇排序
快速排序

爲何 vue 不能再 ie8 及如下瀏覽器？

Object.defineProperty（）

vue 實現雙向綁定的原理？

Object.defineProperty()

箭頭函數和普通函數

箭頭函數，能夠根據表達式的多少，來判讀是否省略{ ... }和 return。
箭頭函數的 this 永遠指向其上下文的 this ，任何方法都改變不了其指向，
普通函數的 this 指向問題，指向調用它的那個對象

虛擬 dom

特色：性能高效

VUE中router-view 多個 router

router嵌套（https://router.vuejs.org/zh/guide/essentials/named-views.html）

節流和防抖

節流：
節流是會有規律的每隔時間n就執行一次函數。
防抖：
防抖是指在一段時間內，函數被觸發屢次，可是隻執行一次，
當達到了必定的時間間隔就會執行一次

迴流和重繪

區別：迴流必將引發重繪；而重繪不必定會引發迴流。

迴流：
當 render tree 中的一部分(或所有)元素的屬性改變而須要從新構建頁面。這就稱爲迴流(reflow)。
重繪：

當render tree中的一些元素須要更新屬性，而這些屬性只是影響元素的外觀，風格，而不會影響佈局的，稱爲重繪。


比方說：只有顏色改變的時候就只會發生重繪而不會引發迴流，
當頁面佈局和幾何屬性改變時就須要迴流.

手機適配（rem 和彈性盒）

es6 中經常使用的數組方法

isArray 監測該對象是否爲數組是爲 true 否爲 false。
filter（返回新數組，不會改變原數組,不會對空數組進行檢測,只能作篩選,此方法會遍歷完數組）。

var arr = [1, 2, 3, 4];
var newArr = arr.filter((item, index) => {
  return item % 2;
});
console.log(newArr); // [1,3];

find

（返回新數組，不會改變原數組,不會對空數組進行檢測,只能作篩選,此方法知足條件當即跳出）

var arr = [1, 2, 3, 4];
var newArr = arr.filter((item, index) => {
  return item === 1;
});
console.log(newArr); // [1];

map
(返回新數組，不會改變原數組,能夠在原有數據基礎上作運算)

var arr = [1, 2, 3, 4];
var newArr = arr.map((item, index) => {
  return item + 1;
});
console.log(newArr); // [2,3,4,5];

every
(檢測數組中的每個元素是否都經過了 callback 測試，所有經過返回 true，不然返回 false。)

var arr = [1, 2, 3, 4];
var arr1 = [1, 2, 3, "4"];
var newArr = arr.every(item => {
  return typeof item === "number";
});
var newArr1 = arr1.every(item => {
  return typeof item === "number";
});
console.log(newArr); // true
console.log(newArr1); // false

reduce

對數組中的每一個元素（從左到右或從右到左）執行 callback 函數累加，將其減小爲單個值。

var arr = [1, 2, 3, 4];
var newArr = arr.reduce((sum, value) => {
  return sum + value;
}, 0);
console.log(newArr); // 10

const concatArr = [
  [0, 1],
  [2, 3],
  [4, 5]
].reduce((a, b) => {
  return a.concat(b);
}, []);

map 和 foreach 區別

forEach()，不改變原數組，不會返回一個新的數組，沒有返回值。
map()，不會改變原數組，會返回一個新的數組。

共同點：
參數一：function(currentValue, index, arr)必需
參數二: thisValue 可選

開頭結尾的空格

(trim)

ie, 火狐,谷歌

全屏查看

使用全屏插件

面向對象

封裝，繼承，多態
1. 封裝
2. 繼承
    原型鏈繼承
    構造函數繼承
    組合繼承
    寄生組合式繼承
3. 多態
    所謂多態，就是同一個方法的多種調用方式

字符串經常使用方法

1. split()，把字符串分割爲子字符串數組。
2. slice() 提取字符串中兩個指定索引號之間的字符（索引能夠爲負值，-1就是倒數第二位）。
3. substring() 提取字符串中兩個索引之間的字符（兩個索引不能爲負值）。
4. indexOf() 返回指定字符創第一次出現的位置。
5. trim()，移除字符串首位空格，常常在對input和textarea的值作判斷時用到。
6. search()，檢索指定子串或者與正則表達式匹配的值，返回的值是數字。
7. replace()，替換指定子串或者與正則表達式匹配的子串。
8. match()，找到一個或者多個子串或者正則表達式的匹配。
9. toLowerCase()，把字符串轉換成小寫的。
10. toUpperCase()，把字符串轉換成大寫的。

深拷貝和淺拷貝

scss 繼承

{嵌套}

scss 編譯的底層原理

首先less 會轉換爲ast(抽象語法樹）語法
而後遍歷轉換後全部的節點
最後再造成 css 樹

ajax 請求是以什麼格式發送請求

1. put 請求正文是相似 get 請求 url 的請求參數

2. post,請求正文是一個 json 格式的字符串

    ```js
    $.ajax({
    type: "post",
    url: "topupRecordController.do?updateReceiptInfo",
    data: {
        refNo: rowsData[0].refNo
    },
    dataType: "json",
    success: function(result) {}
    });
    ```

獲取 jquery 中同級全部元素

1. 獲取父級元素

    $("#id").parent()

    獲取其父級元素

    $("#id").parents()
2. 獲取同級元素

    siblings()　　返回被選元素的全部同胞（同級）元素；
3. 獲取子元素
    children()    返回匹配元素的子元素，添加可選參數可經過選擇器進行過濾。
    find()        得到當前元素的後代

在 jquery 開發中如何自定義插件？

1. $.extend
2. $.fn.extend

jquery 中的 date set 數據集

data() 方法向被選元素附加數據，或者從被選元素獲取數據。

jquery 中的 attr,prop 有啥區別

獲取和設置 disabled、selected、checked 這些屬性時，應該使用 prop()方法，不要使用 attr()方法！！可以用 prop()操做的儘可能用 prop()操做，不要用 attr()操做。

vue 中子組件向父組件傳參，派發

子組件向父組件，使用&dollar;emit 方法;
該方法接收 2 個參數，第一個參數是事件的名稱。第二個參數是須要傳遞的數據，能夠是對象，也能夠是字符串類型。
&dollar;emit 是 VUE 實例中的一個方法，因此前面要加上 this，能夠在鉤子函數中執行，也能夠由某個事件觸發執行。

foreach map find filter

如何設置一個對象？

1.obj.name=value
3.obj["name"]=value;
2.js 中能夠經過 Object.defineProperty()方法，能夠爲對象添加自定義的屬性

參數 1 添加屬性對象
參數 2 添加的屬性名
參數 3 添加的屬性值(配置對象)

Object.defineProperty(obj, "phone", {
value:110,
enumerable 是否容許枚舉，遍歷
enumerable:false,
writable 屬性值是否能夠修改,默認爲 false 表示不能修改
writable:true
})

排序算法

選擇排序
冒泡排序
快速排序

回車鍵鍵值(13)

http 和 https 有什麼區別及端口號？

一、https 協議須要到 ca 申請證書，通常免費證書較少，於是須要必定費用。

二、http 是超文本傳輸協議，信息是明文傳輸，https 則是具備安全性的 ssl 加密傳輸協議。

三、http 和 https 使用的是徹底不一樣的鏈接方式，用的端口也不同，前者是 80，後者是 443。

四、http 的鏈接很簡單，是無狀態的；HTTPS 協議是由 SSL+HTTP 協議構建的可進行加密傳輸、身份認證的網絡協議，比 http 協議安全。

cookie,localstorage,sessionstorage 區別？

判斷是不是數字？

isNaN 是數字返回 false，不是數字返回 true

props, $emit

promise.all

Promise.all能夠將多個Promise實例包裝成一個新的Promise實例。
同時，成功和失敗的返回值是不一樣的，成功的時候返回的是一個結果數組，而失敗的時候則返回最早被reject失敗狀態的值.
Promse.all在處理多個異步處理時很是有用，好比說一個頁面上須要等兩個或多個ajax的數據回來之後才正常顯示，在此以前只顯示loading圖標。

```js

    let p1 = new Promise((resolve, reject) => {

    resolve('成功了')
    })

    let p2 = new Promise((resolve, reject) => {
    resolve('success')
    })

    let p3 = Promse.reject('失敗')

    Promise.all([p1, p2]).then((result) => {
    console.log(result) //['成功了', 'success']
    }).catch((error) => {
    console.log(error)
    })

    Promise.all([p1,p3,p2]).then((result) => {
    console.log(result)
    }).catch((error) => {
    console.log(error) // 失敗了，打出 '失敗'
    })

```

常見的僞類選擇器

:first-child
:last-child
:focus
:link
:lang
:checked
:hover
:active
:visited
:nth-child(n)
:nth-of-type等

網頁性能優化

一、資源壓縮合並，減小http請求

二、非核心代碼異步加載 --> 異步加載的方式 --> 異步加載的區別

三、利用瀏覽器緩存 --> 緩存的分類 --> 緩存的原理

四、使用CDN

五、DNS預解析

瀏覽器打開網頁都經歷了什麼？

瀏覽器頁面準備：如unload前一個頁面、初始化資源等。
重定向：若是服務端返回header中定義了重定向纔會有這個過程，若是沒有重定向，不會產生這個過程。
app cache：會先檢查這個域名是否有緩存，若是有緩存就不須要DNS解析域名。這裏的app是值應用程序application，不指手機app。
DNS解析：把域名解析成IP，若是直接用ip地址訪問，不產生這個過程。
TCP鏈接：http協議是通過TCP來傳輸的，因此產生一個http請求就會有TCP connect，可是依賴於長鏈接，不會產生這個過程。
發送請求：請求服務端資源。
接受請求：接受服務端返回數據。
解析HTML結構
加載外部腳本和樣式表文件：正常來講JS、css都是外部加載的。
解析並執行腳本代碼
構建與解析HTML DOM樹
加載外部圖片
頁面加載完成，頁面正常顯示。

typeScript 是什麼？

TypeScript 是一種由微軟開發的自由和開源的編程語言

面向對象

如何實現多態？

多態的實現能夠採用和繼承相似的方法。首先定義一個抽象類，其中調用一些虛方法，虛方法在抽象類中沒用定義，而是經過其具體的實現類來實現。

es6 新增的東西有哪些？

1 定義變量加入了 let const

let 會將變量提高到塊頂部（而非像 ES5 是函數頂部）。

可是在變量聲明前引用變量會形成錯誤。

let 是塊做用域的，不能夠在聲明前使用。

const 若是不但願變量的值在發生改變，使用 const 聲明變量。

2 封閉空間
3 字符串和變量的拼接
4 解構賦值
5 類和麪向對象

計算屬性及應用場景

computed 和 methods 達到的效果是相同的
computed 是響應式的，methods 並不是響應式。
methods 中就是普通的方法，經過調用執行，computed 中的方法會監聽本身的依賴，依賴發生變化方法會自動執行。
computed 適合處理的場景是，一個數據屬性在它所依賴的屬性發生變化時，也要發生變化，這種狀況下，咱們最好使用計算屬性。

vue 生命週期鉤子函數

8個生命週期鉤子函數

beforeCreate el 和 data 並未初始化
created 完成了 data 數據的初始化，el沒有
beforeMount 完成了 el 和 data 初始化
mounted 完成掛載
beforeUpdate
updated
beforeDestroy
destroyed

VUE 打包時候如何作性能優化

map 文件的處理
修改成：productionSourceMap: false,

父組件調用子組件

經過this.$refs.ref.method調用

```js
    import children from'components/children.vue'

    components: {'children': children },

    <children ref="child"></children>
    methods:{

    parentFun(){
            this.$refs.child.test();
                }
    }
```

組件ref 是啥？

ref 有三種用法：

一、ref 加在普通的元素上，用 this.ref.name 獲取到的是 dom 元素

二、ref 加在子組件上，用 this.ref.name 獲取到的是組件實例，可使用組件的全部方法。

根據窗口大小，改變字體大小

使用rem佈局，在@media中設置html font-size值
函數

$(function(){ 
    var r = document.body.offsetWidth/window.screen.availWidth; 
    $(document.body).css("-webkit-transform","scale(" + r + ")"); 
    }); 
    $(window).resize(function(){ 
    var r=document.body.offsetWidth/window.screen.availWidth; 
    $(document.body).css("-webkit-transform","scale("+r+")"); 
    });

如何限制一個組件是必填的

required: true

如何在 updata 數據改變

seo 優化

嚴格模式下，this 指向

vm.$set( target, key, value )
this.$set(this.obj,'k1','v1')

react 組件的生命週期

componentWillMount 在渲染前調用,在客戶端也在服務端。
componentDidMount : 在第一次渲染後調用，只在客戶端。以後組件已經生成了對應的DOM結構，能夠經過this.getDOMNode()來進行訪問。若是你想和其餘JavaScript框架一塊兒使用，能夠在這個方法中調用setTimeout, setInterval或者發送AJAX請求等操做(防止異步操做阻塞UI)。
componentWillReceiveProps 在組件接收到一個新的 prop (更新後)時被調用。這個方法在初始化render時不會被調用。
shouldComponentUpdate 返回一個布爾值。在組件接收到新的props或者state時被調用。在初始化時或者使用forceUpdate時不被調用。
能夠在你確認不須要更新組件時使用。
componentWillUpdate在組件接收到新的props或者state但尚未render時被調用。在初始化時不會被調用。
componentDidUpdate 在組件完成更新後當即調用。在初始化時不會被調用。
componentWillUnmount在組件從 DOM 中移除以前馬上被調用。

react 和 vue 的區別？

相同點:

1. 都支持服務器端渲染

2. 都有Virtual DOM,組件化開發,經過props參數進行父子組件數據的傳遞,都實現webComponent規範

3. 數據驅動視圖

4. 都有支持native的方案,React的React native,Vue的weex

5. 都有管理狀態，React有redux,Vue有本身的Vuex（自適應vue，量身定作）

不一樣點：

1.React嚴格上只針對MVC的view層,Vue則是MVVM模式

2.virtual DOM不同,vue會跟蹤每個組件的依賴關係,不須要從新渲染整個組件樹.

    而對於React而言,每當應用的狀態被改變時,所有組件都會從新渲染,因此react中會須要shouldComponentUpdate這個生命週期函數方法來進行控制

3.組件寫法不同, React推薦的作法是 JSX + inline style, 也就是把HTML和CSS全都寫進JavaScript了,即'all in js';

    Vue推薦的作法是webpack+vue-loader的單文件組件格式,即html,css,jd寫在同一個文件;

4.數據綁定: vue實現了數據的雙向綁定,react數據流動是單向的

5.state對象在react應用中不可變的,須要使用setState方法更新狀態;

   在vue中,state對象不是必須的,數據由data屬性在vue對象中管理；

w3c 規範

結構化標準語言
樣式標準語言
行爲標準語言

語義化標籤

代碼結構清晰，方便閱讀，有利於團隊合做開發。
方便其餘設備解析（如屏幕閱讀器、盲人閱讀器、移動設備）以語義的方式來渲染網頁。
有利於搜索引擎優化（SEO）。

常見的語義化標籤
<title>：頁面主體內容。
h1~h6：分級標題
<header>
<main>:頁面主要內容，一個頁面只能使用一次。若是是web應用，則包圍其主要功能。
<nav>:標記導航，僅對文檔中重要的連接羣使用。
<section>:定義文檔中的節（section、區段）。好比章節、頁眉、頁腳或文檔中的其餘部分。
:呈現小號字體效果，指定細則，輸入免責聲明、註解、署名、版權
:和 em 標籤同樣，用於強調文本，但它強調的程度更強一些。
<figure>：規定獨立的流內容（圖像、圖表、照片、代碼等等）（默認有40px左右margin）。
<figcaption>:定義 figure 元素的標題，應該被置於 figure 元素的第一個或最後一個子元素的位置。
<address>:做者、相關人士或組織的聯繫信息（電子郵件地址、指向聯繫信息頁的連接）。
<mark>:使用黃色突出顯示部分文本。
：移除的內容。
<ins>：添加的內容
：標記代碼。 <progress>：定義運行中的進度（進程）。

重置樣式表

https://www.php.cn/css-tutorial-412103.html

自動完成

jquery自動完成插件
http://www.jq22.com/jquery-info438

先後端分離的後臺管理 Vue

多人開發，減小開發成本

基本數據類型與複雜數據類型的區別？

基本數據類型把數據名和值直接存儲在棧當中

複雜數據類型在棧中存儲數據名和一個堆的地址，在堆中存儲屬性及值，訪問時先從棧中獲取地址，再到堆中拿出相應的值

不一樣數據類型做爲參數時函數內部對參數的修改是否改變外部變量的值

基本數據類型做爲參數時，函數內部對參數值的修改不會改變外部變量的值

手動搭建vue項目

node幹嗎的？

請求頁面時頁面崩了怎麼辦？

全局響應攔截

什麼是全局請求攔截

hash路由有什麼特色？

怎麼配置子路由？

路由有什麼屬性

上拉刷新下拉刷新

mvc,mvvm

Vue就是基於MVVM模式實現的一套框架

750

1920 1280

圖片上傳？

原型和原型鏈理解

https://www.cnblogs.com/jofun...

視頻播放

https://blog.csdn.net/weixin_...

音頻播放

https://www.cnblogs.com/tcxq/...

https://overreacted.io/zh-han...

for while 和 do while

http://www.ruanyifeng.com/blo... MVC，MVP 和 MVVM 的圖示

https://github.com/answershut... Vue.js 源碼解析

w3c 規範？

jquery 全屏滾動插件 http://www.jq22.com/jquery-in...

vue 中網頁全屏 https://zhidao.baidu.com/ques... 全屏顯示

https://github.com/sindresorh... js 全屏顯示插件

數組去重

vue 中鉤子函數只執行一次的？

keep-live

h5新增哪些標籤呢？

video 表示一段視頻並提供播放的用戶界面
audio 表示音頻
canvas 表示位圖區域
source 爲video和audio提供數據源
track 爲video和audio指定字母
svg 定義矢量圖
code 代碼段
figure 和文檔有關的圖例
figcaption 圖例的說明
main
time 日期和時間值
mark 高亮的引用文字
datalist 提供給其餘控件的預約義選項
keygen 祕鑰對生成器控件
output 計算值
progress 進度條
menu 菜單
embed 嵌入的外部資源
menuitem 用戶可點擊的菜單項
menu 菜單
template
section
nav
aside
article
footer
header

圖片在任意手機端都鋪滿整個屏幕

background-size:length|percentage|cover|contain;

github搜索技巧

es6新增哪些屬性？

什麼是原型，什麼是原型鏈

svg

stars:>=5000
in:name 關鍵字
in:description 關鍵字
in:Readme 關鍵字
awesome + 關鍵字:能夠找到別人收集好的內容。
language:關鍵字

npm config set sass_binary_site

https://npm.taobao.org/mirror...

https://github.com/PanJiaChen... vue 管理後臺模板代碼倉庫

http://manager.cat-shop.penku...
admin001
admin@12138
https://www.jianshu.com/p/fcc... 前端 seo

https://blog.csdn.net/qq_3750... H5 移動端 ios/Android 兼容性總結

https://www.netlify.com 能夠關聯 github 搭建一個靜態網站

https://www.teambition.com/ 團隊開發任務工具

https://www.lodashjs.com/ js 工具類

http://momentjs.cn/ 日期格式化插件

https://www.sourcetreeapp.com/ sourcetree

https://www.cnblogs.com/fishe... sourcetree 安裝使用

https://www.jianshu.com/p/0c6... git workflow 工做流

https://backlog.com/git-tutor... 猴子都懂得 git

https://www.jianshu.com/p/398...

https://segmentfault.com/a/11... 解析 vue2.0 的 diff 算法

https://www.jianshu.com/p/e4e...

https://blog.csdn.net/kang_k/... vue 作 seo 優化

nuxt 基於 vue 插件

https://tophub.fun/main/home/hot 魚塘

https://github.com/trending github 倉庫排名

https://github.com/zhaoolee/C... 表情包的博物館

https://expo.io/learn expo 環境使用的插件，很難安裝

在大家的終端裏安裝下這個插件，下下週以前裝好就行
npm install expo-cli --global

https://reacttraining.com/rea... react-router

有空了能夠了解下，2020 年應該知道的 20 個 react ui 框架
https://www.codeinwp.com/blog...

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

雜記

js 單線程

異步與同步

DOM 事件流傳播

阻止事件流方式：

DOM2 級事件和普通（傳統）事件區別：

事件委託？

target、this、currentTarget 的區別

盒模型的種類？

聖盃佈局和雙飛翼佈局

css 定位方式有那些？

css 和 js

rem 和 em 區別

js 變量提高的

this 指向，如何改變 this 指向以及他們的區別是什麼？

map 和 forEach 有什麼區別？

var ,let 和 const 區別

seo 優化 （搜索引擎優化）

web 性能優化

原生寄成方式

爲何要使用深拷貝？

深拷貝和淺拷貝

移動端開發須要注意什麼問題？

get 和 post 區別

如何解決移動端開發出現 1px 問題？

jq 中的綁定事件，有什麼區別？

jq 中常見的元素選擇方式有哪些，如何獲取屬性值？

bom 和 dom 有什麼區別，常見的 bom 對象有哪些？

常見的 bom 對象有哪些

咱們在頁面裏如何設置一個單選框，如何作一個下拉框？

在 css 中默認有什麼方式佈局

有一個 div，如何設置背景顏色，如何讓 div 半透明？

js 中如何實現頁面跳轉?

如何獲取用戶的瀏覽器是什麼？

原生 js 事件傳播流程是什麼？

input 輸入框有哪些類型？

viewport

數組去重

語義化標籤及好處

媒體查詢

js 中獲取寬度

面向對象（封裝繼承多態）

設計模式

排序算法（冒泡，選擇排序，。。。）

爲何 vue 不能再 ie8 及如下瀏覽器？

vue 實現雙向綁定的原理？

箭頭函數和普通函數

虛擬 dom

VUE中router-view 多個 router

節流和防抖

迴流和重繪

手機適配（rem 和彈性盒）

es6 中經常使用的數組方法

map 和 foreach 區別

開頭結尾的空格

全屏查看

面向對象

字符串經常使用方法

深拷貝和淺拷貝

scss 繼承

scss 編譯的底層原理

ajax 請求是以什麼格式發送請求

獲取 jquery 中同級全部元素

在 jquery 開發中如何自定義插件？

jquery 中的 date set 數據集

jquery 中的 attr,prop 有啥區別

vue 中子組件向父組件傳參，派發

foreach map find filter

如何設置一個對象？

排序算法

回車鍵鍵值(13)

http 和 https 有什麼區別及端口號？

cookie,localstorage,sessionstorage 區別？

判斷是不是數字？

props, $emit

promise.all

常見的僞類選擇器

網頁性能優化

瀏覽器打開網頁都經歷了什麼？

typeScript 是什麼？

seo 優化（搜索引擎優化）

上拉刷新下拉刷新