前端组件化（二）：面向对象

最新推荐文章于 2024-07-23 02:23:33 发布

JohnnyLiao_WJ

最新推荐文章于 2024-07-23 02:23:33 发布

阅读量313

点赞数

分类专栏： jquery javascript 文章标签： javascript组件化 JavaScript Class 面向对象

javascript 同时被 2 个专栏收录

30 篇文章 0 订阅

订阅专栏

jquery

3 篇文章 0 订阅

订阅专栏

首先，我们来实现类的机制，因为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，
再加上我个人的一些看法，希望大家各抒己见。

JohnnyLiao_WJ

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端组件化（二）：面向对象

首先，我们来实现类的机制，因为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...
复制链接

扫一扫

专栏目录