前台自动生成GUID

最近做一个拼接页面。页面是不固定的，根据用户的设置和操作展示当前页面的控件和数目。最后保存的时候，会自动校验各个控件的内容是不是符合条件，如果不符合的话，进行锁定和标注，也就是我需要去特定的获取某一个元素。但又由于页面控件的样式和数量都不固定，这样的话，ID都不可能是写到html 中的。我想了几种命名的方式，保证不重复。但是，最终还是觉得直接用一个GUID来的更快，更准确和更方便。下面说一下我的实现方式。

如下是GuidFactory类。也就是所写的自动生成guid的方法。guid之所以能够在理论上实现产生全球唯一的值，是因为其获取以太网卡的地址、以及纳秒级的时间等数字及随机数等多项生成的。但是考虑到前端对这些以太网卡地址等获取有些困难（有知道的童鞋要告诉我。。）以下模拟实现生成GUID，采用当前日期时间（精确到毫秒两位数）和至少10位随机数来组成我们所用的GUID，这样对于一般的页面也是没有问题的。基本上会出现重复的概率也是可以忽略不计的。

具体的guidFactory类如下。

/*功能：模拟生成一个GUID码*/

function GUID() {
this.date = new Date();

/* 判断是否初始化过，如果初始化过以下代码，则以下代码将不再执行，实际中只执行一次 */
if (typeof this.newGUID != 'function') {

/* 生成GUID码 */
GUID.prototype.newGUID = function() {
this.date = new Date();
var guidStr = '';
sexadecimalDate = this.hexadecimal(this.getGUIDDate(), 16);//转换16进制
sexadecimalTime = this.hexadecimal(this.getGUIDTime(), 16);
for (var i = 0; i < 9; i++) {
guidStr += Math.floor(Math.random()*16).toString(16);
}
guidStr += sexadecimalDate;
guidStr += sexadecimalTime;
while(guidStr.length < 32) {
guidStr += Math.floor(Math.random()*16).toString(16);
}
return this.formatGUID(guidStr);
}

/*
* 功能：获取当前日期的GUID格式，即8位数的日期：20160101
* 返回值：返回GUID日期格式的字条串
*/
GUID.prototype.getGUIDDate = function() {
return this.date.getFullYear() + this.addZero(this.date.getMonth() + 1) + this.addZero(this.date.getDay());
}

/*
* 功能：获取当前时间的GUID格式，即8位数的时间，包括毫秒，毫秒为2位数：12300933
* 返回值：返回GUID日期格式的字条串
*/
GUID.prototype.getGUIDTime = function() {
return this.addZero(this.date.getHours()) + this.addZero(this.date.getMinutes()) + this.addZero(this.date.getSeconds()) + this.addZero( parseInt(this.date.getMilliseconds() / 10 ));
}

/*
* 功能: 为一位数的正整数前面添加0，如果是可以转成非NaN数字的字符串也可以实现
* 参数: 参数表示准备再前面添加0的数字或可以转换成数字的字符串
* 返回值: 如果符合条件，返回添加0后的字条串类型，否则返回自身的字符串
*/
GUID.prototype.addZero = function(num) {
if (Number(num).toString() != 'NaN' && num >= 0 && num < 10) {
return '0' + Math.floor(num);
} else {
return num.toString();
}
}

/* 
* 功能：将y进制的数值，转换为x进制的数值
* 参数：第1个参数表示欲转换的数值；第2个参数表示欲转换的进制；第3个参数可选，表示当前的进制数，如不写则为10
* 返回值：返回转换后的字符串
*/
GUID.prototype.hexadecimal = function(num, x, y) {
if (y != undefined) {
return parseInt(num.toString(), y).toString(x);
} else {
return parseInt(num.toString()).toString(x);
}
}

/*
* 功能：格式化32位的字符串为GUID模式的字符串
* 参数：第1个参数表示32位的字符串
* 返回值：标准GUID格式的字符串
*/
GUID.prototype.formatGUID = function(guidStr) {
var str1 = guidStr.slice(0, 8) + '-',
str2 = guidStr.slice(8, 12) + '-',
str3 = guidStr.slice(12, 16) + '-',
str4 = guidStr.slice(16, 20) + '-',
str5 = guidStr.slice(20);
return str1 + str2 + str3 + str4 + str5;
}
}
}

有了这样的一个类之后。我们再用的时候就炒鸡简单了。
和任何普通的js 方法调用一样，页面上添加上对应的引用。然后再我们需要的地方直接实例化然后调用。

var guidclass = new GUID();

var guid=guidclass .newGUID() ;

这样就可以了。当你的界面控件也需要一个Guid的时候就可以这样了，当然如果你还需要别的信息，可以继续改造这个guidFactory类，
做一个更合适的类。