前端知識體系-全系列（圖譜+大綱）

時間  2021-02-13
標籤 javascript css html 前端 vue java node mysql react jquery 欄目 JavaScript 简体版
原文   原文鏈接

前端知識體系（圖譜）

前端知識體系大綱

前端工程化體系

前端工程化體系

node

node

主流技術棧

大綱

主流技術棧

React

Vue

vue

Angular

JavaScript

TypeScript

跨平臺技術

大綱

跨端技術發展的三個階段

Hybrid

ReactNative

Flutter

weex

小程序

快應用

ionic

Cordova

性能優化和監控

前端知識體系（大綱）

前端工程化體系

基礎設施

  • 規範化javascript

    • 前端標準（基礎）css

      • W3C
      • SPA
      • DOM
      • BOM
      • XHTML
      • XML
      • JSON
      • JSONP
      • HTTP
      • HTML5
      • CSS3

    • 編碼規範html

eslint前端

- tslint
    - stylelint

- 命名規範

    - Pascal 大小寫

        - 組成標識符的每一個單詞的首字母大寫，其他字母小寫的書寫約定。對於縮寫的雙字母單詞，要求所有大寫

    - Camel 大小寫

        - 標識符的首字母小寫，每一個後面鏈接的單詞的首字母大寫，其他字母小寫的書寫約定。對於縮寫的雙字母單詞，要求它們出如今標識符首部時所有小寫，不然所有大寫

    - 匈牙利命名法

        - 變量名 = 屬性 ＋ 類型 ＋ 對象描述

    - 常量的命名

        - 常量的名字應該都使用大寫字母，而且指出該常量完整含義

- 目錄規範
- commit提交規範

    - commitiizen
    - cz-customizable
    - commitlint

- 文檔規範
- 接口規範
- 流程規範

    - gitflow

  • 基礎構建優化vue

    • 壓縮
    • 校驗
    • 資源合併

    • 打包構建工具java

      • Browserify
      • webpack
      • gulp
      • rollup
      • grunt
      • ...

    • 包管理工具node

      • Bower
      • npm
      • yarn

  • 模塊化mysql

    • JS模塊規範react

      • 模塊規範jquery

        • AMD

          • RequireJS

        • CMD

          • seaJS

        • CommonJS

          • node模塊系統
        • ES6+ Module
      • 模塊加載機制原理

    • CSS模塊化

      • css預處理器

        • Less

        • Sass

          • node-sass
          • dart-sass
        • Stylus
      • css Module
      • css in JS
    • 模塊設計

  • 組件化

    • 組件化標準

      • Web Component

    • 組件設計

      • UI和功能拆分（獨立性/自由組合）

    • 組件設計

      • 目錄結構（就近維護）

  • 資源管理

    • 按需加載
    • 延遲加載
    • 緩存複用
    • CDN部署
    • 文件指紋
    • 請求合併
    • 異步同步加載

工具鏈

  • 腳手架

    • 腳手架工具原理
    • 命令行工做流
    • 項目模板設計
  • 搭建本地開發環境
  • 搭建本地mock環境

  • 自動化構建

    • webpack配置使用
    • 經常使用插件
    • webpack構建性能優化
    • 代碼轉換：ES與Babel
    • CSS預編譯與postcss
    • 模塊合併：webpack模塊化構建
    • webpack增量更新構建
    • 資源定位
    • 自動刷新
  • 引入單元測試

  • 部署發佈

    • Jenkins
    • 部署流程
    • 靜態資源部署策略

  • 監控

    • 行爲監控

    • 異常監控

      • 採集
      • 用戶信息
      • 行爲信息
      • 異常信息
      • 環境信息

    • 性能監控

      • 運行時監控

        • 文件級
        • 模塊級
        • 函數級
        • 算法級
      • 網絡請求速率
      • 系統性能

工做流

  • 本地工做流

    • 本地環境
    • 代碼分離
    • 測試沙箱

  • 雲平臺工做流

    • 角色劃分

      • 本地開發環境
      • gitlab
      • 雲平臺

    • 自動化構建與部署

      • gitflow與版本管理
      • webhook與自動構建

    • 持續集成與持續交付

      • 自動構建與測試
      • 生產環境的迭代版本、版本回流
      • Docker容器技術

    • IDE雲平臺開發

      • IDE工具

調試工具

  • Chrome

    • Element 標籤頁

      • 用於查看和編輯當前頁面中的 HTML 和 CSS 元素

    • Network 標籤頁

      • 用於查看 HTTP 請求的詳細信息，如請求頭、響應頭及返回內容等

    • Source 標籤頁

      • 用於查看和調試當前頁面所加載的腳本的源文件

    • TimeLine 標籤頁

      • 用於查看腳本的執行時間、頁面元素渲染時間等信息

    • Profiles 標籤頁

      • 用於查看 CPU 執行時間與內存佔用等信息

    • Resource 標籤頁

      • 用於查看當前頁面所請求的資源文件，如 HTML，CSS 樣式文件等

    • Audits 標籤頁

      • 分析頁面加載的過程，進而提供減小頁面加載時間、提高響應速度的方案，用於優化前端頁面，加速網頁加載速度等

    • Console 標籤頁

      • 用於顯示腳本中所輸出的調試信息，或運行測試腳本等

  • firefox插件Firebug

    • Chrome瀏覽器出現以前經常使用的調試工具
  • IE的開發者工具

  • IETest

    • IE瀏覽器版本切換工具

      • 在開發Web項目的時候，常常會碰到須要在不一樣的IE版本中檢查完成的網頁是否能正常展示，這時就須要IETest幫咱們模擬網頁在IE5.五、IE六、IE七、IE八、IE9以及IE10等瀏覽器中的兼容性，讓咱們看一下辛苦作好的CSS樣式或網站版面是否能夠在各個主要瀏覽器正常顯示

  • Emmet

    • HTML/CSS開發中的神器

https://www.emmet.io/

  • JSON 格式化和校驗工具

  • Postman

    • 用於調試請求和響應

  • 移動端抓包調試

    • fiddler
    • Charles

node

基礎知識

  • web服務

    • express

      • 中間件、生態完善

    • koa

      • 脫胎於express，提高異步編程體驗

    • hapi

      • 遵循配置大於編碼原則，沃爾瑪前端團隊出品

    • sails

      • 模仿ruby on rails框架

    • tsw

      • qq空間出品，集成了不少騰訊內部組件

    • Meteor

      • 快速搭建框架、10倍的減輕工做量

    • Feathers

      • 建立一個面向服務的架構，是一個很好地適合建立Node.js微服務

    • Keystone

      • Keystone是獲得一個管理客戶端並運行的最好的解決方案之一，以便管理來自MongoDB數據庫的內容。管理界面自動從模型生成，具備全部CRUD操做和精細的過濾器。

    • Loopback

      • 內置許多函數，包括使用令牌和到任何類型的數據庫鏈接器的認證

    • egg

      • 爲企業級框架和應用而生，是阿里開源的企業級 Node.js 框架

    • Daruk

      • Daruk 是一款基於 Koa2，使用 Typescript 開發的輕量級 web 框架

    • uma

      • 58同城node框架

  • 模板引擎

    • handlebars
    • ejs
    • jade

  • 前端打包

    • webpak
    • fis

  • 任務管理

    • gulp

  • 單元測試

    • karma
    • mocha
    • jasmine

  • 包管理

    • npm
    • cnpm
    • yarn

  • 守護進程

    • pm2
    • forever

三大特色

  • 單線程

    Node.js不爲每一個客戶鏈接建立一個新的線程，而僅僅使用一個線程。當有用戶鏈接了，就觸發一個內部事件，經過非阻塞I/O、事件驅動機制，讓Node.js程序宏觀上也是並行的

  • 非阻塞I/O

    因爲Node.js中採用了非阻塞型I/O機制，所以在執行了訪問數據庫的代碼以後，將當即轉而執行其後面的代碼，把數據庫返回結果的處理代碼放在回調函數中，從而提升了程序的執行效率。
    當某個I/O執行完畢時，將以事件的形式通知執行I/O操做的線程，線程執行這個事件的回調函數。爲了處理異步I/O，線程必須有事件循環，不斷的檢查有沒有未處理的事件，依次予以處理。
    阻塞模式下，一個線程只能處理一項任務，要想提升吞吐量必須經過多線程。而非阻塞模式下，一個線程永遠在執行計算操做，這個線程的CPU核心利用率永遠是100%。因此，這是一種特別有哲理的解決方案：與其人多，可是好多人閒着；還不如一我的玩命，往死裏幹活兒。

  • 事件驅動event-driven

    在Node中，在一個時刻，只能執行一個事件回調函數，可是在執行一個事件回調函數的中途，能夠轉而處理其餘事件（好比，又有新用戶鏈接了），而後返回繼續執行原事件的回調函數，這種處理機制，稱爲「事件環」機制。
    Node.js底層是C++（V8也是C++寫的）。底層代碼中，近半數都用於事件隊列、回調函數隊列的構建

技術架構

  • 底層架構

    • v8 engine

      • 虛擬機的功能，執行js代碼
      • 提供C++函數接口，爲nodejs提供v8初始化，建立context，scope等

    • libuv

      • 它是基於事件驅動的異步IO模型庫，咱們的js代碼發出請求，最終由libuv完成，而咱們所設置的回調函數則是在libuv觸發

    • builtin modules

      • 它是由C++代碼寫成各種模塊，包含了crypto，zlib, file stream etc 基礎功能
      • v8提供了函數接口，libuv提供異步IO模型庫，以及一些nodejs函數，爲builtin modules提供服務

    • native modules

      • 它是由js寫成，提供咱們應用程序調用的庫，同時這些模塊又依賴builtin modules來獲取相應的服務支持
  • node函數調用機制

通訊協議

  • 網絡協議

    • http/https

      • 推薦request.js

    • tcp

      • net模塊

    • udp

      • dgram模塊

  • 數據序列化協議

    • json

      • 文本協議，經常使用於http通訊

    • protocol buffer

      • 二進制協議，經常使用於socket通訊
      • js原生不支持，可使用protobuf.js來解析

  • 接口協議

    • restful apis

      • 語義化，幾乎全部web框架都支持

    • Graphql

      • 解決restful接口過於原子化的缺陷，facebook出品
      • 須要在前端和後臺接口以前搭建一層graphql server作數據處理

    • RPC

      • 後臺服務間通訊

    • 網絡序/本地序

      • Buffer模塊api原生支持兩種序列的轉換

存儲

  • 數據庫

    • MySql
    • MongoDB
    • Oracle

    • MSSQL

      • 微軟的SQLServer數據庫服務器

    • PostreSQL

      • 功能強大的開源對象關係數據庫系統
    • MariaSQL

  • 緩存

    • redis
    • memcache
    • nosql
    • mongodb
    • orm
    • sequelize（mysql）
    • bookshelf（mysql）
    • zookeeper

  • 消息隊列

    • RabbitMQ

      • 實現了高級消息隊列協議（AMQP）的開源消息代理軟件

    • Kafka

      • 消息隊列 Kafka 版是阿里雲基於 Apache Kafka 構建的高吞吐量、高可擴展性的分佈式消息隊列服務

    • zmq

      • 是一個消息處理隊列庫，可在多個線程、內核和主機盒之間彈性伸縮
    • server render

    • websocket

      • 是一種在單個TCP鏈接上進行全雙工通訊的協議

設計模式

  • 單例模式

    • 保證一個類只有一個實例

  • 適配器模式

    • 適配器模式可使本來因爲接口不兼容而不能一塊兒工做的那些類能夠一塊兒工做

  • 裝飾模式

    • 能夠經過繼承的方式，爲一個基類對象擴展功能

  • 觀察者模式

    • 就是爲某一對象添加一監聽事件

主流技術棧

