js 设计模式

1、单例模式:产生一个类的唯一实例

比如:点击按钮生成遮罩层->只生成一个div:先创建一个div,再调用->可能浪费:用变量判断->引入全局变量:用闭包包含->通用:单力包装器(桥接模式)

var singleton = function( fn ){
	var result;
	return function(){
		return result || ( result = fn .apply( this, arguments ) );
	}
}

var createMask = singleton( function(){
	return document.body.appendChild( document.createElement(‘div‘) );
})

2、桥接模式:实现与抽象分离

forEach的实现

forEach = function( ary, fn ){
	for ( var i = 0, l = ary.length; i < l; i++ ){
		var c = ary[ i ];
		if ( fn.call( c, i, c ) === false ){
			return false;
		}
	}
}

  

时间: 2024-10-12 19:47:33

js 设计模式的相关文章

JS设计模式(门面模式)

<!--JS设计模式(门面模式)--> // 门面模式的概念:简化API接口 最经典的就是事件 // 做一件事情: 必须要调用2个函数分别是 a , b //案例:获得页面上多个元素并设置css样式 window.onload=function(){ setCss(["div1","div2","div3"],{ background:"blue", color:"#fff" }); } fun

JS 设计模式(工厂模式环境搭建)

<!--引入的核心JS文件--> <script type="text/javascript" src="CommonUtil.js"></script> <script type=text/javascript charset=utf-8> <!--JS设计模式(工厂模式)--> //搭建一个工厂环境 //卖车店 function CarShop(){}; CarShop.prototype={ cons

js 设计模式学习(1)

最近一个人外出旅行 顺便在那座城市买了一本关于JS设计模式的书 供无聊的时候阅读 却发现小有收获 旅游回来以后立马写下心得 做了一个地图 并以此总结此次旅行的经过的地方 尝试1: 尝试写JS类 1 var TianDiTu = function (lat, lng, zoom) { 2 if (this instanceof TianDiTu) { 3 var zoomSize = { maxZoom: 18, minZoom: 5 }, 4 normalm = L.tileLayer.chin

JS设计模式(桥接模式)

<!--引入的核心JS文件--> <script type="text/javascript" src="CommonUtil.js"></script> <script type=text/javascript charset=utf-8> <!--JS设计模式(桥接模式)--> //桥接模式:主要是把抽象和现实分离开来,使他们独立开来 //应用场景:事件监听回掉机制 window.onload=func

JS设计模式(动态工厂模式)

<!--引入的核心JS文件--> <script type="text/javascript" src="CommonUtil.js"></script> <script type=text/javascript charset=utf-8> <!--JS设计模式(细粒度工厂模式)--> //搭建一个工厂环境 买什么车——(去什么店)卖车的店——卖车——生产车 //卖车店 super Shop 只有卖车的方

【转】JS设计模式开篇

(原文地址:http://blog.chinaunix.net/uid-26672038-id-3904513.html) 本文主要讲述一下,什么是设计模式(Design pattern),作为敲键盘的我们要如何学习设计模式.设计模式真的是一把万能钥匙么? 各个代码的设计模式几乎每个人都知晓,就算不会那也一定在一些装逼的大牛(部分而已)口中听过.但可能很少有人知道设计模式的由来: 设计模式该术语源自Erich Gamma等人在上世纪90年代从建筑设计领域引入到计算机科学的(很难想象到底有多大关联

JS设计模式(一)

刚入职时,看过一段时间的设计模式,似懂非懂.不知不觉过去七个月了,对JS的理解更深刻了,数据结构与算法的基础也基本上算是过了一遍了,接下来要把设计模式搞定,然后不再深层次研究JS了,而是学习前端自动化.linux.数据库.服务器等的基础知识. 设计模式的学习主要参考<JavaScript设计模式与开发实践>一书,很多笔记也会从该书抄录.开始JS设计模式的学习. 1.原型模式 原型模式既是一种设计模式,也是一种编程泛型.原型模式是JS最基础的继承实现,在这儿就不多讲了,写一下JS原型继承的基本原

【JS 设计模式 】用组合模式来实现树形导航--代码结构思路分析(一)

树导航效果图: 组合模式的描述: 将对象组合成树形结构以表示"部分-整体"的层次结构,组合模式使得用户对单个对象和组合对象的使用具有一致性. 我们把部分用Leaf表示, 把整体用Composite表示.组合模式是有一定规律的,在实现树导航的情况下,Composite需要包含一个以上Leaf,也可以包含一个以上Leaf和一个以Composite,为什么说要包含一个以上的,如果Composite不包含任何子child的话那么它就是Leaf,Leaf表示是最后一层结节. 树形导航代码片段:

【JS 设计模式 】用组合模式来实现树形导航--JS代码结构思路分析(二)

[JS 设计模式 ]用组合模式来实现树形导航--代码结构思路分析(一) 根据上一节中的HTML代码结构我们通过JS来渲染HTML代码,我们先提供一下JS的代码片段,这代码代码不是一个完整的代码是经过简化的.通过JS代码来分析如何组装HTML的 Composite类型的代码: function TreeComposite(id, name, total, level, last) { var root = document.createDocumentFragment(); var panel =

js 设计模式-接口

js模拟java接口检测函数:确保子类实现接口中的方法:(出自js设计模式) 上代码: <script type="text/javascript" > /** name:接口名称:字符串类型 arr_method:接口中的方法名称:数组形式['method1','method2',····] 可以定义接口名称和接口定义的方法名称, **/ var Interface = function(name,arr_method){ if(arguments.length!=2){