javascript面向对象基础(1)

主题

? 1）工厂模式

? 2）new运算符

? 3）构造函数

? 4）原型prototype

? 5）面相对象和面相过程编程

? 6）类和对象

## 知识点

##需求

### 1、需求一：实现多个选项卡的

- 问题一：如何写？按照以前方式写

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div class="mydiv1">
        <button style="background: red">按钮一</button>
        <button>按钮二</button>
        <button>按钮三</button>
        <p style="display: block;">div1</p>
        <p style="display: none;">div2</p>
        <p style="display: none;">div3</p>
    </div>
</body>
<script>
    // 第一个需求 一个选项卡；
    let btns = document.querySelectorAll(".mydiv1 button");
    let ps = document.querySelectorAll(".mydiv1 p");
    btns.forEach((v,k)=>{
        v.onclick = function(){
            ps.forEach((value,key)=>{
                if(key==k){
                    // 选中项；
                    btns[key].style.background = "red";
                    ps[key].style.display = "block";
                }else{
                    // 非选中项；
                    btns[key].style.background = "";
                    ps[key].style.display = "none";
                }
            })
        }
    })

</script>
</html>

- 问题二：如何提高复用性？(函数封装)

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div class="mydiv1">
        <button style="background: red">按钮一</button>
        <button>按钮二</button>
        <button>按钮三</button>
        <p style="display: block;">div1</p>
        <p style="display: none;">div2</p>
        <p style="display: none;">div3</p>
    </div>
    <div class="mydiv2">
        <button style="background: red">按钮一</button>
        <button>按钮二</button>
        <button>按钮三</button>
        <p style="display: block;">div1</p>
        <p style="display: none;">div2</p>
        <p style="display: none;">div3</p>
    </div>
</body>
<script>
    // 第二个需求 多个选项卡；
    function Tab(btns, ps) {
        btns.forEach((v, k) => {
            v.onclick = function () {
                ps.forEach((value, key) => {
                    if (key == k) {
                        // 选中项；
                        btns[key].style.background = "red";
                        ps[key].style.display = "block";
                    } else {
                        // 非选中项；
                        btns[key].style.background = "";
                        ps[key].style.display = "none";
                    }
                })
            }
        })
    }
    let btns = document.querySelectorAll(".mydiv1 button");
    let ps = document.querySelectorAll(".mydiv1 p");
    Tab(btns,ps);
    let btns2 = document.querySelectorAll(".mydiv2 button");
    let ps2 = document.querySelectorAll(".mydiv2 p");
    Tab(btns2,ps2);

</script>

</html>

###2、需求变更：其中某一个实现选项卡点击切换下一页功能

- 通过传统的传参数来解决；逻辑和判断越来越复杂；

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div class="mydiv1">
        <button style="background: red">按钮一</button>
        <button>按钮二</button>
        <button>按钮三</button>
        <p style="display: block;">div1</p>
        <p style="display: none;">div2</p>
        <p style="display: none;">div3</p>
    </div>
    <div class="mydiv2">
        <button style="background: red">按钮一</button>
        <button>按钮二</button>
        <button>按钮三</button>
        <p style="display: block;">div1</p>
        <p style="display: none;">div2</p>
        <p style="display: none;">div3</p>
    </div>
    <button class="nextPre">点击我第一个选项卡下一页切换</button>
</body>
<script>
    // 第三个需求 3-点击按钮第一个选项卡有下一页功能
    function Tab(btns, ps, isNext = false) {
        btns.forEach((v, k) => {
            v.onclick = function () {
                psFor(k);
            }
        })

        if (isNext) {
            // 有下一页功能；
            let num = 0;
            document.querySelector(".nextPre").onclick = function () {
                num++;
                num = num > 2 ? 0 : num
                psFor(num);
            }
        }

        function psFor(k) {
            ps.forEach((value, key) => {
                if (key == k) {
                    // 选中项；
                    btns[key].style.background = "red";
                    ps[key].style.display = "block";
                } else {
                    // 非选中项；
                    btns[key].style.background = "";
                    ps[key].style.display = "none";
                }
            })
        }
    }

    let btns = document.querySelectorAll(".mydiv1 button");
    let ps = document.querySelectorAll(".mydiv1 p");
    Tab(btns, ps, true);
    let btns2 = document.querySelectorAll(".mydiv2 button");
    let ps2 = document.querySelectorAll(".mydiv2 p");
    Tab(btns2, ps2);

</script>

</html>

###3、需求变更：另一个实现轮播图功能

