本文目錄一覽：
- 1、小白準備轉行學習前端，有大神可以提一些建議嗎
- 2、vue的數據雙向綁定是怎麼實現的
- 3、javascript同步和異步的區別與實現方式
- 4、前端經典面試題(包含JS、CSS、React、瀏覽器等)
- 5、Javascript如何實現接口？
- 6、vue數據雙向綁定原理
小白準備轉行學習前端，有大神可以提一些建議嗎
如果是準備學前端，建議你可以看下這篇文章！
2022 年最新 Web 前端學習路線圖，我梳理了完整的細節知識點，企業項目開發解決方案所需技術棧，更適合自學 Web 前端開發的同學，路線清晰明確，少走彎路。
零基礎學編程，從宏觀到微觀全面了解
專業、語言選擇、行業介紹、技術發展變革 (opens new window)?
零基礎學編程選擇什麼專業好，為什麼選擇前端開發，職業前景，未來選擇性，是否適合初學者，行業競爭，什麼樣的前端工程師、市場需求更搶手，前端開發行業介紹，前端開發的變革，大前端時代
HTML / HTML5
搭建網頁結構的語言，增加了很多移動端支持，簡單好學
詳細 HTML/HTML5 知識梳理
Web 前端入門到精通核心標籤和屬性 (opens new window)
文檔聲明、文檔結構、功能標籤，塊級元素，區塊標籤，內聯元素，特殊內聯元素，轉義字符，表格標籤，標籤中的屬性，input 元素中的屬性
HTML/HTML5 標籤和屬性，系統學習教程（圖文版）
認識互聯網（基本原理） (opens new window)
HTML/HTML5 標籤基礎語法 (opens new window)
HTML/HTML5 常用標籤和屬性 (opens new window)
Git 快速入門到實踐系統學習教程 (opens new window)；Git 是什麼，Git 的安裝配置，Git 配置，創建版本庫，初始化項目，Git 本地提交、推送項目至遠程倉庫，克隆遠程倉庫（項目）
Markdown 語法 和 日常學習、工作筆記、企業項目文檔的最佳實踐
HTML/HTML5 標籤和屬性，系統學習教程（視頻版）
群直播回放視頻可查閱，或 在線觀看
HTML/HTML5 系統學習視頻合集 (opens new window)
HTML/HTML5 高頻面試真題和答案解析
中小企業和一線大廠最近 3 個月 HTML/HTML5 最新面試真題和答案解析 (opens new window)
CSS / CSS3
樣式表，美化網頁的語言，增加了很多動畫、過渡等新特性，所見即所得，非常有意思。
詳細 CSS/CSS3 知識梳理
Web 前端 CSS、CSS3 核心樣式和屬性 (opens new window)；盒模型，常用文本樣式屬性，字體屬性，段落和行相關屬性，CSS 的書寫位置，層疊性和選擇權重，偽元素，偽類，css3 新增偽類，標籤選擇器、id、class 選擇器，複合選擇器，元素關係選擇器，序號選擇器，屬性選擇器，浮動，定位，鼠標樣式，邊框，圓角，盒子陰影，背景，瀏覽器前綴，2D/3D 轉換
CSS/CSS3 樣式，系統學習教程（圖文版）
CSS 基礎認知 和 選擇器 (opens new window)
CSS 文本和字體屬性、列表屬性 (opens new window)
CSS 盒子模型 (opens new window)
CSS display 屬性、背景屬性、其他常用屬性 (opens new window)
CSS 三大特性：繼承、層疊性、優先級 (opens new window)
浮動、BFC 規範、清除浮動的最佳實踐 (opens new window)
CSS 定位、層疊順序、層疊上下文 (opens new window)
margin 負值的最佳實踐 (opens new window)
圓角、陰影、文本圖像處理、CSS 函數 (opens new window)
transition 過渡動畫與 animation 自定義動畫 (opens new window)
transform 2D 與 3D 轉換 (opens new window)
SEO 搜索引擎優化代碼規範
網頁頭部代碼規範 (opens new window)
SEO 搜索引擎網頁代碼優化 (opens new window)
HTML/CSS 標籤和樣式代碼規範 (opens new window)
CSS 樣式命名規則和規範 (opens new window)
項目實戰
30 個 CSS/CSS3 真實項目案例布局訓煉（視頻版） (opens new window
防禦式編程 – 防禦式 CSS (opens new window)
大廠 Web 前端項目開發規範和最佳實踐 (opens new window)
CSS 還原 UI 設計，前端項目開發的必備工具 (opens new window)
擴展學習，項目功能點主流布局最佳實踐
100+ CSS 主流布局企業項目功能案例，最佳實踐 (opens new window)
CSS/CSS3 樣式、PC 端項目開發，系統學習教程（視頻版）
群直播回放視頻可查閱，或 在線觀看
CSS/CSS3 高頻面試真題和答案解析，中小企業和一線大廠最近 3 個月 CSS/CSS3 最新面試真題和答案解析 (opens new window)
移動 WebApp 開發、多終端響應式開發
從 PC 端演化成移動 WebApp 熟練掌握跨端+各終端適配和性能優化，是一名優秀的前端開發必備的技能之一。
移動 WebApp 開發核心重難點知識梳理
Flex 彈性布局 (opens new window)Grid 網格布局 (opens new window)
響應式布局 (opens new window)
百分比布局 (opens new window)
rem 布局 (opens new window)
vw 布局 (opens new window)
移動端事件 (opens new window)
移動 Web 開發常見問題 (opens new window)
移動 Web 開發性能優化 等
Flex 彈性布局從入門到實踐 (opens new window)
Grid 網格布局從入門到實踐 (opens new window)
移動端項目實戰
移動端開發核心基礎必備知識 (opens new window)
移動 WebApp 項目開發常用技術及標準、規範和最佳實踐 (opens new window)
響應式項目開發
多終端響應式項目開發最佳實踐 (opens new window)
移動 WebApp 開發、多端響應式項目開發，系統學習教程（視頻版）
群直播回放視頻可查閱，或 在線觀看
移動 WebApp 開發、多端響應式項目開發視頻合集 (opens new window)
移動 WebApp 開發，高頻面試真題和答案解析
中小企業和一線大廠最近 3 個月 移動 WebApp 開發，最新面試真題和答案解析 (opens new window)
雲計算、雲服務器的應用與實踐
深入淺出雲計算、雲服務當前最新、最流行的技術生態與最佳實踐是我們作為一名工程師時刻具備職業競爭力的前提。
雲計算、低代碼、元宇宙、雲服務器、雲原生、互聯網技術架構演進 (opens new window)?
阿里雲服務器實踐 與 Nginx 部署 (opens new window)?
Nginx 部署的核心配置、性能優化、域名服務器備案 (opens new window)?
華為雲服務器實踐與 Nginx 部署，完整版 (opens new window)?
Git 在線部署入門到實踐 (opens new window)?雲服務器的實踐：註冊、配置，公共鏡像、操作系統，網絡和安全組，遠程鏈接雲服務器，常用 Linux 系統命令行，Nginx Web 服務器安裝和啟動、常用 Nginx 命令，深入域名結構，域名解析，Nginx 企業項目部署，Nginx 配置 HTTPS 加密協議、SSL 證書申請與配置，Nginx 性能優化、Gzip 壓縮，多網站、多系統部署，企業級項目的最佳實踐 …
雲計算在項目中的相關應用與實踐（視頻版）
群直播回放視頻可查閱，或 在線觀看
雲計算、雲服務器的實踐與項目部署系統學習視頻合集 (opens new window)?
企業項目相關，高頻面試真題和答案解析
中小企業和一線大廠最近 3 個月 項目開發相關最新面試真題和答案解析 (opens new window)?
#JavaScript
前端開發工程師最重要的 “看家語言”，JS 功底的好壞，決定了職業高度，學習需要下苦工
詳細 JavaScript 基礎+高級核心知識梳理
JavaScript 核心基礎和常用方法 (opens new window)?
JavaScript 函數、BOM、DOM (opens new window)?
JS 常用內置對象和正則表達式 (opens new window)?
JavaScript 常見的 10 種設計模式、設計原則 (opens new window)?
工廠模式、構造器模式、單例模式、原型模式、發布訂閱者模式（觀察者模式）、適配器模式
裝飾器模式、代理模式、外觀模式、迭代器模式
JavaScript 在項目開發中的最佳實踐
實用的 JS 開發技巧 (opens new window)?
JS 語法糖、新特性及優化技巧 (opens new window)?
JavaScript 深入系統學習教程（圖文版）
待更新 …
擴展學習，項目功能點 JavaScript 動效最佳實踐
200+ JavaScript 動效經典企業項目功能案例，最佳實踐 (opens new window)?（持續更新中 …）
JavaScript 深入系統學習教程（視頻版）
待更新 …
JavaScript 高頻面試真題和答案解析
中小企業和一線大廠最近 3 個月 JavaScript 最新面試真題和答案解析 (opens new window)?
#模塊化、組件化開發
從傳統單一模塊開發到企業標準組件化開發掌握企業核心開發思想，動態交互開發。
詳細 ES6 基礎+高級核心知識梳理
ES6 基礎入門和新增方法 (opens new window)?
新增變量、模板字符串、箭頭函數、解構賦值、剩餘參數、展開運算符、數據結構、Set 和 Map 共有的方法和屬性、Set 和 Map 實例的方法、遍歷器，數組、字符串、對象的新增方法等
ES6 高級核心重難點知識梳理 (opens new window)?
Promise 異步編程解決方案，class 類，module 模塊化，module 的導入導出、注意事項，NodeJS 指令相關,Babel 編譯器相關，webpack 相關
HTTP 協議、Ajax、XHR、本地存儲、跨域、async/await (opens new window)?
HTTP 相關概念，HTTP 常用方法，HTTP 狀態碼，本地存儲（cookie 的屬性，編碼與解碼，sessionStorage/localStorage 的常用方法和屬性），Ajax 相關概念，本地服務器，Ajax 基本的使用，XHR 的屬性，XHR 的方法，XHR 的事件，JSON 的常用方法，跨域解決方案，Ajax 擴展內容，async/await
組件化開發
模板引擎，PC 端項目組件化項目重構開發，深入理解和實踐組件化開發的核心開發思想
ES6 基礎 + 高級，系統學習教程（圖文版）
待更新 …
ES6 實際開發中的實用技巧
npm 常用命令和使用技巧 (opens new window)?
選擇 npm 時，應考慮的 5 個事項 (opens new window)?
正則表達式功能函數
15 個（ES6）正則表達式，真實項目應用場景必備 (opens new window)?
實用工具函數
58 個 ES6 實用工具函數，快速提升項目開發效率 (opens new window)?
模塊化、組件化開發，深入系統學習教程（視頻版）
待更新 …
模塊化、組件化開發、ES6 相關高頻面試真題和答案解析
中小企業和一線大廠最近 3 個月模塊化、組件化開發、ES6 最新面試真題和答案解析 (opens new window)?
#小程序開發
作為優秀的前端工程師必備技能，小程序是當下最爆火的輕應用開發技術，需要能夠獨立開發企業級小程序，擁有解決主流小程序功能需求的能力
詳細 小程序開發知識梳理
小程序入門到實戰核心重點知識梳理 (opens new window)?
基礎概念，小程序中的文件類型，全局文件，全局配置，頁面配置，window 屬性、tabbar 屬性、list 相關的配置，小程序 App 和頁面 Page，小程序的生命周期函數，頁面級的生命周期函數，頁面級的數據，邏輯層中常用的 API，WXML 中的常用語法，常用的組件，input 組件、swiper 組件的屬性，常用事件等
小程序開發，系統學習教程（圖文版）
待更新 …
小程序項目實戰開發
待更新 …
小程序開發，系統學習教程（視頻版）
待更新 …
#Vue 全家桶
從 2016 年前後開始流行的前端框架，採用模塊化開發、數據驅動、聲明式編程等等，核心在於前邊的基礎要紮實，後期學習就容易了
Vue 是一套用於構建用戶界面的漸進式框架
與其它大型框架不同的是，Vue 被設計為可以自底向上逐層應用。Vue 的核心庫只關注視圖層，不僅易於上手，還便於與第三方庫或既有項目整合。
另一方面，當與現代化的工具鏈以及各種支持類庫結合使用時，Vue 也完全能夠為複雜的單頁應用提供驅動。
Vue 全家桶必備知識梳理
Vue 核心基礎知識梳理 (opens new window)?
Vue 高級知識梳理 (opens new window)?
Sass 常見面試題與核心基礎知識梳理 (opens new window)?
Vue 腳手架相關知識梳理 (opens new window)?
Vue3.x+TypeScript+Vite 即是當下的主流 (opens new window)?
Vue 全家桶，系統學習教程（圖文版）
待更新 …
Vue 全家桶項目實戰開發
待更新 …
Vue 全家桶深入系統學習教程（視頻版）
待更新 …
Vue 全家桶高頻面試真題和答案解析
中小企業和一線大廠最近 3 個月 Vue 全家桶最新面試真題和答案解析 (opens new window)?
據不完全統計目前國內哪些大廠在使用 Vue
小紅書，微博，嗶哩嗶哩（B 站），愛奇藝，芒果 TV，手機搜狐
餓了么，小米商城，一加手機，樂視商城，滴滴開源、高德開放平台、京東拼購+領券+新人頻道 H5+京東雲，網易雲信+手機網易+網易郵箱 H5，大麥網 H5、唯品會 H5、少數派、百度指數、微信公眾平台、大魚號，攜程 H5 多個模塊，創客貼、兌吧、國美電器 H5、聚美優品觸屏版，理想汽車，途虎養車，雪球財經、電玩巴士等等
開源中國，CSDN，Gitee（碼雲），GitLab，掘金，簡書，藍湖，IT 桔子等等
#TypeScript
TypeScript 簡稱 TS
TS 是 JavaScript 的超集，擴展了 JavaScript 的語法，因此現有的 JavaScript 代碼可與 TS 一起工作無需任何修改，TS 通過類型註解提供編譯時的靜態類型檢查。
由微軟開發的自由和開源的編程語言。
TS 設計目標：是開發大型應用，它可以編譯成純 JavaScript，編譯出來的 JavaScript 可以運行在任何瀏覽器上。
詳細 TypeScript 知識梳理
TypeScript 核心基礎知識梳理 (opens new window)?
TypeScript 開發環境、工作流，定義變量/常量，基本類型，高級類型，類型適配（類型斷言），函數類型，對象類型，接口，類，訪問修飾符，模塊，泛型
TypeScript 高級核心知識梳理 (opens new window)?
類型守衛，函數重載，調用簽名 call signiture，索引簽名，只讀 readonly，雙重斷言 Double Assertion，常量斷言，this，類型檢測 typeof，類型查找，類型映射 Mapped Types，映射修飾符
TypeScript 系統學習教程（圖文版）
待更新 …
TypeScript 深入系統學習教程（視頻版）
待更新 …
TypeScript 高頻面試真題和答案解析
中小企業和一線大廠最近 3 個月 TypeScript 最新面試真題和答案解析 (opens new window)?
#React 生態
React 是一個用於構建用戶界面的 JavaScript 庫，起源於 Facebook 的內部項目，用來架設 Instagram 的網站，並於 2013 年 5 月開源。 2022 年 4 月 26 日已發布最新版 18.1.0
詳細 React 入門到項目實戰知識梳理
React 核心基礎知識梳理 (opens new window)?
基礎環境準備，搭建 react 項目（JS 版本的），項目內容介紹，搭建 react 項目（TS 版本的）
tsconfig.json（TS 語法的配置文件），TS 編譯器的工作流程，項目升級改造，創建基礎演示項目，react 知識點，文件類型介紹，JSX、TSX
React 項目實戰核心重點知識梳理 (opens new window)?
css 樣式架構、全局樣式，css 模組化，項目實操，基礎理論，異步請求相關，組件生命周期，項目開發注意事項，鉤子，常用鉤子函數，useState 鉤子函數細說，副作用，關於 useEffect()，項目中常用組件和方法，關於 HOC 和 Hook
React 生態，系統學習教程（圖文版）
待更新 …
React 生態桶項目實戰開發
待更新 …
React 深入系統學習教程（視頻版）
待更新 …
React 高頻面試真題和答案解析
中小企業和一線大廠最近 3 個月 React 最新面試真題和答案解析 (opens new window)?
據不完全統計目前國內哪些大廠在使用 React
螞蟻、飛豬、阿里大於、蝦米音樂、口碑開放平台
貓途鷹、喜馬拉雅 FM、鬥魚、知乎、豆瓣、美團、房多多、石墨文檔、墨刀、TalkingData、xiaopiu、Teambition、Uber、倍洽、同盾科技、心知天氣、拼多多、滴滴出行、Sentry、途牛、優酷、京東服飾+生鮮+旅行、算力矩陣、鏈家 H5、阿里雲管理後台、Coding、CodePen、樹莓派
36 氪、Notion、GoDaddy、站酷、Plotly、麥客 CRM、特贊營銷日曆、鹿班、網易雲閱讀 PC 端+網易雲音樂 H5、獵聘網、看雲文檔編輯頁、去哪兒 H5 多個模塊、藝龍 H5 個別模塊、租租車 H5、汽車之家車商城、Pocket、友盟、iH5 等
#團隊協同、工程化，監控運維
TIP
Git 版本管理，缺陷管理，單人、團隊開發與跨團隊開發
RESTful API 接口管理，webpack / Gulp 自動化構建
CICD 自動化部署
Linux 項目部署
Nginx 反向代理、負載均衡
運行日誌與監控
#大廠高薪面試真題
Interview questions
HTML/HTML5、CSS/CSS3 面試真題 (opens new window)?
JavaScript + ES6 面試真題 (opens new window)?
前端進階 面試真題（瀏覽器、性能、安全） (opens new window)?
Vue、React 面試真題 (opens new window)?
全棧面試真題 (opens new window)?
面試方法論 (opens new window)?
#後端開發
TIP
NodeJS
express
koa
egg
基本 API（如 http、fs 等）
commonjs 模塊化
框架
調試
SSR
服務端模板，如 ejs artTemplate 等
nuxt.js （Vue SSR）
next.js（React SSR）
常用
redis
MySQL
mongodb
nginx（反向代理、負載均衡）
數據庫
Docker
日誌分析
serverless
Deno
小程序開發
PWA
跨端（如 RN Weex）
客戶端 electron
企業項目技術解決方案
TIP
緊跟市場需求、漸進式，多端跨平台，系統性，企業級項目解決方案
參考閱讀：
最新 Web 前端開發學習路線，主要技術棧
vue的數據雙向綁定是怎麼實現的
vue的數據雙向綁定是通過數據劫持和發布－訂閱者功能來實現的。
實現步驟：
1.實現一個監聽者Oberver來劫持並監聽所有的屬性，一旦有屬性發生變化就通知訂閱者。
2.實現一個訂閱者watcher來接受屬性變化的通知並執行相應的方法，從而更新視圖。
3.實現一個解析器compile，可以掃描和解析每個節點的相關指令，並根據初始化模板數據以及初始化相對應的訂閱者。
觀察者模式確實很有用，但是在javascript實踐裡面，通常我們使用一種叫做發布／訂閱模式的變體來實現觀察者模式。
從圖中也能看到，這兩種模式很相似，但是也有一些值得注意的不同。
發布／訂閱模式使用一個主題／事件頻道，這個頻道處於想要獲取通知的訂閱者和發起事件的發布者之間。這個事件系統允許代碼定義應用相關的事件，這個事件可以傳遞特殊的參數，參數中包含有訂閱者所需要的值。
觀察者模式和發布訂閱模式的不同點：
觀察者模式要求想要接受相關通知的觀察者必須到發起這個事件的被觀察者上註冊這個事件。
發布／訂閱模式使用一個主題／事件頻道（類似於中介／中間商），可以減少訂閱者和發布者之間的依賴性。
發布／訂閱模式中訂閱者可以實現一個合適的事件處理函數，用於註冊和接受由發布者廣播的相關通知。
javascript同步和異步的區別與實現方式
javascript語言是單線程機制。所謂單線程就是按次序執行，執行完一個任務再執行下一個。
對於瀏覽器來說，也就是無法在渲染頁面的同時執行代碼。
單線程機制的優點在於實現起來較為簡單，運行環境相對簡單。缺點在於，如果中間有任務需要響應時間過長，經常會導致
頁面加載錯誤或者瀏覽器無響應的狀況。這就是所謂的“同步模式”，程序執行順序與任務排列順序一致。對於瀏覽器來說，
同步模式效率較低，耗時長的任務都應該使用異步模式；而在服務器端，異步模式則是唯一的模式，如果採用同步模式個人認為
服務器很快就會出現12306在高峰期的表現。。。。
異步模式的四種方式：
1.回調函數callback
所謂回調函數，就是將函數作為參數傳到需要回調的函數內部再執行。
典型的例子就是發送ajax請求。例如：
$.ajax({
async: false,
cache: false,
dataType: ‘json’,
url: “url”,
success: function(data) {
console.log(‘success’);
},
error: function(data) {
console.log(‘error’);
}
})
當發送ajax請求後，等待回應的過程不會堵塞程序運行，耗時的操作相當於延後執行。
回調函數的優點在於簡單，容易理解，但是可讀性較差，耦合度較高，不易於維護。
2.事件驅動
javascript可以稱之為是基於對象的語言，而基於對象的基本特徵就是事件驅動（Event-Driven）。
事件驅動，指的是由鼠標和熱鍵的動作引發的一連串的程序操作。
例如，為頁面上的某個
$(‘#btn’).onclick(function(){
console.log(‘click button’);
});
綁定事件相當於在元素上進行監聽，是否執行註冊的事件代碼取決於事件是否發生。
優點在於容易理解，一個元素上可以綁定多個事件，有利於實現模塊化；但是缺點在於稱為事件驅動的模型後，流程不清晰。
3.發布/訂閱
發布訂閱模式（publish-subscribe pattern）又稱為觀察者模式(Observer pattern)。
該模式中，有兩類對象：觀察者和目標對象。目標對象中存在着一份觀察者的列表，當目標對象
的狀態發生改變時，主動通知觀察者，從而建立一種發布/訂閱的關係。
jquery有相關的插件，在這不是重點不細說了。。。。回頭寫個實現貼上來
4.promise模式
promise對象是CommonJS工作組提供的一種規範，用於異步編程的統一接口。
promise對象通常實現一種then的方法，用來在註冊狀態發生改變時作為對應的回調函數。
promise模式在任何時刻都處於以下三種狀態之一：未完成（unfulfilled）、已完成（resolved）和拒絕（rejected）。以CommonJS
Promise/A
標準為例，promise對象上的then方法負責添加針對已完成和拒絕狀態下的處理函數。then方法會返回另一個promise對象，以便於形成promise管道，這種返回promise對象的方式能夠支持開發人員把異步操作串聯起來，如then(resolvedHandler,
rejectedHandler); 。resolvedHandler
回調函數在promise對象進入完成狀態時會觸發，並傳遞結果；rejectedHandler函數會在拒絕狀態下調用。
Jquery在1.5的版本中引入了一個新的概念叫Deferred，就是CommonJS promise A標準的一種衍生。可以在jQuery中創建
$.Deferref的對象。同時也對發送ajax請求以及數據類型有了新的修改，參考JQuery API。
除了以上四種，javascript中還可以利用各種函數模擬異步方式，更有詭異的諸如用同步調用異步的case
只能用team里同事形容java和javascript的一句話作為結尾：
“寫java像在高速路上開車，寫javascript像在草原上開車”————-以此來形容javascript這種無類型的語言有多自由
but，如果草原上都是坑。
前端經典面試題(包含JS、CSS、React、瀏覽器等)
防抖
節流
誤區：我們經常說get請求參數的大小存在限制，而post請求的參數大小是無限制的。
實際上HTTP 協議從未規定 GET/POST 的請求長度限制是多少。對get請求參數的限制是來源與瀏覽器或web服務器，瀏覽器或web服務器限制了url的長度。為了明確這個概念，我們必須再次強調下面幾點:
補充補充一個get和post在緩存方面的區別：
可從IIFE、AMD、CMD、CommonJS、UMD、webpack(require.ensure)、ES Module、
vue和react都是採用diff算法來對比新舊虛擬節點，從而更新節點。在vue的diff函數中（建議先了解一下diff算法過程）。在交叉對比中，當新節點跟舊節點 頭尾交叉對比 沒有結果時，會根據新節點的key去對比舊節點數組中的key，從而找到相應舊節點（這裡對應的是一個key = index 的map映射）。如果沒找到就認為是一個新增節點。而如果沒有key，那麼就會採用遍歷查找的方式去找到對應的舊節點。一種一個map映射，另一種是遍歷查找。相比而言。map映射的速度更快。vue部分源碼如下：
創建map函數
遍歷尋找
在React中， 如果是由React引發的事件處理（比如通過onClick引發的事件處理），調用setState不會同步更新this.state，除此之外的setState調用會同步執行this.state 。所謂“除此之外”，指的是繞過React通過addEventListener直接添加的事件處理函數，還有通過setTimeout/setInterval產生的異步調用。
**原因：**在React的setState函數實現中，會根據一個變量isBatchingUpdates判斷是直接更新this.state還是放到隊列中回頭再說，而isBatchingUpdates默認是false，也就表示setState會同步更新this.state，但是， 有一個函數batchedUpdates，這個函數會把isBatchingUpdates修改為true，而當React在調用事件處理函數之前就會調用這個batchedUpdates，造成的後果，就是由React控制的事件處理過程setState不會同步更新this.state 。
虛擬dom相當於在js和真實dom中間加了一個緩存，利用dom diff算法避免了沒有必要的dom操作，從而提高性能。
具體實現步驟如下：
用 JavaScript 對象結構表示 DOM 樹的結構；然後用這個樹構建一個真正的 DOM 樹，插到文檔當中
當狀態變更的時候，重新構造一棵新的對象樹。然後用新的樹和舊的樹進行比較，記錄兩棵樹差異
把2所記錄的差異應用到步驟1所構建的真正的DOM樹上，視圖就更新了。
結構：display:none: 會讓元素完全從渲染樹中消失，渲染的時候不佔據任何空間, 不能點擊， visibility: hidden:不會讓元素從渲染樹消失，渲染元素繼續佔據空間，只是內容不可見，不能點擊 opacity: 0: 不會讓元素從渲染樹消失，渲染元素繼續佔據空間，只是內容不可見，可以點擊
繼承：display: none：是非繼承屬性，子孫節點消失由於元素從渲染樹消失造成，通過修改子孫節點屬性無法顯示。visibility: hidden：是繼承屬性，子孫節點消失由於繼承了hidden，通過設置visibility: visible;可以讓子孫節點顯式。
性能：displaynone : 修改元素會造成文檔迴流,讀屏器不會讀取display: none元素內容，性能消耗較大 visibility:hidden: 修改元素只會造成本元素的重繪,性能消耗較少讀屏器讀取visibility: hidden元素內容 opacity: 0 ：修改元素會造成重繪，性能消耗較少
聯繫：它們都能讓元素不可見
常用的一般為三種 .clearfix , clear:both , overflow:hidden ;
比較好是 .clearfix ,偽元素萬金油版本,後兩者有局限性.
clear:both :若是用在同一個容器內相鄰元素上,那是賊好的,有時候在容器外就有些問題了, 比如相鄰容器的包裹層元素塌陷
overflow:hidden :這種若是用在同個容器內,可以形成 BFC 避免浮動造成的元素塌陷
概念：將多個小圖片拼接到一個圖片中。通過 background-position 和元素尺寸調節需要顯示的背景圖案。
優點：
缺點：
block 元素特點：
1.處於常規流中時，如果 width 沒有設置，會自動填充滿父容器 2.可以應用 margin/padding 3.在沒有設置高度的情況下會擴展高度以包含常規流中的子元素 4.處於常規流中時布局時在前後元素位置之間（獨佔一個水平空間） 5.忽略 vertical-align
inline 元素特點
1.水平方向上根據 direction 依次布局
2.不會在元素前後進行換行
3.受 white-space 控制
4. margin/padding 在豎直方向上無效，水平方向上有效
5. width/height 屬性對非替換行內元素無效，寬度由元素內容決定
6.非替換行內元素的行框高由 line-height 確定，替換行內元素的行框高由 height , margin , padding , border 決定 7.浮動或絕對定位時會轉換為 block 8. vertical-align 屬性生效
GIF :
JPEG ：
PNG ：
七種數據類型
(ES6之前)其中5種為基本類型: string , number , boolean , null , undefined ,
ES6出來的 Symbol 也是原始數據類型 ，表示獨一無二的值
Object 為引用類型(範圍挺大),也包括數組、函數,
輸出結果是：
工廠模式
簡單的工廠模式可以理解為解決多個相似的問題;
單例模式
只能被實例化(構造函數給實例添加屬性與方法)一次
沙箱模式
將一些函數放到自執行函數裡面,但要用閉包暴露接口,用變量接收暴露的接口,再調用裡面的值,否則無法使用裡面的值
發布者訂閱模式
就例如如我們關注了某一個公眾號,然後他對應的有新的消息就會給你推送,
代碼實現邏輯是用數組存貯訂閱者, 發布者回調函數裡面通知的方式是遍歷訂閱者數組,並將發布者內容傳入訂閱者數組
1.字面量
2.Object構造函數創建
3.使用工廠模式創建對象
4.使用構造函數創建對象
HTML中與javascript交互是通過事件驅動來實現的，例如鼠標點擊事件onclick、頁面的滾動事件onscroll等等，可以向文檔或者文檔中的元素添加事件偵聽器來預訂事件。想要知道這些事件是在什麼時候進行調用的，就需要了解一下“事件流”的概念。
什麼是事件流：事件流描述的是從頁面中接收事件的順序,DOM2級事件流包括下面幾個階段。
addEventListener ： addEventListener 是DOM2 級事件新增的指定事件處理程序的操作，這個方法接收3個參數：要處理的事件名、作為事件處理程序的函數和一個布爾值。最後這個布爾值參數如果是true，表示在捕獲階段調用事件處理程序；如果是false，表示在冒泡階段調用事件處理程序。
IE只支持事件冒泡 。
獲取一個對象的原型，在chrome中可以通過__proto__的形式，或者在ES6中可以通過Object.getPrototypeOf的形式。
那麼Function.proto是什麼么？也就是說Function由什麼對象繼承而來，我們來做如下判別。
我們發現Function的原型也是Function。
我們用圖可以來明確這個關係：
這裡來舉個栗子，以 Object 為例，我們常用的 Object 便是一個構造函數，因此我們可以通過它構建實例。
則此時， 實例為instance , 構造函數為Object ，我們知道，構造函數擁有一個 prototype 的屬性指向原型，因此原型為:
這裡我們可以來看出三者的關係:
在 JS 中，繼承通常指的便是 原型鏈繼承 ，也就是通過指定原型，並可以通過原型鏈繼承原型上的屬性或者方法。
在函數式編程中，函數是一等公民。那麼函數柯里化是怎樣的呢？
函數柯里化指的是將能夠接收多個參數的函數轉化為接收單一參數的函數，並且返回接收餘下參數且返回結果的新函數的技術。
函數柯里化的主要作用和特點就是參數復用、提前返回和延遲執行。
在一個函數中，首先填充幾個參數，然後再返回一個新的函數的技術，稱為函數的柯里化。通常可用於在不侵入函數的前提下，為函數 預置通用參數 ，供多次重複調用。
call 和 apply 都是為了解決改變 this 的指向。作用都是相同的，只是傳參的方式不同。
除了第一個參數外， call 可以接收一個參數列表， apply 只接受一個參數數組。
bind 和其他兩個方法作用也是一致的，只是該方法會返回一個函數。並且我們可以通過 bind 實現柯里化。
如何實現一個 bind 函數
對於實現以下幾個函數，可以從幾個方面思考
如何實現一個call函數
如何實現一個apply函數
箭頭函數其實是沒有 this 的，這個函數中的 this 只取決於他外面的第一個不是箭頭函數的函數的 this 。在這個例子中，因為調用 a 符合前面代碼中的第一個情況，所以 this 是 window 。並且 this 一旦綁定了上下文，就不會被任何代碼改變。
在函數中，我們首先使用 var 關鍵字聲明了 name 變量。這意味着變量在創建階段會被提升（ JavaScript 會在創建變量創建階段為其分配內存空間），默認值為 undefined ，直到我們實際執行到使用該變量的行。我們還沒有為 name 變量賦值，所以它仍然保持 undefined 的值。
使用 let 關鍵字（和 const ）聲明的變量也會存在變量提升，但與 var 不同，初始化沒有被提升。在我們聲明（初始化）它們之前，它們是不可訪問的。這被稱為“暫時死區”。當我們在聲明變量之前嘗試訪問變量時， JavaScript 會拋出一個 ReferenceError 。
關於 let 的是否存在變量提升，我們何以用下面的例子來驗證：
let 變量如果不存在變量提升， console.log(name) 就會輸出 ConardLi ，結果卻拋出了 ReferenceError ，那麼這很好的說明了， let 也存在變量提升，但是它存在一個“暫時死區”，在變量未初始化或賦值前不允許訪問。
變量的賦值可以分為三個階段：
關於 let 、 var 和 function ：
依次輸出：undefined – 10 – 20
答案: D
colorChange 方法是靜態的。靜態方法僅在創建它們的構造函數中存在，並且不能傳遞給任何子級。由於 freddie 是一個子級對象，函數不會傳遞，所以在 freddie 實例上不存在 freddie 方法：拋出 TypeError 。
1.使用第一次push，obj對象的push方法設置 obj[2]=1;obj.length+=1 2.使用第二次push，obj對象的push方法設置 obj[3]=2;obj.length+=1 3.使用console.log輸出的時候，因為obj具有 length 屬性和 splice 方法，故將其作為數組進行打印 4.打印時因為數組未設置下標為 0 1 處的值，故打印為empty，主動 obj[0] 獲取為 undefined
undefined {n:2}
首先，a和b同時引用了{n:2}對象，接着執行到a.x = a = {n：2}語句，儘管賦值是從右到左的沒錯，但是.的優先級比=要高，所以這裡首先執行a.x，相當於為a（或者b）所指向的{n:1}對象新增了一個屬性x，即此時對象將變為{n:1;x:undefined}。之後按正常情況，從右到左進行賦值，此時執行a ={n:2}的時候，a的引用改變，指向了新對象{n：2},而b依然指向的是舊對象。之後執行a.x = {n：2}的時候，並不會重新解析一遍a，而是沿用最初解析a.x時候的a，也即舊對象，故此時舊對象的x的值為{n：2}，舊對象為 {n:1;x:{n：2}}，它被b引用着。後面輸出a.x的時候，又要解析a了，此時的a是指向新對象的a，而這個新對象是沒有x屬性的，故訪問時輸出undefined；而訪問b.x的時候，將輸出舊對象的x的值，即{n:2}。
在比較相等性，原始類型通過它們的值進行比較，而對象通過它們的引用進行比較。 JavaScript 檢查對象是否具有對內存中相同位置的引用。
我們作為參數傳遞的對象和我們用於檢查相等性的對象在內存中位於不同位置，所以它們的引用是不同的。
這就是為什麼 { age: 18 } === { age: 18 } 和 { age: 18 } == { age: 18 } 返回 false 的原因。
所有對象鍵（不包括 Symbols ）都會被存儲為字符串，即使你沒有給定字符串類型的鍵。這就是為什麼 obj.hasOwnProperty（’1’） 也返回 true 。
上面的說法不適用於 Set 。在我們的 Set 中沒有 “1” ： set.has（’1’） 返回 false 。它有數字類型 1 ， set.has（1） 返回 true 。
這題考察的是對象的鍵名的轉換。
catch 塊接收參數 x 。當我們傳遞參數時，這與變量的 x 不同。這個變量 x 是屬於 catch 作用域的。
之後，我們將這個塊級作用域的變量設置為 1 ，並設置變量 y 的值。現在，我們打印塊級作用域的變量 x ，它等於 1 。
在 catch 塊之外， x 仍然是 undefined ，而 y 是 2 。當我們想在 catch 塊之外的 console.log(x) 時，它返回 undefined ，而 y 返回 2 。
Javascript如何實現接口？
在javascript中並沒有原生的創建或者實現接口的方式，或者判定一個類型是否實現了某個接口，我們只能利用js的靈活性的特點，模擬接口。
在javascript中實現接口有三種方式：注釋描述、屬性驗證、鴨子模型。
note：因為我看的是英文書，翻譯水平有限，不知道有些詞彙如何翻譯，大家只能領會精神了。
1. 注釋描述 （Describing Interfaces with Comments）
例子：
複製代碼 代碼如下:
/*
interface Composite {
function add(child);
function remove(child);
function getChild(index);
}
interface FormItem {
function save();
}
*/
var CompositeForm = function(id, method, action) { // implements Composite, FormItem
…
};
//Implement the Composite interface.
CompositeForm.prototype.add = function(child) {
…
};
CompositeForm.prototype.remove = function(child) {
…
};
CompositeForm.prototype.getChild = function(index) {
…
};
// Implement the FormItem interface.
CompositeForm.prototype.save = function() {
…
};
模擬其他面向對象語言，使用interface 和 implements關鍵字，但是需要將他們注釋起來，這樣就不會有語法錯誤。
這樣做的目的，只是為了告訴其他編程人員，這些類需要實現什麼方法，需要在編程的時候加以注意。但是沒有提供一種驗證方式，這些類是否正確實現了這些接口中的方法，這種方式就是一種文檔化的作法。
2. 屬性驗證（Emulating Interfaces with Attribute Checking）
例子：
複製代碼 代碼如下:
/* interface
Composite {
function add(child);
function remove(child);
function getChild(index);
}
interface FormItem {
function save();
}
*/
var CompositeForm = function(id, method, action) {
this.implementsInterfaces = [‘Composite’, ‘FormItem’];
…
};
…
function addForm(formInstance) {
if(!implements(formInstance, ‘Composite’, ‘FormItem’)) {
throw new Error(“Object does not implement a required interface.”);
}
…
}
// The implements function, which checks to see if an object declares that it
// implements the required interfaces.
function implements(object) {
for(var i = 1; i arguments.length; i++) {
// Looping through all arguments
// after the first one.
var interfaceName = arguments[i];
var interfaceFound = false;
for(var j = 0; j object.implementsInterfaces.length; j++) {
if(object.implementsInterfaces[j] == interfaceName) {
interfaceFound = true;
break;
}
}
if(!interfaceFound) {
return false;
// An interface was not found.
}
}
return true;
// All interfaces were found.
}
這種方式比第一種方式有所改進，接口的定義仍然以注釋的方式實現，但是添加了驗證方法，判斷一個類型是否實現了某個接口。
3.鴨子類型（Emulating Interfaces with Duck Typing）
複製代碼 代碼如下:
// Interfaces.
var Composite = new Interface(‘Composite’, [‘add’, ‘remove’, ‘getChild’]);
var FormItem = new Interface(‘FormItem’, [‘save’]);
// CompositeForm class
var CompositeForm = function(id, method, action) {
…
};
…
function addForm(formInstance) {
ensureImplements(formInstance, Composite, FormItem);
// This function will throw an error if a required method is not implemented.
…
}
// Constructor.
var Interface = function(name, methods) {
if(arguments.length != 2) {
throw new Error(“Interface constructor called with ”
+ arguments.length + “arguments, but expected exactly 2.”);
}
this.name = name;
this.methods = [];
for(var i = 0, len = methods.length; i len; i++) {
if(typeof methods[i] !== ‘string’) {
throw new Error(“Interface constructor expects method names to be ”
+ “passed in as a string.”);
}
this.methods.push(methods[i]);
}
};
// Static class method.
Interface.ensureImplements = function(object) {
if(arguments.length 2) {
throw new Error(“Function Interface.ensureImplements called with ”
+arguments.length + “arguments, but expected at least 2.”);
}
for(var i = 1, len = arguments.length; i len; i++) {
var interface = arguments[i];
if(interface.constructor !== Interface) {
throw new Error(“Function Interface.ensureImplements expects arguments”
+ “two and above to be instances of Interface.”);
}
for(var j = 0, methodsLen = interface.methods.length; j methodsLen; j++) {
var method = interface.methods[j];
if(!object[method] || typeof object[method] !== ‘function’) {
throw new Error(“Function Interface.ensureImplements: object ”
+ “does not implement the ” + interface.name + ” interface. Method ” + method + ” was not found.”);
}
}
}
};
何時使用接口？
一直使用嚴格的類型驗證並不適合，因為大多數javascript程序員已經在沒有接口和接口驗證的情況下編程多年。當你用設計模式開始設計一個很複雜的系統的時候，使用接口更有益處。看起來使用接口好像限制了javascript的靈活性，但實際上他讓你的代碼變得更加的松耦合。他使你的代碼變得更加靈活，你可以傳送任何類型的變量，並且保證他有你想要的方法。有很多場景接口非常適合使用。
在一個大型系統里，很多程序員一起參與開發項目，接口就變得非常必要了。程序員經常要訪問一個還沒有實現的api，或者為其他程序員提供別人依賴的一個方法存根，在這種情況下，接口變得相當的有價值。他們可以文檔化api，並作為編程的契約。當存根被實現的api替換的時候你能立即知道，如果在開發過程中api有所變動，他能被另一個實現該接口的方法無縫替換。
如何使用接口？
首先要解決的問題是，在你的代碼中是否適合使用接口。如果是小項目，使用接口會增加代碼的複雜度。所以你要確定使用接口的情況下，是否是益處大於弊端。如果要使用接口，下面有幾條建議：
1.引用Interface 類到你的頁面文件。interface的源文件你可以再如下站點找到: .
2.檢查你的代碼，確定哪些方法需要抽象到接口裡面。
3.創建接口對象，沒個接口對象裡面包含一組相關的方法。
4.移除所有構造器驗證，我們將使用第三種接口實現方式，也就是鴨子類型。
5.用Interface.ensureImplements替代構造器驗證。
您可能感興趣的文章:
小議javascript 設計模式 推薦
JavaScript 設計模式之組合模式解析
javascript 設計模式之單體模式 面向對象學習基礎
JavaScript 設計模式 安全沙箱模式
JavaScript設計模式之觀察者模式（發布者-訂閱者模式）
JavaScript設計模式之原型模式(Object.create與prototype)介紹
JavaScript設計模式之工廠方法模式介紹
javascript設計模式之中介者模式Mediator
學習JavaScript設計模式之責任鏈模式
vue數據雙向綁定原理
vue.js 採用數據劫持結合發布者-訂閱者模式的方式，通過 Object.defineProperty() 來劫持各個屬性的setter，getter，在數據變動時發布消息給訂閱者，觸發相應的監聽回調。
首先我們為每個vue屬性用Object.defineProperty()實現數據劫持，在監聽數據的過程中，為每個屬性分配一個訂閱者集合的管理數組dep；然後在編譯的時候在該屬性的數組dep中添加訂閱者 watcher，v-model會添加一個訂閱者，{{}}也會，v-bind也會，只要用到該屬性的指令理論上都會，接着為input會添加監聽事件，修改值就會為該屬性賦值，觸發該屬性的set方法，在set方法內通知訂閱者數組dep，訂閱者數組循環調用各訂閱者的update方法更新視圖。
實現步驟：修改輸入框內容 = 在事件回調函數中修改屬性值 = 觸發屬性的 set 方法=發出通知 dep.notify() = 觸發訂閱者的 update 方法 = 更新視圖。
流程圖 ：
在實例化一個Vue對象的時候，會傳進去一個data對象，之後分成兩個進程，一個進程是對掛載目標元素模板里的v-model和{{ }}；兩個指令進行編譯。另一個進程是對傳進去的data對象裡面的數據進行監聽。
上圖中，observe是利用Object.defineProperty()對傳入的data對象進行數據監聽，在數據改變的時候觸發該屬性的set方法，更新該屬性的值，並發布消息，我（該屬性）的值變了。
compile是編譯器，找到vue的指令v-model所在的元素，將data中該屬性的值賦給元素的value，並給這個元素添加二級監聽器，在元素的值改變的時候，將新值賦給data裡面同名屬性，這個時候就完成了單向數據綁定，視圖 模型。
那麼最終的由模型到視圖的更新，依賴於dep和watcher，dep會收集訂閱者，就是綁定了data裡面屬性的元素，在數據更新的時候，會觸發該屬性的set方法，在set里觸發該屬性的消息發布通知函數。而Watcher根據收到的數據變化通知，更新相應的數據。
dep這個東東給大家解釋一下，就是data里的每個屬性都有一個dep對象，dep對象里可以有很多訂閱者（watcher），但是只有一個添加訂閱者的方法和一個發布變化通知的方法，就是模板上可以有多處元素綁定data里的同一個屬性值，所以dep是依賴於data裡面的屬性的。
而Watcher是每個{{ }}有一個，初次編譯的時候，會在new的時候自動更新一下模板的數據，等到下次數據改變的時候，由dep通知數據更新，直接調用watcher的update方法，更新模板的綁定數據。
observer 模塊共分為這幾個部分：
示意圖如下：
Observer的構造函數
value是需要被觀察的數據對象，在構造函數中，會給value增加 ob 屬性，作為數據已經被Observer觀察的標誌。如果value是數組，就使用observeArray遍歷value，對value中每一個元素調用observe分別進行觀察。如果value是對象，則使用walk遍歷value上每個key，對每個key調用defineReactive來獲得該key的set/get控制權。
Dep是Observer與Watcher之間的紐帶，也可以認為Dep是服務於Observer的訂閱系統。Watcher訂閱某個Observer的Dep，當Observer觀察的數據發生變化時，通過Dep通知各個已經訂閱的Watcher。
Watcher是用來訂閱數據的變化的並執行相應操作（例如更新視圖）的。Watcher的構造器函數定義如下：
參數中，vm表示組件實例，expOrFn表示要訂閱的數據字段（字符串表示，例如a.b.c）或是一個要執行的函數，cb表示watcher運行後的回調函數，options是選項對象，包含deep、user、lazy等配置。
Object.defineProperty(obj, prop, descriptor) ，這個語法內有三個參數，分別為 obj （要定義屬性的對象） prop （要定義或修改的屬性的名稱或 Symbol ） descriptor （要定義或修改的屬性描述符=具體的改變方法）
簡單地說，就是用這個方法來定義一個值。當調用時我們使用了它裡面的get方法，當我們給這個屬性賦值時，又用到了它裡面的set方法；
主要解釋第三個參數 {
value: 設置屬性的值
writable: 值是否可以重寫。true | false
enumerable: 目標屬性是否可以被枚舉。true | false (就是能不能被遍歷出來)
configurable: 目標屬性是否可以被刪除或是否可以再次修改特性 true | false
set: 目標屬性設置值的方法
get：目標屬性獲取值的方法
}
set 是一個函數，接收一個新值，會在值被重寫或修改的時候觸發這個函數
get 是一個函數，返回一個值，會在屬性被調用的時候觸發。
注 ：
Object.defineProperty()詳解
Object.defineProperty()官方文檔
已經了解到vue是通過數據劫持的方式來做數據綁定的，其中最核心的方法便是通過Object.defineProperty()來實現對屬性的劫持，那麼在設置或者獲取的時候我們就可以在get或者set方法里假如其他的觸發函數，達到監聽數據變動的目的。
我們知道通過Object.defineProperty()可以實現數據劫持，它的屬性在賦值的時候觸發set方法，
當然要是這麼粗暴，肯定不行，性能會出很多的問題。
observer用來實現對每個vue中的data中定義的屬性循環用Object.defineProperty()實現數據劫持，以便利用其中的setter和getter，然後通知訂閱者，訂閱者會觸發它的update方法，對視圖進行更新。
為什麼要訂閱者 ：在vue中v-model，v-name，{{}}等都可以對數據進行顯示，也就是說假如一個屬性都通過這三個指令了，那麼每當這個屬性改變的時候，相應的這個三個指令的html視圖也必須改變，於是vue中就是每當有這樣的可能用到雙向綁定的指令，就在一個Dep中增加一個訂閱者，其訂閱者只是更新自己的指令對應的數據，也就是v-model=’name’和{{name}}有兩個對應的訂閱者，各自管理自己的地方。每當屬性的set方法觸發，就循環更新Dep中的訂閱者。
訂閱發布模式（又稱觀察者模式）定義了一種一對多的關係，讓多個觀察者同時監聽某一個主題對象，這個主題對象的狀態發生改變時就會通知所有觀察者對象。
發布者發出通知 = 主題對象收到通知並推送給訂閱者 = 訂閱者執行相應操作
舉個例子：
2.實現compile： compile的目的就是解析各種指令稱真正的html。
這樣一來就實現了vue的數據雙向綁定。
參考鏈接：
理解VUE雙向數據綁定原理和實現—趙佳樂
Vue的雙向數據綁定原理
vue雙向綁定原理分析
Vue原理解析之observer模塊
深入響應式原理
原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-hant/n/227232.html
微信掃一掃 
支付寶掃一掃 