编程小技巧共享（用js实现的页面单元复制）

当时也没有查到其他有没有现成的东西，不过在写这段脚本的时候，确实把我快弄吐血了。
目的是这样的：
当在组件化管理html页面，尤其是用ajax的技术时，我们通常会用到模板技术。而这段代码也是想实现客户端的模板技术。
使用时，显示的方式，如html上有个大快里面有若干个div有若干个table不管。总之把这一个完整的单元作为一个整理。
用这个函数可以把这个整体随意的复制多份！
而且通过传入的替换函数，可以在拷贝时将这个单元里面的某些标签的某些属性的值进行替换。就真的想脚本一样。注意，连代变量的onclick事件也支持替换的。
当初之所以写这段代码，是因为我的美工太差，所以我决定将页面代码分离。后台用ajax获取数据，整合到页面单元。页面单元用这个方法封装。具时只要让美工替换对应的页面单元就可以达到美化效果了。
这是拆离出来的文件，不一定能跑。如果大家觉得感兴趣，可以找我提供源文件。里面还有很多很方便的方法封装。都是源创，写的时候都快吐血了。
/**
标签拷贝函数，有一个回调类，类的回调函数名为doProcess(copyType,null,nVavlue);，第一个是标签名，第二个是属性值，第三个是输入的属性内容，返回是处理后的属性值
*/
Global.copyHTML = function(srcObj,descObj,pcount,converter){
for(var rcount = 0; rcount<pcount;rcount++){
var copyType = srcObj.nodeName;
var appendObj;
if (copyType == "#text" || copyType==null || copyType==""){
//说明这是文本节点
var nVavlue = srcObj.nodeValue;
if (converter != null){
nVavlue = converter.doProcess(descObj.nodeName,copyType,nVavlue);
}

appendObj = document.createTextNode(nVavlue);
descObj.appendChild(appendObj);
return;
}
appendObj = document.createElement(copyType);
//下面要给这个新建立的节点复制属性
var parser = new Global_HTMLAttrParser(srcObj);
for (var i = 0;i<parser.getAttLen();i++){
//设置属性前要检查属性的值是否要转化
var attValue = parser.getValue(i);

//转化值
if (converter != null){
attValue = converter.doProcess(copyType,parser.getName(i),parser.getValue(i));
}


//区分事件和属性
if ((/^(on).+/i).test(parser.getName(i))){
//说明这是一个事件，要绑定事件
Global.EventDBinding(appendObj,parser.getName(i),attValue);
}else{
var evalStr = parser.getEvalValue('appendObj',parser.getName(i),attValue);
if (evalStr != null){
//说明要用eval付值
eval(evalStr);
}else{
//绑定属性
appendObj.setAttribute(parser.getName(i),attValue);
}
}

}

//加入的父节点中
descObj.appendChild(appendObj);

//下面对子节点处理
for(var i = 0 ;i < srcObj.childNodes.length ; i++){
Global.copyHTML(srcObj.childNodes[i],appendObj,1,converter);
}
}

}

