工作记录(1)- js问题
也是好久不写博客了,确实懒了;想想应该把node.js的东西写完整比较好,在抽时间吧;
这几天在做阿里巴巴的一个页面展示,里面设计到了一些js的问题,中途也遇到了一些幼稚的问题,
算是简单记录一下,以备查看
一、jquery 插件
里面涉及到了 滚动条的拖动以及图片左右切换时的联动问题,用到了jquey ui的简单操作以及slidesJS插件;
为什么最终用到了jquery ui 和 slidesJS,因为个人觉得里面提供的api方法和事件,比较不错,例如:
jquery ui 关于slider:
1 $( "#slider" ).slider({ 2 animate: false, 3 orientation: "horizontal", 4 range: false, 5 step:10, 6 min:0, 7 max:100, 8 value: 20, 9 start:function(event,ui){ 10 // console.log(ui.value); 11 }, 12 stop:function(event,ui){ 13 // console.log(ui.value); 14 }, 15 change:function(event,ui){ 16 //console.log(ui.value); 17 18 }, 19 20 });
slidesJS
1 $(‘#slides‘).slidesjs({ 2 width: 940, 3 height: 528, 4 start:1, 5 navigation: true, 6 callback: { 7 loaded: function(number) { 8 // Use your browser console to view log 9 console.log(‘SlidesJS: Loaded with slide #‘ + number); 10 11 // Show start slide in log 12 $(‘#slidesjs-log .slidesjs-slide-number‘).text(number); 13 }, 14 start: function(number) { 15 // Use your browser console to view log 16 console.log(‘SlidesJS: Start Animation on slide #‘ + number); 17 }, 18 complete: function(number) { 19 // Use your browser console to view log 20 console.log(‘SlidesJS: Animation Complete. Current slide is #‘ + number); 21 22 // Change slide number on animation complete 23 $(‘#slidesjs-log .slidesjs-slide-number‘).text(number); 24 } 25 } 26 });
这里就不详细介绍了,具体可参考官网api说明
http://www.slidesjs.com/
http://api.jqueryui.com/slider/
当然,对于滑动条和左右按钮实现联动,是用了jquery ui slider中的change事件,
当触发change事件时,实现左右按钮的触发,可是怎么判断到底是左按钮还是右按钮呢,
后面想了想,其实是没有办法判断当change的时候,触发的是左还是右,
但是,用sliderJS的时候,它会生成一个类似幻灯片张数的数字,点击第几张跳转到第几张的东西(当然可以设置不显示)
所以,当滑动条滑动change的时候,根据当前的value值,进行相应判断触动第几张按钮的事件,
从而实现了滑动条和左右按钮的联动
二、js函数的默认值以及event.target的兼容
也遇到了js function 参数默认值的问题,记得以前也遇到过此类问题,所以这次小小记录一下
1 function foo(option1,option2){ 2 // todo 3 } 4 5 function foo(option1=‘foo‘,option1){ 6 //todo 7 } // 此种定义参数默认值的方式错误 8 9 function foo(option1,option2,...){ 10 option1=arguments[0] ? arguments[0] : ‘foo‘; 11 option2=arguments[1] ? arguments[1] : ‘foo1‘; 12 ... 13 } 14 15 function foo(option1,option2,...){ 16 option1=arguments[0] || ‘foo‘; 17 option2=arguments[1] || ‘foo1‘; 18 ... 19 } 20 21 function foo(){ 22 option1=arguments[0] ? arguments[0] : ‘foo‘; 23 option2=arguments[1] ? arguments[1] : ‘foo1‘; 24 ... 25 } 26 27 function foo(){ 28 option1=arguments[0] || ‘foo‘; 29 option2=arguments[1] || ‘foo1‘; 30 ... 31 }
所以,js中默认有个arguments的数组来保持参数的一一对应,当然函数中,不加参数也是正确的,
arguments会自动检测传递过来的参数,所以后两者方法也是正确的
关于event.target,其实自己以前也知道,只是这次也没有太多的解决
event.target 的firefox等标准浏览器支持的,而IE浏览器相对应的是event.srcElement
所以好的兼容写法是
1 var obj=event.srcElement ? event.srcElement : event.target; 2 3 //event.target以及event.srcElement还有很多可用属性 4 5 event.target.id 6 event.target.text 7 event.target.name 8 event.target.parentNode.id 9 event.target.ChildNode[i].id 10 11 event.srcElement.id 12 event.srcElement.tagName 13 event.srcElement.type 14 event.srcElement.value 15 event.srcElement.name 16 event.srcElement.className 17 event.srcElement.parentElement.id 18 event.srcElement.getattribute 19 event.srcElement.firstChild 20 event.srcElement.firstChild 21 event.srcElement.children[i] 22 event.srcElement.ChildNode[i]
三、ajax的一些问题以及jquery1.9 live替代方法on
其实,最头疼的问题,还是ajax的问题;
本来对方已经提供了得到数据的接口,
可是ajax请求过去就会涉及到跨域问题(本地不在接口域名下,也未提供相应的测试host配置等),但接口的结果返回,并未考虑跨域
所以只能想了一个,默认ajax得到了数据,然后根据数据的格式进行js代码的逻辑实现;
实现完毕后,恢复ajax的代码,交付客户,运行,大体上还行,都可以正常运行,但是在IE浏览器中,就是不行,提供未定义;
因为ajax success后,把结果赋值给变量,现在提示变量未定义,而且只有IE是这样,这就郁闷了,因为在本地无任何问题;
而且调试也很麻烦,必须改动代码,服务器上让对方替换文件,再看效果
对于这种 服务器上有问题,本地不能复现,不能本地调试,服务器无权限的问题,最是纠结了
后面经过和兄弟讨论,觉得是否是js全局变量的问题,而且还提供了一种想法 - 代理实现 ,这样就可以实现了和服务器一样的环境,也方便了调试
其实代理就是:本地域名后台写个请求,请求对方接口地址,得到数据,然后本地ajax请求本地后台文件得到数据,这样就没有了跨域的问题;
果真,试过之后,就可以实现了真实的服务器环境,方便了调试;
但是问题还是没有解决,优化代码后,服务器上还是相同的问题,这就纳闷了,
本地经过代理得到数据没有问题,可不经过代理,在正式环境,就得不到数据,
一时想不明白这两点不同在哪里,自己本地只是实现了一个代理转发的功能,其他都是一样的
于是,就是一下午的纠结。。。
终于,在对方接口编写者无意说到一个编码的问题,因为我们也在沟通,刚开始我没注意,后面终于明白了怎么回事
为什么其他浏览器都能得到数据,在IE浏览器中,就是undefined呢(也已经到success了,只是undefined)
我看到了这样一篇文章,http://www.cnblogs.com/aNd1coder/archive/2012/12/22/2829172.html
终于明白了,是原始接口返回数据的编码和ajax 请求参数过去的参数编码不一致,导致了在IE中就是undefined的结果,
而经过一个本地的代理,代理的文件编码以及数据、参数的编码是一致的,所以本地是没有问题的
1 $.ajax({ 2 url:‘xxx‘, 3 type:‘GET‘, 4 cache:false, 5 contentType:‘text/html; charset=utf-8;‘, //统一前后端编码为utf-8防止ie下返回undefined 6 success:function (result) {} 7 }); 8 9 //contentType,发送信息至服务器时内容编码类型。默认值适合大多数情况。 10 //不用设置contentType也行,确保请求url的编码一致也行
这真是一个大大的坑。。。
最后,关于jquery1.9之后,就废弃了live方法,代替的是on方法
1 $("#div a").live(‘click‘,function(){ 2 3 }) 4 5 //替代成 6 7 $("#div").on(‘click‘,‘a‘,function(){ 8 9 })
具体可参考http://jquery.com/upgrade-guide/1.9/#live-removed
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。