html
- HTML5新特性，語義化
https://www.cnblogs.com/vicky1018/p/7705223.html
https://blog.csdn.net/qq_20726787/article/details/79849212 - 瀏覽器的標準模式和怪異模式
https://blog.csdn.net/qq_31059475/article/details/78010601 - 使用data-的好處
- 可以把所有自定義屬性在dataset對象中統一管理，遍歷啊神馬的都哦很方便
https://www.cnblogs.com/dolphinX/p/3348458.html
- 可以把所有自定義屬性在dataset對象中統一管理，遍歷啊神馬的都哦很方便
- meta標簽
https://www.cnblogs.com/wangyang108/p/5995379.html
css
盒模型，box-sizing
https://blog.csdn.net/huangpin815/article/details/76651680隱藏元素的幾種方法
https://blog.csdn.net/weixin_42160828/article/details/80980333偽類 偽元素區別
偽類是類名，偽元素是個元素 可以設置寬高
https://www.cnblogs.com/ghost-xyx/p/3763669.html
https://www.cnblogs.com/ammyben/p/8012747.html
https://blog.csdn.net/zhouziyu2011/article/details/58605705如何實現水平居中和垂直居中
https://zhuanlan.zhihu.com/p/34974332less sass 相比較于 css 優缺點
清除浮動
https://blog.csdn.net/weixin_43638968/article/details/107617275
JS
- js的基本類型有哪些？引用類型有哪些？引用類型和基本類型有什么區別？哪個是存在堆哪一個是存在棧上面的？
空值(null)、
未定義(undefined)、
布爾值(boolean)、
數字(number)、
字符串(string)、
對象(object)、
符號(symbol，ES6中新增)
https://www.cnblogs.com/cxying93/p/6106469.html
https://www.zhihu.com/question/349080864
JS常見的dom操作api
https://www.cnblogs.com/lrzw32/p/5008913.htmlnew set去重 https://blog.csdn.net/diwuyanting/article/details/78486499排序https://www.cnblogs.com/fanda/p/4767984.html
bom
https://www.cnblogs.com/2010master/p/5824215.html
https://www.cnblogs.com/hhw3/p/7089330.htmlget post 區別
https://www.cnblogs.com/logsharing/p/8448446.html用 http-proxy-middleware 跨域
http://www.lxweimin.com/p/a248b146c55a解釋一下事件冒泡和事件捕獲，事件委托（手寫例子）
https://blog.csdn.net/zj950307/article/details/80390585如何阻止冒泡？如何阻止默認事件？
https://blog.csdn.net/qq_41459038/article/details/81304155對閉包的理解？什么時候構成閉包？閉包的實現方法？閉包的優缺點？
https://blog.csdn.net/binlety/article/details/81288231-
this有哪些使用場景？如何改變this的值？call，apply，bind區別
- 在全局環境中，this 永遠指向 window
- 函數內的指向
- 構造函數， this 就代表它即將 new 出來的對象
- 作為對象內部時，方法中的 this 指向該對象。
- 構造函數, this 代表的實例對象
- call、apply 或者 bind 調用時，this 的值就取傳入的對象的值。
- DOM 操作時，this 指向 dom節點
- 箭頭函數內部的 this 由上下文確定
- setInterval、setTimeout，函數中的this會指向window對象
call，apply，bind區別:
https://www.cnblogs.com/ly0612/p/6821124.html原型鏈知識
https://www.cnblogs.com/liubinghaoJavaScript/p/7478432.html
http://www.lxweimin.com/p/d3713f9485eb創建對象的幾種方式
https://www.cnblogs.com/yuxingyoucan/p/5797142.html實現繼承的多種方式和優缺點
https://www.cnblogs.com/linzaizai/p/7529890.htmlnew 一個對象具體做了什么
http://www.cnblogs.com/kevin2chen/p/6418327.html手寫Ajax，XMLHttpRequest
https://blog.csdn.net/flyingpig2016/article/details/72616764數組 字符串 api
https://blog.csdn.net/huangpb123/article/details/76861748實現深拷貝的方法
https://blog.csdn.net/chentony123/article/details/81428803如何將類數組對象轉化為真正的數組
https://blog.csdn.net/keke_sir/article/details/80627870如何判斷一個對象為函數 對象 數組
https://blog.csdn.net/weixin_39181833/article/details/79686943
https://segmentfault.com/q/1010000017986207/a-1020000017992111
https://chen4342024.github.io/code-snippet/js/is.html將多層數組轉化為單層數組
https://www.cnblogs.com/bigsister/p/10558751.html
https://blog.csdn.net/xiao_spring/article/details/79262917js 事件執行機制 異步執行原理
https://www.cnblogs.com/sunidol/p/11301808.html
https://segmentfault.com/a/1190000020889508js 原型鏈上的方法
Object.prototype.tostring.call()判斷是不是數組 對象 函數
Array.isArray判斷 是不是數組
instanceof
// 主要用于檢測引用類型(左邊是對象，右邊是函數.根據對象的原形鏈往上找，如果原形鏈上有右邊函數.prototype，返回true;否則返回false)
var obj = {}; obj instanceof Object; //=> true;
var arr = []; arr instanceof Array; //=> true;
var fn = function() {}; fn instanceof Function; //=> true;
hasOwnProperty() obj對象自身屬性中是否具有某個屬性
isPrototypeOf()
// 用于測試一個對象是否存在于另一個對象的原型鏈上。在obj對象原型鏈上搜尋
function VFrank() {}
VFrank.prototype.name = "vfrank";
VFrank.prototype.age = 29;
VFrank.prototype.job = "Web Engineer";
var person = new VFrank();
console.log(VFrank.prototype.isPrototypeOf(person));// true
- foreach map 區別
1 都是循環每一項
2 foreach 更改原數組， 沒有返回值
3 map 不更改原數組，有返回值 - 瀏覽器運行機制
https://segmentfault.com/a/1190000020889508
ES6
let(可改變) const(不可改變)
箭頭函數
http://es6.ruanyifeng.com/#docs/function#%E7%AE%AD%E5%A4%B4%E5%87%BD%E6%95%B0export export default import
http://es6.ruanyifeng.com/#docs/moduleCMD AMD require import 區別
https://blog.csdn.net/qqhluckyi/article/details/83214540
1 commjs 是后端node 加載方式， 同步加載
2 CMD AMD 為前端模塊加載方式，異步加載，常見的庫為requreJS(AMD) seajs(CMD)
3 module import 為 es6 規范設定的加載方式， import命令是編譯階段執行的，在代碼運行之前,表達式和變量只有在運行時才能得到結果的語法結構。import命令會被 JavaScript 引擎靜態分析，先于模塊內的其他模塊執行（叫做”連接“更合適）所以import中不能含有表達式或者變量,因此無法實現動態加載
https://segmentfault.com/a/1190000010913832es5 6 7 異步操作
setTimeout、Promise、Async/AwaitAsync/Await 的理解
https://segmentfault.com/a/1190000007535316
http://www.ruanyifeng.com/blog/2015/05/async.html
es5 6 7 繼承方式
es5的6中繼承方式
es6 class繼承set map Symbol 數據格式 有什么特性
項目中用的 es6
https://blog.csdn.net/weixin_44514665/article/details/104031500== 和 === 的區別
http://www.lxweimin.com/p/29316fdafba5
框架
- 簡述 vue 工作流程
/**
* 1 數據劫持 2 編譯模板
* 1 數據劫持 就是 Object.defineProperty 方法，他有get set 方法，get取數據 set設置數據 更新數據了會重新編譯數據模板
* 2 編譯作用是把 vue 模板轉為 瀏覽器的dom展示在頁面上，主要做的那就是把模板上綁定的事件轉化為一個個監聽器，監視用戶的動作，執行updata 方法
* 3 獲取接口 重置 data時 就觸發 數據劫持的set 方法， set 方法調用 監聽器的 update 方法
* 4 頁面用戶輸入 操作時 觸發對應的事件，事件有對應的監聽器 可以調用 監聽器的 update 方法更新數據
*/
- 什么是MVVM，MVC，MVP
-
mvc（agular）
1 用戶輸入動作（指令），
2 指令觸發，調用相應的函數方法邏輯，更改數據
3 數據更改后，通過某種方法（這里是臟治檢測）告訴視圖更新 -
mvvm(vue)
就是通過某種方法使 視圖(view) 和 數據(model) 建立聯系（這里是通過js Object.defineProperty()， 方法建立雙向關系）
view 改變通知vm ，然后vm 改變 model
model 改變通知vm, 然后vm 改變 view
https://blog.csdn.net/spring5530/article/details/65982198
- vuex屬性流程簡述
https://vuex.vuejs.org/zh/guide/state.html - vuex 優勢
統一公共屬性方法 方便維護
只提供單一的更改屬性的方法 保證維護 溯源的方便（要是多個更改方法會難以維護 溯源） - vuex 為為什么用 action 提交數據
- vue 面試題
https://segmentfault.com/a/1190000016344599
https://www.cnblogs.com/sichaoyun/p/8406194.html - vue 路由生命周期函數
https://www.cnblogs.com/Zzbj/p/10073967.html - watch computed 的區別 那個性能更好 為啥
計算屬性方法監聽屬性都能實現
方法得主動調用
計算屬性是被動更新 可以同時依賴多個屬性性能更好 （能用計算屬性 做好用計算屬性）
監聽屬性只能監聽一個屬性 是主動執行
https://blog.csdn.net/zzzz121380/article/details/121807864
https://www.jb51.net/article/138743.htm
https://blog.csdn.net/weixin_45213848/article/details/93231307
https://www.cnblogs.com/yiyiyurou/p/9881156.html
data 為啥是函數 不是對象
第13個問題angluar vue的區別
http://www.lxweimin.com/p/7b7b195e0297vue 和原生的區別
vuex 優勢
統一公共屬性方法 方便維護
只提供單一的更改屬性的方法 保證維護 溯源的方便（要是多個更改方法會難以維護 溯源）-
處理跨域
開發環境 用熱更新插件 配置 地址 node 代理
生產環境 ngix 配置
cors 配置 兄弟a b組件之間，點擊a組件 出發b的函數
a 觸發 this.$emit 給父組件，父組件 用ref.子組件的方法
vue 虛擬dom 概述
http://www.lxweimin.com/p/af0b398602bcthis.$nextick 作用 原理
https://zhuanlan.zhihu.com/p/26724001導航路由 生命周期函數
全局路由鉤子：beforeEach進入之前、afterEach進去之后
組件路由鉤子：beforeRouteEnter進去之前、beforeRouteUpdate更新、beforeRouteLeave離開之前
http://www.javashuo.com/article/p-srqzfeqh-bm.htmlkeep-alive路由生命周期函數
keep-alive使用 https://blog.csdn.net/guoyp2126/article/details/119545978
頁面第一次進入，鉤子的觸發順序created-> mounted-> activated，退出時觸發deactivated。當再次進入（前進或者后退）時，只觸發activated。指令的周期
bind第一次綁定到元素上、inserted被綁定元素插入父節點時調用、update更新時調用、componentUpdated被綁定元素所在模板完成一次更新周期時調用、unbind指令與元素解綁時調用solt 原理
簡述 vue-router 工作流程
vue-router 本質上是展示不同的頁面，有三種模式 hash History abstract(用于服務端模式)
http://www.lxweimin.com/p/d59971198082
https://segmentfault.com/a/1190000018584560?utm_source=tag-newestv-ifv-show本質是什么
v-if動態的向DOM樹內添加或者刪除DOM元素
v-show本質就是標簽display設置為none，控制隱藏v-for的優先級比v-if更高，這意味著v-if將分別重復運行于每個v-for循環中vue 腳手架怎么運行的
vue3 新特性
this.router.push 中 query param 傳參區別
params 傳參失效
建議用 query路由重定向
https://blog.csdn.net/weixin_39168052/article/details/81325641EventBus 使用
EventBus.$emit(channel: string, callback(payload1,…))
EventBus.$on(channel: string, callback(payload1,…))
EventBus.$off(channel, {})
v-model 語法實現原理
https://blog.csdn.net/yun_hou/article/details/86313212axios配置
https://blog.csdn.net/qq_44683095/article/details/106325494-
route 和 router 的區別
this.$route： 當前激活的路由的信息對象。每個對象都是局部的，可以獲取當前路由的 path, name, params, query 等屬性。
this.$router：全局的 router 實例。通過 vue 根實例中注入 router 實例，然后再注入到每個子組件，從而讓整個應用都有路由功能。其中包含了很多屬性和對象（比如 history 對象），任何頁面也都可以調用其 push(), replace(), go() 等方法。
https://www.qy.cn/jszx/detail/3822.html
前端優化
- 防抖 節流
防抖: 規定一個期限時間，在首次觸發事件時，不立即執行回調函數，而是在期限時間后再執行，如果期限時間內回調函數被重復執行，則期限時間重新計時。（100ms 內執行10次，按最后一次的的時間，在延時執行，函數執行需要 一段時間）
節流： 一段時間只執行一次，執行多次按最后一次計算（100ms 內執行10次，只執行最后一次）
http://www.lxweimin.com/p/3b782abd27ed
重繪重排
重排性能 消耗大于重會
https://www.cnblogs.com/ShuiNian/p/12098325.htmlstyle-loader css-loader 區別
先是 cssloader 解析 .css 文件 然后用styleloder 創建一個 style 標簽
http://www.lxweimin.com/p/cbd3375e2575知道哪些設計模式
單例模式工廠模式策略模式代理模式觀察者模式模塊模式構造函數模式混合模式
http://www.lxweimin.com/p/4f3014fb8b8b前端安全策略
模塊化的工作規范
前端緩存策略
+斷點續傳webpack 配置筆記
http://www.lxweimin.com/p/c614ecb500cc前端安全問題
http://www.lxweimin.com/p/2aa1ea6cdf22
http://www.imooc.com/article/296767import和require的區別
https://www.cnblogs.com/sunshq/p/7922182.html
babel
https://www.jiangruitao.com/babel/quick-start/
移動端
- 移動端 1px 像素
// border
:after{
content: '';
position: absolute;
left: 0;
bottom: 0;
background: #cccccc;
width: 100%;
height: 1px;
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
}
// 按鈕邊框
:after{
content: '';
position: absolute;
left: 0;
top: 0;
border: 1px solid #cccccc;
border-radius: 26px;
width: 200%;
height: 200%;
-webkit-transform: scale(0.5);
transform: scale(0.5);
-webkit-transform-origin: left top;
transform-origin: left top;
}
- 移動端rem適配
(function (doc, win) {
// 以蘋果6 375px為標準 1rem為10px
var docEl = doc.documentElement
var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize'
var recalc = function () {
var clientWidth = docEl.clientWidth
if (!clientWidth) return
docEl.style.fontSize = 2 * (clientWidth / 75) + 'px'
}
if (!doc.addEventListener) return
win.addEventListener(resizeEvt, recalc, false)
doc.addEventListener('DOMContentLoaded', recalc, false)
})(document, window)
- 300 毫秒的點擊延時
const str = navigator.userAgent.toLowerCase()
const ver = str.match(/cpu iphone os (.*?) like mac os/)
if (!ver) { // 非IOS系統
// 引入fastclick 做相關處理
document.addEventListener('DOMContentLoaded', function () {
FastClick.attach(document.body)
}, false)
} else {
// 蘋果版本 11 以上已經處理了延時
if (parseInt(ver[1]) < 11) {
// 引入fastclick 做相關處理
document.addEventListener('DOMContentLoaded', function () {
FastClick.attach(document.body)
}, false)
}
}
- 輸入框不回彈處理、
setTimeout(() => {
window.scrollTo(0, document.body.scrollTop + 1)
document.body.scrollTop >= 1 && window.scrollTo(0, document.body.scrollTop - 1)
}, 10)
- 大文件上傳方案
http://www.lxweimin.com/p/0870df52cdd5 - 長列表渲染方案
https://zhuanlan.zhihu.com/p/66779396 - 安卓 webview 不能訪問 帶 # 號的url
改成 history模式了
https://www.jb51.net/article/162268.htm
https://www.cnblogs.com/tugenhua0707/p/8127466.html
// routerjs
const router = createRouter({
// https://cli.vuejs.org/zh/config/#publicpath
base: '/www/', // 這個是服務器的訪問路徑配置
...
routes
})
export default router
// vue.config.js
module.exports = {
// 安卓不能訪問 帶 # 號的url 改成 history模式了
// 參考 https://www.cnblogs.com/tugenhua0707/p/8127466.html
publicPath: process.env.NODE_ENV === 'develop' ? '/' : '/www/',
...
}
http
- HTTP協議頭含有哪些重要的部分，HTTP狀態碼
https://www.cnblogs.com/qiang07/p/9304771.html - 網絡url輸入到輸出怎么做？
https://www.cnblogs.com/xianyulaodi/p/6547807.html - https（對是https）有幾次握手和揮手？https的原理。
https://blog.csdn.net/u012361288/article/details/54883154 - 為什么TCP連接需要三次握手，兩次不可以嗎，為什么
https://blog.csdn.net/b954960630/article/details/81861579 - cookie session localstore 區別
https://www.cnblogs.com/pengc/p/8714475.html - header 請求方法的作用
https://blog.csdn.net/busai2/article/details/82966333
算法
- 排序算法
http://www.lxweimin.com/p/e84acc88e3d5 - 二叉樹
http://www.lxweimin.com/p/162b8d4fda84 - https 加密算法
http://www.ruanyifeng.com/blog/2013/06/rsa_algorithm_part_one.html
http://www.ruanyifeng.com/blog/2013/07/rsa_algorithm_part_two.html
http://www.lxweimin.com/p/b80163c204be - 字符串匹配（KMP BM）
http://www.lxweimin.com/p/22f99ad58de7
http://www.lxweimin.com/p/2fc39afe2306 - base64 加密原理
http://www.lxweimin.com/p/3de85b738d87
面試題
打包工具
sourceMap 作用
https://blog.csdn.net/u012365780/article/details/111596591webpack 面試題
https://baijiahao.baidu.com/s?id=1706629892058057497&wfr=spider&for=pc
https://zhuanlan.zhihu.com/p/443964387webpack 配置多頁面
https://blog.csdn.net/bidang3275/article/details/118494812webpack工具配置 vue
gulp 入門知識
https://www.gulpjs.com.cn/docs/getting-started/quick-start/webpack 的組成和原理
Tree Shaking ts優化
https://blog.csdn.net/haodawang/article/details/77199980
代碼管理
--
職業規劃
- 對前端的職業規劃
https://www.cnblogs.com/gvip-cyl/articles/6502793.html
http://www.lxweimin.com/p/2df4c0734b7f - 對前端的認識
