面向对象编程

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

    $(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("<div class='likeBox'></div>");
            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 = $("<img src=" + imgSrc + ">");
                $(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;
            }