React

  • 簡介

    • React 是一個 MVC 框架
    • React 主要是用來構建 UI
    • React 是起源於Facebook的內部項目，用於構建 Instagram 網站，在 2013.05 開源

  • 特色

    • 聲明式

      • 使用 React 編寫UI界面和寫HTML幾乎同樣

    • 高效

      • React經過對DOM的模擬，最大限度地減小與DOM的交互

    • 靈活

      • React能夠與已知的庫或框架很好地配合

  • 生命週期

    • constructor

      • 構造函數

    • componentWillMount

      • 在渲染前調用,在客戶端也在服務端（高版本已廢棄）

    • componentDidMount

      • 在第一次渲染後調用，只在客戶端

    • componentWillReceiveProps

      • 在組件接收到一個新的 prop (更新後)時被調用。這個方法在初始化render時不會被調用

    • shouldComponentUpdate

      • 返回一個布爾值。在組件接收到新的props或者state時被調用。在初始化時或者使用forceUpdate時不被調用

    • componentWillUpdate

      • 在組件接收到新的props或者state但尚未render時被調用。在初始化時不會被調用

    • componentDidUpdate

      • 在組件完成更新後當即調用。在初始化時不會被調用

    • componentWillUnmount

      • 在組件從 DOM 中移除的時候馬上被調用

  • React思想

    • 組件編寫順序

      • 1.組件劃分原則

        • 解耦
        • 複用
        • 適度
      • 2.編寫靜態組件

      • 3.分析State

        • 哪些是State

            1. 對組件進行兩個靈魂質問
            1. 對State集合進行檢查和去重

        • State保存的位置

          • 單一狀態
          • 狀態上移
        1. 添加交互行爲

    • mock方式

      • server
      • public

  • Redux思想

    • 使用redux是在解決什麼問題

      • 問題緣由：數據狀態包括API數據，本地數據和UI狀態等隨着項目擴大變的管理複雜
      • 解決問題的目的：防止管理狀態失控
      • 解決問題的手段：使用redux將視圖層和狀態管理層從邏輯上解耦

    • State

      • 集中管理，全局惟一
      • 不可變性
      • 定義原則與React State定義原則相同

    • Action

      • 普通Acion

        • ActionCreators
        • ActionTypes

      • 異步Action

        • 異步action的建立

          • 請求開始action
          • 請求成功action
          • 請求失敗action

        • 拓展reducer

          • 請求數據相關的state數據結構的變化
          • 請求數據相關的reducer內容擴充

        • 集成redux-thunk

          • 問題緣由：淨化react組件的代碼，想將數據請求放在action當中作
          • 解決問題的目的：實現異步Action
          • 解決問題的手段：使用redux-thunk實現異步Action，抽離react中的數據請求代碼

    • Reducer

      • combineReducers
    • Store

    • redux-devtools

      • 瀏覽器插件
      • 項目依賴庫

  • React-Redux思想

    • 使用react-redux是在解決什麼問題

      • 問題緣由：reactUI層和redux狀態層的相關代碼冗雜在react組件中
      • 解決問題的目的：既能連接reactUI層和redux狀態層，又不讓二者代碼糅合
      • 解決問題的手段：使用react-redux將視圖層和狀態管理層從代碼上解耦

    • 功能

      • Provider組件
      • connect高階HOC組件
      • map api

    • 容器性組件和展現性組件

      • 關注點
      • 對redux感知
      • 讀數據
      • 寫數據
      • 如何建立

    • 流程圖總結

  • React-Router

    • 服務端路由和客戶端路由的區別

      • 服務端路由：訪問http://a就返回a.html，訪問http://b就返回b.html，是服務器根據不一樣的路由返回不一樣的頁面
      • 客戶端路由：不管訪問什麼路徑，返回的頁面信息都是相同的，是經過js經過判斷路徑的不一樣來渲染不一樣的組件而已，因此叫作客戶端路由

    • BrowserRouter和HashRouter區別

      • 以前說react-router-dom是將react-route和web-api作綁定，這些web-api具體指的就是HTML5 history API，利用這些pushState、replaceState等方法實如今客戶端實現路由的操做
      • 哈希路由是使用url的hash部分做爲路由信息，是經過使用頁面不一樣的哈希和不一樣的組件之間作映射來完成的，哈希的出現主要爲了兼容老版本瀏覽器，由於老版本的瀏覽器不支持history的API，因此經過哈希的變化來實現路由的變化。可是這樣的狀況在如今已經不多了，並且哈希的自己含義就是頁面的定位，其邏輯也不符合路由的需求

    • 路由渲染組件的三種方式

      • component
      • render
      • children

    • 全新思惟

      • 一切皆組件
      • 動態路由離散式聲明法

  • 架構設計基礎

    • React+Redux項目結構組織方式

      • type（按照類型）

        • 定義

          • 類型指的是該文件在項目當中充當的角色類型

        • 特色

          • 優勢

            • 目錄結構清晰卻明確，功能文件比較緊湊

          • 缺點

            • 新添功能須要在不一樣的文件中作修改
            • 不利於多人合做下的代碼表寫和提交合並

      • function（按照功能模塊）

        • 定義

          • 功能指的是按照功能或者頁面將相關的文件寫在同一個文件夾

        • 特色

          • 優勢

            • 有利於新功能的開發和拓展

          • 缺點

            • 容易形成store當中存在大量重複性的數據
            • 同一狀態在不一樣的模塊中會有不一致的風險

      • Ducks（鴨子類型）

        • 定義

          • 將應用的狀態做爲模塊的劃分依據

        • 特色

          • 目錄結構清晰緊湊，添加新功能只需添加新模塊文件便可
          • 組件須要任何狀態只須要引入對應的state模塊文件便可

    • 三種設計Redux-State的依據

      • API爲依據

        • 定義

          • 之後端API返回數據結構做爲State的數據結構

        • 缺點

          • 大量數組類型的結構會形成重複數據的存在

      • UI爲依據

        • 定義

          • 不一樣的UI顯示都對應一份State

        • 缺點

          • State數量過多，容易出現錯誤的State和重複的State

      • 數據庫基本原則爲依據

        • 整個應用的狀態按照領域分紅若干子State，子State之間不能保存重複的數據
        • State以鍵值對的結構存儲數據，以記錄的key/Id做爲記錄的索引，記錄中的其餘字段都依賴於索引
        • State中不能保存能夠經過已有數據計算而來的數據，即State中的字段不互相依賴

  • 架構設計進階

    • selector函數

      • 使用selector是在解決什麼問題

        • 問題緣由：redux和容器性組件存在部分耦合，redux中的state結構變化會影響後者
        • 解決問題的目的：實現react容器性組件和redux狀態層的終極解耦
        • 解決問題的手段：selectors是做爲不一樣層級之間的接口不只完全解耦了層級，還使得不一樣層級經過接口進行安全交互和通信得以實現

      • selector帶來的好處

        • selector限制了層級的內部變化影響範圍最多到接口
        • selector防止不一樣層級互相知道內部結構的風險
        • selector能夠負責計算和過濾的工做

    • redux中間件（Middleware）

      • middleware的寫法
      • middleware的本質

    • redux加強器（Enhancer）

      • Enhancer的寫法

      • Enhancer和Middleware的關係

        • 實際上middleware是store enhancer的一種，中間件雖然比較低階，可是它約束了咱們的行爲，而加強器enhancer雖然更加靈活，可是破壞redux底層結構的風險更大，因此若是你對redux總體的結構和邏輯都不是太熟悉，儘可能就別用

  • 架構設計高級

    • reducer如何返回新的state對象

      • Object.assign
      • ES6擴展語法

      • Immutable

        • Immutable的常規使用
        • Immutable的優化

        • Immutable的選擇考慮

          • 對項目的總體侵入性很強，咱們須要改的地方不少，若是你的項目不是很大，且store當中的數據層級不是不少，結構不復雜，不推薦使用的，咱們必定要根據需求去搭建架構，去決定是否使用某些工具

    • Reselect

      • 使用Reselect是解決什麼問題

        • store當中的state發生了變化，每一個容器型組件的mapStateToProps都要從新執行，產生的結果就是上述的這些selectors函數也要重複執行，也就致使了重複計算，使用Reselect建立的selectors函數，只要使用到的state沒有發生變化，這個selectors函數就不會去從新計算，好比getVisibleTodos函數使用到了state.filter和state.todos，修改state.text並不會影響state.filter和state.todos，因此getVisibleTodos函數也就不會重複執行
      • Reselect的常規使用
      • Reselect的選擇考慮

  • React Hooks

    • 特性

      • hooks 的出現使得你能夠在不編寫 class 的狀況下使用狀態管理以及其它 React 的特性

    • Hooks API

      • useState

        • 用來承擔與類組件中的 state 同樣的做用，組件內部的狀態管理

      • useEffect

        • 能夠用來模擬生命週期，便可以完成某些反作用

      • useLayoutEffect

        • 它與 useEffect 的用法徹底同樣，做用也基本相同，惟一的不一樣在於執行時機，它會在全部的 DOM 變動以後同步調用 effect，可使用它來

      • useReducer

        • useState 的替代方案，它接收一個 (state, action) => newState 的 reducer 處理函數，並返回當前的 state 和 配套的 dispatch 方法。使用方法與 redux 很是類似

      • useCallback

        • 它有的做用：性能優化，父組件更新，傳遞給子組件的函數指針不會每次都改變，只有當依賴項發生改變的時候纔會改變指針。避免了子組件的無謂渲染
        • 它的本質是對函數依賴進行分析，依賴變動時才從新執行。

      • useMemo

        • useMemo 用於緩存一些耗時的計算結果（返回值），只有當依賴項改變時才從新進行計算

      • useContext

        • 專門爲函數組件提供的 context hook API，能夠更加方便地獲取 context 的值
        • useContext(MyContext) 接收一個 context 對象，當前獲取到的值由上層組件中距離最近的 <MyContext.Provider> 的 value 決定

      • useRef

        • useRef 返回一個可變的 ref 對象，其 current 屬性被初始化爲傳入的參數。返回的 ref 對象在組件的整個生命週期內保持不變
  • 未完待續...

Angular

JavaScript

  • JS變量

    • 變量聲明

      • 聲明

        • 顯示聲明

var 變量名

- 隱式聲明

自動添加到閉包

- 陋習

        - 沒有類型
        - 重複聲明
        - 隱式聲明
        - 不聲明直接賦值

    - 提倡

        - 先聲明後使用
        - 先賦值後運算

