大前端必備知識

時間 2020-03-28

標籤前端必備知識简体版

原文原文鏈接

1、vue的基礎知識

vue實現雙向綁定原理

一、Object.defineProperty()中的set/get設置屬性值/獲取屬性值
二、過程css
- Observer劫持並監聽全部屬性html
  - 發生變化，通知Dep觀察者（update函數）
  - Watcher負責向觀察者列表添加對應更新函數
  - Compile編譯解析
  - 初始化/更新

vue生命週期

beforeCreate前端
- data和methods中的數據和方法還沒初始化
createdvue
- data和methods初始化完成
beforeMountnode
- 模板已經在內存編譯好了，還沒有掛載到頁面
mountedajax
- 頁面掛載完成，能夠操做DOM
beforeUpdate算法
- 頁面數據是舊的，data數據是新的，頁面和最新數據還沒同步
updatedvuex
- 頁面和data已經保持最新
beforeDestory數據庫
- 進入銷燬階段，data、methodes...還可用
destroyedjson
- 組件已經徹底銷燬，data、methods以及過濾器，指令不可用

vue組件通訊

父子通訊
- 父組件綁定屬性「：data-attr」數據
- 子組件在props接收駝峯式dataAttr數據
子與父通訊
- 子組件$emit('to-parent',newMsg)綁定屬性傳輸數據
- 父組件綁定@to-parent="getChildren(e)"屬性接收數據
兄弟通訊
- 在main.js創建一個Vue.prototype.bus事件總線（中間層）
- 在borther1，this.bus.$emit('屬性toborther2'，值)
- 在borther2接收，this.bus.$on('toborther2',function(val){ that.msg = val })

vue的虛擬DOM

虛擬DOM出現是爲了減小頻繁大面積的重繪引起的性能問題
虛擬dom和真實dom的區別
- 一、虛擬dom不會排版與重繪二、真實dom頻繁排版與重繪效率至關低三、虛擬dom進行頻繁修改，而後一次性比較並修改真實dom中須要改的部分，最後並在真實dom中進行排版與重繪，減小過多dom節點排版與重繪損耗四、虛擬dom有效下降大面積的重繪與排版，由於最終與真實dom比較差別，能夠只渲染局部
DOM Diff
- 指的是經過Diff算法去比較虛擬DOM的變化
vue怎麼更新節點
- 一、先根據真實DOM生成virtual DOM 二、當virtual DOM某個節點的數據改變後會生成一個新的Vnode 三、Vnode和oldVnode做對比，發現有不同的就直接修改在真實的DOM，而後使oldVnode的值爲Vnode

路由

全局路由攔截(路由守衛)
- router.beforeEach(( to, from, next )=>{}) //跳轉前
  - to: 即將進入的目標（路由對象）
  - from:當前導航正要離開的路由
  - next()進行下一個鉤子，next(false)中斷當前導航，若是此時URL改變，則會重置爲from後的路由地址， next('/') next(path: '/')終止當前導航，跳轉到一個不一樣的地址，next(error)若是參數爲一個error實例，則會終止導航
- beforeResolve(( to, from, next )=>{}) //跳轉成功
- afterEach(( to, from, next )=>{}) //跳轉後
局部路由攔截
- 路由內部鉤子： beforeEnter(( to, from, next )=>{})
- 組件內部鉤子
  - beforeRouteEnter(( to, from, next )=>{}) //從另外的組件進入該組件前觸發該鉤子
  - beforeRouteUpdate(( to, from, next )=>{}) //同一個組件，參數不同，不同數據
  - beforeRouteLeave(( to, from, next )=>{}) //該組件離開跳轉到另外的組件時觸發該鉤子
路由傳參
- this.$router.push({ path: /Re/${id} })
- this.$router.push({ name: 'Re', params: { id: id } })
- this.$router.push({ path: '/Re', query:{ id: id } })

vuex

state定義共享變量
mutations同步修改共享變量（更改state,提交mutation）
actions能夠提交mutation,action中執行store.commit
getter計算屬性

如何解決單頁面的SEO問題

