资讯专栏INFORMATION COLUMN

初试面向对象编程

cikenerd / 985人阅读

摘要:面向对象编程面向过程是一门面向过程的语言,也就是侧重点是实现一件事的步骤。面向对象以事物为中心,侧重于完成某件事所需要的事物的特征和行为的设计。

面向对象编程
面向过程

javascript是一门面向过程的语言,也就是侧重点是实现一件事的步骤。

特点:有良好的可扩展性和重用性,降低了代码间的耦合度,接近日常思维。

面向对象

以事物为中心,侧重于完成某件事所需要的事物的特征和行为的设计。

特点:封装、继承、多态,耦合度低,复用度好。

相信这些概念性的东西,网上真的是一搜一大堆,在我使用我的方法理解和上手面向对象之前,容许我把概念性的东西写完,毕竟基础特别重要啊。相信我,如果你正在阅读,请忍耐一两分钟

相关名词

prototype : 获取构造函数的原型对象

constructor : 获取原型对象的构造函数

--proto-- : 获取实例对象的构造函数的原型对象

原型链 : 构造函数自身会有原型对象,通过prototype查看,构造函数的实例对象自身也会有原型对象,通过--proto--查看,--proto--是object类型,当访问一个实例化的属性时,浏览器会先查找自身内部属性,没有就找--proto--,直到--proto--类型为null。

New关键字作用:创建一个空对象,让空对象调用构造函数给自己赋值,将该对象返回

继承

实现B继承A

方式一:在B的构造函数内部写A.call(this);缺点:参数设置不灵活

方式二:(使用原型链实现继承)step1:改变自身原型对象B.prototype=new A();step2:修复原型对象指向的构造函数B.prototype.constructor=B

好啦,概念性的东西就写到这,下面开始我的代码之旅,现在已经晚上11:30整,我好瞌睡啊,太困了,把这个写完我就去睡觉了Zzzz

基础设置

国际惯例,先把代码的基础设置好

            div,
            p {
                width: 100px;
                height: 30px;
                border: 1px solid #ffffd;
                margin: 30px auto;
            }
            div.open,p.open{
                background: pink;
            }


            
                

1.基础版
        /*NO.1
         * 基础方法
         * 缺点:代码冗余,重复获取元素重复循环操作
         * 功能:修改背景色
         */

        var divs1 = document.getElementsByTagName("div");
        var ps1 = document.getElementsByTagName("p");
        for (var i = 0; i < divs1.length; i++) {
            divs1[i].style.backgroundColor = "pink";
        }
        for (var i = 0; i < ps1.length; i++) {
            ps1[i].style.backgroundColor = "pink";
        }
2.进阶版(一)
        /*NO.2
         * 进阶方法
         * 缺点:太局限,只能设置样式
         * 功能:修改背景色
         */
        function getDOM(tagName){
            return document.getElementsByTagName(tagName);
        }
        function setStyle(arr,styleName,styleVal){
            for (var i = 0; i < arr.length; i++) {
                arr[i].style[styleName] = styleVal;
            }
        }
        var divs2 = getDOM("div");
        var ps2 = getDOM("p");
        setStyle(divs2,"backgroundColor","#00a09d");
        setStyle(ps2,"backgroundColor","#00a09d");
3.进阶版(二)
        /*NO.3
         * 进阶方法
         * 缺点:代码不利于阅读,没有结构化
         * 功能:修改宽度,填充文字,遍历封装
         */
        function getDOM(tagName){
            return document.getElementsByTagName(tagName);
        }
        function each(arr,callback){
            for (var i = 0; i < arr.length; i++) {
                callback(arr[i])
            }
        }
        var divs2 = getDOM("div");
        var ps2 = getDOM("p");
        each(divs2,function(tag){    
            tag.style.width = "200px";
            tag.innerText = "I have a pen!!!";
        })
4.进阶版(三)
        /*NO.4
         * 进阶方法,传统面向对象写法(独立作用域)
         * 功能:添加样式,遍历封装
         */
        function Tool(bgColor){
            this.bgColor = bgColor||"#00a09d";
            this.getDom = function(tagName){
                return document.getElementsByTagName(tagName);
            };
            this.each = function(arr,callback){
                for (var i = 0; i < arr.length; i++) {
                    arr[i].style.backgroundColor = this.bgColor;
                    callback(arr[i]);
                }
            };
        }
        //实例化(使用)
        var tool = new Tool();
        var ps3 = tool.getDom("p");
        var divs3 = tool.getDom("div");
        tool.each(divs3,function(tag){    
            tag.style.width = "200px";
            tag.innerText = "I have a pen!!!";
        })
