工作记录（1）- js问题

也是好久不写博客了，确实懒了；想想应该把node.js的东西写完整比较好，在抽时间吧；

这几天在做阿里巴巴的一个页面展示，里面设计到了一些js的问题，中途也遇到了一些幼稚的问题，

算是简单记录一下，以备查看

 

一、jquery 插件

里面涉及到了 滚动条的拖动以及图片左右切换时的联动问题，用到了jquey ui的简单操作以及slidesJS插件；

为什么最终用到了jquery ui 和 slidesJS,因为个人觉得里面提供的api方法和事件，比较不错，例如：

jquery ui 关于slider：

        $( "#slider" ).slider({
            animate: false,
            orientation: "horizontal",
            range: false,
            step:10,
            min:0,
            max:100,
            value: 20,
            start:function(event,ui){
               // console.log(ui.value);
            },
            stop:function(event,ui){
               // console.log(ui.value);  
            },
            change:function(event,ui){
                //console.log(ui.value);

            },

        });

slidesJS

        $('#slides').slidesjs({
          width: 940,
          height: 528,
          start:1,
          navigation: true,
          callback: {
            loaded: function(number) {
              // Use your browser console to view log
              console.log('SlidesJS: Loaded with slide #' + number);
 
11              // Show start slide in log
             $('#slidesjs-log .slidesjs-slide-number').text(number);
           },
           start: function(number) {
             // Use your browser console to view log
             console.log('SlidesJS: Start Animation on slide #' + number);
           },
           complete: function(number) {
             // Use your browser console to view log
             console.log('SlidesJS: Animation Complete. Current slide is #' + number);
             
             // Change slide number on animation complete
             $('#slidesjs-log .slidesjs-slide-number').text(number);
           }
         }
       });

这里就不详细介绍了，具体可参考官网api说明

http://www.slidesjs.com/

http://api.jqueryui.com/slider/

 

当然，对于滑动条和左右按钮实现联动，是用了jquery ui slider中的change事件，

当触发change事件时，实现左右按钮的触发，可是怎么判断到底是左按钮还是右按钮呢，

后面想了想，其实是没有办法判断当change的时候，触发的是左还是右，

但是，用sliderJS的时候，它会生成一个类似幻灯片张数的数字，点击第几张跳转到第几张的东西（当然可以设置不显示）

所以，当滑动条滑动change的时候，根据当前的value值，进行相应判断触动第几张按钮的事件，

从而实现了滑动条和左右按钮的联动

二、js函数的默认值以及event.target的兼容

 也遇到了js function 参数默认值的问题，记得以前也遇到过此类问题，所以这次小小记录一下

function foo(option1,option2){
//  todo    
}

function foo(option1='foo',option1){
//todo
}  // 此种定义参数默认值的方式错误

function foo(option1,option2,...){
    option1=arguments[0] ? arguments[0] : 'foo';
    option2=arguments[1] ? arguments[1] : 'foo1';
    ...
}

function foo(option1,option2,...){
    option1=arguments[0] ||  'foo';
    option2=arguments[1] ||  'foo1';
    ...
}

function foo(){
    option1=arguments[0] ? arguments[0] : 'foo';
    option2=arguments[1] ? arguments[1] : 'foo1';
    ...
}

function foo(){
    option1=arguments[0] ||  'foo';
    option2=arguments[1] ||  'foo1';
    ...
}

所以，js中默认有个arguments的数组来保持参数的一一对应，当然函数中，不加参数也是正确的，

arguments会自动检测传递过来的参数，所以后两者方法也是正确的

 

关于event.target，其实自己以前也知道，只是这次也没有太多的解决

event.target 的firefox等标准浏览器支持的，而IE浏览器相对应的是event.srcElement

所以好的兼容写法是

var obj=event.srcElement ? event.srcElement : event.target;

//event.target以及event.srcElement还有很多可用属性

event.target.id
event.target.text
event.target.name
event.target.parentNode.id
event.target.ChildNode[i].id

event.srcElement.id
event.srcElement.tagName
event.srcElement.type
event.srcElement.value 
event.srcElement.name
event.srcElement.className
event.srcElement.parentElement.id
event.srcElement.getattribute 
event.srcElement.firstChild
event.srcElement.firstChild
event.srcElement.children[i] 
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的结果，

而经过一个本地的代理，代理的文件编码以及数据、参数的编码是一致的，所以本地是没有问题的

 

$.ajax({
      url:'xxx',
      type:'GET',
      cache:false,
      contentType:'text/html; charset=utf-8;', //统一前后端编码为utf-8防止ie下返回undefined
      success:function (result) {}
});

//contentType，发送信息至服务器时内容编码类型。默认值适合大多数情况。
//不用设置contentType也行，确保请求url的编码一致也行

这真是一个大大的坑。。。

最后，关于jquery1.9之后，就废弃了live方法，代替的是on方法

 $("#div a").live('click',function(){
 
 })
 
 //替代成
 
 $("#div").on('click','a',function(){
 
 })

 //或者
 
 $(document).on('click','#div a',function(){

 })

 

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