prerender-spa-plugin
SSR
- 定義
  - 服務端渲染，用戶請求網頁，都是後端先調用數據庫，得到數據以後，將數據和頁面元素進行拼接，組合成完整的html頁面，再直接返回給瀏覽器
- 優點
  - 一、更好的SEO，因爲搜索引擎爬蟲抓取工具能夠查看渲染頁面
  - 二、更快內容到達時間，特別對於緩慢的網絡狀況或緩慢的設備
- 劣勢
  - 一、構建設置和部署的更多要求
  - 二、更多服務器端負載
Nuxt.js

2、微信小程序基礎

app.js
- 系統的方法處理文件，主要處理程序聲明週期的一些方法
app.json
- 路由地址、全局配置，導航頭顏色、名稱
app.wxss
- 全局界面樣式
project.config.json
- 控制小程序版本，appid
sitemap.json
- 用來配置小程序及其頁面是否容許被微信索引
pages
- 小程序各個頁面文件
components
- 組件
images
- 圖片
template
- 模板

生命週期

頁面生命週期
- onLoad
  - 監聽頁面加載
- onShow
  - 監聽頁面顯示
- onReady
  - 監聽頁面初次渲染完成
- onHide
  - 監聽頁面隱藏
- onUnload
  - 監聽頁面卸載
app生命週期
- onLaunch
  - 監聽小程序初始化，只觸發一次
- onShow
  - 監聽小程序顯示
- onHide
  - 監聽小程序隱藏
- onError
  - 錯誤監聽函數

路由

wx.switchTab
- 跳轉到tabBar頁面，並關閉其餘全部非tabBar頁面
wx.reLaunch
- 關閉全部頁面，打開應用內某個頁面
wx.redirectTo
- 關閉當前頁面，跳轉到應用內某個頁面，不容許跳tabbar頁面
wx.navigateTo
- 保存當前頁面，跳轉到應用內某個頁面，不能跳到tabbar頁面，最多十層頁面棧
wx.navigateBack
- 關閉當前頁面，返回上一頁或多級頁面

頁面傳遞數據的方法

url參數傳遞
- 一、wx.navigateTo({ url: '../list/list?username=' + this.data.username }) 二、wx.redirectTo 三、wx.reLaunch
本地緩存
- wx.setStorageSync('username',this.data.username)
全局變量
- appjs裏面app.globalData對象中新建屬性

基本原理

雙線程通訊方式
- view視圖層：渲染頁面結構
  - 一、初始化狀態
  - 二、首次渲染狀態
  - 三、持續渲染狀態
  - End
- 經過JSBridage通訊
- AppService邏輯層：用來邏輯處理、數據請求、接口調用
  - 一、初始化狀態：onLoad(只執行一次)、onShow（每次切換都會執行）
  - 二、等待激活狀態：接收到「界面線程初始化完成」信號，講初始化數據發送到「界面線程」，等待界面線程完成初始渲染
  - 三、激活狀態：首次渲染完成，調用onReady函數
  - 四、後臺狀態：也能接收數據，局部渲染
  - End
虛擬DOM
- 一、js對象模擬DOM
- 二、比較兩個DOM樹
- 三、比較兩個DOM樹的差別
- 四、把差別應用到真正的DOM樹上

數據請求封裝

在utils封裝wx.request請求
- 組件中引入應用

提升應用速度方法

提升頁面加載速度
用戶行爲預測
減小默認data的大小
組件化方案

雙向綁定

this.setData({})
bindinput綁定事件方法，監聽變化

3、js基礎知識

原型、原型鏈

函數對象
- 全部函數prototype（顯式原型）
- 函數、數組、對象都擁有__proto__（隱式原型）
- 原型對象，擁有prototype屬性的對象，在定義函數時就被建立
構造函數
- 構造函數會擁有自己方法，也會擁有顯式原型的方法，即實例繼承構造函數的方法
原型鏈（查找屬性，在__proto__中查找，經過__proto__造成原型鏈）
- prototype
- proto
- constructor

繼承

