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

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的面向对象的编码方式,值得深究。

时间: 2024-11-09 05:50:48

简单东西-项目开发之js总结的相关文章

iOS项目开发之Socket编程

有一段时间没有认真总结和写博客了 前段时间找工作.进入工作阶段.比较少静下来认真总结,现在静下心来总结一下最近的一些心得 前言 AsyncSocket介绍 AsyncSocket详解 AsyncSocket示例 一.前言 公司的项目用到了Socket编程,之前在学习的过程当中,用到的更多的还是http请求的方式.但是既然用到了就必须学习一下,所以就在网上找一些例子,然后想自己写一个demo.可是发现很多写iOS Socket的博客并没有很详细的说明,也可能是大神们觉得其他东西都浅显易懂. 自己专

搜芽项目开发之SVN协作流程

我想让你们提交一下代码,然后我回去看了一下 seller的提交,发现没有成浩的代码,后来我发现他在上一级目录找到他的代码了. 如下图所示:本应该是在seller目录下的,而不应该另开目录.所以我再这里讲一下你们如何使用svn提交代码.我用命令行来讲, 我也不是很精通,会用,懂流程能协作开发就好.见图后: 首先,我们分情况: 1,我写了一个项目,服务器也从来没有这个项目的代码(我干的活,eg seller)怎么办. 如我要以下图目录作为源码,想在服务器给它开个分支.(这个目录现在已经提交了,我们先

项目开发之package.json

Name 必须字段. 提示: 不要在name中包含js, node字样: 这个名字不能以点号或下划线开头: 这个名字不能包含有大写字母: 这个名字可能在require()方法中被调用,所以应该尽可能短: name字段不能含有非URL安全的字符,因为它将当发布的时候,它将作为你的包的相关信息被写入URL中 那么,有哪些算是非URL安全的字符呢? Version 必须字段. 对于"version":"x.y.z" 1.修复bug,小改动,增加z 2.增加了新特性,但仍能

项目开发之Axure原型需求分析

引言: 我们已经习惯于一个人独立进行软件开发,每个人都使用自己的风格进行程序设计,但随着工程项目变大或者是对时间要求比较紧时,就需要几个人,十几个人,甚至是上百个人协作进行软件开发与设计,一个比较棘手的问题就是如何将若干人所编写的软件代码(有可能是链接库.组件)进行无缝地集成,这时不难想到SVN,这个开放源代码版本控制系统进行分支管理. 小编这次开发的文档管理系统用到同SVN一样高上大的工具Axure,利用Axure 画原型图有助于系统的需求分析. Axure RP: 1.Axure的发音是"A

iOS 开发之JS与Native交互

最近项目中用到了JS与OC交互的,所以我就来讲一下JS与OC交互的详细过程,以及在做项目的时候遇到的问题,跟大家分享一下. 1:关于交互实现方式的选择. 网上讨论比较多的有一个第三方库WebViewJavascriptBridge,个人不建议用,因为本身我们在做H5交互的时候就是给前端增加了工作量,而这种处理方式就需要前端要配置两套代码,一套给安卓,一套给iOS,而且不利于调试.所以我最后选择用系统的JavaScriptCore框架,JavaScriptzCore内部有五个框架,分别是: #im

php开发之js修改页面css样式

在我以前的印象里,页面的字体属性,背景,等样式在页面加载后基本上都是固定的了,但是今天看到可以通过js修改页面的样式,觉得有必要和大家分享下. test.html <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equi

android webView开发之js调用java代码示例

1.webView设置 webView.getSettings().setJavaScriptEnabled(true);//设置支持js webView.addJavascriptInterface(new JsOperation(),"client");//设置js调用的java类 2.声明js要调用java类 class JsOperation { // 测试方法 @JavascriptInterface//这句标识必须要写上否则会出问题 public void test(Str

SPA项目开发之tab页实现

实现思路及细节 1.利用前面博客所讲的Vuex的知识:定义几个变量 Options:存放tab页对象的容器(主要是路由路径以及tab页的名字) activeIndex:被激活的tab页路由路径 showName:tab页的标题 Role:用来区分是否是因为左侧菜单被点击造成的路由路径发生改变: 是:pass:不是:nopass 2.左侧导航菜单绑定点击事件 将被点击的菜单名称存放到Vuex中,供路由路径变化监听时,tab页标题显示: 标记一下role为pass,到时新增tab页的时候需要作为判断

基于大数据的电影网站项目开发之HBase分布式安装(四)

1.hbase解压,通过xftp将hbase-1.0.1.1-bin.tar.gz上传到虚拟机中 通过tar -zxvf hbase-1.0.1.1-bin.tar.gz解压到soft目录下 2. 设置环境变量 HBASE_HOME=/home/meng/soft/hbase-1.0.1.1 export PATH=$PATH:$HBASE_HOME/bin 3.hbase-env.sh中有如下属性: export JAVA_HOME=/usr/java/jdk1.6 将其开启并修改环境变量ex