Jquery插件开发（03）--核心功能篇

核心功能设计--从Init开始

1.属性扩充

JsonFormater.prototype={

//append init function

init:function(){

this.tab=this.multiplyString(this.options.tabSize,this.options.singleTab);

},

multiplyString:function(num,str){

var result='';

for (var i=0;i<num;i++) {

result+=str;

}

return result;

}

}

设计说明：

添加的新元素会这样--->属性扩充

jf=new JsonFormater("hecore");/

添加指定对象

说明：singleTab配合方法 multiplyString实现字符拼接，那么在做json格式化的时候 可以用 空格" "来代替这样实现美化。

（2）init功能事件绑定

bindEvent:function(){
		var that=this;
		//点击事件去除
		$(this.options.dom).off('click','imgToggle');
		//点击事件绑定
		$(this.options.dom).on('click','imgToggle',function(){
			if(that.isFormated==false){//不格式化
				return;
			}
			//格式化并展示
			that.makeContentVisible($(this).parent().next(),!$(this).data('status'));		
		});
}
//添加下拉展示控制代码
    makeContentVisible : function(element, visible){
        var img = element.prev().find('img');
        if(visible){
            element.show();
            img.attr('src', this.options.imgExpanded);
            img.data('status', 1);
        }else{
            element.hide();
            img.attr('src', this.options.imgCollapsed);
            img.data('status', 0);
        }
},

(3).对外API设计

//格式化基础代码
doFormat:function(json){
		var html;
		var obj;
		try{
			if(typeof json == 'object')
				obj=[json];
			else{
				if(json=="")
					json="\"\"";
				//empty deault
				obj=eval("[" + json + "]");
                //TO DO design document full html 
			}
		}catch(e){
			//TODO handle the exception
			alert("Json load err:\n"+e.message);
			$(this.options.dom).html("");
			this.isFormated=false;
		}
	}

输入非法解析串 dd

Jquery插件开发-插件设计