项目集成-新旧项目整合

原创 2013年12月05日 09:15:25

项目说明:

两个项目,原有项目A为flex  + Java 开发,已经运行多年;由于某种学习成本原因产生了B项目,B.为新开发项目,SSH框架,页面使用jsp,是对A项目的重新开发,但只开发了一半功能。


A项目既然使用多年,客户肯定还是会再用,而B项目先期只开发了一半功能,所以功能只有开发多少切换多少,这就要求新项目用起来,老项目也要用起来,但这是两个完全独立的项目。


整合中涉及到的问题:

1.权限同步;

2.跨域、集成,新项目调用老项目的模块;

3.跨域调用,新项目为jsp页面,需要调用老项目的flex module;


分步实现,如下:


跨域,消息在全域内互相监听,方便flex和jsp跨域通信


主要代码如下:



iframe (children project):

<title>跨域-客户端</title>
		<script
			src="http://127.0.0.1:8787/crossdomain/message/messenger.js"></script>
		<script>
	/*初始化iframe内容*/
	var messenger = Messenger.initInIframe();
	/*监听主页面发送过来的信息*/
	messenger.onmessage = function(data) {
		var newline = '\n';
		var text = document.createTextNode(data + newline);
		document.getElementById('wrap').appendChild(text);
	}
	/*发送信息,主页面即可监听到*/
	function sendMessage() {
		var message = document.getElementById('message');
		messenger.send(message.value);
		message.value = '';
	}

	var bySendMessage =function()
	{
		sendMessage();
	}
</script>
	</head>

	<body>
	<textarea id="wrap" rows="6" cols="60"></textarea>

	<div>
		<input type="text" id="message" size="108" maxlength="130"  style="float:left;margin:18px;"/>
		<input type="button"  id="sendmessage" value="send" style="float:left;margin:18px;" onclick="bySendMessage()">
	</div>




main  project:

<script src="message/messenger.js"></script>
		
	</head>

	<body>
		<iframe name="iframe" id="iframe" src="http://127.0.0.1:8181/crossdomain/iframe.jsp"
			width="920px" style="height: 516px;"></iframe>
			
			<textarea rows="6" cols="60" id="output"></textarea>
		<div>
			<input type="text" id="message" size="108" maxlength="130"  style="float:left;margin:18px;"/>
			<input type="button"  id="sendmessage" value="send" style="float:left;margin:18px;" onclick="bySendMessage()">
		</div>
		

		<h3 style="clear: both;">
			flex code
		</h3>

<script type="text/javascript">
	
	/*初始化iframe内容*/
	var messenger = Messenger.initInParent(document.getElementById('iframe'));
	var btn = document.getElementById("sendmessage");
	
	/*监听主页面发送过来的信息*/
	messenger.onmessage = function(data) {
		var newline = '\n';
		var text = document.createTextNode(data + newline);
		document.getElementById('output').appendChild(text);
	}
	
	/*发送信息,主页面即可监听到*/
	function sendMessage() {
		var message = document.getElementById('message');
		messenger.send(message.value);
		message.value = '';
	}
	
	var bySendMessage = function(){
		sendMessage();
	}
	
</script>



JS代码倒序


function Messenger(win) {
	// save the pointer to the window which is interacting with
	this.win = win;
	this.init();
}

// postMessage API is supported
Messenger.prototype.init = function() {
	var self = this;
	var receiver = function(event) {
		// Some IE-component browsers fails if you compare
		// window objects with '===' or '!=='.
		if (event.source != self.win)
			return;
		(self.onmessage || function() {
		}).call(self, event.data);
	};
	if (window.addEventListener)
		window.addEventListener('message', receiver, false);
	else if (window.attachEvent)
		window.attachEvent('onmessage', receiver);
};

Messenger.prototype.send = function(data) {
	this.win.postMessage(data, '*');
};

Messenger.initInParent = function(frame) {
	return new this(frame.contentWindow);
};

Messenger.initInIframe = function() {
	return new this(window.parent);
};

