前端----选项卡原理,多个选项卡,工厂模式,构造函数,如何实现new

本文详细介绍了JavaScript实现选项卡和轮播图的原理,包括绑定事件处理不同显示效果,以及如何通过公共方法抽取共性功能。同时,探讨了面向对象编程的概念,解释了工厂模式、构造函数以及`new`运算符的工作原理,并提供了仿写`new`运算符的示例。此外,还讨论了如何通过`constructor`判断对象类型。内容涵盖了JavaScript基础和前端交互实现。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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)

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值