5.终极版
        /*NO.5
         * 进阶方法,ES6面向对象写法(独立作用域,类本身指向构造函数)
         * 功能:将传入的对象变成红色,填充文字,添加点击效果(歪楼了,需求改成这怂样子了)
         * 说明:实例化之后立即实现以上功能
         * 功能:修改背景,填充文字,绑定事件......
         */
        class Tool{
            //构造函数(options为实例化传入的参数)
            //作用:设置默认参数,合并默认参数和传入的参数,实现继承
            constructor(options){
                let dafultOpations = {
                    element:"",
                    bgColor:"red",
                    color:"#fff"
                }
                
                this.options = Object.assign({},dafultOpations,options); //合并对象   assign(相同项会覆盖) merge(相同项会合并)
                this.checkOptions().setStyle().setText().bindClick()  //实例化后立即执行这些方法,每个方法在调用完成后一定要释放this
            }
            //由于该类的实现依赖于传入的DOM,此方法用来确保已经传入DOM,若实例化没有传入,则抛出异常
            checkOptions(){
                if(!this.options.element){
                    throw new Error("Element is required!!!")
                }
                return this;
            }
            setStyle(){
                for (var i = 0; i < this.options.element.length; i++) {
                    this.options.element[i].style.backgroundColor = this.options.bgColor;
                    this.options.element[i].style.textAlign = "center";
                    this.options.element[i].style.color = this.options.color;
                }
                return this;
            }
            setText(){
                for (var i = 0; i < this.options.element.length; i++) {
                    this.options.element[i].innerText = "呆呆Akuma";
                }
                return this;
            }
            bindClick(){
                for (var i = 0; i < this.options.element.length; i++) {
                    let __this = this.options.element[i];  //需将当前的元素区分开 __this!=this
                    let flag = false;
                    __this.addEventListener("click",()=>{
                        if(flag = !flag){                            
                            __this.style.backgroundColor = "pink"
                        }else{
                            __this.style.backgroundColor =     this.options.bgColor;                    
                        }
                    })
                }
                return this;
            }
        }
        
        
        
        var divs = new Tool({
            element:document.getElementsByTagName("div"),
            bgColor:"#00a09d"
        });
        var ps = new Tool({
            element:document.getElementsByTagName("p"),
            bgColor:"#f48"
        });

目前看起来,这个终极版好像是最繁琐的,首先我要说明,这里只是介绍面向对象编程是怎么回事,对于漫天飞的this真的神烦,不过多写写就好了,习惯就好,要学会控制它,如果你成功看完这篇文章,你就会发现,随着版本(暂时就算版本吧)升级,功能也慢慢增多,灵活性更好,代码的可扩展性更高啦,至于质疑一个简单的功能至于写这么复杂吗?

很好,我觉得面向对象编程就是造轮子的过程,轮子就相当于工具。打个比方,伐树你会选择电锯还是斧头,劈柴你会选择电锯还是斧头,相信答案就在你心里,好了不写了,真困了,快睡着了。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/93739.html

相关文章

  • JS程序

    摘要:设计模式是以面向对象编程为基础的,的面向对象编程和传统的的面向对象编程有些差别,这让我一开始接触的时候感到十分痛苦,但是这只能靠自己慢慢积累慢慢思考。想继续了解设计模式必须要先搞懂面向对象编程,否则只会让你自己更痛苦。 JavaScript 中的构造函数 学习总结。知识只有分享才有存在的意义。 是时候替换你的 for 循环大法了~ 《小分享》JavaScript中数组的那些迭代方法~ ...

    melody_lql 评论0 收藏0
  • JS函数式编程读书笔记 - 1

    摘要:在近期看到了函数式编程这本书预售的时候就定了下来。主要目的是个人目前还是不理解什么是函数式编程。且和现在在学习函数式编程有莫大的关系。加速大概了解了函数式编程之后。总结看完了第一章也是可以小结一下的函数式编程。 本文章记录本人在学习 函数式 中理解到的一些东西,加深记忆和并且整理记录下来,方便之后的复习。 在近期看到了《JavaScript函数式编程》这本书预售的时候就定了下...

    G9YH 评论0 收藏0
  • 前端思考 - 收藏集 - 掘金

    摘要:并尝试用为什么你统计的方式是错的掘金翻译自工程师的文章。正如你期望的,文中的前端开发单一职责原则前端掘金单一职责原则又称单一功能原则,面向对象五个基本原则之一。 单页式应用性能优化 - 首屏数据渐进式预加载 - 前端 - 掘金前言 针对首页和部分页面打开速度慢的问题,我们开始对单页式应用性能进行优化。本文介绍其中一个方案:基于 HTTP Chunk 的首屏数据渐进式预加载方案,该方案总...

    LinkedME2016 评论0 收藏0
  • 【Python】一文弄懂python装饰器(附源码例子)

    摘要:装饰器的使用符合了面向对象编程的开放封闭原则。三简单的装饰器基于上面的函数执行时间的需求,我们就手写一个简单的装饰器进行实现。函数体就是要实现装饰器的内容。类装饰器的实现是调用了类里面的函数。类装饰器的写法比我们装饰器函数的写法更加简单。 目录 前言 一、什么是装饰器 二、为什么要用装饰器 ...

    liuchengxu 评论0 收藏0
  • IntersectionObserve初试

    摘要:构造函数调用时,需要给它传一个回调函数。当监听的元素进入可视区域或者从可视区域离开时,回调函数就会被调用。构造函数的返回值是一个观察器实例。它是一个数组,每个成员都是一个门槛值,默认为,即交叉比例达到时触发回调函数。 IntersectionObserve这个API,可能知道的人并不多(我也是最近才知道...),这个API可以很方便的监听元素是否进入了可视区域。 * { marg...

    LucasTwilight 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<