- 做用域

    - 全局變量

        - 包含

            - 在函數體外定義的變量
            - 在函數體內定義的無var的變量

        - 調用

            - 任何位置

    - 局部變量

        - 包含

            - 在函數體內部var聲明的變量
            - 函數的參數變量

        - 調用

            - 當前函數體內部

    - 優先級

        - 局部變量高於同名全局變量
        - 參數變量高於同名全局變量
        - 局部變量高於同名參數變量

    - 特性

        - 忽略塊級做用域
        - 全局變量是全局對象的屬性
        - 局部變量是調用對象的屬性
        - 做用域鏈

            - 內層函數可訪問外層函數局部變量
            - 外層函數不能訪問內層函數局部變量

        - 生命週期

            - 全局變量

                - 除非被顯示刪除，不然一直存在

            - 局部變量

                - 自聲明起至函數執行完畢或被顯示刪除

            - 回收機制

                - 標記清除
                - 引用計數

  • JS數據類型

    • undefined

      • 使用var聲明但未初始化
      • 區分空對象指針與還沒有定義的變量
      • 對未初始化的變量及未聲明的變量使用typeof都返回undefined

    • null

      • 邏輯上null表示一個空對象的指針
      • 使用typeof檢測時會返回object

    • boolean

      • true爲真false爲假
      • true不必定=1 false不必定=0

      • 使用Boolean()進行轉換

        • 轉換爲true

          • 任何非空字符串
          • 任何非空對象
          • 任何非零數字

        • 轉換爲false

          • 空字符串
          • 0和NaN
          • null及undefined

    • string

      • 特性

        • 0個或多個16位Unicode字符組成
        • 單引號與雙引號不能交叉使用

        • 使用.length屬性訪問字符串長度

          • 轉義序列表示一個字符串
          • 沒法精確返回雙字節字符串長度
        • 字符串一旦被建立，其值將不能改變，若要改變必須銷燬原有字符串

      • 轉義序列

        • n 換行
        • t 製表符
        • b 空格
        • r 回車
        • f 分頁符
        • \ 斜槓\
        • ' 單引號
        • " 雙引號
        • xnn 十六進制數，n表明0~F
        • unnnn 以十六進制表示一個Unicode字符

      • 類型轉換

        • toString()

          • 使用類型

            • number
            • string
            • object
            • boolean

          • 參數

            • number類型的數值基數

        • String()

          • undefined
          • null

        • evel()

          • 計算字符串表達式的值並以數值的形式返回

    • number

      • 進制

        • 十進制
        • 八進制
        • 十六進制

      • 浮點數

        • 小數點後至少一位數字

        • 科學計數法

          • 小數點後帶有6個0的浮點數
          • 以e爲底*10的±N次冪

        • 最高精度

          • 17位小數

        • 缺陷

          • 存在舍入偏差
          • 沒法測試特定浮點數值

      • 數值範圍

        • 最小值

          • Number.MIN_VALUE

            • 5e-324

        • 最大值

          • Number.MAX_VALUE

            • 1.7976931348623157e+308

        • 超出範圍

          • 正無窮

            • Infinity
            • Number.POSITIVE_INFINITY

          • 負無窮

            • -Infinity
            • Number.NEGATIVE_INFINITY

          • 缺陷

            • 沒法參與下一次計算

          • 檢測方法

            • isFinite()

              • 可轉換爲數值 true
              • 不可轉換爲數值 false

      • NaN

        • 含義

          • Not a Number
          • 非數值

        • 特性

          • 任何涉及NaN的操做都將返回NaN
          • NaN與任何值都不相等包括自身

        • 檢測

          • isNaN()

            • 可轉換爲數值 false
            • 不可轉換爲數值 true

      • 數值轉換

        • Number()

          • Boolean

            • true

              • 1

            • false

              • 0

          • null

            • 0

          • undefined

            • NaN

          • String

            • 只包含數字

              • 十進制數
              • 前導0被忽略

            • 包含有浮點格式

              • 浮點數值
              • 忽略前導0

            • 包含有效十六進制數

              • 相同大小的十進制數

            • 空字符串

              • 0

            • 其餘字符串

              • NaN

          • object

            • 基於toString轉成字符串，再轉換成數字

    • object

      • 定義

        • 一組數據或者功能的集合

      • 聲明

        • var obj = new Object()
        • var obj = {}

      • 屬性與方法

        • constructor

          • 保存擁有建立當前對象的函數

        • hasOwnProperty

          • 檢測給定屬性在當前對象中是否存在

        • isPrototypeOf

          • 檢測傳入的對象是不是另外一個對象的原型

        • propertyIsEnumerable

          • 檢測給定的屬性是否能用for-in枚舉

        • toLocaleString

          • 返回對象的字符串表示，該字符串與執行環境的地區對應

        • toString

          • 返回對象的字符串表示

        • valueOf

          • 返回對象的字符串、布爾或數值表示
  • 未完待續...

TypeScript

  • 基礎類型

    • string

      • 同JavaScript用"或者'標識字符串

        • let name: string = "abc"

    • number

      • 數組

        • number[]

          • let list: number[] = [1,2,3]

        • Array<元素類型>

          • let list: Array<number> = [1,2,3]

      • 數字

        • let decLiteral: number = 6

    • boolean

      • let isDone: boolean = false

    • Tuple

      • 元組類型容許表示一個已知元素數量和類型的數組，各元素的類型沒必要相同
      • let x: [string, number];

x = ['hello', 10]; // OK

- enum

    - 枚舉類型是對JavaScript標準數據類型的一個補充
    - enum Color {Red, Green, Blue}

let c: Color = Color.Green;

- Any

    - 未知的數據類型通常使用any

- Void

    - void類型像是與any類型相反，它表示沒有任何類型

- Null 和 Undefined

    - undefined和null二者各自有本身的類型分別叫作undefined和null
    - 它們的自己的類型用處不是很大
    - 默認狀況下null和undefined是全部類型的子類型

- Never

    - never類型表示的是那些永不存在的值的類型
    - never類型是任何類型的子類型，也能夠賦值給任何類型
    - 沒有類型是never的子類型或能夠賦值給never類型（除了never自己以外）
    - 即便 any也不能夠賦值給never

- Object

    - object表示非原始類型
    - 也就是除number，string，boolean，symbol，null或undefined以外的類型

  • 接口

    • 特殊符號

      • 可選

        • ?

      • 只讀

        • readonly

      • 簽名

        • 字符串型簽名

        • 數組型簽名

          • 數字型簽名會將數字轉換成字符串再去匹配
        • 若是同時使用那麼數組型簽名的返回值必須是字符串型簽名的子類的返回值

    • 對象型接口

      • 普通模式

        • key須要對應上
      • 配合簽名使用的option模式

    • 函數型接口

      • 參數

        • 不須要key對應，只須要相應位置的相應類型對應
      • 返回值

    • 類類型接口

      • 特色

        • 接口只須要描述類的公共部分，不會去檢查私有部分

      • 構造函數的控制方式

        • 構造函數時金泰屬性，不屬於公共部分
        • 控制new過程

    • 接口繼承

      • 接口的切割和繼承
      • 特色：類可當作值也能夠當作類型

  • 類class

    • 定義了一件事物的抽象特色，包含它的屬性和方法

    • ES6類的使用

      • 屬性和方法

        • 使用class定義類
        • 使用constructor定義構造函數
        • 經過new生成實例會自動調用構造函數

      • 類的繼承

        • 使用extends關鍵字實現繼承
        • 子類中使用super關鍵字來調用父類的構造函數和方法

      • 靜態方法

        • 使用static修飾符修飾的方法稱爲靜態類
        • 不須要實例化
        • 直接經過類來調用

    • TypeScript類的使用

      • 三種訪問修飾符

      • public

        • public 修飾的屬性或方法是公有的，能夠在任何地方被訪問到
        • 默認全部的屬性和方法都是 public

      • private

        • private 修飾的屬性或方法是私有的
        • 不能在聲明它的類的外部訪問
        • 不少時候，咱們但願有的屬性是沒法直接存取的，這時候就能夠用 private 了
        • 須要注意的是，TypeScript 編譯以後的代碼中，並無限制 private 屬性在外部的可訪問性
        • 使用 private 修飾的屬性或方法，在子類中也是不容許訪問的

      • protected

        • protected 修飾的屬性或方法是受保護的
        • 它和 private 相似，區別是它在子類中也是容許被訪問的

    • 抽象類

      • 抽象類是供其它類繼承的基類
      • 他們通常不會直接被實例化
      • 抽象類能夠包含成員的實現細節
      • abstract關鍵字是用於定義抽象類和在抽象類內部定義抽象方法
      • 抽象類中的抽象方法不包含具體實現而且必須在派生類中實現
      • 抽象方法的語法與接口方法類似。 二者都是定義方法簽名不包含方法體。 然而，抽象方法必須使用abstract關鍵字而且能夠包含訪問符

    • 類的類型

      • 實現方式相似接口

    • 類實現接口

      • 實現（implements）是面向對象中的一個重要概念
      • 通常來說，一個類只能繼承自另外一個類，有時候不一樣類之間能夠有一些共有的特性，這時候就能夠把特性提取成接口（interfaces），用 implements 關鍵字來實現
      • 這個特性大大提升了面向對象的靈活性

  • 函數

    • 有可選參數的函數

      • 調用函數時傳的參數的數量或者類型不符合函數中定義的參數要求時，TypeScript編譯器會報錯
      • 在一些場景下咱們不須要傳全部的參數；TypeScript一個函數可選參數的特性；
      • 在TypeScript中經過在函數參數後面追加一個?，指定參數是可選的

    • 有默認參數的函數

      • 當函數有可選參數時，咱們必須檢測參數是否被傳遞了
      • 在聲明函數簽名時使用=提供一個默認值，便可指定函數參數是可選的；
      • TypeScript編譯會在JavaScript輸出結果中生成一個if結構

    • 有剩餘參數的函數

      • add = (...foo:number[]):number => {}

  • 聲明文件

    • 場景

      • 當使用第三方庫時，咱們須要引用它的聲明文件，才能得到對應的代碼補全、接口提示等功能

    • 什麼是聲明語句

      • 假如咱們想使用第三方庫 jQuery，一種常見的方式是在 html 中經過 <script> 標籤引入 jQuery，而後就可使用全局變量 $ 或 jQuery 了

        • $('body')
      • 可是在 ts 中，編譯器並不知道 $ 或 jQuery 是什麼東西

      • 這時，咱們須要使用 declare var 來定義它的類型:

        • declare var $: (selector: string) => any;
      • declare var 並無真的定義一個變量，只是定義了全局變量 $ 的類型，僅僅會用於編譯時的檢查，在編譯結果中會被刪除

    • 什麼是聲明文件

      • 一般咱們會把聲明語句放到一個單獨的文件（index.d.ts）中，這就是聲明文件
      • 聲明文件必須以.d.ts爲後綴

    • 第三方聲明文件

      • 咱們能夠直接下載下來使用，可是更推薦的是使用 @types 統一管理第三方庫的聲明文件。

      • @types 的使用方式很簡單，直接用 npm 安裝對應的聲明模塊便可，以 jQuery 舉例：

        • npm install @types/jquery --save-dev

    • 書寫聲明文件

      • 庫文件使用場景

        • 全局變量

          • 經過 <script> 標籤引入第三方庫，注入全局變量

        • npm包

          • 經過 import foo from 'foo' 導入，符合 ES6 模塊規範

        • UMD庫

          • 既能夠經過 <script> 標籤引入，又能夠經過 import 導入

        • 直接擴展全局變量

          • 經過 <script> 標籤引入後，改變一個全局變量的結構

        • 在 npm 包或 UMD 庫中擴展全局變量

          • 引用 npm 包或 UMD 庫後，改變一個全局變量的結構

        • 模塊插件

          • 經過 <script> 或 import 導入後，改變另外一個模塊的結構

      • 全局變量聲明

        • 使用全局變量的聲明文件時，若是是以 npm install @types/xxx --save-dev 安裝的，則不須要任何配置。不然就須要在聲明文件中聲明全局變量

        • 全局變量的幾種聲明方式

          • declare var/const/let

            • 聲明全局變量

          • declare function

            • 聲明全局方法

          • declare class

            • 聲明全局類

          • declare enum

            • 聲明全局枚舉類型

          • declare namespace

            • 聲明（含有子屬性的）全局對象

          • interface 和 type

            • 聲明全局類型
  • 未完待續...

