面向对象编程

邱勇发布于2019-08-20 18:22 / 1182人阅读

摘要：先来一个直播点赞动效的例子用于算出的随机值图片最终的位置关闭点赞动画的时间组件套路基于工具类函数写在上组件初始化参数赋值组件内部事件组件与外部相关有事件

先来一个直播点赞动效的例子

    $(function () {
        function Like(config) {
            this.config = this.initConfig(config);
        }
        Like.prototype.initConfig = function (params) {
            var defaults = {
                DomEle: ".demo",
                getImgUrl: function () {
                    var num = Math.floor(Math.random() * 3 + 1);
                    return "images/" + num + ".png";
                },
                leftRange:[100,200],//用于算出css left的随机值[100,200]
                bootom: "300px",//图片最终的位置
                closeLikeTime: 6000,//关闭点赞动画的时间
                imgCss:{
                    width: "20px",
                    height: "20px",
                    position: "absolute",
                    bottom: "100px",
                    left: "50%",
                    marginLeft: "-10px"
                }
            };
            var self = this;
            var config = $.extend({}, defaults, params);
            $(config.DomEle).append("");
            setTimeout(function () {
                clearInterval(time)
            }, config.closeLikeTime);
            var time = setInterval(function () {
                self.like_animate(config.getImgUrl, config.leftRange, config.bootom);
            }, 100);
            console.log(config)
            return config;
        };
        Like.prototype.like_animate = function (getImgUrl, leftRange, bootom) {
            var self=this;
            var x = leftRange[0], y = leftRange[1];
            var rand = parseInt(Math.random() * (x - y + 1) + y);
            var imgSrc = getImgUrl();
            if (imgSrc) {
                var img = $("");
                $(self.config.DomEle+" .likeBox").append(img);
                img.css(self.config.imgCss).animate({
                    bottom: bootom || "300px",
                    opacity: "0",
                    left: rand
                }, 3000)
            } else {
                throw new Error("getImgUrl is null")
            }

        };
        new Like();
        new Like({
            DomEle: ".demo2",
            imgCss:{
                width: "20px",
                height: "20px",
                position: "absolute",
                bottom: "100px",
                left: "50%",
                marginLeft: "100px"
            }
        })
    })

组件套路(基于jQuery)：

 1. 工具类函数写在prototype上
 2. this.config = $.extend({}, defaults, this.config);//组件初始化参数赋值
 3. 组件内部click事件：this.$changeMoneyBtn.click($.proxy(this.change_money, this));
 4. 组件与外部相关有click事件：self.config.toAdditionBtnClickCB();

function ComponentName(config) {
         var self = this;
            this.config = config;
            this.initConfig();
            this.$moneyInput = $(".moneyInput");
            this.randomMoney="";
            var ppMoney;
            var hongbaoAllRight = true;
            this.$moneyInput.on("focus", function () {
                
            });
            this.$moneyInput.on("blur", function (e) {
               
            });
            $(".toAdditionBtn").on("click", function (e) {
                self.config.toAdditionBtnClickCB();
        
            });
            $(".toAggrementLink").on("click",function () {
                self.config.toAggrementLinkCB();
            });
            this.$changeMoneyBtn.click($.proxy(this.change_money, this));
            }
        
            ComponentName.prototype.initConfig = function () {
            var defaults = ComponentName.prototype.defaults = {
                template: ""
            };
            this.config = $.extend({}, defaults, this.config);
            var config = this.config;
            var data= {
             
            }
            var html = _.template(config.template, {variable: "list"})(data);
            $("."+config.className).append(html);
            }
     
            ComponentName.prototype.change_money = function () {
                var self=this;
                this.getdata(self.randomMoney);
                this.$moneyInput.val("")
            }
            ComponentName.prototype.nicknameInputBlur = function (e) {
                var nickName = e.target.value;
            }

云服务器 GPU云服务器面向对象编程面向对象java编程面向对象编程语言 java面向对象编程

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

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

初探面向对象编程之oop与设计模式

摘要：为什么要采用面向对象编程解决问题更容易设计计算机程序就是为了解决人类的问题。面向对象编程需要对业务及代码的架构是有一定的要求的。 1. 编程方式我们目前的编程方式大体可以有以下三种编程方式：顺序编程过程式编程面向对象编程在讲面向对象编程时先讲一下什么是顺序编程，什么是过程式编程，什么是面向对象编程：顺序编程：就是只用一个单线程去执行一段代码，执行过程根据代码依次从上...

BingqiChen 2019-06-28 13:17 评论0 收藏0
SegmentFault 技术周刊 Vol.32 - 七夕将至，你的“对象”还好吗？

摘要：很多情况下，通常一个人类，即创建了一个具体的对象。对象就是数据，对象本身不包含方法。类是相似对象的描述，称为类的定义，是该类对象的蓝图或原型。在中，对象通过对类的实体化形成的对象。一类的对象抽取出来。注意中，对象一定是通过类的实例化来的。 showImg(https://segmentfault.com/img/bVTJ3H?w=900&h=385); 马上就要到七夕了，离年底老妈老爸...

李昌杰 2019-08-16 10:40 评论0 收藏0
SegmentFault 技术周刊 Vol.32 - 七夕将至，你的“对象”还好吗？

摘要：很多情况下，通常一个人类，即创建了一个具体的对象。对象就是数据，对象本身不包含方法。类是相似对象的描述，称为类的定义，是该类对象的蓝图或原型。在中，对象通过对类的实体化形成的对象。一类的对象抽取出来。注意中，对象一定是通过类的实例化来的。 showImg(https://segmentfault.com/img/bVTJ3H?w=900&h=385); 马上就要到七夕了，离年底老妈老爸...

Lyux 2019-06-28 13:32 评论0 收藏0
SegmentFault 技术周刊 Vol.32 - 七夕将至，你的“对象”还好吗？

摘要：很多情况下，通常一个人类，即创建了一个具体的对象。对象就是数据，对象本身不包含方法。类是相似对象的描述，称为类的定义，是该类对象的蓝图或原型。在中，对象通过对类的实体化形成的对象。一类的对象抽取出来。注意中，对象一定是通过类的实例化来的。 showImg(https://segmentfault.com/img/bVTJ3H?w=900&h=385); 马上就要到七夕了，离年底老妈老爸...

AaronYuan 2019-08-20 18:55 评论0 收藏0
再和“面向对象”谈恋爱 - 面向对象编程概念（三）

摘要：说到底面向对象才是程序语言的根本。其实面向对象编程说的就是自定义对象。里并没有类的概念，所以严格上来讲这是个假的面向对象里的面向对象编程现在好了，终于听到别人鄙视我们了，给我们提供了类这个概念，其实是向传统语言更靠齐了。通过前两篇文章，我们了解了对象的概念以及面向对象里的相关概念等知识，那前面说了对象分类里的前两种，这篇文章要详细去说第三种自定义对象，那真正的好戏这就来了！面向对象...

Cruise_Chan 2019-08-23 10:45 评论0 收藏0
编程范式与函数式编程

摘要：声明式编程一种编程范式，与命令式编程相对立。常见的声明式编程语言有数据库查询语言，正则表达式逻辑编程函数式编程组态管理系统等。函数式编程，特别是纯函数式编程，尝试最小化状态带来的副作用，因此被认为是声明式的。编程范式与函数式编程一、编程范式的分类常见的编程范式有：函数式编程、程序编程、面向对象编程、指令式编程等。在面向对象编程的世界，程序是一系列相互作用（方法）的对象（Class...

noONE 2019-08-23 18:32 评论0 收藏0