js链式调用


<!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>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容