生日之際，記錄本身前端拼搏之路~

時間 2019-11-07

標籤生日之際記錄本身前端拼搏之路简体版

原文原文鏈接

時間過得真快！！！css

生日之際，從大學到如今，本身學習並實踐過認爲比較有用的技術點，也是常見面試考點...html

前端學習記錄前端

Html5

對WEB標準以及W3C的理解與認識
Html5新特性與語義化
行內元素與塊級元素
漸進加強與優雅降級的理解及區別
cookie、sessionStorage、localStorage原理與區別
....

CSS3

CSS盒模型
獲取盒子寬高的幾種方式及區別
Flex與Grid佈局
CSS常見選擇器
BFC
浮動與定位
常見的頁面佈局
CSS3新特性
常見單位
移動端視口配置
文字、盒子水平垂直居中
CSS3畫三角形、六邊形等
link和@import有什麼區別
常見兼容性問題
....

jQuery

jQuery的好處
jQuery選擇器與css選擇器的區別
jQuery對象與Dom對象
jQuery中的Ajax
DOM元素的增刪改查
DOM元素的遍歷
- 同胞元素
- 後代元素
- 祖先元素
jQuery淡入淡出與動畫
jQuery尺寸
jQuery事件
window.onload 事件和 jQuery ready 函數有何不一樣
....

JS

原始類型與對象類型及對象之間的轉換
構造函數、實例、原型、原型鏈、繼承等
實現繼承的方式及優缺點
typeof & instanceof
原生ajax
對象深淺拷貝
this的理解
函數柯里化、高階函數
bind、call、apply用法及區別
字符串、數組、對象、日期等的屬性與方法
瀏覽器對象
- Window對象
- History對象
- Location對象
- Screen對象
三你們族和一個事件對象
- Offset家族
- Scroll家族
- Client家族
- Event事件
Event-Loop 事件循環
- js 運行機制
- 進程與線程
- 宏任務與微任務
- Node中的Event-Loop
原生DOM增刪改查
常見的模塊化
做用域、閉包與當即執行函數等
同步與異步
常見的循環及區別
- for...in
- for...of
- ....

ES6+

let 與 const
異步解決方案
- 回調函數
- Promise
- Generator
- Async/Await
箭頭函數
模塊化（export & import）
解構賦值（主要：數組和對象）
數組、字符串、函數、日期等擴展方法
默認值、擴展運算符
數組forEach、some、every、map、filter、reducer等方法的使用及區別
Proxy
...

Stylus Sass Less

常見三個預處理的用法及區別
常見功能
- 變量
- 嵌套
- 導入
- 繼承
- Mixins
- 循環 & 判斷
- ....

TypeScript

TypeScript特色及理解
Typescript經常使用語法
- 基礎類型
- 布爾值 boolean
- 數字 number
- 字符串 string
- 數組 number[] Array
- 元祖 Tuple
- 枚舉 enum
- any
- void
- null & undefined
- never
- object
類型斷言
變量聲明
接口
類
函數
泛型
類型判斷
高級類型
....
Typescript集成在React項目中
Typescript集成在Vue項目中

Webpack4.x

Webpack配置文件常見選項
- 入口文件-entry
- 出口文件-output
- 模塊-module
- 插件-plugins
- 模式-mode
- 開發服務器-devServer
- 解析-resolve
- 源碼調試-sourceMap
- ....
經常使用Loader
- 處理CSS文件
  - css-loader style-loader less less-loader node-sass sass-loader stylus stylus-loader
- 添加CSS3前綴
  - postcss-loader autoprefixer
- 處理ES6文件及更高級語法
  - babel-loader @babel/core @babel/preset-env @babel/runtime @babel/plugin-proposal @babel/plugin-proposal-class-properties @babel/plugin-transform-runtime
- 處理圖片、字體等文件
  - file-loader url-loader html-withimg-loader
