(1)//这种写法,把所有的东西都包在了一个自动执行的闭包里面,所以不会受到外面的影响,并且只对外公开了TextCountFun构造函数,生成的对象只能访问到init,render方法。这种写法已经满足绝大多数的需求了。事实上大部分的jQuery插件都是这种写法。
var TextCount = (function(){
//私有方法,外面将访问不到
var _bind = function(that){ //监听事件
that.input.on('keyup', function(){
that.render();
});
};
var _getNum = function(that){
return that.input.val().length;
};
//对外公开的构造函数
var TextCountFun = function(config){
};
TextCountFun.prototype.init = function(config){ //初始化参数、方法
this.input = $(config.id);
_bind(this);
return this;
};
TextCountFun.prototype.render = function(){ //渲染元素
var num = _getNum(this);
if ($('#J_input_count').length === 0){
this.input.after('<span id="J_input_count"></span>');
}
$('#J_input_count').html(num + '个字');
};
//返回构造函数
return TextCountFun;
}());
$(function() {
new TextCount().init({id:'#J_input'}).render();
});
(2)//这种写法没有私有的概念,比如上面的getNum,bind应该都是私有的方法。但是其他代码可以很随意的改动这些。当代码量特别特别多的时候,很容易出现变量重复,或被修改的问题。
var textCount = {
input: null,
init: function(config){
this.input = $(config.id);
this.bind();
//这边范围对应的对象,可以实现链式调用
return this;
},
bind: function(){
var self = this;
this.input.on('keyup', function(){
self.render();
});
},
getNum: function(){
return this.input.val().length;
},
//渲染元素
render: function(){
var num = this.getNum();
if ($('#J_input_count').length === 0) {
this.input.after(' <span id="J_input_count"></span>');
}
$('#J_input_count').html(num + '个字');
}
};
$(function(){
//在domready后调用
textCount.init({id:'#J_input'}).render();
});
(3)//这种写法属于原始开发方式,适用于小项目或者活动页,但是当页面变的复杂的时候,各种变量混乱,没有很好的隔离作用域,会很难去维护
$(function(){
var input = $('#J_input');
//用来获取字数
function getNum(){
return input.val().length;
}
//渲染元素
function render(){
var num = getNum();
//没有字数的容器就新建一个
if ($('#J_input_count').length === 0){
input.after(' <span id="J_input_count"></span>');
}
$('#J_input_count').html(num + '个字');
}
//监听事件
input.on('keyup', function(){
render();
});
//初始化,第一次渲染
render();
});