Vue

  • 簡介

    • Vue是一個MVVM框架
    • Vue是用於構建用戶界面的漸進式框架
    • 尤雨溪最開始想起名爲 seed.js，可是npm已經被註冊了，後來根據 」view「起名爲 vue
    • 2014年由Laravel框架做者推薦後逐漸流行

  • 特色

    • 易用

      • 已經會了 HTML、CSS、JavaScript？即刻閱讀指南開始構建應用！

    • 靈活

      • 不斷繁榮的生態系統，能夠在一個庫和一套完整框架之間自如伸縮。

    • 高效

      • 20kB min+gzip 運行大小
      • 超快虛擬 DOM
      • 最省心的優化

  • Vue思想

    • 數據驅動
    • 組件化

  • Vue API

    • 應用API

      • component

        • 註冊或檢索全局組件。註冊還會使用給定的 name 參數自動設置組件的 name。

      • config

        • 包含應用配置的對象。

      • directive

        • 註冊或檢索全局指令。

      • mixin

        • 在整個應用範圍內應用混入。一旦註冊，它們就能夠在當前的應用中任何組件模板內使用它。插件做者可使用此方法將自定義行爲注入組件。不建議在應用代碼中使用。

      • mount

        • 將應用實例的根組件掛載在提供的 DOM 元素上

      • provide

        • 設置一個能夠被注入到應用範圍內全部組件中的值。組件應該使用 inject 來接收 provide 的值。
        • 從 provide/inject 的角度來看，能夠將應用程序視爲根級別的祖先，而根組件是其惟一的子級。
        • 該方法不該該與 provide 組件選項或組合式 API 中的 provide 方法混淆。雖然它們也是相同的 provide/inject 機制的一部分，可是是用來配置組件 provide 的值而不是應用 provide 的值。
        • 經過應用提供值在寫插件時尤爲有用，由於插件通常不能使用組件提供值。這是使用 globalProperties 的替代選擇。

      • unmount

        • 在提供的 DOM 元素上卸載應用實例的根組件。

      • use

        • 安裝 Vue.js 插件。若是插件是一個對象，它必須暴露一個 install 方法。若是它自己是一個函數，它將被視爲安裝方法。
        • 該安裝方法將以應用實例做爲第一個參數被調用。傳給 use 的其餘 options 參數將做爲後續參數傳入該安裝方法。
        • 當在同一個插件上屢次調用此方法時，該插件將僅安裝一次

    • 全局API

      • createApp

        • 返回一個提供應用上下文的應用實例。應用實例掛載的整個組件樹共享同一個上下文。

      • h

        • 返回一個」虛擬節點「，一般縮寫爲 VNode：一個普通對象，其中包含向 Vue 描述它應在頁面上渲染哪一種節點的信息，包括全部子節點的描述。它的目的是用於手動編寫的渲染函數

      • defineComponent

        • 從實現上看，defineComponent 只返回傳遞給它的對象。可是，就類型而言，返回的值有一個合成類型的構造函數，用於手動渲染函數、TSX 和 IDE 工具支持。

      • defineAsyncComponent

        • 建立一個只有在須要時纔會加載的異步組件

      • resolveComponent

        • 若是在當前應用實例中可用，則容許按名稱解析 component。返回一個 Component。若是沒有找到，則返回 undefined。

      • resolveDynamicComponent

        • 容許使用與 <component :is=""> 相同的機制來解析一個 component。返回已解析的 Component 或新建立的 VNode，其中組件名稱做爲節點標籤。若是找不到 Component，將發出警告。

      • withDirectives

        • 容許將指令應用於 VNode。返回一個包含應用指令的 VNode。

      • createRenderer

        • createRenderer 函數接受兩個泛型參數： HostNode 和 HostElement，對應於宿主環境中的 Node 和 Element 類型。

      • nextTick

        • 將回調推遲到下一個 DOM 更新週期以後執行。在更改了一些數據以等待 DOM 更新後當即使用它

    • options

      • Data

        • data

          • 返回組件實例的 data 對象的函數

        • props

          • props 能夠是數組或對象，用於接收來自父組件的數據。props 能夠是簡單的數組，或者使用對象做爲替代，對象容許配置高階選項，如類型檢測、自定義驗證和設置默認值。

        • computed

          • 計算屬性將被混入到組件實例中。全部 getter 和 setter 的 this 上下文自動地綁定爲組件實例。

        • methods

          • methods 將被混入到組件實例中。能夠直接經過 VM 實例訪問這些方法，或者在指令表達式中使用。方法中的 this 自動綁定爲組件實例。

        • watch

          • 一個對象，鍵是須要觀察的表達式，值是對應回調函數。值也能夠是方法名，或者包含選項的對象

        • emits

          • emits 能夠是數組或對象，從組件觸發自定義事件，emits 能夠是簡單的數組，或者對象做爲替代，容許配置和事件驗證

      • DOM

        • template

          • 一個字符串模板做爲 component 實例的標識使用。模板將會替換掛載的元素。掛載元素的內容都將被忽略，除非模板的內容有分發插槽。

        • render

          • 字符串模板的另外一種選擇，容許你充分利用 JavaScript 的編程功能。

      • 生命週期

        • beforeCreate->setup()

          • 在實例初始化以後，數據觀測 (data observer) 和 event/watcher 事件配置以前被調用

        • created->setup()

          • 在實例建立完成後被當即調用。在這一步，實例已完成如下的配置：數據觀測 (data observer)，property 和方法的運算，watch/event 事件回調。然而，掛載階段還沒開始，$el property 目前尚不可用

        • beforeMount->onBeforeMount

          • 在掛載開始以前被調用：相關的 render 函數首次被調用。
          • 該鉤子在服務器端渲染期間不被調用。

        • mounted->onMounted

          • 實例被掛載後調用，這時 Vue.createApp({}).mount() 被新建立的 vm.$el 替換了。若是根實例掛載到了一個文檔內的元素上，當 mounted 被調用時 vm.$el 也在文檔內。
          • 注意 mounted 不會保證全部的子組件也都一塊兒被掛載。若是你但願等到整個視圖都渲染完畢，能夠在 mounted 內部使用 vm.$nextTick
          • 該鉤子在服務器端渲染期間不被調用

        • beforeUpdate->onBeforeUpdate

          • 數據更新時調用，發生在虛擬 DOM 打補丁以前。這裏適合在更新以前訪問現有的 DOM，好比手動移除已添加的事件監聽器。
          • 該鉤子在服務器端渲染期間不被調用，由於只有初次渲染會在服務端進行

        • updated->onUpdated

          • 因爲數據更改致使的虛擬 DOM 從新渲染和打補丁，在這以後會調用該鉤子。
          • 當這個鉤子被調用時，組件 DOM 已經更新，因此你如今能夠執行依賴於 DOM 的操做。然而在大多數狀況下，你應該避免在此期間更改狀態。若是要相應狀態改變，一般最好使用計算屬性或偵聽器取而代之。
          • 注意，updated 不會保證全部的子組件也都一塊兒被重繪。若是你但願等到整個視圖都重繪完畢，能夠在 updated 裏使用 vm.$nextTick
          • 該鉤子在服務器端渲染期間不被調用

        • activated

          • 被 keep-alive 緩存的組件激活時調用。
          • 該鉤子在服務器端渲染期間不被調用。

        • deactivated

          • 被 keep-alive 緩存的組件停用時調用。
          • 該鉤子在服務器端渲染期間不被調用。

        • beforeUnmount(3.0)->onBeforeUnmount

          • 在卸載組件實例以前調用。在這個階段，實例仍然是徹底正常的。
          • 該鉤子在服務器端渲染期間不被調用。

        • unmounted(3.0)->onUnmounted

          • 卸載組件實例後調用。調用此鉤子時，組件實例的全部指令都被解除綁定，全部事件偵聽器都被移除，全部子組件實例被卸載。
          • 該鉤子在服務器端渲染期間不被調用。

        • errorCaptured->onErrorCaptured

          • 當捕獲一個來自子孫組件的錯誤時被調用。此鉤子會收到三個參數：錯誤對象、發生錯誤的組件實例以及一個包含錯誤來源信息的字符串。此鉤子能夠返回 false 以阻止該錯誤繼續向上傳播。

        • renderTracked(3.0)->onRenderTracked

          • 跟蹤虛擬 DOM 從新渲染時調用。鉤子接收 debugger event 做爲參數。此事件告訴你哪一個操做跟蹤了組件以及該操做的目標對象和鍵。

        • renderTriggered(3.0)->onRenderTriggered

          • 當虛擬 DOM 從新渲染爲 triggered.Similarly 爲renderTracked，接收 debugger event 做爲參數。此事件告訴你是什麼操做觸發了從新渲染，以及該操做的目標對象和鍵。

      • 選項/資源

        • directives

          • 包含組件實例可用指令的哈希表。

        • components

          • 包含組件實例可用組件的哈希表。

    • 實例property

      • $data

        • 組件實例觀察的數據對象。組件實例代理了對其 data 對象 property 的訪問。

      • $props

        • 當前組件接收到的 props 對象。組件實例代理了對其 props 對象 property 的訪問。

      • $el

        • 組件實例使用的根 DOM 元素。

      • $options

        • 用於當前組件實例的初始化選項

      • $parent

        • 父實例，若是當前實例有的話。

      • $root

        • 當前組件樹的根組件實例。若是當前實例沒有父實例，此實例將會是其本身。

      • $slots

        • 用來訪問被插槽分發的內容。

      • $refs

        • 一個對象，持有註冊過 ref attribute 的全部 DOM 元素和組件實例。

      • $attrs

        • 包含了父做用域中不做爲組件 props 或自定義事件。

    • 實例方法

      • $watch

        • 偵聽組件實例上的響應式 property 或函數計算結果的變化。

      • $emit

        • 觸發當前實例上的事件。附加參數都會傳給監聽器回調。

      • $forceUpdate

        • 迫使組件實例從新渲染。注意它僅僅影響實例自己和插入插槽內容的子組件，而不是全部子組件。

      • $nextTick

        • 將回調延遲到下次 DOM 更新循環以後執行。在修改數據以後當即使用它，而後等待 DOM 更新。它跟全局方法 nextTick 同樣，不一樣的是回調的 this 自動綁定到調用它的實例上。

    • 指令

      • v-text

        • 更新元素的 textContent。若是要更新部分的 textContent，須要使用 Mustache 插值。

      • v-html

        • 更新元素的 innerHTML。注意：內容按普通 HTML 插入 - 不會做爲 Vue 模板進行編譯。若是試圖使用 v-html 組合模板，能夠從新考慮是否經過使用組件來替代。

      • v-show

        • 根據表達式的真假值，切換元素的 display CSS property。
        • 當條件變化時該指令觸發過渡效果。

      • v-if

        • 根據表達式的真假值來有條件地渲染元素。在切換時元素及它的數據綁定 / 組件被銷燬並重建。若是元素是 <template>，將提取它的內容做爲條件塊。
        • 當條件變化時該指令觸發過渡效果。
        • 當和 v-for 一塊兒使用時，v-if 的優先級比 v-for 更高

      • v-else

        • 爲 v-if 或者 v-else-if 添加「else 塊」。

      • v-else-if

        • 表示 v-if 的「else if 塊」。能夠鏈式調用。

      • v-for

        • 基於源數據屢次渲染元素或模板塊

      • v-on

        • .stop - 調用 event.stopPropagation()。
        • .prevent - 調用 event.preventDefault()。
        • .capture - 添加事件偵聽器時使用 capture 模式。
        • .self - 只當事件是從偵聽器綁定的元素自己觸發時才觸發回調。
        • .{keyAlias} - 僅當事件是從特定鍵觸發時才觸發回調。
        • .once - 只觸發一次回調。
        • .left - 只當點擊鼠標左鍵時觸發。
        • .right - 只當點擊鼠標右鍵時觸發。
        • .middle - 只當點擊鼠標中鍵時觸發。
        • .passive - { passive: true } 模式添加偵聽器
        • 綁定事件監聽器。事件類型由參數指定。

      • v-bind

        • 動態地綁定一個或多個 attribute，或一個組件 prop 到表達式。

      • v-model

        • .lazy - 監聽 change 而不是 input 事件
        • .number - 輸入字符串轉爲有效的數字
        • .trim - 輸入首尾空格過濾
        • 在表單控件或者組件上建立雙向綁定。

      • v-slot

        • 提供具名插槽或須要接收 prop 的插槽。

      • v-pre

        • 跳過這個元素和它的子元素的編譯過程。能夠用來顯示原始 Mustache 標籤。跳過大量沒有指令的節點會加快編譯。

      • v-cloak

        • 這個指令保持在元素上直到關聯組件實例結束編譯。和 CSS 規則如 [v-cloak] { display: none } 一塊兒用時，這個指令能夠隱藏未編譯的 Mustache 標籤直到組件實例準備完畢。

      • v-once

        • 只渲染元素和組件一次。隨後的從新渲染，元素/組件及其全部的子節點將被視爲靜態內容並跳過。這能夠用於優化更新性能。

      • v-is

        • 在 DOM 內模板使用時，模板受原生 HTML 解析規則的約束

    • 特殊指令

      • key

        • key 的特殊 attribute 主要用在 Vue 的虛擬 DOM 算法，在新舊 nodes 對比時辨識 VNodes。若是不使用 key，Vue 會使用一種最大限度減小動態元素而且儘量的嘗試就地修改/複用相同類型元素的算法。而使用 key 時，它會基於 key 的變化從新排列元素順序，而且會移除/銷燬 key 不存在的元素。
        • 有相同父元素的子元素必須有獨特的 key。重複的 key 會形成渲染錯誤。

      • ref

        • ref 被用來給元素或子組件註冊引用信息。引用信息將會註冊在父組件的 $refs 對象上。若是在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；若是用在子組件上，引用就指向組件實例

      • is

        • 使用動態組件。

    • 內置組件

      • component

        • 渲染一個「元組件」爲動態組件。依 is 的值，來決定哪一個組件被渲染。is 的值是一個字符串，它既能夠是 HTML 標籤名稱也能夠是組件名稱。

      • transition

        • <transition> 元素做爲單個元素/組件的過渡效果。<transition> 只會把過渡效果應用到其包裹的內容上，而不會額外渲染 DOM 元素，也不會出如今可被檢查的組件層級中。

      • transition-group

        • <transition-group>提供多個元素/組件的過渡效果。默認狀況下，它不呈現包裝DOM元素，但能夠經過tag屬性定義一個。
        • 注意，每一個 <transition-group> 的子節點必須有獨立的 key，動畫才能正常工做

      • keep-alive

        • <keep-alive> 包裹動態組件時，會緩存不活動的組件實例，而不是銷燬它們。和 <transition> 類似，<keep-alive> 是一個抽象組件：它自身不會渲染一個 DOM 元素，也不會出如今組件的父組件鏈中。
        • 當組件在 <keep-alive> 內被切換，它的 activated 和 deactivated 這兩個生命週期鉤子函數將會被對應執行。
        • 主要用於保留組件狀態或避免從新渲染。

      • slot

        • <slot> 元素做爲組件模板之中的內容分發插槽。<slot> 元素自身將被替換。

      • teleport

        • 容許咱們控制在 DOM 中哪一個父節點下渲染了 HTML，而沒必要求助於全局狀態或將其拆分爲兩個組件。

    • 響應式API

      • 響應式基礎API

        • reactive

          • 返回對象的響應式副本
          • 響應式轉換是「深層」的——它影響全部嵌套 property。在基於 ES2015 Proxy 的實現中，返回的 proxy 是不等於原始對象的。建議只使用響應式 proxy，避免依賴原始對象。

        • readonly

          • 獲取一個對象 (響應式或純對象) 或 ref 並返回原始 proxy 的只讀 proxy。只讀 proxy 是深層的：訪問的任何嵌套 property 也是隻讀的。

        • isProxy

          • 檢查對象是不是由 reactive 或 readonly 建立的 proxy。

        • isReactive

          • 檢查對象是不是 reactive建立的響應式 proxy。

        • isReadonly

          • 檢查對象是不是由readonly建立的只讀 proxy。

        • toRaw

          • 返回 reactive 或 readonly proxy 的原始對象。這是一個轉義口，可用於臨時讀取而不會引發 proxy 訪問/跟蹤開銷，也可用於寫入而不會觸發更改

        • markRaw

          • 標記一個對象，使其永遠不會轉換爲 proxy。返回對象自己。

        • shallowReactive

          • 建立一個響應式 proxy，跟蹤其自身 property 的響應性，但不執行嵌套對象的深度響應式轉換 (暴露原始值)。

        • shallowReadonly

          • 建立一個 proxy，使其自身的 property 爲只讀，但不執行嵌套對象的深度只讀轉換 (暴露原始值)。

      • Refs

        • ref

          • 接受一個內部值並返回一個響應式且可變的 ref 對象。ref 對象具備指向內部值的單個 property .value。

        • unref

          • 若是參數爲 ref，則返回內部值，不然返回參數自己。這是 val = isRef(val) ? val.value : val。

        • toRef

          • 能夠用來爲源響應式對象上的 property 新建立一個 ref。而後能夠將 ref 傳遞出去，從而保持對其源 property 的響應式鏈接。

        • toRefs

          • 將響應式對象轉換爲普通對象，其中結果對象的每一個 property 都是指向原始對象相應 property 的ref。

        • isRef

          • 檢查值是不是ref對象。

        • customRef

          • 建立一個自定義的 ref，並對其依賴項跟蹤和更新觸發進行顯式控制。它須要一個工廠函數，該函數接收 track 和 trigger 函數做爲參數，並應返回一個帶有 get 和 set 的對象。

        • shallowRef

          • 建立一個 ref，它跟蹤本身的 .value 更改，但不會使其值成爲響應式的。

        • triggerRef

          • 手動執行與 shallowRef 關聯的任何反作用。

      • Computed和watch

        • computed

          • 使用 getter 函數，併爲從 getter 返回的值返回一個不變的響應式 ref 對象。

        • watchEffect

          • 在響應式地跟蹤其依賴項時當即運行一個函數，並在更改依賴項時從新運行它。

        • watch

          • watch API 與選項式 API this.$watch (以及相應的 watch 選項) 徹底等效。watch 須要偵聽特定的數據源，並在單獨的回調函數中執行反作用。默認狀況下，它也是惰性的——即回調僅在偵聽源發生更改時調用。

    • 組合式API

      • setup

        • 一個組件選項，在建立組件以前執行，一旦 props 被解析，並做爲組合式 API 的入口點

        • props

          • setup 函數中的第一個參數是 props。正如在一個標準組件中所指望的那樣，setup 函數中的 props 是響應式的，當傳入新的 prop 時，它將被更新。

        • context

          • 傳遞給 setup 函數的第二個參數是 context。context 是一個普通的 JavaScript 對象，它暴露三個組件的 property
      • 生命週期鉤子
  • Vuex
  • Vue-router
  • Vue-SSR
  • Vue-Loader

  • Vue-Cli

    • 經過 @vue/cli 實現的交互式的項目腳手架。
    • 經過 @vue/cli + @vue/cli-service-global 實現的零配置原型開發。
    • 一個運行時依賴 (@vue/cli-service)

    • Cli

      • CLI (@vue/cli) 是一個全局安裝的 npm 包，提供了終端裏的 vue 命令。它能夠經過 vue create 快速搭建一個新項目，或者直接經過 vue serve 構建新想法的原型。你也能夠經過 vue ui 經過一套圖形化界面管理你的全部項目

    • Cli服務

      • CLI 服務 (@vue/cli-service) 是一個開發環境依賴。它是一個 npm 包，局部安裝在每一個 @vue/cli 建立的項目中。

      • CLI 服務是構建於 webpack 和 webpack-dev-server 之上的

        • 加載其它 CLI 插件的核心服務；
        • 一個針對絕大部分應用優化過的內部的 webpack 配置；
        • 項目內部的 vue-cli-service 命令，提供 serve、build 和 inspect 命令

    • Cli插件

      • CLI 插件是向你的 Vue 項目提供可選功能的 npm 包，例如 Babel/TypeScript 轉譯、ESLint 集成、單元測試和 end-to-end 測試等。Vue CLI 插件的名字以 @vue/cli-plugin- (內建插件) 或 vue-cli-plugin- (社區插件) 開頭，很是容易使用。
      • 當你在項目內部運行 vue-cli-service 命令時，它會自動解析並加載 package.json 中列出的全部 CLI 插件。
      • 插件能夠做爲項目建立過程的一部分，或在後期加入到項目中。它們也能夠被歸成一組可複用的 preset
  • Vue-Devtools
  • vue-class-component

