文档章节

jQuery/javascript实现IP/Mask自动联想功能

lgscofield
 lgscofield
发布于 2015/06/26 13:53
字数 939
阅读 13
收藏 0
之前做一个云计算的项目,涉及到一个安全组自动联想的功能,思想是这样的:

安全组规则之间是可以相互引用的,也可以自己是自己手动输入的ip/mask,这时候可以加一个功能,实现securityGroupId和securityGroupName以及ip/mask之间随意的联想输入。
主要实现方式是:后台处理securityGroupName和SecurityGroupName的组合列表,并且在前台做相应的处理,处理为数组对象,此时对名称和id的联想基本实现,如果再加上ip/task,只需做一些处理,创建一个新数组,拼接到之前的name和id的数组上,这时候就实现了securityGroupId和securityGroupName以及ip/mask之间随意的联想输入。

以下主要是实现ip/mask的转换,涉及一个最小掩码的算法,比如当前ip是10.12.0.0,这个时候需要计算出最小掩码,算法是:将该ip分段处理,如果第一个数不为0(,此处单纯的理解为10进制,也可以处理成2进制数之后相应的判断),那么查看后一位是否为0,这里以第二位为例(12)。因为第一位10后面的数(12)不为零,第二位12的后面的数(0)为零,则对12处理。12处理成2进制数为:00001100,掩码可最后一个1的位置有关,此时得出的数是6,那么第一位后面不为0,则第一位取全掩8,此时得出的值为8+6=14,也就是说该ip最后取出的最小掩码为14,还有三个是固定的,大家都会(14,16,24,34),如果不是以此往下类推。

/**
 * IP自动联想
 *
 * @param input IP
 * @return IP/Task
 */
function getIpArray(input){
	var ipArray = input.split('.');

	for( var i = 0; i < 4; i++){
		if (ipArray[i] == undefined || ipArray[i] == ''){
			ipArray[i] = 0;
		}
//
//		if(ipArray[i].indexOf('0') == 0 && ipArray[i].length > 1){
//			ipArray[i] = ipArray[i].substring(1, ipArray[i].length);
//		}
	}

	return ipArray;
}

function every(arr, func){
	var aa = [];
	for( var i = 0; i < arr.length; i++){
		aa.push(func(arr[i]));
	}
	return aa;
}

function indexOfEnd(str){
	for( var i = str.length - 1; i >= 0; i--){
		if (str.charAt(i) == '1') {
			return 8 - (str.length - i) + 1;
		}
	}
	return 0;
}

function getPermissions(input){
	var ipArray = getIpArray(input);
	var ip = ipArray.join('.');

	var binaryIpArray = every(ipArray, function(oct){
		return Number(oct).toString(2);
	});

	var yanma = 0;
	for( var i = binaryIpArray.length - 1; i >= 0; i--){
		if(binaryIpArray[i] != 0){
			yanma = indexOfEnd(binaryIpArray[i]) + i * 8;
			break;
		}
	}

	var abc = [ 8, 16, 24, 32 ];
	var rstArray = [ ip + '/' + yanma ];
	for( var i = 0; i < abc.length; i++){
		if(abc[i] > yanma){
			rstArray.push(ip + '/' + abc[i]);
		}
	}

	return rstArray;
}


这里主要是在键盘事件触发的时候的一个脚本,实现自动联想
/**
		* 创建安全组自动联想DOM
		*/
		function createSgDom(input){
			var arrayObj = new Array();
			var ary = new Array();
			this.setNewAry([]);
			this.setAry([]);

			var autoData = jsonData.substring(1, jsonData.length -1).split(', ');
			for ( var element in autoData) {
				arrayObj.push(autoData[element]);
			}

			var permissions = /^((?:(?:25[0-5]|2[0-4]\d|((1\d{2})|([1-9]?\d)))\.){3}(?:25[0-5]|2[0-4]\d|((1\d{2})|([1-9]?\d))))$/;
			var ip_1 = /^((?:(?:25[0-5]|2[0-4]\d|((1\d{2})|([1-9]?\d)))[\.]?){1,3})$/;
			var str = /^[a-zA-Z]*([a-zA-Z]|[-])*$/;
			if(null != input && !str.test(input)){
				if(ip_1.test(input) || permissions.test(input)){
					var except = false;
					if(input.indexOf('.') > -1){
						var value = input.split('.');

						for(var val in value){
							var inVal = value[val];
							if(inVal.indexOf('0') == 0 && inVal.length > 1){
								except = true;
							}
							if(inVal>255){
								except = true;
							}
						}
					} else {
						if(input>255){
							except = true;
						}
					}
					if(!except){
						var ips = getPermissions(input);

						for(var ip in ips){
							ary.push(ips[ip]);
						}
					}
				}
			}

			if(ary != null){
				newAry = arrayObj.concat(ary);
			} else {
				newAry = arrayObj;
			}

			this.setNewAry(newAry);

			$('#suggest_value').autocomplete({
            	source: this.getNewAry(),
            	minLength: 0,
            	close: function(event, ui){
            	},
            	focus: function(event, ui){
					return false;
                },
                change: function(event, ui){
                },
                select: function(event, ui){
                	if(ui.item.label.indexOf('(') > -1 && ui.item.label.indexOf(')') > -1){
                		ui.item.value = ui.item.label.substring(0, ui.item.label.indexOf('('));
			    	}else{
			    		ui.item.value = ui.item.label.substring(0, ui.item.label.length);
			    	}
                }
            });
		}