含義
- 發生在對象與對象之間
方法
- 原型
  - 構造函數（子構造函數prototype繼承父構造函數的原型方法）
- apply,call借調構造函數
  - 例：

function Fn(name,age){                                 
        this.name = name;  
        this.age = 20;                                   
    }
    function Son(name,age,sex){       
        Fn.call(this,name,age);   
        this.sex = sex;                                                                             
    }
    function Son2(name,age,sex){      
        Fn.apply(this,arguments);
        this.sex = sex;                                                                            
    }   
    var  s1 = new Son("李四",20,「男」);
    console.log(s1);    //    son:{  name:"李四",age: 20,sex:"男" }       
    var  s1 = new Son2("張三",29,「女」);
    console.log(s2);   //son:{ name: "張三"，age:29,sex:"女"}

閉包

含義
- 就是能讀取其餘函數內部變量的函數
做用
- 好處
  - 一、保護函數內的變量安全，防止命名衝突
  - 二、內存維持一個變量，能夠作緩存
  - 三、匿名自執行函數能夠減小內耗
- 壞處
  - 一、增大內耗，形成內存泄漏
  - 二、閉包跨域訪問，致使性能損失

跨域

含義
- 協議、域名、端口有一個不一樣就是跨域
解決跨域
- 一、CORS跨源通訊：瀏覽器和服務器同時支持，瀏覽器IE不能低於IE10，前端正常ajax請求，須要服務器實現CORS接口，就能夠實現跨域通訊
- 二、JSONP：a、只能get請求，不能post b、dataType:"jsonp", jsonp: "jsoncallback" c、先在客戶端註冊一個callback,而後把callback名字傳給服務器，服務器生成json數據，而後以js語法方式生成function,function名字就是傳遞上來的參數jsonp.最後將json數據直接入參的方式，放置到function,生成一段js語法文檔，返回給客戶端
- 三、window.name：不一樣頁面/不一樣域名仍然存在
- 四、document.domain將兩個不一樣頁面設置成相同練=的域名，設置成更高的父域
- 五、location.hash子框架具備修改父框架src的hash值
- 六、window.postMessage：HTML5的api容許兩個窗口跨域發送信息，解決dom跨域通用方法

構造函數

任意一個普通函數用於建立一類對象時，稱爲構造函數或構造器

做用域鏈

做用域：變量和函數可訪問範圍，或者說變量或函數起做用的區域
做用域鏈：是一個對象列表，用來檢索各個變量對象中的變量和函數，這樣能夠保證執行環境有權訪問那些變量和函數

cal、 apply、bind的區別

相同：改變this指向，做用同樣
不一樣：接收的參數不同，call(this,a,b,c),apply(this,arguments)當即執行，bind是返回對應函數，稍後執行，須要手動執行

null和undefined的區別

null是空值，類型爲object
undefined表示「缺乏值」，未定義

事件冒泡、事件捕獲和事件委託

事件冒泡
- 含義
  - 自下而上（自內而外）的觸發事件
- 如何防止事件冒泡
  - jq的e.stopPropagation
事件捕獲
- 含義
  - 自上而下（自外而內）的觸發事件
事件委託
- 含義
  - 只指定一個事件處理程序，將本來子元素上的處理程序委託給父元素執行
- 爲何
  - 新增子元素，不需添加事件，由於已經綁定父元素
- 怎麼作
  - $('parent').on('click','li',function(e){ })

原生方法

賦值方法
- pop和push
  - pop從尾部刪除1個元素
  - push增長若干元素
- shift和unshift
  - shift頭部刪除1個元素
  - unshift頭部增長若干元素
- splice
  - 含義
    - 向數組中添加/刪除項目，並返回被刪除的項目
  - 參數
    - index:添加或刪除項目的位置
    - howmany:要刪除的項目的數量
    - item:向數組添加的新項目
- reverse
  - 將數組中元素順序反轉
- sort
  - 將數組元素進行排序
訪問方法
- concat
  - 用於鏈接兩個或多個數組，返回新數組
- join
  - 用於把數組中的全部元素放入一個字符串，即指定分隔符進行分隔