跨平臺技術

跨端技術發展的三個階段

  • 第一階段是混合開發的web容器時代

    • 爲了解決原生開發的高成本、低效率，出現了Hybrid混合開發
    • 原生中嵌入依託於瀏覽器的WebView
    • Web瀏覽器中能夠實現的需求在WebView中基本均可以實現
    • 可是Web最大的問題是，它的性能和體驗與原生開發存在肉眼可感知的差別
    • 所以並不適用於對性能和用戶體驗要求較高的場景

  • 第二階段是以RN和Weex爲表明的泛web容器時代

    • RN對Web標準進行了功能裁剪
    • 用戶體驗更接近於原生了
    • 因爲進行了功能裁剪，因此RN對業務的支持能力還不到瀏覽器的5%
    • 所以僅適用於中低複雜度的低交互類頁面。面對稍微複雜一點兒的交互和動畫需求，都須要經過調用原生代碼去擴展才能實現

  • 第三階段是以Flutter爲表明的自繪引擎時代

    • Flutter是構建Google物聯網操做系統Fuchsia的SDK
    • 它使用Dart語言開發APP
    • 一套代碼能夠同時運行在iOS和Android平臺上
    • Flutter採用自帶的Native渲染引擎渲染視圖，它是本身完成了組件渲染的閉環
    • 而RN、Weex之類的框架，只是經過JavaScript虛擬機擴展調用系統組件，最後是由Android或者iOS系統來完成組件的渲染

Hybrid

  • 爲何要引入hybrid開發

    • Native應對急速業務需求，APP迭代加快，頻繁的發版已難以應付
    • Android渠道衆多，apple store審覈週期長
    • 純native開發效率低，開發維護成本高，不支持熱更新
    • 相對於其餘動態發佈技術，技術研發成本較低，使用語言更普遍，社區資源更豐富

  • 優劣勢

    • 原生APP

      • 優勢

        • 打造完美的用戶體驗
        • 性能穩定、操做速度快，上手流暢
        • 訪問本地資源（通信錄，相冊）
        • 設計出色的動效，轉場
        • 擁有系統級別的貼心通知或提醒
        • 用戶留存率高

      • 缺點

        • 分發成本高（不一樣平臺有不一樣的開發語言和界面適配）
        • 維護成本高
        • 更新緩慢，根據不一樣平臺，提交–審覈–上線 等等不一樣的流程，須要通過的流程較複雜

    • Web APP

      • 優勢

        • 發版徹底自控隨時更新開發成本小時間快

      • 缺點

        • 性能差弱網絡無網絡條件下體驗差

    • Hybrid APP

      • 優勢

        • 跨平臺
        • 開發週期短、成本低
        • 用戶體驗良好
        • 能夠即時修復bug、動態發版

      • 缺點

        • 仿原生iOS效果複雜
        • 機型兼容性

  • 總體架構

    • viewLayer（視圖層）

      • H5

        • H5頁面
        • webview引擎渲染

      • Native

        • Native頁面
        • 系統原生引擎渲染

    • coreLayer（通訊層）

      • 自定義webview資源攔截管理器

        • 內置資源管理
        • 緩存模塊
        • 文件下載模塊
      • 定義頁面跳轉管理器
      • 定義混合通訊交互模塊

  • 交互設計

    • 交互原理

      • 兩種交互

        • native主動調用前端JS
        • H5主動與native發起通訊

      • 交互過程（OC）

        • 搭建JS調用OC的橋樑，註冊供JS調用的方法name

        • JS在調用Native註冊方法

          • iOS：window.webkit.messageHandlers.自定義屬性.postMessage()
          • Android：window.自定義方法
        • Native接收JS調用，解析處理，返回回調

    • 通訊方式

      • 假跳轉的請求攔截（不建議）

        • 假跳轉的請求攔截 就是由網頁發出一條新的跳轉請求，跳轉的目的地是一個非法的壓根就不存在的地址
        • 好比：wbcst://testhost/action?params=xxx
        • 模擬http協議網絡請求 scheme://host/action?params
        • 客戶端會無差異攔截全部請求，真正的url地址應該照常放過，只有協議域名匹配的url地址才應該被客戶端攔截

        • JS調用方式

          • a標籤跳轉
          • location.href跳轉
          • iframe跳轉
        • 不建議使用，android系統對url參數作了字節限制，沒法進行大數據的通訊

      • 彈窗攔截（不建議）

        • alert

          • 彈出個提示框，只能點確認無回調

        • confirm

          • 彈出個確認框（確認，取消），能夠回調

        • prompt

          • 彈出個輸入框，讓用戶輸入東西，能夠回調
        • 不建議使用，會無差異的攔截全部前端的window彈窗

      • JS上下文注入（推薦）

        • iOS

          • WKWebView scriptMessageHandler注入

        • android

          • addJavascriptInterface注入

        • 特色

          • 不經過任何攔截的辦法，而是直接將一個native對象（or函數）注入到JS裏面，能夠由web的js代碼直接調用，直接操做

