简单东西-项目开发之js总结

浏览数：23 / 时间：2015年06月09日

1 ajax非异步调用，且调用函数具有返回值

	function getEncoderInfo(id){
		var encoder = [];
		$.ajax({
			type : "post",
			url : basePath+"/management/source/findSourceById", 
			data : {
				id:id
			},
			dataType : "json",
			async:false,
			success : function(data) {
				encoder = data.source;
			},
			error : function(XMLHttpRequest, textStatus, errorThrown) {
				if(textStatus=="error"){
					bootbox.alert("暂时无法连接服务器，请稍后重试");
				}
			}
		});
		return encoder;
	}

使用Ajax发送请求，并且需要非异步获取返回值时，可以设置async标识为false,同时在返回函数中收集返回值，然后再函数结尾返回。而如果在success分支中直接返回的话，仅仅标识的是该回调函数success的返回，而不是整个getnEncoderInfo的返回。所以，如果调用ajax的外层函数必须在ajax调用完成后添加return语句才能保证该函数有返回值。return encoder；是写在success分支中的话，那么该函数的返回值就成了undefined了。

2 jquery的bind事件

// document initial statement
var picEncoder = null;

function createPicEncoder(){
	//初始化类信息
	picEncoder = new PicEncoder(name,rowX,rowY);
	var result = picEncoder.init();
	
	//show 
	$("#layoutDiv").css("display","block");
	$("#picencoder_div").modal('show');
}

function PicEncoder(name,rowX,rowY) {
	//操作类型：添加或者修改
	this.action = 'add';
	 
	// init 各种绑定事件
	this.init = function() {
		var obthis=this;
		//保存按钮:先解除与先前对象的绑定事件，
		//再重新设置click事件
		$("#btn-confirm").unbind();
		$("#btn-confirm").on("click",function(){
			obthis.savePicEncoder();
		});	
	}

}

JS以面向对象的方式定义全局对象，对象的init中设置了页面按钮的绑定事件，如果没有unbind()方法，那么btn-confirm元素的绑定的事件的个数跟this.init方法执行的次数是一样的。因为没有解除与先前的picEncoder对象的绑定，每次提交都会增加一个绑定事件，最终导致的后果是：一个提交操作，最终调用了N次保存操作，这个N就是init执行的次数。为元素绑定事件之前，应该分析是否需要解除先前的绑定后再重新设置绑定事件。

此外，只有对已经添加到页面中的元素，上述绑定事件才会生效。先将元素加载到页面，在为元素添加事件，这样事件才有效：

var con="";
for(var i=0;i<blocks.length;i++){
	con+='<div class="bgColorDiv">';
	con+='<img title="解除绑定" class="deleteImg" style="width:30px;" src="'+basePath+'/img/unbind_blue.png" />';
	con+='</div>';
	con+='<lable class="decoderLabel" value="'+nextIndex+'" style="font-size:18px;">'+encoder.name+'</label>';
	con+='</div>';
}

$("#divLib").html(con);

//添加deleteImg的绑定事件
$(".deleteImg").unbind();
$(".deleteImg").on("click", function(){
});

如果一个元素标签没有被添加到html页面中，那么对这些元素执行的bind事件将会无效，即上述代码，如果将deleteImg的绑定事件代码放在for的拼接代码中，那么我们点击deleteImg时，按钮是没有任何反应的。

3 前端调试

console.log输出调试信息，非常方便。这么简单实用的调试技巧，没有写js之前竟然不知道。前端编程，其实也不亚于后台，完成了一个需求功能之后，我的一个js文件，竟然也达到了600多行，其调试难道不亚于服务器端代码。js的面向对象的编码方式，值得深究。

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

简单东西-项目开发之js总结