Home » Code » Javascript组件化基本写法

Javascript组件化基本写法

之前搬过一篇javascript模块化编程基本写法,组件化跟模块化是不是一个东西?小白愣是不太明白,这篇也算是那一篇的另一个例子说明吧。本文是以统计输入框的字数这个小功能为案例,说明如何编写组件化的Javascript代码。为了方便,使用jQuery工具库。

input_count
最基本的写法

所谓最基本的写法,就是完完全全的全局变量全局函数面向过程一步一步的来。其实咱们一开始学习Javascript时候都是这么写的。

var $input = $('#input');

function getNum() {
    return $input.val().length;
}

function render() {
    var $inputCount = $('#input-count');
    var count = getNum();
    if ($inputCount.length === 0) {
        $input.after('<span id="input-count">' + count + '个字</span>');
    } else {
        $inputCount.text(count + '个字');
    }

}

$input.on('keyup', render);

render();

这样的代码在大牛眼里被认为是基本不可用的。各种变量函数混乱,当页面变复杂时,很难去维护。

作用域隔离

我们使用一个简单的json对象模拟命名空间:

var textCount = {
    input: null,
    init: function(id) {
        this.input = $(id);
        this.bind();
        return this;
    },
    bind: function() {
        this.input.on('keyup', this.render.bind(this));
    },
    getNum: function() {
        return this.input.val().length;
    },
    render: function() {
        var num = this.getNum();
        var $inputCount = $('#input-count');
        if ($inputCount.length === 0) {
            this.input.after('<span id="input-count">' + num + '个字</span>');
        } else {
            $inputCount.text(num + '个字');
        }
    }
};

textCount.init('#input').render();

这样子改造后,代码看起来清晰有条理很多,一个功能的代码都在一个变量下面,而且有统一的入口。但是还是有不少问题的,主要是没有私有的概念,比如这里的getNum,bind都应该是私有的方法,不能随便被改动。而且这个组件也无法同时用于多个元素。为了解决这些问题,引入立即执行函数(跟闭包有些相似)。

成员私有化

var textCount = (function() {
    var _bind = function(obj) {
        obj.input.on('keyup', obj.render.bind(obj));
    };
    var _getNum = function(obj) {
        return obj.input.val().length;
    };
    function textCount() {

    };
    textCount.prototype.init = function(id) {
        this.input = $(id);
        this.id = id.substring(1);
        _bind(this);
        return this;
    };
    textCount.prototype.render = function() {
        var num = _getNum(this);
        var $inputCount = $('#input-count-' + this.id);
        if ($inputCount.length === 0) {
            this.input.after('<span id="input-count-' + this.id + '">' + num + '个字</span>');
        } else {
            $inputCount.text(num + '个字');
        }
    };
    return textCount;
})();

new textCount().init('#input').render();

new textCount().init('#input2').render();

经过一么一番改动,我们们只暴露了init和render两个方法,很好的保护了其他变量。而且是实例化类生成了对象,可同时用于多个元素,已经能满足大部分的需求了。

【以上只是原文的一小部分,原文内容较多且较高级,有兴趣可以点击查看。小白我就不搬了】

参考链接:
http://purplebamboo.github.io/2015/03/16/javascript-component/

Leave a Reply

Your email address will not be published. Required fields are marked *

*

Time limit is exhausted. Please reload CAPTCHA.