ReactNative

  • 簡介

    • 特性

      • Learn Once,Write AnyWhere
      • 提供了原生控件支持
      • 異步執行
      • 觸屏處理

    • 設計理念

      • 既擁有Native的用戶體驗
      • 又保留React的開發效率

    • 優點

      • 它對比原生開發更爲靈活，對比H5體驗更爲高效。
      • 替代傳統的WebView，打開效率更高，和原生之間的交互更方便。
      • 多個版本迭代後的今天，它已經擁有了豐富第三方插件支持
      • 更方便的熱更新

    • 劣勢

      • 儘管是跨平臺，可是不一樣平臺Api的特性與顯示並不必定一致
      • 調試’相對‘麻煩。
      • Android上的兼容性問題

    • 風險

      • 儘管Facebook有3款App(Groups、Ads Manager、F8)使用了React Native，隨着React Native大規模應用，Appstore的政策是否有變不得而知

  • 環境搭建

  • 架構設計

    • Native

    • Bridge

      • 異步（asynchronous）：不依賴於同步通訊
      • 可序列化（serializable）：保證一切 UI 操做都能序列化成 JSON 並轉換回來
      • 批處理（batched）：對 Native 調用進行排隊，批量處理
    • JavaScript

  • 組件及佈局

    • 核心組件

      • View
      • Text
      • ScrollView
      • Image
      • TextInput

    • 原生組件

      • 運行時RN爲前端組件建立相應的android和iOS視圖
      • RN就是對原生視圖的封裝

    • style

      • RN編寫的應用的樣式不是靠css來實現的
      • 而是依賴javascript來爲你的應用來添加樣式

      • 樣式聲明

        • 依賴導入

          • import React, { StyleSheet } from "react-native";
        • 調用React-Native的一個構造方法
        • 傳入一個對象生成style
        • 和React的React.createCladd()語法是同樣的，傳入對象的key就至關於類名，每一個類也是一個對象，能夠配置各類樣式參數

        • 注意

          • 對象key所有是駝峯寫法
          • 長度不加單位

        • 示例

          • const styles = StyleSheet.create({
active: {  
    borderWidth: 2,  
    borderColor: ‘#ff00ff',  
},

});

- 樣式使用

        - 外部引入

            - <View style={styles.base}></View>

        - 設置多個屬性類

            - style={[styles.base,styles.backgroundColor]}

        - 行內樣式

            -  style={{width:this.state.width}}  

