沉默

時間 2019-11-20

標籤沉默简体版

原文原文鏈接

#### koa的源碼是面試必須問的，由於太簡單了。

#### 9月16日的計劃。

複習webpack課程和promise和node。

和第六期的課程。

牛客網的題。

掘金。優秀博客。

搞清楚如何發一個npm的包和@aaa域名下的包。不一樣的源下的包發哪裏去了哈。

jenkins的 devOps。

大師分享的ppt.git reset 以後發生了什麼。

=================

題1 http://www.javashuo.com/article/p-dmngwevj-g.html

題2 https://baijiahao.baidu.com/s?id=1624047253519943985&wfr=spider&for=pc

題3 http://www.javashuo.com/article/p-wuxucrdi-dw.html

題4： http://www.javashuo.com/article/p-hzbjqalr-ch.html promise相關的。

題5： http://www.javashuo.com/article/p-nmzebcww-k.html

面6： http://www.javashuo.com/article/p-fyzixthw-cc.html

面7： https://blog.ihoey.com/posts/Interview/2018-02-28-alibaba-interview.html

重要的往前拓展，不重要的不屬於常人。

前端生態圈發展的很是好了，不少東西很完善，通常的開發者均可以搭建一套合理的開發環境。

天天必看的掘金文章 http://www.javashuo.com/article/p-ydatdini-gn.html

js點滴 http://www.javashuo.com/article/p-zcurlrvp-g.html

js點滴2 http://www.javashuo.com/article/p-gktxgpia-gg.html

css沉默 http://www.javashuo.com/article/p-pcuclonl-ge.html

☀AMD 和 CMD 的區別有哪些？☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀

https://www.zhihu.com/question/20351507/answer/14859415

☀webpack相關的☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀

##### webpack 多頁面打包方式。

##### webpack 優化。

##### webpack 插件和loader區別和聯繫。

##### webpack 打包用到的哪些插件。

##### 所有打包和部分打包。

=== webpack,parcel

1 做用。

2 構成。

3 如何理解0配置的。

webpack打包 http://www.javashuo.com/article/p-sjmydixp-gk.html

parcel 入門 http://www.javashuo.com/article/p-yqrvpqkp-y.html
webpack 與parcel對比 http://www.javashuo.com/article/p-ecempczq-bn.htmljavascript

webpack 的resolve配置瞭解對比 http://www.javashuo.com/article/p-xnaaxcin-gd.htmlcss

Lerna https://blog.csdn.net/scq000123/article/details/87949042html

parcel的優勢：

極速打包時間   
將你全部的資源打包 
自動轉換   
零配置代碼     
自動熱加載   
友好的錯誤日誌

Parcel能作到無配置完成以上項目構建要求；
Parcel內置了常見場景的構建方案及其依賴，無需再安裝各類依賴；
Parcel能以HTML爲入口，自動檢測和打包依賴資源；
Parcel默認支持模塊熱替換，真正的開箱即用；

 

parcel的缺點：

（1） 生態還不是和完善，插件什麼的不是很晚上。
  (2)  不太適合大項目。
（3） 不支持SourceMap
（4） 不支持剔除無效代碼(TreeShaking)
（5） 一些依賴會讓Parcel出錯
  (6) 不靈活的配置

沒法控制對部分文件的特殊處理，以實現諸如按需加載這樣的需求；
沒法控制輸出文件名的Hash值和名稱；
沒法控制構建輸出目錄結構；
沒法映射路徑以縮短導入語句；
HTTP開發服務器不支持HistoryApi；

☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀

##### npm包管理的理解。 Yarn.

npm 最全的資料 http://www.javashuo.com/article/p-mxfhxkep-ba.html

https://www.jianshu.com/p/254794d5e741

http://www.javashuo.com/article/p-gxiahuiq-gc.html

http://www.javashuo.com/article/p-mxfhxkep-ba.html

