首先,我们来实现类的机制,因为JavaScript不存在类的概念, 所以我们就参考别人的写法,写出一个类:
(这是拿John Resig的class简单修改了下)
var Class = (function() {
var _mix = function(r, s){
for (var p in s){
if (s.hasOwnProperty(p)) {
r[p] = s[p]
}
}
}
var _extend = function(){
//开关 用来使生成原型时,不调用真正的构成流程init
this.initPrototype = true;
var prototype = new this();
this.initPrototype = false;
var items = Array.prototype.slice.call(arguments) || []
var item;
while (item = items.shift()){
_mix(prototype, item.prototype || item)
}
function SubClass () {
if(!SubClass.initPrototype && this.init)
this.init.apply(this, arguments)//调用init真正的构造函数
}
// 赋值原型链,完成继承
SubClass.prototype = prototype
// 改变constructor引用
SubClass.prototype.constructor = SubClass
// 为子类也添加extend方法
SubClass.extend = _extend
return SubClass
}
//超级父类
var Class = function(){}
Class.extend = _extend
return Class
})()
子类,父类都拥有extend的方法,可以继承另一个类。
但是,继承的父类只能有一个,但可以通过extend实现多重混入。
有了Class,就可以实现了。
通过让TextCon继承Class类, 然后拓展其中的方法, 就可以实现了,和java的写法差不多。
但是,我们还可以将其中的基础东西抽出来,做成Base类,然后TextCon再基础Base类,以后做拓展就很简单了。
<DOCTYPE html>
<html>
<head></head>
<body>
<input type="text" id="J_input">
<span id="J_text"></span>
<script src="./jquery.js"></script>
<script src="./myClass.js"></script>
<!-- <script src="./Event.js"></script> -->
<script>
//事件查找函数
var _indexOf = function(arr, key){
if (arr === null) { return -1}
var i = 0, len = arr.length;
for(i; i<len; i++){
if (arr[i] === key) { return i}
}
return -1
}
var Event = Class.extend({
//添加监听函数
on: function(key, listener){
//this.__events存储所有的处理函数
if (!this.__events) {
this.__events = {}
}
if (!this.__events[key]) {
this.__events[key] = []
}
if (_indexOf(this.__events, listener) === -1 && typeof listener === 'function') {
this.__events[key].push(listener)
}
return this;
},
//监听函数,用于处理该事件
fire: function(key){
var args = Array.prototype.slice.call(arguments, 1) || [];
var listeners = this.__events[key]
var i = 0, len = listeners.length;
for(i; i < len; i++){
listeners[i].apply(this, args)
}
return this;
},
//删除该监听函数
off: function(key, listener){
if (!key && !listener) {
this.__events = {}
}
if (key && !listener) {
delete this.__events[key]
}
if (key && listener) {
let listeners = this.__events[key],
index = _indexOf(listeners, listener)
(index > 1) && listeners.splice(index, 1)
return this;
}
}
})
var Base = Class.extend(Event, {
init: function(config){
this.__config = config
this.bind()
this.render()
},
get: function(key){
return this.__config[key]
},
set: function(key, value){
this.__config[key] = value
},
bind: function(){
},
render: function(){
},
destroy: function (argument) {
this.off()
}
})
var TextCount = Base.extend({
_getNum : function(){
return this.get('input').val().length
},
bind: function(){
var self = this;
self.get('input').on('keyup',function(event) {
self.fire('Text.input', self._getNum())
self.render()
});
},
render : function(){
var num = this._getNum(this)
if (num == 0){
$('#J_text').text('0个字')
}else
$('#J_text').text(num + '个字')
}
})
$(function(){
var t = new TextCount({
input: $('#J_input')
})
t.on('Text.input', function(num){
if (num > 5){
//在输入东西的长度大于5时,就发出弹窗,其实这的代码随需求而定,可以写过滤类的
alert('num > 5')
}
})
})
</script>
</body>
</html>
文章主要代码转载至: http://caibaojian.com/javascript-module-2.html,
再加上我个人的一些看法,希望大家各抒己见。