<!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>