标签：避免 cti jpg 私有属性 编码规范 new ons self 空间
学习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(); }
在编程的道路上有许多需要学习的，每天都能有所进步，生活更充实。祝愿大家事事顺心。——小抠
标签：避免 cti jpg 私有属性 编码规范 new ons self 空间
原文地址：http://www.cnblogs.com/coolblog/p/7372674.html