// in IE, postMessage API is not supported
if (!window.postMessage && window.attachEvent) {
	// redefine the init method
	Messenger.prototype.init = function() {
		var isSameOrigin = false;
		// test if the two document is same origin
		try {
			isSameOrigin = !!this.win.location.href;
		} catch (ex) {
		}
		if (isSameOrigin) {
			this.send = this.sendForSameOrigin;
			this.initForSameOrigin();
			return;
		}

		// different origin case
		// init the message queue, which can guarantee the messages won't be
		// lost
		this.queue = [];
		if (window.parent == this.win) {
			this.initForParent();
		} else {
			this.initForFrame();
		}
	};

	Messenger.prototype.sendForSameOrigin = function(data) {
		var self = this;
		setTimeout(function() {
			var event = self.win.document.createEventObject();
			event.eventType = 'message';
			event.eventSource = window;
			event.eventData = data;
			self.win.document.fireEvent('ondataavailable', event);
		});
	};

	Messenger.prototype.initForSameOrigin = function() {
		var self = this;
		document.attachEvent('ondataavailable', function(event) {
			if (!event.eventType || event.eventType !== 'message'
					|| event.eventSource != self.win)
				return;
			(self.onmessage || function() {
			}).call(self, event.eventData);
		});
	};

	// create two iframe in iframe page
	Messenger.prototype.initForParent = function() {
		var fragment = document.createDocumentFragment();
		var style = 'width: 1px; height: 1px; position: absolute; left: -999px; top: -999px;';
		var senderFrame = document.createElement('iframe');
		senderFrame.style.cssText = style;
		fragment.appendChild(senderFrame);
		var receiverFrame = document.createElement('iframe');
		receiverFrame.style.cssText = style;
		fragment.appendChild(receiverFrame);

		document.body.insertBefore(fragment, document.body.firstChild);
		this.senderWin = senderFrame.contentWindow;
		this.receiverWin = receiverFrame.contentWindow;

		this.startReceive();
	};

	// parent page wait the messenger iframe is ready
	Messenger.prototype.initForFrame = function() {
		this.senderWin = null;
		this.receiverWin = null;

		var self = this;
		this.timerId = setInterval(function() {
			self.waitForFrame();
		}, 50);
	};

	// parent page polling the messenger iframe
	// when all is ready, start trying to receive message
	Messenger.prototype.waitForFrame = function() {
		var senderWin;
		var receiverWin;
		try {
			senderWin = this.win[1];
			receiverWin = this.win[0];
		} catch (ex) {
		}
		if (!senderWin || !receiverWin)
			return;
		clearInterval(this.timerId);

		this.senderWin = senderWin;
		this.receiverWin = receiverWin;
		if (this.queue.length)
			this.flush();
		this.startReceive();
	};

	// polling the messenger iframe's window.name
	Messenger.prototype.startReceive = function() {
		var self = this;
		this.timerId = setInterval(function() {
			self.tryReceive();
		}, 50);
	};

	Messenger.prototype.tryReceive = function() {
		try {
			// If we can access name, we have already got the data.
			this.receiverWin.name;
			return;
		} catch (ex) {
		}

		// if the name property can not be accessed, try to change the messenger
		// iframe's location to 'about blank'
		this.receiverWin.location.replace('about:blank');
		// We have to delay receiving to avoid access-denied error.
		var self = this;
		setTimeout(function() {
			self.receive();
		}, 0);
	};

	// recieve and parse the data, call the listener function
	Messenger.prototype.receive = function() {
		var rawData = null;
		try {
			rawData = this.receiverWin.name;
		} catch (ex) {
		}
		if (!rawData)
			return;
		this.receiverWin.name = '';

		var self = this;
		var dataList = rawData.substring(1).split('|');
		for ( var i = 0; i < dataList.length; i++)
			(function() {
				var data = decodeURIComponent(dataList[i]);
				setTimeout(function() {
					(self.onmessage || function() {
					}).call(self, data);
				}, 0);
			})();
	};

	// send data via push the data into the message queue
	Messenger.prototype.send = function(data) {
		this.queue.push(data);
		if (!this.senderWin)
			return;
		this.flush();
	};

	Messenger.prototype.flush = function() {
		var dataList = [];
		for ( var i = 0; i < this.queue.length; i++)
			dataList[i] = encodeURIComponent(this.queue[i]);
		var encodedData = '|' + dataList.join('|');
		try {
			this.senderWin.name += encodedData;
			this.queue.length = 0;
		} catch (ex) {
			this.senderWin.location.replace('about:blank');
			var self = this;
			setTimeout(function() {
				self.flush();
			}, 0);
		}
	};

}