http://www.javashuo.com/article/p-dbjmfmjr-gn.html

npm 經常使用命令詳解

http://www.javashuo.com/article/p-curowqah-gc.html

npm view jquery versions
npm view jquery version
npm list

npm 是如何解決不一樣的包依賴的版本不一樣的。前端

flat全部的包。不一樣版本就安裝不一樣的版本。而後軟連接過去。 vue

☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀

##### vue express ,koa.

#### koa

https://codesandbox.io/s/koa-testyan-v5p84

ejs 語法 https://www.jianshu.com/p/b67d172f969e

##### nodejs中間件。

##### ssh 渲染頁面的方式。nuxt.js egg.js

##### 有時間瞭解下這個 nodemon --inspect 包。html5

##### 你用過或者瞭解的node包有哪些。java

☀http☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀node

babel react

關於babel https://www.jianshu.com/p/0dc3bddb6da8jquery

☀http☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀

##### 用戶登錄的驗證方式。 jwt

http://www.javashuo.com/article/p-qmmkmkoj-ko.html

http://www.javashuo.com/article/p-tozwfbpm-gb.html

##### 單點登陸

http://www.javashuo.com/article/p-fbbgotyh-kn.html

##### http 請求的方式。

##### 跨域。

http://www.javashuo.com/article/p-stfsggzd-cg.html

##### html5 window.postmessage

http://www.javashuo.com/article/p-uyfsofag-dg.html

##### http的字段協議，表單提交的方式

##### xss csrf

##### http https的區別和聯繫。

### https:  利用對稱加密和非對稱加密。
#### 過程: 用戶aaa訪問某網站xxx
1. aaa發起請求到xxx網站。
2. xxx返回了本身的公鑰ggg和一些信息。
3. aaa拿到這些信息去Ac權威機構證實一下（後邊講這個不被竊取的原理）。
4. Ac告訴aaa這個公鑰和信息對得上，是正確的。
5. aaa本身生成一個私鑰sss，而後用這個公鑰ggg加密這個私鑰發給xxx.
6. 只有xxx的私鑰能夠解開這個公鑰ggg的信息獲取到這個私鑰sss。
7. 而後aaa和xxx之間的聯繫就是用這個私鑰sss加密.

#### 分析 若是aaa和xxx之間存在代理服務器ttt，若是保證ttt解密不了這些數據。
1. aaa用xxx的公鑰ggg加密私鑰sss,這個信息只有xxx網站本身的私鑰能夠解密。即便ttt獲取到了，由於不知道ggg對應的私鑰沒法解密。因此私鑰ggg永遠沒法獲取到sss，永遠不知道他們之間在說什麼。

#### 分析 代理服務器ttt爲何不能在aaa獲取證書ggg和aaa從Ac求證的過程當中作手腳呢。
1. Ac的私鑰瀏覽器都有內置的。利用Ac加密的信息只有Ac的公鑰能夠解密。這樣ttt永遠不知道用戶aaa在和ac之間傳遞的什麼信息。
2. 而當Ac瀏覽器返回信息ok,ok的時候，雖然代理服務器ttt知道說的ok可是永遠不知道在說什麼是ok的。

http://www.javashuo.com/article/p-uatyksok-bb.html

##### https的證書本身怎麼去搭建。

☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀

### mvc mvp mvvm

https://blog.csdn.net/victoryzn/article/details/78392128

http://www.ruanyifeng.com/blog/2015/02/mvcmvp_mvvm.html

###mvc 
Model: 模型（用於封裝與應用程序的業務邏輯相關的數據以及對數據的處理方法）
View: 視圖（渲染頁面）
Controller: 控制器（M和V之間的鏈接器，用於控制應用程序的流程，及頁面的業務邏輯）
=== 耦合性低,重用性高,生命週期成本低,可維護性高,部署快