最后:
//在输入框加上一个keyup事件,指定执行脚本:createSgDom($('#suggest_value').val());
// 引入自动联想插件和上面处理ip掩码的脚本
	<script type="text/javascript" src="theme/default/js/cbms/ip-permissions.js"></script>
	<%-- <script src="theme/default/jquery-ui/js/jquery-1.8.3.js" type="text/javascript"></script> --%>
    <script src="theme/default/jquery-ui/js/jquery-ui-1.8.24.custom.min.js" type="text/javascript"></script>


请支持原创,欢迎纠错,若转载,请注明出处。

本文转载自:http://lgscofield.iteye.com/blog/1782760

共有 人打赏支持
lgscofield

lgscofield

粉丝 23
博文 140
码字总数 63036
作品 0
南京
架构师
私信 提问
《JavaScript实用效果整理》系列分享专栏

整理一些使用的JavaScript效果,在Web开发中遇到的比较好的动态效果,都收藏在这里,对以后的网站开发增加不少的色彩 《JavaScript实用效果整理》已整理成PDF文档,点击可直接下载至本地查阅...

开元中国2015
10/29
0
0
jQuery for Asp.Net 开发环境配置

1.jQuery概述 jQuery是一个优秀的JavaScript框架,是一个快速的,简洁的javaScript库,使用户能更方便地处理HTML documents、events、实现动画效果,并且方便地为网站提供AJAX交互。 目前jQu...

长平狐
2013/06/17
88
0
分享16个javascript&jQuery的MVC教程

日期:2011/12/19 来源:GBin1.com 2011即将过去我们将在几周后迎来新的一年。 这里我们将介绍10多个js和jQuery的MVC教程希望大家喜欢! jQuery MVC 1. AJAX - Spring MVC 3和jQuery的整合 ...

gbin1
2011/12/21
5.6K
5
介绍几个常用的jquery ui框架

jQuery ui框架很多,除了官方提供的jquery UI,还有很多第三方提供的ui框架,因官方提供的jquery ui框架体积较大,所以很多人都不喜欢用,但不论是官方提供还是第三方提供,他们都是基于jqu...

Junn
2012/12/05
0
2
介绍几个常用的jquery ui框架

jQuery ui框架很多,除了官方提供的jquery UI(如果你还不知道什么是jQuery UI,请看下载了jquery ui后如何使用),还有很多第三方提供的ui框架,因官方提供的jquery ui框架体积较大,所以很多...

一念三千
2012/10/16
0
0

没有更多内容

加载失败,请刷新页面

加载更多

js垃圾回收机制和引起内存泄漏的操作

JS的垃圾回收机制了解吗? Js具有自动垃圾回收机制。垃圾收集器会按照固定的时间间隔周期性的执行。 JS中最常见的垃圾回收方式是标记清除。 工作原理:是当变量进入环境时,将这个变量标记为“...

Jack088
昨天
10
0
大数据教程(10.1)倒排索引建立

前面博主介绍了sql中join功能的大数据实现,本节将继续为小伙伴们分享倒排索引的建立。 一、需求 在很多项目中,我们需要对我们的文档建立索引(如:论坛帖子);我们需要记录某个词在各个文...

em_aaron
昨天
13
0
"errcode": 41001, "errmsg": "access_token missing hint: [w.ILza05728877!]"

Postman获取微信小程序码的时候报错, errcode: 41001, errmsg: access_token missing hint 查看小程序开发api指南,原来access_token是直接当作parameter的(写在url之后),scene参数一定要...

两广总督bogang
昨天
18
0
MYSQL索引

索引的作用 索引类似书籍目录,查找数据,先查找目录,定位页码 性能影响 索引能大大减少查询数据时需要扫描的数据量,提高查询速度, 避免排序和使用临时表 将随机I/O变顺序I/O 降低写速度,占用磁...

关元
昨天
11
0
撬动世界的支点——《引爆点》读书笔记2900字优秀范文

撬动世界的支点——《引爆点》读书笔记2900字优秀范文: 作者:挽弓如月。因为加入火种协会的读书活动,最近我连续阅读了两本论述流行的大作,格拉德威尔的《引爆点》和乔纳伯杰的《疯传》。...

原创小博客
昨天
30
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部