一 js ES5
1.apply call用法 改變this指針 繼承
2.this
全局作用域函數(shù) this指向window闷愤；
對象的函數(shù)，誰調(diào)用指向誰厦滤；
call后面指向第一個參數(shù)毯焕；
構(gòu)造函數(shù)的this 指向?qū)嵗膶ο?br>
3.prototype constructor
4.繼承
原型鏈 繼承;
構(gòu)造函數(shù)繼承;
組合式繼承;
5.立即執(zhí)行函數(shù)
優(yōu)點 實現(xiàn)閉包和私有數(shù)據(jù) 變量可以重命名 捕獲全局對象 壓縮優(yōu)化
- 閉包
解決方式 let 立即執(zhí)行函數(shù) 避免內(nèi)存泄漏的話 引用 = null
7.復(fù)制數(shù)組 a=[...[1,2,3]] 復(fù)制對象 Object.assign({},obj)
8.bind . 函數(shù)不會執(zhí)行 只改變this指針 而且以后再也不改變
9.節(jié)流和防抖
防抖
function debounce(handler,delay) {
var timer = null;
return function(){
var _self = this;
var _arg = arguments;
clearTimeout(timer);
timer = setTimeout(function(){
handler.apply(_self,_arg)
},delay)
}
}
節(jié)流
function throttle(handler.wait){
var lastTime = 0;
return function(e){
var nowTime = new Date().getTiime();
if(nowTime-lasttime>wait){
handler.apply(this,arguments);
lastTime = nowTime;
}
}
}
單例模式
const wzm = {
init(){
this.message = "hello";
this.event();
},
event(){
let div = document.getElementById("one");
div.onclick = this.show;
},
show(e){
console.log(e.target,this.message)
}
}
wzm.init();
二 ES6
1.let const
2.解構(gòu)賦值 reset 參數(shù)
3.${}
4.object object.assign 對象的合并
5.set 值唯一 add delete clear has
map 鍵的值 可以是對象 不僅僅是字符串
6.class =>
7.async await
三 JQUERY
1.jquery 無new 構(gòu)造 jquery.prototype.init.prototype = jquery.prototype
2.jquery.extend 為類本身添加方法 jquery.fn.extend 在jquery原型對象添加方法
3.jquery .fn = jquery.prototype
4.attr和prop
對于HTML元素本身就帶有的固有屬性达皿，在處理時浩螺，使用prop方法。
對于HTML元素我們自己自定義的DOM屬性，在處理時兄一，使用attr方法。
(function(){
jquery = function(){
return new jquery.prototype.init();
};
jquery.getName = function(){
console.log("jquery對象本身");
};
jquery.prototype = {
constructor:jquery,
init:function(){
},
each:function(){
console.log("each方法");
return this;
},
each1:function(){
console.log("each1方法");
return this;
}
noflict:functioon(deep){
if(window.$=== jquery){
window.$= _$;
}
if(deep&&window.jquery === jquery){
window.jquery = _jquery;
}
return jquery;
return jquery;
}
}
jquery.prototype.init.prototype = jquery.prototype;
window.$ = jquery;
})()
$.getName();
$().each().each1();
四 VUE
1.vue實現(xiàn)數(shù)據(jù)的雙向綁定
observe 用defineproperty 對數(shù)據(jù)所有的屬性進行監(jiān)聽
compile對每個元素的借點的指令進行掃描或者解析 根據(jù)指令模板替換數(shù)據(jù)或者綁定相應(yīng)的函數(shù)
watch連接 observe和compile 能夠接收到屬性變形的通知 執(zhí)行相應(yīng)的回調(diào)函數(shù)
- 全局組件 Vue.component 自定義指令 directive
3.watch
4.父組件通信 父傳子 props down 子傳父 事件傳遞 this.$emit(event,data) v-on:event="parentMethod"
兄弟組件通信
var bus = new Vue()
// 觸發(fā)組件 A 中的事件
bus.$emit('event1')
// 在組件 B 創(chuàng)建的鉤子中監(jiān)聽事件
bus.$on('event1', function () {}
// .
5.vue-router
<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>
{ path: '/user/:id', component: User }
router.push({ name: 'user', params: { userId: 123 }})
router.push({ path: 'register', query: { plan: 'private' }})
接受 this.$route.params
mode history(需要后端同步設(shè)置) hash(默認(rèn))
全局守衛(wèi) route.beforeach
路由獨享守衛(wèi) beforeEnter
組件守衛(wèi) beforeRouteEnter
6vuex
state
getters
actions dispatch 觸發(fā)
mutations commit觸發(fā)
五 CSS - 變量寫法：root{
--color："#fff"
}
直接用：var(--color)
2.清楚浮動 clear both overflow ::after
3.flex
4.grid
六 webpack