跨域结束,后续增加.......


js压缩(使用google compiler)
java -jar ../web/WEB-INF/lib/compiler.jar --help
java -jar ../web/WEB-INF/lib/compiler.jar --js ../web/sources/gt_source.js --js_output_file ../web/gt.js


新旧项目切换使用javascript调用flex module


权限同步,集成,采用单点登陆;






浅谈老系统维护

今天聊一个老话题,如何维护一个老系统,尤其是一个很重的老系统,少则3-5个年头,多则7-8个年头,第一版代码早已不知是哪些人编写, 这个老系统迎来送走了一批有一批程序员,可谓是看尽公司的浮沉沧桑...
  • shan9liang
  • shan9liang
  • 2015年03月28日 16:37
  • 1882

U盘安装Linux系统教程

基本简介 linux系统不支持NTFS格式分区,支持的分区有ext2,ext3,也可以直接加载fat32磁盘,但是系统不能安装在此分区 安装 1准备一个 空的U盘,用老毛桃的写入ios镜像功能...
  • kaifeng2988
  • kaifeng2988
  • 2016年09月10日 15:30
  • 804

老男孩高级架构师

高级架构培训10期课程,最新的架构师视频教程。 文件大小:30G 老男孩顶级架构师培训,培训目标年薪15万-35万级别的高端课程,对于有一定LINUX基础以及运维基础朋友来说 课程目录:...
  • u013948187
  • u013948187
  • 2016年08月19日 13:55
  • 1925

老毛桃装机版制作启动U盘图文教程

http://www.laomaotao.org.cn/upqdzz.html 制作装机版u盘启动盘准备工作: ① 老毛桃官网首页下载老毛桃v9.3装机版u盘启动盘制作工具安装...
  • chenyijun
  • chenyijun
  • 2017年06月04日 13:20
  • 539

装系统:用老毛桃winPE给移动硬盘装系统(windows):亲测装机成功~

准备工作: 需要三样东西,1.一台机器(我用的lenovo笔记本)  2.老毛桃PE系统盘(U盘)  3.移动硬盘(我的笔记本上替下来的机械+移动硬盘壳) 开始装机: 流程概述:首先,插上老...
  • timo1160139211
  • timo1160139211
  • 2017年07月15日 10:19
  • 763

ElasticSearch2.3.1环境搭建哪些不为人知的坑

郑重声明,本文ElasticSearch2.3.1最新版的安装,其他的版本请搭建自行google,最好不要百度,百度一般都是老文章,有些版本问题很多,瞎折腾...
  • kdchxue
  • kdchxue
  • 2016年04月15日 11:44
  • 4222

三年开发两年前端,一个CSDN的老新人

这是我第一篇博客。 我是一个典型的拿来主义者,从网上获取信息,查找问题解决方案,听别人指点江山,查别人评论哪儿哪儿好吃,哪儿哪儿好玩,怎么哄女朋友,要不要做近视手术,但从来没有自己发表文章的习惯,虽...
  • m0_38142412
  • m0_38142412
  • 2017年12月17日 22:48
  • 77

关于重构-献给所有为老系统擦屁股的同学

最近重构了很多老系统,在程序员眼里有‘坏味道’的老项目,发现好系统优点都是一致的,坏系统各有各的问题,今天我们就着重聊一下系统的重构,也是对自己近阶段工作的总结。   1 为什么要重构系统 重构系统的...
  • whodarewin2005
  • whodarewin2005
  • 2016年07月04日 14:24
  • 506

如何重构一个系统

如何重构一个系统 发现一个很有意思的情况,做系统写代码多年了,遇到的需求基本上是在已有的系统上实现,从头来实现的系统基本上没有。 1 why 无论是从头是实现一个系统,还是维护一个系统,当时实现的技术...
  • liu251
  • liu251
  • 2014年12月21日 13:52
  • 4968

怎样做老毛桃软件制作U盘启动盘和重新安装系统

使用老毛桃制作U盘启动盘,并安装win7或其他版本的系统。
  • fengjunwang1980
  • fengjunwang1980
  • 2016年06月20日 20:48
  • 325
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:项目集成-新旧项目整合
举报原因:
原因补充:

(最多只允许输入30个字)