- 如何灵活的自动播放？—>需要返还函数还需要返还属性：可以通过返还对象来解决；

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div class="mydiv1">
        <button style="background: red">按钮一</button>
        <button>按钮二</button>
        <button>按钮三</button>
        <p style="display: block;">div1</p>
        <p style="display: none;">div2</p>
        <p style="display: none;">div3</p>
    </div>
    <div class="mydiv2">
        <button style="background: red">按钮一</button>
        <button>按钮二</button>
        <button>按钮三</button>
        <p style="display: block;">div1</p>
        <p style="display: none;">div2</p>
        <p style="display: none;">div3</p>
    </div>
    <button class="nextPre">点击我第一个选项卡下一页切换</button>
    <button class="autoPlay">点击按钮第二个选项卡有自动轮播功能</button>
</body>
<script>
    // 第四个需求 4-点击按钮第二个选项卡有自动轮播功能
    function Tab(btns, ps, isNext = false, isAutoPlay = false) {
        btns.forEach((v, k) => {
            v.onclick = function () {
                psFor(k);
            }
        })

        if (isNext) {
            // 有下一页功能；
            let num = 0;
            document.querySelector(".nextPre").onclick = function () {
                num++;
                num = num > 2 ? 0 : num
                psFor(num);
            }
        }

        if (isAutoPlay) {
            // 控制自动轮播
            let num = 0;
            document.querySelector(".autoPlay").onclick = function () {
                setInterval(() => {
                    num++;
                    num = num > 2 ? 0 : num
                    psFor(num);
                }, 1000);
            }
        }

        function psFor(k) {
            ps.forEach((value, key) => {
                if (key == k) {
                    // 选中项；
                    btns[key].style.background = "red";
                    ps[key].style.display = "block";
                } else {
                    // 非选中项；
                    btns[key].style.background = "";
                    ps[key].style.display = "none";
                }
            })
        }
    }

    let btns = document.querySelectorAll(".mydiv1 button");
    let ps = document.querySelectorAll(".mydiv1 p");
    // 下一页功能 轮播功能； 某一个选项卡的需求；
    Tab(btns, ps, true);
    let btns2 = document.querySelectorAll(".mydiv2 button");
    let ps2 = document.querySelectorAll(".mydiv2 p");
    Tab(btns2, ps2, false, true);

</script>

</html>

###4、需求变更：多个选项卡分别更改数量

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div class="mydiv1">
        <button style="background: red">按钮一</button>
        <button>按钮二</button>
        <button>按钮三</button>
        <p style="display: block;">div1</p>
        <p style="display: none;">div2</p>
        <p style="display: none;">div3</p>
    </div>
    <div class="mydiv2">
        <button style="background: red">按钮一</button>
        <button>按钮二</button>
        <button>按钮三</button>
        <p style="display: block;">div1</p>
        <p style="display: none;">div2</p>
        <p style="display: none;">div3</p>
    </div>
    <button class="nextPre">点击我第一个选项卡下一页切换</button>
    <button class="autoPlay">点击按钮第二个选项卡有自动轮播功能</button>
</body>
<script>
    // 第四个需求 4-点击按钮第二个选项卡有自动轮播功能
    function Tab(btns, ps) {
        btns.forEach((v, k) => {
            v.onclick = function () {
                psFor(k);
            }
        })

        // if (isNext) {
        //     // 有下一页功能；
        //     let num = 0;
        //     document.querySelector(".nextPre").onclick = function () {
        //         num++;
        //         num = num > 2 ? 0 : num
        //         psFor(num);
        //     }
        // }

        // if (isAutoPlay) {
        //     // 控制自动轮播
        //     let num = 0;
        //     document.querySelector(".autoPlay").onclick = function () {
        //         setInterval(() => {
        //             num++;
        //             num = num > 2 ? 0 : num
        //             psFor(num);
        //         }, 1000);
        //     }
        // }

        function psFor(k) {
            ps.forEach((value, key) => {
                if (key == k) {
                    // 选中项；
                    btns[key].style.background = "red";
                    ps[key].style.display = "block";
                } else {
                    // 非选中项；
                    btns[key].style.background = "";
                    ps[key].style.display = "none";
                }
            })
        }
        return psFor;
    }

    let btns = document.querySelectorAll(".mydiv1 button");
    let ps = document.querySelectorAll(".mydiv1 p");
    // 下一页功能 轮播功能； 一个需求；
    let tab1 = Tab(btns, ps);
    // 下一页功能
    let num = 0;
    document.querySelector(".nextPre").onclick = function () {
        num++;
        num = num > 2 ? 0 : num
        tab1(num);
    }

    let btns2 = document.querySelectorAll(".mydiv2 button");
    let ps2 = document.querySelectorAll(".mydiv2 p");
    let tab2 = Tab(btns2, ps2);
    // 自动轮播
    let num2 = 0;
    document.querySelector(".autoPlay").onclick = function () {
        setInterval(() => {
            num2++;
            num2 = num2 > 2 ? 0 : num2
            tab2(num2);
        }, 1000);
    }

</script>

</html>

原文地址：https://www.cnblogs.com/supermanGuo/p/11395890.html

时间： 2024-10-10 18:22:16

javascript面向对象基础(1)的相关文章

Javascript面向对象基础（二）