- slice
  - 經過索引位置獲取新的數組，不會修改數組，只會返回新的子數組
- toString
  - 將其轉換爲字符串
- indexOf和lastIndexOf
  - indexOf返回指定字符串首次出現的位置（從左往右）
  - lastIndexOf返回指定字符串首次出現的位置（從右往左
迭代方法
- forEach
  - 遍歷
- map
  - 遍歷
- filter
  - 過濾器，把數組的某些元素過濾掉，而後返回剩下的元素
- every和some
  - every從迭代開始，一旦有一個不符合條件的則中止
  - some一直在找符合條件的值，找到就中止
- reduce和reduceRight
  - reduce升序從左往右（累加器）
  - reduceRight降序從右往左（累加）

數據類型

Null
Number
String
Boolen
Undefined

js設計模式

模塊模式
構造函數模式
混合模式
工廠模式
單例模式
發佈-訂閱模式

js的佔位顯示色塊（有點預加載的意思）

js的遍歷

for
- 耗時23-24ms,break,continue,return支持
for...in
- 耗時4858ms
for...of
- 耗時480-485ms
forEach
- 耗時209ms，break,continue,return不支持使用

性能測試工具

4、ES6的基本語法

var、let和const賦值

var 聲明變量，可有變量提高做用，函數級做用域
let 聲明變量，塊級做用域
const聲明常量

解構

含義
- 容許按照必定模式，從數組和對象中提取值，對變量進行賦值
解構賦值的類型
- 數組
  - [a,b,c,d] = [1,2,3,4] // a=1,b=2,c=3,d=4
- 對象
  - {foo,bar} = {foo: 'aaa',bar: 'bbb'} //foo='aaa', bar = 'bbb'
- 字符串
  - [a,b,c,d,e] = 'hello' //a=h,b=e,c=l,d=l,e=o
- 數值和布爾值
  - let {toString: s} = 123; //s === Number.prototype.toString;
- 函數參數
  - function add([x, y]){ return x + y; }; add([1,2]); //3

箭頭函數

this指向外層
使用callapplybind，this指的是綁定的對象

Set去重

Set是新的數據結構，成員的值是惟一的
[...set]
Array.from(new Set(array)) Set結構數組化

新增數據類型Symbol

含義
- 表示獨一無二的值
- Symbol值經過Symbol函數生成
用途
- 一、用做屬性名

``模板字符串

怎麼實現繼承

Class繼承

模塊化

promise

含義
- 對象構造函數
  - resolve表示成功回調
  - reject表示失敗回調
方法
- promise.all
  - 要多個異步請求一塊兒成功才返回成功
- promise.race
  - 只返回第一個執行完成的異步操做結果

async/await

含義
- 在方法外層必須 async異步函數
- await必須執行完異步操做，纔會執行下一步
用法
- 內置執行器
- 返回Promise

5、html與css基礎知識

塊級元素和內聯元素

塊級元素
- div/h1/li/ul/p/th/td
內聯元素
- a/b/input/span/i/img

如何實現水平垂直居中

一、position:absolute; left: 50%; top: 50%; transform:translate(-50%,-50%);
二、position: absolute; top bottom left right:0; margin:auto;
三、position: absolute; top: 50%; left: 50%; margin-top: -25px; // height的一半 margin-left: -25px; //寬的一半

display:none;和visibility:hidden;區別

display//不佔位隱藏
visibility//佔位隱藏

清除浮動

一、添加子元素僞元素選擇器
二、overflow: hidden;第一個盒子設置margin-bottom,第二個盒子設置margin-top

css屬性繼承

文本相關屬性：font-family / font-size / font-style / line-height / text-align / color
列表相關屬性：list-style
表格相關屬性：border-spacing
其餘屬性：cursor / visibility

static/relative/absolute/fixed的區別

一、static默認值，不設置屬性，會按正常的文檔流
二、relative相對定位，相對它自己的位置
三、absolute絕對定位，多是相對父元素的relative/absolute定位，也有多是相對body定位
四、fixed定位對象是根據瀏覽器窗口進行定位

