js设计模式的学习

最新推荐文章于 2024-11-03 11:57:57 发布

再-接-再-厉

最新推荐文章于 2024-11-03 11:57:57 发布

阅读量223

点赞数

分类专栏：设计文章标签： js设计模式函数式变量模式闭包观察者模式

本文链接：https://blog.csdn.net/qq_36196162/article/details/75350129

版权

设计专栏收录该内容

1 篇文章 0 订阅

订阅专栏





  
  
JS的设计模式(包括观察者模式)
<script src="js/jquery-3.2.1.js"></script>




  
  
	
   
   

  
  
<script>
//函数式的写法--------------------------------------------------
//      $(function(){
//		var $content = $("#content");
//		function getnum(){
//			return $content.val().length;
//		}
//		function render(){
//			var num = getnum();
//			if($("#contentCount").length===0){
//				$content.after("");
//			}
//			$("#contentCount").html(num+"个字");
//		}
//		$content.on('keyup',function(){
//			render();	
//		});	
//	});
//2. 使用变量模拟单个命名空间，统一入口调用方法--------------------------------
//var textCount = {
//	input:null,
//	init:function(config){
//		this.input = $(config.id);
//		this.bind();
//		return this;
//	},
//	bind:function(){
//		var self = this;
//		console.log(self);
//		this.input.on("keyup",function(){
//			self.render();
//		});
//	},
//	render:function(){
//		var num = this.getnum();
//		if($("#contentCount").length === 0){
//			$("#content").after("");
//		}
//		$("#contentCount").html(num+'个字');
//	},
//	getnum:function(){
//		return this.input.val().length;
//	}
//};
//$(function(){
//	textCount.init({id:'#content'}).render();
//});
//3,函数闭包的写法-----------------------------------------------
//var textCount = (function(){
//	var _bind = function(that){
//		console.log('bind');
//		that.input.on("keyup",function(){
//			that.render();			
//		});
//	};
//	var _getnum = function(that){
//		console.log('getnum');
//		return that.input.val().length;
//	};
//	var TextCountFunction = function(){
//		console.log('create tcf');
//	};
//	TextCountFunction.prototype.init = function(config){
//		this.input = $(config.id);
//		_bind(this);
//		console.log('init');
//		return this;
//	};
//	TextCountFunction.prototype.render = function(){
//		var num = _getnum(this);
//		if($("#contentCount").length === 0){
//			$("#content").after("");
//		}
//		$("#contentCount").html(num+"个字！");
//		console.log('render');
//	};
//	console.log(this);
//	return TextCountFunction;
//})();	
//$(function(){
//	new textCount().init({id:'#content'}).render();
//});
//4.面向对象----------------------------------------------------
//function Content(id){
//	this.id=id;
//	
//	function _render(){
//		console.log(_num());
//		if($("#contentCount").length===0){
//			$(id).after("");
//		}
//		$("#contentCount").html(_num()+'个字');
//	};
//	_num = function(){
//		var temp = $(id).val().length;
//		return temp;
//	};
//	this.bind = function(){
//		console.log(this.id);
//		$(this.id).on('keyup',function(){
//			_render();
//		});
//	};
//};
//new Content('#content').bind();
//5. 引入事件机制（观察者模式）-------------------------------------
(function($){
	var o = $({});
	
	$.subscribe = function(){
		o.on.apply(o,arguments);
	};
	$.unsubscribe = function(){
		o.off.apply(o,arguments);
	};
	$.publish = function(){
		o.trigger.apply(o,arguments);
	};
})(jQuery);
function getnum(){
	return $("#content").val().length;
}
function render(e,data){
	if($("#contentCount").length===0){
	
		$("#content").after("");
	}
	$("#contentCount").html(data+"个字");
}
$.subscribe("/some/topice",render);
$("#content").on("keyup",function(){
	var num = getnum();
	$.publish("/some/topice",num);
	console.log(num);
});
//这里是不是实现了一个单向的绑定呢？
</script>

学习网址：http://lib.csdn.net/article/javascript/29580，面向对象模式之前是学习他的，后面实在太复杂，非常感谢，学了不少好东西，面向对象模式后面自己写的，有不对地方请多指教！