工作记录（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