link和@import區別

link是html標籤，頁面加載時，link會同時被加載，沒兼容性，樣式權重高
@import是css加載，會等頁面加載後才加載，IE5以上才能識別，比link低

BFC

含義
- 塊級格式化上下文，塊級元素的佈局渲染規範
建立BFC
- float不是none
- position值不是static/relative
- display值是inline-block,table-cell,flex,table-caption,inline-flex
- overflow值不是visible

IE6的bug

圖片有邊框bug
- 解決：給圖片border:0;或者border:none;
雙倍邊距
- 解決：display:inline;
默認高度
- 解決：font-size:0;或者overflow:hidden;
按鈕元素默認大小不一致
- 解決：a標籤模擬

6、瀏覽器兼容性

不一樣瀏覽器margin和padding不一樣

解決：清除標籤默認樣式 *{ margin: 0; padding: 0; }

IE6雙邊距問題

解決：display:inline;

標籤高度設置小於10px,在IE6和IE7會超出本身設置的高度

解決：overflow:hidden;或line-height小於高

圖片默認有間距

解決：float佈局

IE9不能使用opacity

解決：opacity: 0.5;filter: alpha(opacity = 50);filter:progid:DXImage Transform.Microsoft.Alpha(style = 0,opacity = 50);

邊距重疊問題

解決：給子元素增長父元素，父元素設置overflow:hidden;

cursor: hand在safari上不支持

解決：統一使用cursor:pointer;

7、HTTP的狀態及請求

常見狀態碼

200 成功，一切正常
302 重定向
304未修改
403服務器禁止訪問
404找不到請求的資源
500服務器錯誤

http流程

一、創建鏈接
二、客戶端發送請求到服務器
三、服務器返回相應信息：狀態行、協議版本好、成功或錯誤代碼
四、客戶端接收服務器返回信息顯示在用戶顯示屏，而後斷開連接

http方法

GET獲取數據
POST傳輸數據
PUT傳輸文件
HEAD獲取報文首部
DELET刪除文件
OPTIONS查詢相應URL支持的HTTP方法

8、項目遇到的問題

vue

一、兼容IE10：組件babel-polyfill
二、打包後線上資源圖片路徑地址不對：修改cofig/index.js配置文件公共路徑

微信小程序

一、富文本html在小程序不兼容：用wxParse組件編譯成功小程序view標籤

html、css

一、鍵盤擋住輸入框擋住：css控制滾動頁面

相關標籤/搜索

每日一句

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

大前端必備知識

1、vue的基礎知識

vue實現雙向綁定原理

vue生命週期

vue組件通訊

vue的虛擬DOM

路由

vuex

如何解決單頁面的SEO問題

2、微信小程序基礎

目錄

生命週期

路由

頁面傳遞數據的方法

基本原理

數據請求封裝

提升應用速度方法

雙向綁定

3、js基礎知識

原型、原型鏈

繼承

閉包

跨域

構造函數

做用域鏈

cal、 apply、bind的區別

null和undefined的區別

事件冒泡、事件捕獲和事件委託

原生方法

數據類型

js設計模式

js的佔位顯示色塊（有點預加載的意思）

js的遍歷

性能測試工具

4、ES6的基本語法

var、let和const賦值

解構

箭頭函數

Set去重

新增數據類型Symbol

``模板字符串

怎麼實現繼承

模塊化

promise

async/await

5、html與css基礎知識

塊級元素和內聯元素

如何實現水平垂直居中

display:none;和visibility:hidden;區別

清除浮動

css屬性繼承

static/relative/absolute/fixed的區別

link和@import區別

BFC

IE6的bug

6、瀏覽器兼容性

不一樣瀏覽器margin和padding不一樣

IE6雙邊距問題

標籤高度設置小於10px,在IE6和IE7會超出本身設置的高度

圖片默認有間距

IE9不能使用opacity

邊距重疊問題

cursor: hand在safari上不支持

7、HTTP的狀態及請求

常見狀態碼

http流程

http方法

8、項目遇到的問題

vue

微信小程序

html、css