前端组件开发方式（一）

首先是最简陋的写法，全局变量

$(function(){
    var input = $("#J_input");
    function getNum(){
        return input.val().length;
    }
    function render(){
        var num = getNum();

        if($("#J_input_count").length==0){
            input.after('<span id="J_input_count"></span>')
        }
        $("#J_input_count").html(num+'个字');
    }
    input.on('keyup',function(){
        render();
    })
    render();
    //职责分离，初始化
})

封装

//封装对象
var textCount = {
    input : null,
    init : function(config){
        this.input = $(config.id);
        this.bind();
        return this;
    },
    bind:function(){
        var self = this;
        this.input.on('keyup',function(){
            self.render();
        });
    },
    getNum:function(){
        return this.input.val().length;
    },
    render:function(){
        var num = this.getNum();
        if("#J_input_count").length==0){
            this.input.after('<span id="J_input_count"></span');
        }
        $("#J_input_count").html(num+'个字');
    }
}
$(function(){
    textCount.init({id:"#j_input"}).render();//初始化
})

私有变量封装

var TextCount = (function(){
    //
    var _bind = function(that){
        that.input.on('keyup',function(){
            that.render();
        });
    };
    var _getNum = function(){
        return that.input.val().length;
    }
    var TextCountFun = function(config){

    };
    TextCountFun.prototype.init = function(config){
        this.input = $(config.id);
        _bind(this);

        return this;
    };
    TextCountFun.prototype.render = function(){
        var num = _getNum(this);

        if($("#J_input_count").length==0){
            this.input.after('<span id="J_input_count"></span>');
        };
        $("#J_input_count").html(num+'个字');
    }
    return TextCountFun;
})();
$(function(){
    new TextCount().init({id:"#J_input"}).render();
})

 

转载于:https://www.cnblogs.com/wgdong/p/5281833.html