一: 用定义函数的方式定义类在面向对象的思想中,最核心的概念之一就是类.一个类表示了具有相似性质的一类事物的抽象,通过实例化一个类,可以获得属于该类的一个实例,即对象.在JavaScript中定义一个类的方法如下:function class1(){ //类成员的定义及构造函数}这里class1既是一个函数也是一个类.可以将它理解为类的构造函数,负责初始化工作. 二:使用new操作符获得一个类的实例new Date(); 表示创建一个日期对象,而Date就是表示日期的类,只是这个类是

javascript面向对象基础

//工厂模式 //解决了重复实例化,但是有识别问题 function createObject(name, age){ var obj = new Object(); //创建对象 obj.name = name; //添加属性 obj.age = age; obj.run = function(){ //添加方法 return this.name + this.age + '运行中...'; }; return obj; //返回对象引用 } var box = createObject('L

javascript 面向对象基础（1）

常见的创建对象的方式有3种: ① 声明变量的方式 var obj1 = { key1: "val1", key1: "val2", show: function () { console.log(this.key1) } } var array = [1, 2, 3]; 可以给 obj1 继续添加属性和方法,如: obj1.color = "red"; obj1.hideen = function () { console.log("a

JavaScript 面向对象学习——1

公司项目采用Ext,结果本人发现入门不易!尤其是采用JavaScript编写面向对象程序,经常使用jQuery的知道,jQuery是面向函数编程的,所以很容易入门.然而,Ext是面向对象的,那么,当你想要自定义Ext组件的时候,或者使用Ext组件的时候就会很苦恼.所以,要先学习Javascript面向对象基础,其次查看Ext源代码. 这将是后期的学习路线,博客路线. 1 Javascript是基于原型(Prototype based)的面向对象的语言,Java语言,是基于类模式(Class ba

javascript的基础知识及面向对象和原型属性

自己总结一下javascript的基础知识,希望对大家有用,也希望大家来拍砖,毕竟是个人的理解啊 1.1 类型检查:typeof(验证数据类型是:string) var num = 123; console.log(typeof num); // 1.2 in 运算符作用:判断指定属性是否存在于指定的对象中. 如果指定的属性存在于指定的对象中,则 in 运算符会返回 true. 语法: 属性 in 对象返回值:true 或者 false 示例: var obj = { age: 18 };

Javascript的面向对象基础

今天学习了一些关于javascript面向对象的基础,之前在网上也陆续接触过一些,不过都感觉理解的不够透彻,所以今天做一个小结. 首先javascript的面向对象还要从何为对象说起,所谓对象可以看作是一个黑盒子,你并不清除它内部实现功能的原理,但是你只要了解它是如何使用的,并且能够用它自带的功能完成自己想要做的事情,基本上来说这就是面向对象的思想.其实面向对象的思想生活中随处可见,电视机,电冰箱,空调等等,都可以看作是对象,拿一般人来说,无需知道它们的工作原理,但只要按说明书去使用即可. 回归

JavaScript 面向对象开发知识基础总结

JavaScript 面向对象开发知识基础总结最近看了两本书,书中有些内容对自己还是很新的,有些内容是之前自己理解不够深的,所以拿出来总结一下,这两本书的名字如下: JavaScript 面向对象精要 JavaScript 启示录如果对于 JavaScript 面向对象编程理解不够深的话,第一本书还是强烈推荐的.第二本书比较适合初中级的开发者阅读.对各种知识点都有代码示例.内容中规中矩. 1.JavaScript 中的变量类型和类型检测 C#和Java等编程语言用栈存储原始类型,用堆存储引用

JavaScript继承基础讲解，原型链、借用构造函数、混合模式、原型式继承、寄生式继承、寄生组合式继承

说好的讲解JavaScript继承,可是迟迟到现在讲解.废话不多说,直接进入正题. 既然你想了解继承,证明你对JavaScript面向对象已经有一定的了解,如还有什么不理解的可以参考<面向对象JS基础讲解,工厂模式.构造函数模式.原型模式.混合模式.动态原型模式>,接下来讲一般通过那些方法完成JavaScript的继承. 原型链 JavaScript中实现继承最简单的方式就是使用原型链,将子类型的原型指向父类型的实例即可,即“子类型.prototype = new 父类型();”,实现方法如下

再谈javascript面向对象编程

前言:虽有陈皓<Javascript 面向对象编程>珠玉在前,但是我还是忍不住再画蛇添足的补上一篇文章,主要是因为javascript这门语言魅力.另外这篇文章是一篇入门文章,我也是才开始学习Javascript,有一点心得,才想写一篇这样文章,文章中难免有错误的地方,还请各位不吝吐槽指正吐槽Javascript 初次接触Javascript,这门语言的确会让很多正规军感到诸多的不适,这种不适来自于Javascript的语法的简练和不严谨,这种不适也来自Javascript这个悲催的名称,