渐进式编码规范，一步步从面向过程到面向对象

Posted 2020-10-03

学习js这么久了，一步步见证着自己的成长，看到别的大牛的代码，一步步去完善自己，今天，我就来通过一个简单的实例来记录自己的进步。

通过输入框输入字符串，来显示输入的字符数量。

1.函数式编程（初出新手村）不建议使用

//面向过程的变成方式，不推荐

window.onload=function(){
	var $=function(id){
		return document.getElementById(id);
	};
	var oInput=$("input_word");
	var getNum=function(){
		return oInput.value.length;
	};
	var render=function(){
		var num=getNum();
		var oSpan=null;
		if(oInput.value.length==0){
			console.log(1);
			var span=document.createElement("span");
			span.className="input_word_num";
			document.body.appendChild(span);
		}else{
			oSpan=document.querySelector(".input_word_num");
			console.log(oSpan);
			oSpan.innerhtml=num+"个字符串";
			}
		};
		oInput.addEventListener("keyup",function(){
			render();
		});
		render();
	}

　2.利用命名空间的方式编程（初出茅庐）优点：避免全局变量污染，缺点:没有私有属性，属性方法对外保留，容易被修改

 1 //命名空间的方式编程,缺少私有属性，所有的属性都可以修改
 2         var strCalc={
 3             input:null,
 4             init:function(config){
 5                 this.input=document.querySelector(config.id);
 6                 this.bind();
 7                 return this;
 8             },
 9             bind:function(){
10                 var self=this;
11                 this.input.addEventListener("keyup",function(){
12                     self.render();
13                 })
14             },
15             getNum:function(){
16                 return this.input.value.length;
17             },
18             render:function(){
19                 if(this.input.value.length==0){
20                     var span=document.createElement("span");
21                     span.className="input_word_num";
22                     document.body.appendChild(span);
23                 }else{
24                     var oSpan=document.querySelector(".input_word_num");
25                     oSpan.innerHTML=this.getNum()+"个字符";
26                 }
27             }        
28         };
29         window.onload=function(){
30             strCalc.init({id:"#input_word"}).render();
31         }

3.面向对象式编程（编程入门）

//面向对象版本，可以避免变量污染，以及有自己的私有属性
        var strCalc=(function(){
            var _bind=function(that){
                that.input.addEventListener("keyup",function(){
                    that.render();
                })
            };
            var _getNum=function(that){
                return that.input.value.length;
            };
            var Textnum=function(){
                this.span=null;
            };
            Textnum.prototype.init=function(config){
                this.input=document.querySelector(config.id);
                _bind(this);
                return this;
            };
            Textnum.prototype.render=function(){
                if(this.input.value.length==0){
                    var span=document.createElement("span");
                    span.className="input_word_num";
                    document.body.appendChild(span);
                }else{
                    this.span=document.querySelector(".input_word_num");
                    this.span.innerHTML=_getNum(this)+"个字符串";
                }
            };
            return Textnum;
        })();
        window.onload=function(){
            new strCalc().init({id:"#input_word"}).render();
        }

在编程的道路上有许多需要学习的，每天都能有所进步，生活更充实。祝愿大家事事顺心。——小抠