工作记录(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  })
10 
11  //或者
12  
13  $(document).on('click','#div a',function(){
14 
15  })

 

具体可参考http://jquery.com/upgrade-guide/1.9/#live-removed

 

 

你可能感兴趣的:(工作)