JS 组件编写的小例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <input type="text" id="textInput">
</body>
<script>
    /*
    这种代码比较南维护
    
    var textInput = document.getElementById('textInput');
    function getNum(){
        return textInput.value.length;
    }

    function getSpan(){
        if(document.getElementById('spans')){
            return document.getElementById('spans');
        }else{
            var span = document.createElement('span');
            span.id = 'spans';
            return span;
        }
    }
    function render(){
        var num = getNum();
        var span = getSpan();
        if(num == 0){
            textInput.parentElement.appendChild(span);
        }else{
            span.innerHTML = num+'个字';
            textInput.parentNode.appendChild(span);
        }
    }
    textInput.onkeyup = function(){
        render();
    }
    */


    /*
        作用域的隔离
        这种写法没有私有的概念，比如上面的getNum,bind应该都是私有的方法。
        但是其他代码可以很随意的改动这些。当代码量特别特别多的时候，很容易出现变量重复，或被修改的问题。

    var textInput = {
        input : null,
        init : function(options){
            this.input = document.getElementById(options.id);
            this.bind();
            //this.render();
        },
        getNum : function(){
            return this.input.value.length;
        },
        getSpanElement : function(){
            if(document.getElementById('spans')){
                return document.getElementById('spans');
            }else{
                var span = document.createElement('span');
                span.id='spans';
                return span;
            }
        },


        bind : function(){
            var that = this;
            this.input.onkeyup = function(){
                that.render();
            }
        },
        render : function(){
            var num = this.getNum();
            var spanElement = this.getSpanElement();
            if(num > 0){
                spanElement.innerHTML = num + '个字';
            }
            this.input.parentElement.appendChild(spanElement);
        }
    }

    textInput.init({
        id:'textInput'
    })
*/

    /*
        私有方法改造
        这种写法，把所有的东西都包在了一个自动执行的闭包里面，所以不会受到外面的影响，并且只对外公开了TextCountFun构造函数，生成的对象只能访问到init,render方法。
        这种写法已经满足绝大多数的需求了。事实上大部分的jQuery插件都是这种写法。
    */

    var TextCount = (function(){
        var TextCountFunc = function(config){
            this.input = null;
            this.init = function(){
                this.input = document.getElementById(config.id);
                _bind(this);
            }
            this.render = function(){
                var num = _getNum(this);
                var spanElement = _getSpanElement(this);
                if(num > 0){
                    spanElement.innerHTML = num + '个字';
                }
                this.input.parentElement.appendChild(spanElement);
            }
        }
        
        function _getNum(that){
            return that.input.value.length;
        }

        function _getSpanElement(that){
            if(document.getElementById('spans')){
                return document.getElementById('spans');
            }else{
                var span = document.createElement('span');
                span.id = 'spans';
                return span;
            }
        }
        function _bind(that){
            that.input.onkeyup = function(){
                that.render();
            }
        }
        return TextCountFunc;
    })()

    var obj = new TextCount({id:'textInput'}); 
    obj.init();



    var winPop_obj = (function(global){
        function winPop(){
            config = {};
            this.get = function(k){
                return this[k];
            }
            this.set = function(k,v){
                this[k] = v;
            }
        }
        winPop.prototype.init = function(){
            this.create();
            this.get_c();
        }
        winPop.prototype.create = function(){
            this.set('aa','bb');
        }
        winPop.prototype.get_c = function(){
            this.get('aa');
        }
        return winPop;
        

    })(window)
    console.log(winPop_obj);
    var obj = new winPop_obj();
    obj.init();
    console.log(obj);
</script>
</html>
JS 组件编写的小例子

猜你喜欢