###mvp
Presenter
View 與 Model 不通訊，都經過 Presenter 傳遞。Presenter徹底把Model和View進行了分離，主要的程序邏輯在Presenter裏實現。
在MVP中，View並不直接使用Model，它們之間的通訊是經過Presenter (MVC中的Controller)來進行的，全部的交互都發生在Presenter內部。 
優勢: (1)能夠更高效地使用模型，由於全部的交互都發生在一個地方——Presenter內部；(2)能夠脫離用戶接口來測試這些邏輯（單元測試）。

###mvvm
MVVM是Model-View-ViewModel的簡寫。
MVVM模式實際上是MV模式與WPF結合的應用方式時發展演變過來的一種新型架構模式。
與Mvp的區別是,採用雙向綁定（data-binding）：View的變更，自動反映在 ViewModel，反之亦然。

###### angualr react vue 三大框架的對比。

0. 三個框架的對比。

#### vue 漸進式的前端mvvm框架。核心。雙向綁定,虛擬dom,diff比較更新,高效。容易與其餘框架結合。中文生態圈很好。輕量高效。免費開源。vue的組件三大核心，屬性事件插槽。

2014年2月開源。
漸進式:易上手，靈活。
核心庫：vue vue-router vuex vue-cli
生態圈的庫: element axios nuxt.js

#### react facebook公司2013年推出開源庫。如今到了react ,16.8.6版本了吧。核心，虛擬dom,mvvm雙向綁定,單向數據流，組件化開發。
核心庫. react react-dom redux
生態的庫 React-Bootstrap Ant-design SemanticUI next.js

#### angular 2009年和node一塊兒出現的。
Angular 1 是指 AngularJS,典型的 MVC 架構 ,Angular 2 是面向 mobile app 的架構，爲了達到APP 原生的效果， Angular 2 特有引入了 NativeScript 技術。Angular 2 解決了 mobile app 跨平臺的問題.(ios,android).
angular2也能夠說是mvc,或者mvvm框架。基於typescript,angular4比angular2更快,基於component,推崇directive,pipe, 依賴注入。

核心庫: @angular/core,@angular/common,@angular/forms,@angular/router
生態庫: rxjs,ng-zorro,ng-alain

1. 數據流你如何理解單向數據和雙向數據流在三大框架中是如何體現的。

angular    若是父給子傳了一個指針對象。父改變指針對象，父和子的dom都會改變。若是子改變指針對象的某一個屬性，子和父的dom都會改變。子改變指針對象（引用修改），子的dom會改變，父的dom不會。Input只能檢測到指針對象引用的改變。 

react 若是父給子傳了一個指針對象。父改變指針對象，父與子的dom都會改變。子沒法修改父傳給子的state。子只能經過emit高速父修改。
vue 若是父給子傳了一個指針對象。父改變指針對象，父與子的dom都會改變。若是子改變指針對象的某一個屬性，子和父的dom都會改變。子改變指針對象（引用修改）,那麼會報錯。

1.5 Vue與React的區別

對已經瞭解的內容，作幾點介紹，並不全面，後期會不斷更新~

React與Vue都是組件化的開發框架，總體功能相似。
1、數據處理模式（單項 or 雙向）：
React推崇單項數據流的處理模式，數據不能夠直接改變，每次改變數據需經過setstate返回新的數據。react的dom變化，必須經過事件返回給數據,而vue則不須要經過事件，直接就改變了。
Vue推崇雙向數據流的處理模式，是響應式，能夠雙向綁定。

2、寫法（函數式 or 聲明式）：
React3.0以前是類式的組件化寫法，3.0新版本以後是函數式的組件化寫法（組件不少，api不多）
Vue是聲明式的組件寫法（相比React來講，api不少）

3、開發方式（全程js or 組合到一個頁面當中）：
React全程都是js，用js老生成html，所以有了JSX
Vue是將html、css、js放在一個文件當中，開發出單頁面應用程序

2 三個的數據狀態的對比。vuex react-redux service

