一个好用的Tag函数

文章标题提到的Tag函数是基于jquery写的，所以，在使用之前务必要引入jquery文件。该函数主要用于动态创建标签，并获取创建的标签对应的dom对象等。注意：该函数并没有封装成jquery插件的形式，若想改造成jquery插件形式，需要的自己动手啦。

1.Tag函数需要用到其他一些工具函数，代码如下。对于这些工具函数，本人主要是新建一个名字为util.js的文件进行保存。

/**
 * 定义命名空间util
 */
util = {};

/**
 * 测试js是否加载成功
 */
util.test = function() {
    jsout("util.js is working");
};

/**
 * 控制台输出
 */
function jsout(str) {
    console.debug(str);
}
/**
 * 根据id进行查找
 */
function findById(id){
    return $("#"+id+"");
}
/**
 * 创建一个命名空间。 <br>
 * 命名空间是一个全局变量。
 * @param ns 命名空间, 如mgr.system.errorcode
 */
util.namespace = function (ns){
    var names = ns.split(".");
    var upperNs = window;
    $.each(names, function(i, name){
        if(upperNs[name] == undefined){
            upperNs[name] = {};
        }
        upperNs = upperNs[name];
    });
};
ns = util.namespace;

/**
 * 判断一个字符串是否为undefined 或 null或""
 * @param str
 * @returns {Boolean}
 */
util.isNullOrEmpty = function(str){
    return str == undefined || str == null || $.trim(str)=="";
};

util.notNullOrEmpty = function(str){
    return !util.isNullOrEmpty(str);
};
/**
 * 是否为整数
 * @param num
 * @returns
 */
util.isInteger = function(num){
    return /^\d+$/.test(num);
};

/**
 * 将string解析为json对象
 * @param json
 * @returns
 */
util.parseJson = function(json){
    return eval("("+json+")");
};
/**
 * 判断是否为双标签
 * @param tag
 * @returns {Boolean}
 */
util.isDoubleTag = function(tag){
    var singleTags = ["br","input","img"];
    return singleTags.indexOf(tag) < 0;
};

/**
 * 生成随机id
 */
util.id = function(){
    var id = Math.random() + "";
    return id.substring(2);
};

2.有了上述工具函数以后，可以顺利给出Tag的代码了。本人其实是新建了一个名为core.js的文件进行保存的，代码如下：

//namespace
core = {};

function Tag(params){
    if(params == undefined){
        throw ("创建Tag对象时参数不能为空");
        return;
    }
    if(typeof params == "string"){
        var tag = params;
        params = {};
        params.tag = tag;
    }

    //如果没有指定id， 则生成一个随机id
    if(util.isNullOrEmpty(params.id)){
        params.id = util.id();
    }


    //此处列出来的属性可以直接在Tag对象中指定. 未列出的属性需要在其attrs中指定
    var directAttrs = ['id','class','style','type','value', 'width','selected'];
    if(util.notNullOrEmpty(params["cls"])){
        params["class"] = params["cls"];
        delete params.cls;
    }
    //将这此属性值复制到params.attrs对象中
    var attrs = {};
    $.each(directAttrs, function(i, a){
        if(util.notNullOrEmpty(params[a])){
            attrs[a] = params[a];
        }
    });
    if(params.attrs == undefined){
        params.attrs = {};
    }
    $.extend(params.attrs,attrs);

    /*
     * html, text, innerHtml属性都被解析为items
     */
    var items = [];
    var innerHtmlFields = ["html","text","innerHtml"];
    $.each(innerHtmlFields, function(i, f){
        if(params[f]){
            items.push(params[f]);
        }
    });
    if(!params.items){
        params.items = [];
    }
    if(!$.isArray(params.items)){
        var arr = [];
        arr.push(params.items);
        params.items = arr;
    }
    $.merge(items, params.items);
    params.items = items;

    //将params的属性都复制到this对象上
    $.extend(this, params);

    /*绑定事件监听**/
    var listeners = params.listeners;
    for( var listener in listeners){
        if(listener){
            $("body").delegate("#" + params.id, listener, listeners[listener]);
        }
    };

    /*假如指定了containerId或container， 则将创建的标签插入dom中**/
    if(util.notNullOrEmpty(params.containerId)){
        findById(params.containerId).append(this.toHtml());
    }else if(util.notNullOrEmpty(params.container)){
        $(params.container).append(this.toHtml());
    };
    /*标识自己为Tag对象的实例**/
    this._isTagInstance = true;
}

$.extend(Tag.prototype, {
    /*****************************************************public*******************************************************/
    toHtml:function(){

        /*
         * 处理特殊属性
         */
        if(util.notNullOrEmpty(this.attrs["width"])){
            var width = this.attrs["width"];
            if(util.isInteger(width)){
                width += "px";
            }
            if(util.isNullOrEmpty(this.attrs["style"])){
                this.attrs["style"] = "";
            }
            this.attrs["style"] += "width:" + width;
            delete this.attrs["width"];
        }
        /*
         * 拼装属性字符串
         */
        var attrs = " ";
        for(var attr in this.attrs){
            if(this.attrs[attr] != null){
                attrs +=" " + attr + "='" + this.attrs[attr]+ "' ";
            }
        }
        /*
         *处理子元素 
         */
        var items = this.items;
        var innerHtml = "";
        $.each(items, function(i, item){
            if(typeof item == 'object'){
                if(!item._isTagInstance){//普通object, 不是Tag实例
                    item = new Tag(item);//以此object为参数创建一个Tag对象
                }
            }
            innerHtml += item + "";//自动调用item.toString();
        });

        /*
         * 生成HTML
         */
        var tag = this.tag;
        var html = "";
        if(util.isDoubleTag(tag)){
            html = "<" + tag + attrs + ">" + innerHtml+ "</"+ tag+">";
        }else{
            html =  "<" + tag + attrs + "/>";
        }
        this._html = html;
        return this._html;
    },
    insert:function(tag){
        this.items.push(tag);
    },

    /**
     * 重写toString方法
     */
    toString:function(){
        return this.toHtml();
    },
    /**
     * @returns 将tag插入dom中后，可调用此方法获得对应的jquery对象
     */
    $:function(){
        return findById(this.id);
    },
    /**
     * 获取属性值
     * @param attrName
     */
    attr:function(attrName){
        return this.attrs[attrName];
    }

});

core.Tag = Tag;

3.使用示范（前提是引入jquery文件和上述两个文件）

  var tag = new core.Tag({
        tag:"div",//创建一个div标签
        containerId:'',//or container(a jquery selector). 如果指定了这个属性， 标签对象在初始化完成后会自动插入containerId代表的dom对象，并作为其最后一个子节点。比如可以指定body标签的id属性值，则生成的div标签会被插入body中
        html:"ss",//or text, or innerHtml，生成的div标签的文本
        cls:'',// equals to attrs["class"],
        listeners:{//监听器。 可监听jquery支持的事件
            click:function(){},
            focus:function(){}
        },
        attrs:{
            id:'',//指定id属性值
            "class":'',//指定class属性值
            style:'',
            type:'',
            value:'',
            //以上属性也可以像tag, html一样直接定义在tag对象中
            ....//any other attributes
        },
        items:[new Tag("div"), {tag:'div'},"hello"]//子元素数组， 数组元素可以是一个Tag对象或一个Tag对象的配置对象或一个普通字符串、
  })
  tag.toHtml(); //打印结果就知道是什么了
  tag.attr("attrName"); //打印结果就知道是什么了
  tag.$();//获取标签对应的dom对象，控制台打印出结果就知道是什么了，比如，console.log(tag.$())