- flexBox佈局

    - 什麼是FlexBox佈局

        - 彈性盒模型（The Flexible Box Module）,又叫Flexbox，意爲「彈性佈局」
        - 旨在經過彈性的方式來對齊和分佈容器中內容的空間，使其能適應不一樣屏幕，爲盒裝模型提供最大的靈活性
        - 佈局思想

            - 讓容器有能力讓其子項目可以改變其寬度、高度（甚至是順序）
            - 以最佳方式填充可用空間

    - Flex佈局基於flex-flow流

        - 水平的主軸（main axis）

            - 主軸的開始位置（與邊框的交叉點）叫作main start
            - 結束位置叫作main end

        - 垂直的交叉軸（cross axis）

            - 交叉軸的開始位置叫作cross start
            - 結束位置叫作cross end

        - 項目默認沿主軸排列，單個項目佔據的主軸空間叫作main size，佔據的交叉軸空間叫作cross size

    - 屬性

        - 4個容器屬性

            - flexDirection

                - 決定主軸的方向（即項目的排列方向）
                - row：主軸爲水平方向，起點在左端。
                - row-reverse：主軸爲水平方向，起點在右端
                - column(默認值)：主軸爲垂直方向，起點在上沿。
                - column-reverse：主軸爲垂直方向，起點在下沿。

            - flexWrap

                - 默認狀況下，項目都排在一條線（又稱"軸線"）上。flex-wrap屬性定義，若是一條軸線排不下，如何換行。
                - nowrap(默認值)：不換行
                - wrap：換行，第一行在上方
                - wrap-reverse：換行，第一行在下方。（和wrap相反）

            - justifyContent

                - 定義了伸縮項目在主軸線的對齊方式
                - flex-start(默認值)：伸縮項目向一行的起始位置靠齊。
                - flex-end：伸縮項目向一行的結束位置靠齊
                - center：伸縮項目向一行的中間位置靠齊。
                - space-between：兩端對齊，項目之間的間隔都相等。
                - space-around：伸縮項目會平均地分佈在行裏，兩端保留一半的空間

            - alignItems

                - 定義項目在交叉軸上如何對齊，能夠把其想像成側軸（垂直於主軸）的「對齊方式」。
                - flex-start：交叉軸的起點對齊。
                - flex-end：交叉軸的終點對齊 。
                - center：交叉軸的中點對齊。
                - baseline：項目的第一行文字的基線對齊。
                - stretch（默認值）：若是項目未設置高度或設爲auto，將佔滿整個容器的高度。

        - 2個項目屬性

            - flex

                - 複合屬性
                - 設置或檢索伸縮盒對象的子元素如何分配空間
                - 其中第二個和第三個參數（flex-shrink、flex-basis）是可選參數
                - 默認值爲「0 1 auto」

            - alignSelf

                - align-self屬性容許單個項目有與其餘項目不同的對齊方式，可覆蓋align-items屬性
                - 默認值爲auto，表示繼承父元素的align-items屬性，若是沒有父元素，則等同於stretch

  • UI渲染

    • 模塊注入

      • RN模塊注入

        • index->App

      • RN模塊運行入口

        • AppRegistry

          • AppRegistry經常使用方法

          • registerConfig

            • static靜態方法,用來註冊配置信息

          • registerComponent

            • 註冊組件

          • registerRunnable

            • 註冊線程

          • runApplication

            • 進行運行應用

      • 入口組件註冊

        • registerComponent

      • 加載jsbundle文件運行應用

        • runApplication

    • 頁面啓動UI渲染

      • APP啓動
      • 讀取模塊Modules
      • 初始化根視圖（RCTRootView）
      • 建立了一個實現 Objective-C 與 Javascript 交互的全局bridge（RCTBridge）
      • 讀取Javascript代碼（RCTBridgeloadSource）
      • 初始化Native模塊化信息
      • 初始化 JavaScript 代碼的執行器，即 RCTJSCExecutor 對象
      • 執行JS調用OC組件
      • 將flexbox佈局轉換成原生布局完成UI渲染

    • UI控件渲染流程

      • RCTRootView runApplication:bridge

        • 通知JS運行App

      • RCTBatchedBridge _processResponse:json error:error

        • 處理執行完JS代碼(runApplication)返回的相應，包含須要添加多少子控件的信息。

      • RCTBatchedBridge batchDidComplete

        • RCTUIManager調用處理完成的方法，就會開始去加載rootView的子控件。

      • RCTUIManager createView:viewName:rootTag:props

        • 經過JS執行OC代碼，讓UI管理者建立子控件View

      • [RCTUIManager _layoutAndMount]

        • 佈局RCTRootView和增長子控件

      • [RCTUIManager setChildren:reactTags:]

        • 給RCTRootView對應的RCTRootShadowView設置子控件

      • [RCTRootShadowView insertReactSubview:view atIndex:index++]

        • 遍歷子控件數組，給RCTRootShadowView插入全部子控件

      • [RCTShadowView processUpdatedProperties:parentProperties:]

        • 處理保存在RCTShadowView中屬性，就會去佈局RCTShadowView對應UIView的全部子控件

      • [RCTView didUpdateReactSubviews]

        • 給原生View添加子控件
      • 完成UI渲染

    • 通訊機制

      • OC生成一張模塊配置表，包含全部模塊和模塊裏的方法，根據特定的標識宏（RCT_EXPORT_MODULE()），將能夠暴露的方法暴露給JS

      • 通訊流程

        • ①js調用OC模塊暴露出來的方法
        • ②把調用方法分解爲ModuleName、MethodName、arguments，在丟給MessageQueue處理
        • ③把js的callback函數緩存在MessageQueue的一個成員變量裏面，同時生成一個CallbackID來表明callback；在經過保存在MessageQueue的模塊配置表把ModuleName、MethodName轉成ModuleID、MethodID
        • ④把ModuleID、MethodID、CallbackID和其餘參數傳給OC（JavaScriptCore）
        • ⑤OC接到消息，經過模塊配置表拿到對於的模塊和方法
        • ⑥RCTModuleMethod對js傳過來的參數進行處理
        • ⑦OC模塊方法執行完，執行block回調
        • ⑧調用第6步中RCTModuleMethod生成的block
        • ⑨block帶着CallbackID和block傳過來的參數去掉用js裏的MessageQueue方法invokeCallbackAndReturnFlushedQueue
        • ⑩MessageQueue經過CallbackID找到相應的js的callback方法
        • ⑪調用callback方法，並把OC帶過來的參數一塊兒傳過去完成回調

    • 導航路由

      • StackNavigator

        • 用來跳轉頁面和傳遞參數

        • 參數

          • RouteConfigs
          • StackNavigatorConfig

        • navigation

          • navigate

            • 跳轉到其餘頁面

            • routeName

              • 導航器中配置的路由名稱

            • params

              • 傳遞參數到下一個頁面
            • action

            • 示例

              • this.props.navigation.navigate('Find', {param: 'i am the param'});

          • state

            • 當前頁面導航器的狀態

            • params

              • 路由頁面參數

            • key

              • 路由頁面id

            • routeName

              • 路由頁面名稱

          • setParams

            • 更改路由的參數
            • 在組件掛載完成以後註冊
            • componentDidMount() {
            • this.props.navigation.setParams({param:'i am the new param'})

          • goBack

            • 返回

            • goBack()

              • 回退到上一個頁面

            • goBack(null)

              • 回退到任意一個頁面

            • goBack('pathName')

              • 回退到指定頁面

          • dispatch

            • 發送一個action

      • TabNavigator

        • 相似底部導航欄，用來在同一屏切換不一樣頁面

      • DrawerNavigator

        • 側滑菜單導航欄，用於輕鬆設置帶抽屜的屏幕

    • 拆包

      • 目的

        • 解決jsbundle體積過大
        • 按需分步加載，提升加載效率
        • 提升熱更新包diff/load效率

      • jsbundle組成

        • 頭部（Polyfills）

          • 定義基本的JS環境
          • 主要是define，require等全局模塊的定義
          • d()函數、__r()函數、__DEV 變量等

        • 中部（Module定義）

          • 模塊定義，RN框架和業務的各個模塊定義
          • 使用__d()函數定義全部用到的模塊
          • 該函數爲每一個模塊賦予了一個模塊ID，模塊之間的依賴關係都是經過這個ID進行關聯的

        • 尾部（Require調用）

          • 引擎初始化和入口函數執行
          • 使用__r()函數引用根模塊

      • 拆包方案

        • diff and patch

          • 將jsbundle經過diff，生成common和每一個業務的patch包
          • 而後在APP運行時對common和patch合併成執行的jsbundle
        • 修改RN的bundle命令打包流程，使得直接生成common+business包
        • 修改RN的unbundle命令，生成common+business包

        • 使用metro拆包

          • 基礎包和業務包打包

            • 抽離公共組件到base.js

            • base.js入口打包

              • 輸出common.jsbundle

            • index.js入口打包

              • 輸出business.jsbundle

          • 差別包打包

            • business.jsbundle基於common.jsbundle打差別包

            • 實現思路

              • business.jsbundle逐行掃描
              • 掃描內容如在common.jsbundle中沒找到，用數組存放
              • 將數組轉換爲數據保存到差別包patch.jsbundle

    • 熱更新

      • 前端業務代碼提交入庫
      • 基於熱更新平臺拆分當前項目
      • 資源打包上線CDN服務器
      • 前端資源添加版本號管理
      • 客戶端拉取前端RN資源動態更新

Flutter

  • Flutter發展歷程

    • 2014.10 - Flutter的前身Sky在GitHub上開源
    • 2015.10 - 通過一年的開源，Sky正式更名爲Flutter
    • 2017.5 - Google I/O正式向外界公佈了Flutter，這個時候Flutter才正式進去你們的視野
    • 2018.6 - 距5月Google I/O 1個月的時間，Flutter1.0預覽版
    • 2018.12 - Flutter1.0發佈，它的發佈將你們對Flutter的學習和研究推到了一個新的起點
    • 2019.2 - Flutter1.2發佈主要增長對web的支持

  • 簡介

    • Flutter 是 Google推出並開源的移動應用開發框架
    • 主打跨平臺、高保真、高性能
    • 開發者能夠經過 Dart語言開發 App，一套代碼同時運行在 iOS 和 Android平臺
    • Flutter提供了豐富的組件、接口，開發者能夠很快地爲 Flutter添加 native擴展
    • 同時 Flutter還使用 Native引擎渲染視圖，這無疑能爲用戶提供良好的體驗

  • 框架

    • Framework

      • 純 Dart實現的 SDK，相似於 React在 JavaScript中的做用
      • 它實現了一套基礎庫， 用於處理動畫、繪圖和手勢
      • 基於繪圖封裝了一套 UI組件庫
      • 根據 Material 和Cupertino兩種視覺風格區分開來

    • Engine

      • 純 C++實現的 SDK

      • 包括

        • Skia引擎
        • Dart運行時
        • 文字排版引擎等
      • 它是 Dart的一個運行時，它能夠以 JIT 或者 AOT的模式運行 Dart代碼
      • 這個運行時還控制着 VSync信號的傳遞、GPU數據的填充等，而且還負責把客戶端的事件傳遞到運行時中的代碼

    • Embedder

      • Embedder是操做系統適配層

      • 實現了

        • 渲染Surface設置
        • 線程設置
        • 平臺插件等平臺相關特性的適配

  • 組件渲染

    • 圖像顯示的基本原理

      • 顯示器的CRT電子槍從上到下一行行掃描，掃描一行完成以後，顯示器上就顯示一幀畫面，隨後電子槍回到初始位置繼續下一次掃描
      • 水平掃描時，顯示器會發出一個水平同步信號（HSync）
      • 而當一幀畫面繪製完成以後，電子槍恢復原位，準備下一次掃描以前，顯示器會發出一個垂直同步信號（Vsync）
      • 顯示器以固定的頻率刷新，這個刷新率就是Vsync信號產生的頻率

      • 圖像的顯示須要CPU、GPU和顯示器一塊兒配合完成

        • CPU負責圖像數據計算
        • GPU負責圖像數據渲染
        • 顯示器則負責最終圖像顯示
      • CPU把計算好的須要顯示的內容交給GPU
      • 由GPU完成渲染後放入幀緩衝區
      • 隨後視頻控制器根據垂直同步信號（Vsync）以每秒60次的速度
      • 從幀緩衝區讀取幀數據交由顯示器完成圖像顯示

    • Flutter繪製原理

      • 渲染流程

        • Dart
        • |
        • GPU
        • |
        • |
        • Compositor
        • Skia
        • GPU

      • 渲染流程1

        • GPU的VSync信號同步給到UI線程
        • UI線程使用Dart來構建抽象的視圖結構（這裏是Framework層的工做）
        • 繪製好的抽象視圖數據結構在GPU線程中進行圖層合成（在Flutter Engine層的工做）
        • 而後提供給Skia引擎渲染爲GPU數據，最後經過OpenGL或者 Vulkan提供給 GPU

      • UI界面繪圖流程

        • user Input

          • 用戶輸入是驅動視圖更新的信號 如：滑動屏幕

        • Animation

          • 觸發動畫進度更新

        • Build

          • 框架開始build抽象視圖數據

        • Layout

          • 視圖佈局

        • Paint

          • 視圖繪製

        • Composite

          • 視圖合成

        • Restorize

          • 最後進行光柵化處理把數據生成一個個真正的像素填充數據

  • Dart語言（基礎）

    • 簡介

      • Dart 語言在2011年10月由 Google 發佈
      • 是一種 易於學習、 易於擴展、而且能夠部署到 任何地方 的 應用 編程 語言
      • 設計的初衷是用來替換javascript的，因此剛開始Dart也就是用來做

爲瀏覽器腳本運行在瀏覽器中的，可是一直沒有被廣大開發者重視。

- Google並無放棄Dart，又Dart編寫孵化了一個移動開發框架Sky，
    - 以後又被命名爲Flutter，進入了移動跨平臺開發的領域

- 應用方向

    - 移動端開發

        - 核心是Flutter框架，它使用
        - Dart + C++ + Skia 開發，同
        - 一份代碼編寫運行在 iOS 和
        - Android 上的應用

    - 瀏覽器端

        - 咱們用Dart來寫Web後，編譯器會自動
        - 將Dart文件編譯爲JavaScript文件進行
        - 運行，只不過咱們寫的語法規範是Dart語法

    - 服務器端

        - DartVM ：就是寫服務端的應用。好比寫個
        - http 的服務，對應用提供 api ，都是及其簡單的事情。

- 環境配置

    - 手動安裝

        - 下載地址：http://www.gekorm.com/dart-windows/

    - 配置環境變量

        - 將dart-sdk的bin路徑添加到path環境變量中

    - 在vscode中安裝Code Runner插件，來調試咱們的dart代碼
    - 安裝stagehand

        - pub global activate stagehand

    - 建立dart項目

        - stagehand dart-demo

    - 獲取依賴包

        - pub get

- 經常使用內置類型

    - String

        - Dart 字符串是 UTF-16 編碼的字符序列，可使用單引號或者雙引號來建立字符串
        - 可使用三個單引號或者雙引號建立多行字符串對象
        - 可使用 r 前綴建立」原始raw」字符串
        - 能夠在字符串中使用表達式： ${expression},若是表達式是一個標識符，能夠省略 {}，若是表達式的結果爲一個對象，則 Dart 會調用對象的 toString() 函數來獲取一個字符串

    - Numbers

        - int : 整數值
        - double : 64-bit雙精度浮點數
        - int和double是num的子類

    - Booleans

        - bool對象未初始化的默認值是null

    - Lists

        - Dart中的數組稱爲List

    - Maps

        - map是一個關聯鍵和值的對象
        - 鍵和值均可以是任何類型的對象
        - 每一個鍵只出現一次

- 變量聲明

    - var

        - 相似於JavaScript中的var
        - 它能夠接收任何類型的變量
        - 但最大的不一樣是Dart中var變量一旦賦值，類型便會肯定，則不能再改變其類型
        - Dart自己是一個強類型語言
        - 任何變量都是有肯定類型的

    - dynamic

        - dynamic與var同樣都是關鍵詞
        - 聲明的變量能夠賦值任意對象
        - dynamic與Object相同之處在於,他們聲明的變量能夠在後期改變賦值類型
        - dynamic聲明的對象編譯器會提供全部可能的組合

    - Object

        - Object 是Dart全部對象的根基類
        - 也就是說全部類型都是Object的子類
        - 包括Function和Null
        - 因此任何類型的數據均可以賦值給Object聲明的對象
        - Object聲明的對象只能使用Object的屬性與方法, 不然編譯器會報錯

    - final

        - 一個 final 變量只能被設置一次
        - final變量在第一次使用時被初始化
        - 被final或者const修飾的變量，變量類型能夠省略

    - const

        - const 變量是一個編譯時常量
        - 不能更改

- 函數

    - 函數聲明
    - 對於只包含一個表達式的函數，可使用簡寫語法
    - 函數做爲變量
    - 函數做爲參數傳遞
    - 可選的位置參數
    - 可選的命名參數
    - 參考連接：https://book.flutterchina.club/chapter1/dart.html

- 類class

    - 使用類成員

        - 對象的成員包括函數和數據(分別是方法和實例變量)
        - 你調用一個方法時，你在一個對象上調用它:這個方法能夠訪問那個對象的函數和數據
        - 使用點(.)引用實例變量或方法
        - 使用?.而不是.爲了不最左邊的操做對象爲空時出現異常

    - 使用構造函數

        - 可使用一個建立函數來建立對象
        - 構造函數的名字能夠是ClassName或者ClassName.indentifier

    - 構造函數

        - 經過建立一個與其類同名的函數來聲明一個構造函數
        - 最多見的構造函數形式——生成構造函數——建立了一個類的新實例
        - this關鍵詞引用到當前的對象

    - 抽象類

        - Dart抽象類主要用於定義標準，子類能夠繼承抽象類，也能夠實現抽象類接口
        - 抽象類經過abstract 關鍵字來定義
        - Dart中的抽象方法不能用abstract聲明，Dart中沒有方法體的方法咱們稱爲抽象方法
        - 若是子類繼承抽象類必須得實現裏面的抽象方法
        - 若是把抽象類當作接口實現的話必須得實現抽象類裏面定義的全部屬性和方法
        - 抽象類不能被實例化，只有繼承它的子類能夠
        - 接口：使用implements關鍵字，通常使用抽象類定義接口。

- 包管理

    - Dart的軟件包管理器是pub。
    - 託管軟件包的存儲庫能夠在https://pub.dartlang.org/ 找到
    - 

        - 每一個Dart應用程序都有一個pubspec.yaml文件，包含了項目依賴包配置 相似package.json

    - 操做命令

        - pub get：獲取應用程序依賴的全部包
        - pub upgrade：將全部依賴項升級到較新版本
        - pub build：構建應用

- 庫

    - 自定義庫

        - import 'lib/mylib1.dart' as lib1;

    - 系統內置庫

        - import 'dart:math';
        - import 'dart:io';
        - import 'dart:convert';

    - pub包管理系統中的庫

        - import 'package:dio/dio.dart';

  • Widget與Element

    • 什麼是Widget

      • Flutter Widget採用現代響應式框架構建，中心思想是用widget構建你的UI
      • Widget描述了他們的視圖在給定其當前配置和狀態時應該看起來像什麼
      • 當Widget的狀態發生變化時， Widget會從新構建UI，Flutter會對比先後變化的不一樣， 以肯定底層渲染樹從一個狀態轉換到下一個狀態所需的最小更改
      • Widget的功能是「描述一個UI元素的配置數據」, Widget其實並非表示最終繪製在設備屏幕上的顯示元素，而它只是描述顯示元素的一個配置數據

    • Element

      • Flutter中真正表明屏幕上顯示元素的類是Element，也就是說Widget只是描述Element的配置數據

    • 基礎Widget

      • StatelessWidget

        • StatelessElement 間接繼承自Element類，與StatelessWidget相對應
        • StatelessWidget用於不須要維護狀態的場景
        • 它一般在build方法中經過嵌套其它Widget來構建UI
        • 在構建過程當中會遞歸的構建其嵌套的Widget

      • StatefulWidget

        • 和StatelessWidget同樣，StatefulWidget也是繼承自Widget類，並重寫了createElement()方法
        • 不一樣的是返回的Element 對象並不相同
        • StatefulWidget類中添加了一個新的接口createState()
        • createState() 用於建立和Stateful widget相關的狀態，它在Stateful widget的生命週期中可能會被屢次調用

      • State

        • 一個StatefulWidget類會對應一個State類，State表示與其對應的StatefulWidget要維護的狀態

        • State中的保存的狀態信息能夠

          • 在widget 構建時能夠被同步讀取
          • 在widget生命週期中能夠被改變，當State被改變時，能夠手動調用其setState()方法通知Flutter framework狀態發生改變，Flutter framework在收到消息後，會從新調用其build方法從新構建widget樹，從而達到更新UI的目的

        • 經常使用屬性

          • widget

            • 它表示與該State實例關聯的widget實例
            • 由Flutter framework動態設置

          • context

            • StatefulWidget對應的BuildContext
            • 做用同StatelessWidget的BuildContext

        • 生命週期

          • StatefulWidget launched

          • initState

            • 當Widget第一次插入到Widget樹時會被調用
            • 對於每個State對象，Flutter framework只會調用一次該回調
            • 一般在該回調中作一些一次性的操做，如狀態初始化、訂閱子樹的事件通知等

          • didChangeDependencies

            • 當State對象的依賴發生變化時會被調用

          • build

            • 它主要是用於構建Widget子樹的

            • 會在以下場景被調用

              • 在調用initState()以後
              • 在調用didUpdateWidget()以後
              • 在調用setState()以後
              • 在調用didChangeDependencies()以後
              • 在State對象從樹中一個位置移除後（會調用deactivate）又從新插入到樹的其它位置以後

          • reassemble

            • 此回調是專門爲了開發調試而提供的
            • 在熱重載(hot reload)時會被調用
            • 此回調在Release模式下永遠不會被調用

          • didUpdateWidget

            • 在widget從新構建時
            • Flutter framework會調用Widget.canUpdate來檢測Widget樹中同一位置的新舊節點，而後決定是否須要更新
            • 若是Widget.canUpdate返回true則會調用此回調

          • deactivate

            • 當State對象從樹中被移除時，會調用此回調

          • dispose

            • 當State對象從樹中被永久移除時調用
            • 一般在此回調中釋放資源
          • StatefulWidget destoryed

      • 基礎組件

        • Text

          • Text用於顯示簡單樣式文本，它包含一些控制文本顯示樣式的一些屬性

        • Image

          • Flutter中，咱們能夠經過Image組件來加載並顯示圖片，Image的數據源能夠是asset、文件、內存以及網絡

        • Container

          • Container是Flutter裏很經常使用的容器組件， Container能夠建立矩形視覺元素

      • 佈局類組件

        • 線性佈局

          • Row
          • Column

        • 彈性佈局

          • Flex

        • 流式佈局

          • Wrap
          • Flow

        • 層疊佈局

          • Stack
          • Positioned

        • 對齊與相對定位

          • Align

Weex

小程序

快應用

ionic

  • 簡介

    • ionic是一個用來開發混合手機應用的，開源的，免費的代碼庫
    • 能夠優化html、css和js的性能，構建高效的應用程序
    • 能夠用於構建Sass和AngularJS的優化

  • 特色

    • 具備原生APP的卓越運行性能
    • 可維護性高
    • 漂亮的Ui設計
    • 輕量級框架
    • 具備強大的命令行工具
    • 與AngularJS完美結合

  • 框架結構

    • CSS框架

      • 提供原生App質感的CSS樣式模擬
      • ionic這部分的實現使用了ionicons圖標樣式庫

    • JavaScript框架

      • 提供移動Web應用開發框架
      • ionic基於AngularJS基礎框架開發
      • 遵循AngularJS的框架約束
      • ionic使用AngularJS UI Router實現前端路由

    • 命令行/CLI

      • 命令行工具集用來簡化應用的開發、構造和仿真運行
      • ionic命令行工具使用了 Cordova，依賴於平臺SDK（Android & iOS）實現將移動web項目打包成原生app

  • 基本佈局

  • 交互通訊

Cordova

  • 簡介

    • Cordova提供了一組設備相關的API
    • 經過這組API，移動應用可以以JavaScript訪問原生的設備功能，如攝像頭、麥克風等
    • Cordova還提供了一組統一的JavaScript類庫，以及爲這些類庫所用的設備相關的原生後臺代碼
    • Cordova支持以下移動操做系統：iOS, Android,ubuntu phone os, Blackberry, Windows Phone, Palm WebOS, Bada 和 Symbian

  • 架構

    • Web APP端

      • config.xml

        • CLI初始化項目在主目錄下生成

        • 包含了整個app的一些基本信息

          • appName
          • app入口文件
          • 白名單
          • webview初始化的一些配置
          • plugin信息
          • 圖標資源信息
      • Resources
      • HTML、JS、CSS

      • cordova.js核心代碼

        • exec

          • 這是cordova 中js端的核心執行代碼，全部的plugin的執行入口
          • successCallback -- 成功的回調
          • failCallback -- 失敗的回調
          • service -- 所調用native plugin的類
          • action -- 所調用native plugin的類下的具體method
          • actionArgs -- 具體參數

        • pokeNative

          • JS通知Native調用native方法
          • 經過Webview相關協議攔截前端URL
          • JS端經過iframe發送request的相關請求

        • nativeCallback

          • native處理完前端請求後觸發回調的統一入口
          • 以同步的方式來觸發native -> js 的callBack

        • callbackFromNative

          • JS執行回調的地方
          • 根據cordova.callBacks的map以及回調的callBackId 還有狀態（success 或者 fail）來執行相應的回調函數
          • 以後根據keepCallback來決定是否將該回調從callBacks的map中移除

    • Native端

      • cordova webview 引擎具體實現

        • CDVViewController

          • init --- 初始化程序
          • loadSettings --- 解析config.xml 將pluginsMap startplugin settings startPage等變量初始化到容器controller中，初始化plugin字典
          • viewDidLoad --- 先loadSettings，以後建立特殊存儲空，根據CDVUIWebViewEngine初始化Webview，而後獲取appURL加載index.html

        • CDVUIWebViewEngine

          • initWithFrame --- 建立webview
          • pluginInitialize --- 初始化webView中的一系列設置,建立delegate（CDVUIWebViewDelegate）
          • getConmmandInstance --- 獲取command的實例

      • 容器初始化以及plugin初始化

        • Acceleromter
        • Geolocation
        • Carmera
        • Media
        • Device
        • Network
        • Contacts
        • Storage

  • JS&Native通訊

    • 通訊原理

      • 保存Cordova_plugin.js的 插件文件名字和地址
      • 插件的API呼出時，經過調用Cordova的exec模塊將API的參數保存在CommandQueue的隊列中。 CALLBACK則保存在JS側的callbacks map裏面
      • 添加一個空的iframe,iframe的src則指向gap://ready
      • 3的iframe的src設置之後，NATIVE側UIWebviewDelegate#shouldStartLoadWithRequest則被呼出來
      • Webview的Delegatet判斷gap://ready的狀況下，則執行commandDelegate的處理
      • commandDelegate則從JS側取出API的參數，內部實現則是經過 UIWebview＃stringByEvaluatingJavaScriptFromString的返回值 取得CommandQueue裏面的參數轉換成JSON數據
      • 根據6的插件，執行NATIVE定義的插件實例
      • 插件中，有CALLBACK的狀況下，成功失敗的結果經過UIWebview＃stringByEvaluatingJavaScriptFromString執行JS，JS端則根據傳過來的CALLBACKID，從callbacks map取出回調函數並執行

    • 通訊方式

      • iframe的方法（默認）
      • xmlHttpRequest的方法（iOS5.x版本由於 -webkit-scroll的IFRAME有BUG，則推薦使用）

  • 插件導入流程

    • Native

      • APP啓動，MainViewController初始化之時，queue和command的DELEGATE初期化
      • config.xml文件解析，插件名設置到數組，插件文件和插件名設置到pluginMap,屬性設置到setting
      • 在Webview類裏面，加載index.html,index.html裏面加載cordova.js、開始初期化

    • JS

      • 加載cordova.js時、內部的事件設置模塊，NATIVE交互模塊，初期化模塊，插件加載
      • 插件模塊是cordova_plugins.js文件定義的插件文件地址，文件名保存的MAP
      • deviceready事件發佈後，插件的API可使用了
      • 插件API執行後，模塊MAP將插件文件加載，執行exec函數
      • 在index.html裏面添加一個空的iframe、指定src=gap://ready，通知到Nativie

PWA

WebAssembly

Electron

VasSonic

QT

性能優化和監控

性能優化（基礎）

  • 內容層面

    • DNS解析優化

      • DNS緩存
      • 減小DNS查找
      • keep-alive
      • 適當的主機域名
    • 避免重定向
    • 切分到多個域名
    • 杜絕404

  • 網絡傳輸階段

    • 減小傳輸過程當中的實體大小

      • 緩存
      • cookie優化
      • 文件壓縮

    • 減小請求的次數

      • 文件適當的合併
      • 雪碧圖
    • 異步加載
    • 預加載、延後加載、按需加載

  • 渲染階段

    • js放底部，css放頂部
    • 減小重繪和迴流
    • 合理使用Viewport 等meta頭部
    • 減小dom節點
    • BigPipe

  • 腳本執行階段

    • 緩存節點，儘可能減小節點的查找
    • 減小節點的操做（innerHTML）
    • 避免無謂的循環，break、continue、return的適當使用
    • 事件委託

大前端時代監控

  • 大前端時代前端監控的新變化

    • 大前端時代有哪些變化

      • 首先是Gmail的橫空出世，開啓了SPA的時代
      • Backbone/Angular等框架帶來了MVVM模式的同時，也把JS從腳本語言提高到了工程語言
      • React Native/Weex把移動端開發從Hybrid模式進化到了跨端開發模式
      • Node.js問世爲前端帶來了更多的可能性

    • 前端變化給監控帶來了什麼樣的改變

      • 傳統監控模式可否適用於新的技術？好比PV統計
      • SPA模式下首屏如何計算？
      • 跨端開發給監控帶來什麼什麼挑戰？
      • 前端監控的上報模式在Node.js端是否合理？

    • SPA模式下的PV統計問題

      • 技術升級、體驗升級、PV降低？

      • 緣由

        • 頁內路由代替了新的頁面

      • 解決辦法

        • hash路由：監聽hash change變化上報PV
        • 非哈希路由：輕量hack pushState和replaceState

    • 首屏統計

      • 第一階段：自定義打點時期

        • 頁頭和首屏dom分別經過 new Date()打點
        • 計算差值做爲首屏時間
        • 再加上setTimeout(new Date(), 0)標記首屏可交互時間

      • 第二階段：W3C標準時期

        • W3C性能小組引入了 Navigation Timing API 幫咱們自動,精準的實現了性能測試的打點問題

        • Navigation Timing API

          • 卸載上一個頁面
          • 重定向
          • 應用緩存
          • DNS域名解析
          • TCP連接
          • 請求頁面
          • 響應
          • 頁面處理
          • 觸發load事件
      • 第三階段：SPA盛行致使W3C標準失去原來的意義

      • 現階段：用戶感官指標FMP

        • first meaning paint
        • 主要內容可見時間

  • 前端監控的最佳實踐

    • 主動監控

      • 配置告警規則
      • 經過錯誤聚類模塊，精準定位問題
      • 增長性能樣本分佈統計
      • 再手起刀落，修復bug
    • 慢會話追蹤
    • 搜索報錯明細
    • 出錯行爲還原
  • 58北斗監控實現
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程