关于js和jquery的一些问题

很长时间没有写前台代码了，突然想用js写个文件上传共通，结果遇到了各种各样的问题。

现在把问题和解决的办法记录一下。（有些还没有找到具体的原因）

1，利用extend(bool,{},item1,item2….)来深度拷贝对象，只是得到浅拷贝的结果。

测试语句：

    var aa = {
        bb:{
            cc:"12"
        }
    }
    
    var dd = $.extend(true, {}, aa);
    var ee = $.extend(true, {}, aa);
    //var dd = JSON.parse(JSON.stringify(aa));
    dd.bb.cc="33";
    ee.bb.cc="44";
    console.log("aa=" + aa.bb.cc);
    console.log("dd=" + dd.bb.cc);
    console.log("ee=" + ee.bb.cc);

得到的结果是：

aa=44

dd=44

ee=44

预想的正确的结果是：

aa=12

dd=33

ee=44

PS：由于文件上传共通没有达到实际效果，才写了上面的简短代码来测试。后来发现这段测试代码可以专门用来测试jquery是否有效。

调查原因发现，自己的js和jquery有冲突，导致extend的深度拷贝无效。

问题代码是，在自己的js中有如下代码：

Object.prototype.getName=function() {
	for (var a in window){
	   if (window[a]==this){ 
	 	  return a.toString();
	   };
	}
}

后来改成如下就OK了。

function getName(obj){  
	for (var a in window){
	   if (window[a]==obj){ 
	 	  return a.toString();
	   };
	}
}

另外，用上面的简短代码测试时，还发现js的导入顺序不一样，也会出现问题。

最初js的导入顺序是：

<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript" src="../js/fileupload.js"></script>

会得到错误的结果。如果改为：

<script type="text/javascript" src="../js/fileupload.js"></script>
<script type="text/javascript" src="../js/jquery.js"></script>

运行的结果就正确了。

调整顺序后，虽然解决了深度拷贝问题，可我的文件上传共通其他地方又不对了。可能还是和jquery有冲突的原因。原因不明，郁闷~~~~

2，在自己的js中加入了一个jquery的静态方法，可在js中调用时显示这个方法没有定义。

js中定义的静态方法：

(function($){
	$.extend({ 
		getName:function(obj){  
			for (var a in window){
			   if (window[a]==obj){ 
			 	  return a.toString();
			   };
			}
		}
	}); 
})(jQuery)

调用代码如下：

var images = {  
    init:function(id){  
    	this.id = $.getName(this);
    }
}

还没有调查出原因来，先写出来做个记录，等哪天弄明白了，再回头更新。

3，对于拷贝出来的对象的方法，在控件的事件中调用时，出现找不到该对象的错误。

js中定义的对象：

var fileupload = {  
        init:function(){  

            this.id = getName(this);
            $("#" + this.id).append("");

        },
        onchange:function(){  
        }
}

jsp中拷贝对象的代码：

        var newFileupload = $.extend(true, {}, fileupload);
        newFileupload.init();

问题出在newFileupload没有定义成全局的对象，如果把var去掉改为：

        newFileupload = $.extend(true, {}, fileupload);

就OK了。至于，为啥这样，还没有弄明白。

4,在解决问题时，在网上找了很多js和jquery相关的文章来看，觉得总结的比较好的，抄录如下：

4.1,(function($){….})(jQuery) 相当于：function fun($){…};fun(jQuery);

4.2,$(function(){}) 相当于：$(document).ready(function(){});

4.3,jQuery.extend(object);为扩展jQuery类本身.为类添加新的方法。

jQuery.fn.extend(object);给jQuery对象添加方法。

4.4,prototype.js是对原生对象的功能增强，多是扩充原生对象。
jquery.js是对原生语句的封装，多是构建自己的对象。

4.5,在自己写jquery插件时,应该都使用(function($){….})(jQuery)这种写法，因为我们不知道具体工作过程中是如何顺序引入各种js库的,而这种语句块的写法却能屏蔽冲突。