學習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();
        }

在編程的道路上有許多需要學習的，每天都能有所進步，生活更充實。祝願大家事事順心。——小摳

漸進式編碼規範，一步步從面向過程到面向對象