面向對象編程

邱勇發布于2019-08-20 18:22 / 1225人閱讀

摘要：先來一個直播點贊動效的例子用于算出的隨機值圖片最終的位置關閉點贊動畫的時間組件套路基于工具類函數寫在上組件初始化參數賦值組件內部事件組件與外部相關有事件

先來一個直播點贊動效的例子

    $(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面向對象編程

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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