工作記錄（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