- ....
經常使用Plugin
- 生成HTML文件 Html-webpack-plugin
- 刪除dist目錄 clean-webpack-plugin
- 壓縮css文件 optimize-css-assets-webpack-plugin
- 壓縮js文件 uglifyjs-webpack-plugin
- 複製目錄插件 copyWebpackPlugin
- 添加版權聲明 bannerPlugin
- 提取css文件 mini-css-extract-plugin extract-text-webpack-plugin
- ....
常見優化
Webpack 自帶優化
- noParse 不去解析某依賴包中的依賴關係 jquery
- IgnorePlugin 加載某依賴時，忽略某文件 moment
- DllPlugin、DllRederencePlugin 動態連接庫 react
- Tree-Sharking、 Scope-Hosting
引入依賴
- expose-loader 暴露到window上
- providePlugin 給每一個模塊都注入
- externals選項 CDN引入不打包
定義環境變量 DefinePlugin
不一樣環境【common、dev、prod】
多線程打包 happypack
抽離公共代碼
懶加載 & 熱加載
打包單頁&多頁應用
Webpack跨域 & watch用法
優化構建速度
分析打包結果
Webpack & Grunt & Gulp的區別
手寫loader
手寫plugin
手寫簡易版的webpack
- babylon 將源碼轉換成AST
- @babel/traverse 遍歷節點
- @babel/types 替換節點
- @babel/generator 將替換好的節點生成
理解Tapable

Vue全家桶

MVC & MVVM的理解
Virtual DOM的理解
數據雙向綁定 & 組件化
Vue常見API
常見選項
- methods watch computed filter mixins ...
經常使用指令
- v-for v-pre v-html v-bind v-model...
經常使用組件
- transition transition-group keep-alive slot ...
set slots forceUpdate...
動態綁定class & style
Vue生命週期
Vue監聽數組
組件的封裝
Vue-cli2.x & Vue-cli3.x
組件間的通訊
- 父子組件
  - 父組件向子組件 props $children
  - 子組件向父組件 parent
- 非父子組件兄弟組件
  - 中央事件總線 EventBus
  - listeners inheritAttrs
  - provide inject
  - ....
Vue-loader的理解
Vue-Router的理解
- router-link
- router-view
導航方式
- 編程式導航
- 聲明式導航
命名路由 & 命名視圖
- name屬性 -> {name:, params:}
- router-view的name屬性與components對應
動態路由及路由組件間傳參
- name + params方式
- path + query方式
router & route的理解
導航守衛
- 全局守衛
- 組件內守衛
- 路由獨享守衛
路由懶加載
- vue異步組件
- es提案的import()
- webpack的require ensure()
Vuex的理解及使用場景
Vuex核心概念
- State
- Getters
- Mutations
- Actions
- Modules
腳手架搭建Vue全家桶項目
服務端渲染SSR
- 首屏渲染 & SEO 問題
- Nuxt.js

React全家桶

JSX語法
屬性props & 狀態state
React生命週期
React優化
- shouldComponentUpdate
函數組件 & 類組件 & 高階組價
Fiber的理解
React Hooks
- useState
- useEffect
- useContext
- useReducer
- ....
React-Router-Dom
React路由的原理
經常使用API
- BrowserRouter & HashRouter
- Route
- Link & NavLink
- Switch
- Prompt
- Redirect
- ....
- match location history對象
Redux
對Redux的理解
Action建立函數
經常使用API
- State
- Action
- Reducer
- createStore
- combineReducers
- applyMiddleware
- bindActionCreators
- compose
Store經常使用方法
- getState
- dispatch
- subscribe
react-redux
- Provider
- connect
  - mapStateToProps
  - mapDispatchToProps
處理異步 redux-thunk

ReactNative & Weex

搭建RN環境 & Weex環境
Flexbox佈局
導航間數據傳遞
公共組件的封裝
經常使用組件
- 列表組價 FlatList (上拉刷新、下拉加載)
- 數據存儲組件 AsyncStorage
- 提示符組件 ActivityIndicator
- 滾動組件組件 ScrollView
- 狀態欄組件 StatusBar
- 加載網頁組件 WebView
- 動畫組件 Animated
- 樣式組件 StyleSheet
- 獲取屏幕組件 Dimensions
- ....
RN項目經常使用第三依賴
- 圖片縮略圖
  - react-native-image-picker
  - react-naitve-progress
  - react-native-image-resizer
- 導航
  - react-navigation
  - react-native-router-flux
- 啓動屏
  - react-native-splash-screen
- 微信 & 支付寶支付
  - react-native-wechat
  - react-native-yunpeng-alipay
- 熱更新
  - react-native-code-push
視圖組件庫
- antd-mobile-rn
- ....
RN項目安卓 & IOS打包

後端學習記錄vue

Node

