1,拿到对应选项卡的结点,绑定结点,对应不同按钮,显示不同效果。
//遍历按钮组活得key,将key值传入,
btns.forEach((value, key) => {
value.onclick = function () {
psFor(key)
}
})
//遍历显示端,如果和传入的key值一样,则显示效果,否则移除
function psFor(key) {
ps.forEach((v, k) => {
if (key == k) {
btns[k].style.background = "red"
ps[k].style.display = "block"
} else {
btns[k].style.background = ""
ps[k].style.display = "none"
}
})
}
2,多个选项卡原理
基本思路和选项卡一样,但是可以抽取出公共方法。如Tabs方法,根据传入的变量来绑定不同的DOM结点,并可以通过设置不同的参数来实现不同的功能
公共逻辑提取,所有选项卡共有的功能。
3,轮播图原理
根据定时器setInterval来实现1秒钟,切换选项卡的功能,视觉效果,看起来就是轮播。
if(isAutoPlay){
document.querySelector(".autoPlay")
let num = 0;
setInterval(() => {
num++
num = num > 2 ? 0 : num
psFor(num)
}, 1000);
}
4,改造
共性的封装,独一无二的单独处理
5,面向对象
首先抽象事物或功能,研究属性和方法
工厂模式:
首先定义函数,添加原料(初始化对象),加工原料(添加属性和方法),出厂(返回对象)
缺点:性能问题,识别问题
无法识别对象是哪个工厂出厂的
每次调用方法,都会开辟新的内存地址
可以放进公共空间,原型prototype ====>new运算符
6,new运算符
1,执行函数
2,自动创建一个空对象
3,把创建的对象指向另外一个对象
4,把空对象和函数里的this连接起来
5,隐式返还this
通过这个特性可以把工厂模式进行简化
//简化工厂模式
function Tab(){
//let obj = {}; ---->this
this.name = "张三"
this.hobby = function(){
console.log("篮球")
}
//return obj;
}
//Tab()
let tab1 = new Tab()
console.log(tab1.name)
console.log(tab1.hobby)
把工厂模式改造成构造函数
Tab.prototype.psFor = function(){
}
约定俗成:1,首字母大写,2,属性放在构造函数;方法放在原型
let str = "ddddd"
console.log(str.constructor === String) //true
通过constructor判断属性,上图判断str是字符串
6,实现一个new
//仿写new
function myNew(constructor,...arg){
let obj = {};
constructor.call(obj,...arg)
obj.__proto__ = constructor.prototype
return obj
}
let tab1 = myNew(Tab)