Global.EventDBinding = function(tagObj,eventName,eventCommand){
tagObj[eventName] = function(){
//因为eval对return是不支持的，所以这里要针对不同的情况解析执行
if (/return/.test(eventCommand)){
var inFunction_commStrs = eventCommand.match(/[^;]+/ig);//将按照语句拆分,主语局部变量不要和eventCommand里面冲突了，加统一的前缀
for(var inFunction_i=0;inFunction_i<inFunction_commStrs.length;inFunction_i++){
var inFunction_comm = inFunction_commStrs[inFunction_i];
if (/^/s*$/.test(inFunction_comm)){
//全是空格，直接返回
continue;
}
if (/return/s+true/.test(inFunction_comm)){
return true;
}
if (/return/s+false/.test(inFunction_comm)){
return false;
}
if (/return/s+/.test(inFunction_comm)){
return eval(inFunction_comm.replace(/return/g,''));
}
eval(inFunction_comm);
}
}else{
//没有return情况，直接执行。
eval(eventCommand);
}
//return eval(returnFlag);
}
}
/**
处理解析html的属性字符串
*/
function Global_HTMLAttrParser(obj){
this.htmlStr = obj.outerHTML.match(/<[^<>]+>/i)[0];
this.tarName = obj.nodeName;
this.attr = {};
this.attr.name = new Array();
this.attr.value = new Array();
//var atts = this.htmlStr.match(//S+/s*=/s*[^>/s]+/ig);
var atts = this.htmlStr.match(/(/S+/s*=/s*[^>/s'"=]+)|(/S+/s*=/s*['"][^=]+['"])/ig);

this.len = 0;
for (var i=0;atts!= null && i<atts.length;i++){
//var atts_name_value = atts[i].match(/[^/s=]+/ig);
var atts_name_value = atts[i].match(/[^=]+/ig);
this.attr.name[i]=atts_name_value[0].trim();
this.attr.value[this.attr.name[i]]=atts_name_value[1].replace(//s*['"]?([^'"]+)['"]?/s*/ig,'$1');
}

this.len = i;

this.attr.name = this.reOrder(this.tarName,this.attr.name);

this.getAttLen = function(){
return this.len;
}
this.getName = function(pi){
var result = this.attr.name[pi];
result = this.dictionary[result];
if (result != undefined){
return result;
}
return this.attr.name[pi];
}
this.getValue = function(pi){
return this.attr.value[this.attr.name[pi]];
}

}

/**
在使用的时候遇到一个设置样式的问题，不能用setAttribute("class","inputbox2");而应该使用setAttribute("className","inputbox2")
下面就是转换字典表
*/
Global_HTMLAttrParser.prototype.dictionary = new Array();
if (Global.browser == 'IE'){
Global_HTMLAttrParser.prototype.dictionary["class"] = 'className';
}
/**
另外一个字典表,表示那些标签是需要将属性重新排序的
例如象IMG标签，该标签比较可恶，如果有height和src属性同时存在时，用outHTML必定是先显示height再到src
这样，上面设置时，也是先设置图片的height属性，然后再设置src而src一旦设置，之前设置的height就无效了
*/
Global_HTMLAttrParser.prototype.reOrderTags = new Array();
Global_HTMLAttrParser.prototype.reOrderTags['IMG'] = new Array();
Global_HTMLAttrParser.prototype.reOrderTags['IMG'][0] = 'id';
Global_HTMLAttrParser.prototype.reOrderTags['IMG'][1] = 'src';
Global_HTMLAttrParser.prototype.reOrder = function(tagName,orgArray){

var tmpTagName = tagName.toUpperCase();//转成大写，保证能用

if (Global_HTMLAttrParser.prototype.reOrderTags[tmpTagName] == undefined){
//不用重新排列,将原数组返回
return orgArray;
}
var standArr = Global_HTMLAttrParser.prototype.reOrderTags[tmpTagName];
var resultArr = new Array();
var resultIdx = 0;

for(var i = 0; i< standArr.length;i++){
var topTag = standArr[i];
for(var j=0;j<orgArray.length;j++){
if(orgArray[j] == null){
continue;//第一轮下来，可能有些元素被置空，不加这行第二次循环就可能空指针
}
var tt = orgArray[j].toLowerCase();//属性都转化成小写，便于匹配
if (topTag == tt){
//匹配上了，要记录记录下来
resultArr[resultIdx++] = orgArray[j];//注意：这里要回原来的值，否则外面的标签属性值匹配不上
//将原来的值清空
orgArray[j] = null;
//结束本次循环
break;
}
}
}
//更新完所有优先级最高的数组了，下来要再最后循环一次，剩余的没有顺序要求
for(var k =0;k<orgArray.length;k++){
//加入到新数组中
if (orgArray[k] != null){
resultArr[resultIdx++] = orgArray[k];
}
}

return resultArr;
}
/**
针对style='display:none'这类型的设置，直接用dom上的setAttribute是不行的
因为style是一个对象，这种要专用evale方法设置
例如：设置img的属性，将可以变成eval("img['style'].display = 'none'")
本方法将作判断是否要转移及转化名字值对的作用
输入的是对象名，变量名字和值
输出的是形如：img['style'].display = 'none'的字符串
如果不用转化，则返回null
*/
Global_HTMLAttrParser.prototype.getEvalValue = function(ndeObjName,tagName,tagValue){

if (!(/^style$/i).test(tagName)){
//如果不是style就不用转化
return null;
}
var vvStr = tagValue.match(/[^;]+/ig);
var result = '';
for(var i=0;i<vvStr.length;i++){
//分析值域
var vStr = vvStr[i].match(/[^:]+/ig);
if (vStr.length != 2){
continue;
}
var vName = vStr[0].trim();
var vValue = vStr[1].trim();
result = result + ndeObjName+"['style']."+vName.toLowerCase() + " = '" + vValue + "';";
}
return result;
}

版权声明：本文为博主原创文章，未经博主允许不得转载。