JS组件开发
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS组件开发2</title>
</head>
<body>
<input type="text" id="J_input"/>
</body>
<script src="jQuery/1.9.1/jquery.min.js"></script>
<script>
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();
});
</script>
看了一篇关于写JS组件开发的博客，居然看不懂，虽然我前几天觉得自己把原型那块弄的非常懂，但是看到上面实际应用的代码时，还是一脸懵逼，不知道如何下面的调用这个组件的方式为何是这样，我就写了下面的一个小例子：而且呢，
你一定要搞清楚this的指向问题，在这里this都是指向构造函数TextCountFun.
$(function(){ new TextCount().init({id:'#J_input'}).render(); });
为啥这样调用：首先，匿名函数自执行--返回了构造函数了TextCountFun--1，所以TextCount 等同于构造函数TextCountFun,
2，new TextCount()相当于实例化了TextCountFun，
3，new TextCount().init({id:'#J_input'})，就是调用了TextCountFun原型里的方法，init并且传了参数， init方法又返回了this---又因为this指向了TextCountFun，所以实现了链式调用render.
附上我自己动手分析的一个小例子：当你弄不明白的时候，动手写个小小的demo一步步分析，你就会懂了....
<script>
var a = (function(){
var _eat = function(that){
alert(this) ;//这里的this 指向window
alert(that.food); //所以把指向构造函数的this传值给_eat,让_eat可以调用Person里的属性。
};
function Person(info){
this.name = info.name;
this.age = info.age;
this.food = info.food;
}
//共有方法
Person.prototype.say = function(info){
_eat(this); //这里的this指向构造函数Person
return this.name+this.age;
};
return Person;
})();
//构造函数
var b = new a({name:'zhu',age:'20',food:'apple'});
alert(b.say());
</script>
并且附上以上组件来源的博客地址:javascript组件开发
顺便奉上几篇关于js插件编写规则的文章
如何定义一个高逼格的原生JS插件
从jq插件到js组件封装