http://www.javashuo.com/article/p-zfwesixs-en.html

#### 命令式編程，聲明式編程和函數式編程

命令式編程
注重過程，告訴計算機一步步一步步的如何去作。
聲明式編程
注重結果，只須要關注開發須要關注的事情，對於開發不須要的框架幫咱們完成好比map。咱們只關心遍歷的時候須要作什麼，置於遍歷的過程咱們並不關心。

函數式編程
函數式編程和聲明式編程是有所關聯的，由於他們思想是一致的：即只關注作什麼而不是怎麼作。但函數式編程不只僅侷限於聲明式編程。
函數式編程最重要的特色是「函數第一位」，即函數能夠出如今任何地方，好比你能夠把函數做爲參數傳遞給另外一個函數，不只如此你還能夠將函數做爲返回值。大部分常見的編程語言一半都已經提供了對這種編程方式的支持，好比 JavaScript，再有 C# 中的 LINQ 和 Java 中的 Lambda 和閉包的概念。
js 的箭頭函數。map函數。純函數和不純函數。函數能夠做爲參數傳遞。

☀angular☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀

##### 猴子補丁。

一開始加載的時候，替換掉原來的方法或者模塊。

##### zone.js https://www.jianshu.com/p/3a929e289dce

☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀☀

##### 瀏覽器，兼容。

##### 無頭瀏覽器的調用。兼容性。

https://ppt.baomitu.com/d/1fd2314a#/3

##### 路由切換的問題。 History模式。和hash 模式。

http://www.javashuo.com/article/p-cxuhinat-gp.html

https://www.jb51.net/html5/bar.html

#### js 序列化解決的問題

##### js map的問題。

##### CoffeeScript

##### css js中的路徑如何配置爲絕對路徑。

##### 模版引擎pug,ejs.jade有什麼區別和聯繫。

#### ejs
1.轉義輸出  <%= 變量名 %>
2.js代碼 <% Javascript代碼 %>
3.不轉義輸出 <%- 變量名%>
4.使用include引入外部的文件 <% include 文件的地址 %>

#### jade 格式化。
#### pug 使用語法   https://www.jianshu.com/p/e040cebad751

##### 你知道的異步方式。

##### vue 迷你版本。 https://github.com/lihongxun945/tiny-vue

##### 樹組件的優化。

##### webwork

##### http://www.javashuo.com/article/p-ybqnoiif-co.html

##### 如何寫測試用例。

##### 解決provisional headers are shown的過程

http://www.javashuo.com/article/p-qbjdnuez-ey.html

http://www.javashuo.com/article/p-wxhkjaas-ez.html

==== 混合框架開發流程

React native,wexx,fluttwr

https://github.com/wabg/awesome-react-native

=== 代碼檢測的cli.

=== 安全

1 nginx配置。無代理。

2 自動上線+自動部署的工具。

===多頁應用開發帶來的好處。

原來的多頁也用，測試效率低，模塊測試，自動化測試。

多頁應用，無頁面切換效果，而如今能夠添加過場動畫。

多頁應用，浪費服務器資源，而如今能夠減小http請求。

=== 多頁應用帶來的很差的緣由。

使用了高級的東西，兼容性很差，seo不友好。
場景要求，開發的自動度下降。
黑盒開發。
框架自己也會有學習成本。

=== 檢測代碼的commit

1. 檢測commit 的描述

"commitizen"

"config": {
"commitizen": {
"path": "./node_modules/cz-conventional-changelog"
}
},

"gitHooks": {
"commit-msg": "node ./verifyCommitMsg.js"
},

husky

commit的時候會首先執行行precommit;

{

"precommit": "lint-staged"
},

"lint-staged": {
"src/**/*.{json,css,scss}": [
"prettier --write",
"git add"
],
"src/**/*.js": [
"eslint --fix",
"git add"
],
"webpack/**/*.js": [
"eslint --fix",
"git add"
]
},