关于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("<input type='file' οnchange='javascript:" + this.id  + ".onchange();' value='' />");

        },
        onchange:function(){  
        }
}
jsp中拷贝对象的代码:

        var newFileupload = $.extend(true, {}, fileupload);
        newFileupload.init();
问题出在newFileupload没有定义成全局的对象,如果把var去掉改为:

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

就OK了。原因就是上面的拷贝语句写在一个叫mian的function里面了。所以成了一个局部变量。

看来要好好复习下js的基础了。

变量是所在对象的一个属性。函数也是对象。所有对象都是window的属性。

js的变量:

全局的:在javascript中定义的;在function中前面不加var定义的。

局部的:在function中前面加var定义的。

函数作用域(function scope):变量在声明它的函数体及函数体嵌套的函数体都是有定义的。函数的参数也是局部变量。

局部变量会取代全局的同名变量。

作用域链(scope chain):window -> window的function属性 -> window的function属性的function属性,以此类推。

js解释器在预编译javascript块时,首先找出非函数体内的所有var关键字,生成变量名标识并放入其所在作用域链中。执行函数体时,也是同样的处理。

在运行代码时,遇到变量,先从所属作用域链中查找,找到后取出来使用;若没有找到,继续在上一级作用域链中查找。直到顶层window还是没有找到,

则返回未定义。



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库的,而这种语句块的写法却能屏蔽冲突。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值