js链式调用

作者: mlxg | 来源:发表于2016-07-09 19:04 被阅读0次


<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>test</title>
    <script src="../lib/jquery.js"></script>
    <script>
    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() {
        //在domready后调用
        textCount.init({
            id: '#J_input'
        }).render();
    })
    </script>
</head>

<body>
    <input type="text" id="J_input" />
</body>

</html>