html
- HTML5新特性，語義化
https://www.cnblogs.com/vicky1018/p/7705223.html
https://blog.csdn.net/qq_20726787/article/details/79849212 - 瀏覽器的標(biāo)準模式和怪異模式
https://blog.csdn.net/qq_31059475/article/details/78010601 - 使用data-的好處
- 可以把所有自定義屬性在dataset對象中統(tǒng)一管理，遍歷啊神馬的都哦很方便
https://www.cnblogs.com/dolphinX/p/3348458.html
- 可以把所有自定義屬性在dataset對象中統(tǒng)一管理，遍歷啊神馬的都哦很方便
- meta標(biāo)簽
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偽類 偽元素區(qū)別
偽類是類名请敦，偽元素是個元素 可以設(shè)置寬高
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如何實現(xiàn)水平居中和垂直居中
https://zhuanlan.zhihu.com/p/34974332less sass 相比較于 css 優(yōu)缺點
清除浮動
https://blog.csdn.net/weixin_43638968/article/details/107617275
JS
- js的基本類型有哪些？引用類型有哪些？引用類型和基本類型有什么區(qū)別狐榔？哪個是存在堆哪一個是存在棧上面的简僧？
空值(null)建椰、
未定義(undefined)、
布爾值(boolean)岛马、
數(shù)字(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 區(qū)別
https://www.cnblogs.com/logsharing/p/8448446.html用 http-proxy-middleware 跨域
http://www.reibang.com/p/a248b146c55a解釋一下事件冒泡和事件捕獲笛洛，事件委托（手寫例子）
https://blog.csdn.net/zj950307/article/details/80390585如何阻止冒泡？如何阻止默認事件乃坤？
https://blog.csdn.net/qq_41459038/article/details/81304155對閉包的理解苛让？什么時候構(gòu)成閉包？閉包的實現(xiàn)方法湿诊？閉包的優(yōu)缺點狱杰？
https://blog.csdn.net/binlety/article/details/81288231-
this有哪些使用場景？如何改變this的值厅须？call仿畸，apply，bind區(qū)別
- 在全局環(huán)境中朗和，this 永遠指向 window
- 函數(shù)內(nèi)的指向
- 構(gòu)造函數(shù)错沽， this 就代表它即將 new 出來的對象
- 作為對象內(nèi)部時，方法中的 this 指向該對象眶拉。
- 構(gòu)造函數(shù), this 代表的實例對象
- call千埃、apply 或者 bind 調(diào)用時，this 的值就取傳入的對象的值镀层。
- DOM 操作時镰禾，this 指向 dom節(jié)點
- 箭頭函數(shù)內(nèi)部的 this 由上下文確定
- setInterval、setTimeout唱逢，函數(shù)中的this會指向window對象
call吴侦，apply，bind區(qū)別:
https://www.cnblogs.com/ly0612/p/6821124.html原型鏈知識
https://www.cnblogs.com/liubinghaoJavaScript/p/7478432.html
http://www.reibang.com/p/d3713f9485eb創(chuàng)建對象的幾種方式
https://www.cnblogs.com/yuxingyoucan/p/5797142.html實現(xiàn)繼承的多種方式和優(yōu)缺點
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數(shù)組 字符串 api
https://blog.csdn.net/huangpb123/article/details/76861748實現(xiàn)深拷貝的方法
https://blog.csdn.net/chentony123/article/details/81428803如何將類數(shù)組對象轉(zhuǎn)化為真正的數(shù)組
https://blog.csdn.net/keke_sir/article/details/80627870如何判斷一個對象為函數(shù) 對象 數(shù)組
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將多層數(shù)組轉(zhuǎn)化為單層數(shù)組
https://www.cnblogs.com/bigsister/p/10558751.html
https://blog.csdn.net/xiao_spring/article/details/79262917js 事件執(zhí)行機制 異步執(zhí)行原理
https://www.cnblogs.com/sunidol/p/11301808.html
https://segmentfault.com/a/1190000020889508js 原型鏈上的方法
Object.prototype.tostring.call()判斷是不是數(shù)組 對象 函數(shù)
Array.isArray判斷 是不是數(shù)組
instanceof
// 主要用于檢測引用類型(左邊是對象备韧，右邊是函數(shù).根據(jù)對象的原形鏈往上找，如果原形鏈上有右邊函數(shù).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 區(qū)別
1 都是循環(huán)每一項
2 foreach 更改原數(shù)組， 沒有返回值
3 map 不更改原數(shù)組奶陈，有返回值 - 瀏覽器運行機制
https://segmentfault.com/a/1190000020889508
ES6
let(可改變) const(不可改變)
箭頭函數(shù)
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 區(qū)別
https://blog.csdn.net/qqhluckyi/article/details/83214540
1 commjs 是后端node 加載方式易阳， 同步加載
2 CMD AMD 為前端模塊加載方式，異步加載吃粒，常見的庫為requreJS(AMD) seajs(CMD)
3 module import 為 es6 規(guī)范設(shè)定的加載方式潦俺， import命令是編譯階段執(zhí)行的，在代碼運行之前,表達式和變量只有在運行時才能得到結(jié)果的語法結(jié)構(gòu)。import命令會被 JavaScript 引擎靜態(tài)分析事示，先于模塊內(nèi)的其他模塊執(zhí)行（叫做”連接“更合適）所以import中不能含有表達式或者變量,因此無法實現(xiàn)動態(tài)加載
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 數(shù)據(jù)格式 有什么特性
項目中用的 es6
https://blog.csdn.net/weixin_44514665/article/details/104031500== 和 === 的區(qū)別
http://www.reibang.com/p/29316fdafba5
框架
- 簡述 vue 工作流程
/**
* 1 數(shù)據(jù)劫持 2 編譯模板
* 1 數(shù)據(jù)劫持 就是 Object.defineProperty 方法肖爵，他有g(shù)et set 方法卢鹦，get取數(shù)據(jù) set設(shè)置數(shù)據(jù) 更新數(shù)據(jù)了會重新編譯數(shù)據(jù)模板
* 2 編譯作用是把 vue 模板轉(zhuǎn)為 瀏覽器的dom展示在頁面上，主要做的那就是把模板上綁定的事件轉(zhuǎn)化為一個個監(jiān)聽器劝堪，監(jiān)視用戶的動作冀自，執(zhí)行updata 方法
* 3 獲取接口 重置 data時 就觸發(fā) 數(shù)據(jù)劫持的set 方法， set 方法調(diào)用 監(jiān)聽器的 update 方法
* 4 頁面用戶輸入 操作時 觸發(fā)對應(yīng)的事件幅聘，事件有對應(yīng)的監(jiān)聽器 可以調(diào)用 監(jiān)聽器的 update 方法更新數(shù)據(jù)
*/
- 什么是MVVM凡纳，MVC，MVP
-
mvc（agular）
1 用戶輸入動作（指令）帝蒿，
2 指令觸發(fā)荐糜，調(diào)用相應(yīng)的函數(shù)方法邏輯，更改數(shù)據(jù)
3 數(shù)據(jù)更改后葛超，通過某種方法（這里是臟治檢測）告訴視圖更新 -
mvvm(vue)
就是通過某種方法使 視圖(view) 和 數(shù)據(jù)(model) 建立聯(lián)系（這里是通過js Object.defineProperty()暴氏， 方法建立雙向關(guān)系）
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 優(yōu)勢
統(tǒng)一公共屬性方法 方便維護
只提供單一的更改屬性的方法 保證維護 溯源的方便（要是多個更改方法會難以維護 溯源） - vuex 為為什么用 action 提交數(shù)據(jù)
- vue 面試題
https://segmentfault.com/a/1190000016344599
https://www.cnblogs.com/sichaoyun/p/8406194.html - vue 路由生命周期函數(shù)
https://www.cnblogs.com/Zzbj/p/10073967.html - watch computed 的區(qū)別 那個性能更好 為啥
計算屬性方法監(jiān)聽屬性都能實現(xiàn)
方法得主動調(diào)用
計算屬性是被動更新 可以同時依賴多個屬性性能更好 （能用計算屬性 做好用計算屬性）
監(jiān)聽屬性只能監(jiān)聽一個屬性 是主動執(zhí)行
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 為啥是函數(shù) 不是對象
第13個問題angluar vue的區(qū)別
http://www.reibang.com/p/7b7b195e0297vue 和原生的區(qū)別
vuex 優(yōu)勢
統(tǒng)一公共屬性方法 方便維護
只提供單一的更改屬性的方法 保證維護 溯源的方便（要是多個更改方法會難以維護 溯源）-
處理跨域
開發(fā)環(huán)境 用熱更新插件 配置 地址 node 代理
生產(chǎn)環(huán)境 ngix 配置
cors 配置 兄弟a b組件之間绣张，點擊a組件 出發(fā)b的函數(shù)
a 觸發(fā) this.$emit 給父組件答渔，父組件 用ref.子組件的方法
vue 虛擬dom 概述
http://www.reibang.com/p/af0b398602bcthis.$nextick 作用 原理
https://zhuanlan.zhihu.com/p/26724001導(dǎo)航路由 生命周期函數(shù)
全局路由鉤子：beforeEach進入之前、afterEach進去之后
組件路由鉤子：beforeRouteEnter進去之前侥涵、beforeRouteUpdate更新沼撕、beforeRouteLeave離開之前
http://www.javashuo.com/article/p-srqzfeqh-bm.htmlkeep-alive路由生命周期函數(shù)
keep-alive使用 https://blog.csdn.net/guoyp2126/article/details/119545978
頁面第一次進入，鉤子的觸發(fā)順序created-> mounted-> activated芜飘，退出時觸發(fā)deactivated务豺。當(dāng)再次進入（前進或者后退）時，只觸發(fā)activated嗦明。指令的周期
bind第一次綁定到元素上笼沥、inserted被綁定元素插入父節(jié)點時調(diào)用、update更新時調(diào)用娶牌、componentUpdated被綁定元素所在模板完成一次更新周期時調(diào)用奔浅、unbind指令與元素解綁時調(diào)用solt 原理
簡述 vue-router 工作流程
vue-router 本質(zhì)上是展示不同的頁面，有三種模式 hash History abstract(用于服務(wù)端模式)
http://www.reibang.com/p/d59971198082
https://segmentfault.com/a/1190000018584560?utm_source=tag-newestv-ifv-show本質(zhì)是什么
v-if動態(tài)的向DOM樹內(nèi)添加或者刪除DOM元素
v-show本質(zhì)就是標(biāo)簽display設(shè)置為none诗良，控制隱藏v-for的優(yōu)先級比v-if更高汹桦，這意味著v-if將分別重復(fù)運行于每個v-for循環(huán)中vue 腳手架怎么運行的
vue3 新特性
this.router.push 中 query param 傳參區(qū)別
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 語法實現(xiàn)原理
https://blog.csdn.net/yun_hou/article/details/86313212axios配置
https://blog.csdn.net/qq_44683095/article/details/106325494-
route 和 router 的區(qū)別
this.$route： 當(dāng)前激活的路由的信息對象。每個對象都是局部的鉴裹，可以獲取當(dāng)前路由的 path, name, params, query 等屬性营勤。
this.$router：全局的 router 實例灵嫌。通過 vue 根實例中注入 router 實例，然后再注入到每個子組件葛作，從而讓整個應(yīng)用都有路由功能。其中包含了很多屬性和對象（比如 history 對象）猖凛，任何頁面也都可以調(diào)用其 push(), replace(), go() 等方法赂蠢。
https://www.qy.cn/jszx/detail/3822.html
前端優(yōu)化
- 防抖 節(jié)流
防抖: 規(guī)定一個期限時間，在首次觸發(fā)事件時辨泳，不立即執(zhí)行回調(diào)函數(shù)虱岂，而是在期限時間后再執(zhí)行，如果期限時間內(nèi)回調(diào)函數(shù)被重復(fù)執(zhí)行菠红，則期限時間重新計時第岖。（100ms 內(nèi)執(zhí)行10次，按最后一次的的時間试溯，在延時執(zhí)行蔑滓，函數(shù)執(zhí)行需要 一段時間）
節(jié)流： 一段時間只執(zhí)行一次，執(zhí)行多次按最后一次計算（100ms 內(nèi)執(zhí)行10次遇绞，只執(zhí)行最后一次）
http://www.reibang.com/p/3b782abd27ed
重繪重排
重排性能 消耗大于重會
https://www.cnblogs.com/ShuiNian/p/12098325.htmlstyle-loader css-loader 區(qū)別
先是 cssloader 解析 .css 文件 然后用styleloder 創(chuàng)建一個 style 標(biāo)簽
http://www.reibang.com/p/cbd3375e2575知道哪些設(shè)計模式
單例模式工廠模式策略模式代理模式觀察者模式模塊模式構(gòu)造函數(shù)模式混合模式
http://www.reibang.com/p/4f3014fb8b8b前端安全策略
模塊化的工作規(guī)范
前端緩存策略
+斷點續(xù)傳webpack 配置筆記
http://www.reibang.com/p/c614ecb500cc前端安全問題
http://www.reibang.com/p/2aa1ea6cdf22
http://www.imooc.com/article/296767import和require的區(qū)別
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為標(biāo)準 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系統(tǒng)
// 引入fastclick 做相關(guān)處理
document.addEventListener('DOMContentLoaded', function () {
FastClick.attach(document.body)
}, false)
} else {
// 蘋果版本 11 以上已經(jīng)處理了延時
if (parseInt(ver[1]) < 11) {
// 引入fastclick 做相關(guān)處理
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.reibang.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/', // 這個是服務(wù)器的訪問路徑配置
...
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協(xié)議頭含有哪些重要的部分，HTTP狀態(tài)碼
https://www.cnblogs.com/qiang07/p/9304771.html - 網(wǎng)絡(luò)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 區(qū)別
https://www.cnblogs.com/pengc/p/8714475.html - header 請求方法的作用
https://blog.csdn.net/busai2/article/details/82966333
算法
- 排序算法
http://www.reibang.com/p/e84acc88e3d5 - 二叉樹
http://www.reibang.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.reibang.com/p/b80163c204be - 字符串匹配（KMP BM）
http://www.reibang.com/p/22f99ad58de7
http://www.reibang.com/p/2fc39afe2306 - base64 加密原理
http://www.reibang.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優(yōu)化
https://blog.csdn.net/haodawang/article/details/77199980
代碼管理
--
職業(yè)規(guī)劃
- 對前端的職業(yè)規(guī)劃
https://www.cnblogs.com/gvip-cyl/articles/6502793.html
http://www.reibang.com/p/2df4c0734b7f - 對前端的認識