對Node的認識
事件循環 & EventEmitter
建立簡單的服務器
模塊化
- exports
- module.exports
核心模塊
- npm
- path
- fs
- buffer
- stream
- http & https
- tcp
- process
- ....
使用Node開發企業官網項目

Express

request & response對象屬性和方法
GET & POST請求
靜態文件 static
路由中req, res對象中的屬性
對中間件的理解
經常使用中間件
- body-parser
- cookie-parser
- ....

Koa2

對Koa2的理解
與Express的區別
理解核心對象
- Application
- Context
- Request
- Response
常見中間件
中間件的概念
- koa-body
- koa-bodyparse
- koa-multer
- koa-router
- koa-static
- koa-compose
- Koa2路由的使用

Java

JDK安裝
常見數據類型的屬性與方法
面向對象的特性
- 繼承
- 封裝
- 抽象
- 多態
集合類
- Collection
- List Arraylist LinkedList
- Set HashSet
- Map HashMap
- Vector
- ....
線程
實現方式
- 繼承Thread類
- 實現Runnable接口
建立Java鏈接Mysql、Redis工具類
理解Java項目的MVC三大架構
整合SSH項目
- Spring
- SpringMVC
- MyBatis
- ....

SpringBoot

SpringBoot的使用及優勢
配置文件格式
- .properties
- .yml
搭建SpringBoot+MyBatis項目
SpringBoot項目中經常使用註解
SpringBoot項目實現分頁和排序功能
SpringBoot整合Swagger
整合模板
....

Http協議與數據請求

Http請求與響應對象
TCP三次握手、四次揮手
Http常見方法與狀態碼
方法
- GET
- POST
- PUT
- HEAD
- DELETE
- ....
狀態碼
- 1xx 信息類
- 2xx 成功類
- 3xx 重定向
- 4xx 客戶端錯誤
- 5xx 服務端錯誤
長鏈接與管線化
Etag & Expires & Cache-control等理解
兼容版原生Ajax
Fetch
Axios
Flyio
....

瀏覽器

從輸入URL到頁面加載的全過程
瀏覽器緩存
重繪 & 迴流
常見瀏覽器及其內核
....

算法

數組
- 數組排序
- 數組去重
- 扁平化數組
- 求數組中最大值和最小值
- ....

排序方式

冒泡排序
選擇排序
快速排序
遞歸
....

代碼管理

Git
- 常見命令
- git clone
- git status
- git add .
- git commit -am 'xxxx'
- git pull origin dev
- git push -u origin dev
- git branch / -r
- git checkout dev
- git stash
- ....
GitHub & GitLab & Gitee
- 如何建立在這些平臺上常見代碼倉庫
- 如何將本地項目與遠程倉庫關聯
- 使用GitHub搭建我的博客
- ....

UI層框架

BootStrap
iView
Andt Design
Element UI

數據庫

MySql
- Mac上安裝Mysql
- Mysql常見增刪改查SQL語句
- Java鏈接Mysql
- Node鏈接Mysql
- ....
MonogoDB
- Mac上安裝MonogoDB
- MonogoDB常見增刪改查SQL語句
- mongoose
- Node鏈接MonogoDB
- ....
Redis
- Mac上安裝Redis
- Redis支持的數據類型
  - String
  - List
  - Set
  - Sorted Set
  - Hash
  - Java使用Redis
  - Node使用Redis
  - ....

小程序

微信小程序
- 理解微信小程序的原理
- 基礎
  - 單位
  - 數據綁定
  - 生命週期
  - 列表渲染
  - 頁面跳轉
  - tarBar
  - ....
- 受權獲取用戶信息
上拉刷新 & 下拉加載
request請求
各個文件表明的意思
頁面跳轉及傳遞參數
代碼審覈與發佈
經常使用組件
- view
- scroll-view
- swiper
- ....
MpVue
- 語法和vue很像

編輯器

VSCode & WebStrom & IDEA
- VSCode經常使用插件
- WebStorm與IDEA永久安裝
- 經常使用快捷鍵
- ....

部署與運維

Linux
- Mac上安裝Linux
- Linux目錄結構及說明
- Linux在工做中經常使用指令
  - ssh
  - cp
  - ln
  - tar
  - ....
FileZilla & XShell & WinSCP
- Mac上這些軟件的安裝
- 如何鏈接遠程服務器
- ....