ipad&mobile通用webapp框架前哨戰

響應式設計的意義

隨著移動裝置的發展，移動裝置以迅猛的勢頭分颳著PC的佔有率，ipad或者android pad的市場佔有率穩步提升，所以我們的程式需要在ipad上很好的執行，對於公司來說有以下負擔：裝置系統上來說主要分為android ios；尺寸上看又以手機與pad為一個分界線，如果再加一個H5站點，其開發所投入資源不可謂不小！

Hybrid的出現，解決了大部分問題，針對尺寸上的問題有一種東西叫做響應式設計，這個響應式設計似乎可以解決我們的問題，所以今天我就來告訴大傢什麼是響應式設計，或者說我這種外行以為的響應式設計。

響應式Web設計(Responsive Web design)的理念是：集中建立頁面的圖片排版大小，可以智慧地根據使用者行為以及使用的裝置環境（系統平臺、螢幕尺寸、螢幕定向等）進行相對應的佈局。

以我粗淺的理解，響應式的提出，其實就是單純的根據不同的尺寸，以最優的展示方式呈現罷了，僅僅而已，不能再多了，如果真要更多點，便是根據不同的尺寸對靜態資源載入上有所控制，節約流量，換句話說，響應式設計不涉及業務邏輯，jser神馬都不需要做，css同事便可完全解決，但事實上最近碰到的需求完全不是這麼回事嘛。

以最簡單圖片輪播來說，手機上是這個樣子的：

而在ipad橫屏上，卻變成了這個樣子了：

我當時就醉了，iPad豎著保持手機樣式，橫著iPad樣式，什麼CSS有這麼偉大，可以完成這個功能，而真實的場景是這個樣子的：

手機端：首頁搜尋頁->list頁面->詳情頁->預定頁

但是到了ipad橫屏上：首頁左屏是搜尋頁，右邊是日期選擇/城市選擇/......，然後到了list頁面，左邊是list，右邊是詳情頁，單擊左邊的list左邊詳情直接變化！

其實單獨頁面做的話，好像沒有什麼問題，但是手機業務早已鋪開了，老闆的意思是，程式碼要重用，還是全域性改改CSS實現就好啦，我當時真為我們的UED捏了一把汗。到了具體業務實現的同事那裡情況又變了，UED只是給出了兩個設計好了的靜態html+css，要怎麼玩還得那個業務同事自己搞。

那天我去支援時，看到了其牛逼的實現，不由的菊花一緊，裡面媒體查詢都沒有用，直接display: none 搞定一切問題了，這個對手機程式帶來了很大的負擔：原來一個view就是用於手機，現在無端的在裡面加入了大量的pad端程式，直接造成了兩個結果：

① 業務邏輯變得複雜，容易出BUG

② js尺寸變大，對手機端來說，流量很寶貴

雖然知道他那種做法不可取，當時忙於其它事情，並且天意難違，天意難測也只有聽之任之，但是這裡要說一點，響應式佈局不太適合業務複雜的webapp，各位要慎重！

ipad版本應該怎麼做？

雖然如此，問題還是需要解決，並且需要在框架層做出解決，這類需求本不應強加與CSS，好在曾經我們業務層的View設計基本是滿足條件的，現在只需要擴充套件即可，仍然以blade框架為例：

每個頁面片完成的工作僅僅依賴了一個View類，既然View是類，那麼繼承mobile的View，實現ipad的View，似乎是可能的，這一切的基石便是繼承

繼承的意義

我們這裡的View Controller index.js開始是不完全滿足我們的需求的，我們做一些調整，這裡是調整前的程式碼：

define(['View', getViewTemplatePath('index'), 'UIGroupList'], function (View, viewhtml, UIGroupList) {

  return _.inherit(View, {
    onCreate: function () {
      this.$el.html(viewhtml);
      this.initElement();

      this.TXTTIMERRES = null;

    },

    initElement: function () {
      this.cancelBtn = this.$('.cui-btn-cancle');
      this.searchBox = this.$('.cui-input-box');
      this.txtWrapper = this.$('.cui-citys-hd');
      this.searchList = this.$('.seach-list');

    },

    events: {
      'focus .cui-input-box': 'seachTxtFocus',
      'click .cui-btn-cancle': function () {
        this.closeSearch();
      },
      'click .seach-list>li': function (e) {
        var gindex = $(e.currentTarget).attr('data-group');
        var index = $(e.currentTarget).attr('data-index');

        this.forward(this.uidata[gindex].data[index].uiname);
      }
    },

    seachTxtFocus: function (e) {
      this.openSeach();
    },

    closeSearch: function () {
      this.txtWrapper.removeClass('cui-input-focus');
      this.groupList.show();
      this.searchList.hide();
      this.searchBox.val('');
    },

    //開啟搜尋狀態
    openSeach: function () {
      if (this.TXTTIMERRES) return;

      this.TXTTIMERRES = setInterval($.proxy(function () {
        //        console.log(1);
        //如果當前獲取焦點的不是input元素的話便清除定時器
        if (!this.isInputFocus()) {
          if (this.TXTTIMERRES) {
            clearInterval(this.TXTTIMERRES);
            this.TXTTIMERRES = null;
          }
        }

        var txt = this.searchBox.val().toLowerCase();
        if (txt == '') {
          setTimeout($.proxy(function () {
            if (!this.isInputFocus()) {
              this.closeSearch();
            }
          }, this), 500);
          return;
        }

        this.txtWrapper.addClass('cui-input-focus');
        this.groupList.hide();
        this.searchList.show();

        var list = this.groupList.getFilterList(txt);
        this.searchList.html(list);

      }, this));


    },

    isInputFocus: function () {
      if (document.activeElement.nodeName == 'INPUT' && document.activeElement.type == 'text')
        return true;
      return false;
    },

    initGoupList: function () {
      if (this.groupList) return;
      var scope = this;

      //提示類
      var groupList1 = [
        { 'uiname': 'alert', 'name': '警告框' },
        { 'uiname': 'toast', 'name': 'toast框' },
        { 'uiname': 'reloading', 'name': 'loading框' },
        { 'uiname': 'bubble.layer', 'name': '氣泡框提示' },
        { 'uiname': 'warning404', 'name': '404提醒' },
        { 'uiname': 'layerlist', 'name': '彈出層list' }
      ];

      var groupList2 = [

        { 'uiname': 'identity', 'name': '身份證鍵盤' },
        { 'uiname': 'imageslider', 'name': '圖片輪播' },
        { 'uiname': 'num', 'name': '數字元件' },
        { 'uiname': 'select', 'name': 'select元件' },
        { 'uiname': 'switch', 'name': 'switch元件' },
        { 'uiname': 'tab', 'name': 'tab元件' },
        { 'uiname': 'calendar', 'name': '日曆元件' },
        { 'uiname': 'group.list', 'name': '分組列表' },
        { 'uiname': 'group.list', 'name': '搜尋列表（城市搜尋，地址搜尋，待補充）' }
      ];

      var groupList3 = [
        { 'uiname': 'radio.list', 'name': '單列表選擇元件' },
        { 'uiname': 'scroll.layer', 'name': '滾動層元件（可定製化彈出層，比較常用）' },
        { 'uiname': 'group.select', 'name': '日期選擇類元件' },
        { 'uiname': 'scroll', 'name': '滾動元件/橫向滾動' },
      ];

      var groupList4 = [
        { 'uiname': 'lazyload', 'name': '圖片延遲載入' },
        { 'uiname': 'inputclear', 'name': '帶刪除按鈕的文字框(todo...)' },
        { 'uiname': 'validate1', 'name': '工具類表單驗證' },
        { 'uiname': 'validate2', 'name': '整合表單驗證(todo...)' },
        { 'uiname': 'filp', 'name': '簡單flip手勢工具' }
      ];

      var uidata = [
        { name: '彈出層類元件', data: groupList1 },
        { name: '常用元件', data: groupList2 },
        { name: '滾動類元件', data: groupList3 },
        { name: '全域性類', data: groupList4 }
      ];

      this.uidata = uidata;

      this.groupList = new UIGroupList({
        datamodel: {
          data: uidata,
          filter: 'uiname,name'
        },
        wrapper: this.$('.cui-citys-bd'),
        onItemClick: function (item, groupIndex, index, e) {
          scope.forward(item.uiname);
        }
      });


      this.groupList.show();

    },

    onPreShow: function () {
      this.turning();
    },

    onShow: function () {
      this.initGoupList();
    },

    onHide: function () {

    }

  });
});

<div id="headerview" style="height: 48px;">
  <header>
    <h1>
      UI元件demo列表</h1>
  </header></div>

<section class="cui-citys-hd ">
  <div class="cui-input-bd">
    <input type="text" class="cui-input-box" placeholder="中文/拼音/首字母">
  </div>
  <button type="button" class="cui-btn-cancle">取消</button>
</section>
<ul class="cui-city-associate seach-list"></ul>

<section class="cui-citys-bd">
</section>

調整後的程式碼如下：

define(['View', getViewTemplatePath('index'), 'UIGroupList'], function (View, viewhtml, UIGroupList) {

  return _.inherit(View, {
    onCreate: function () {
      this.$el.html(viewhtml);
      this.initElement();

      this.TXTTIMERRES = null;

    },

    initElement: function () {
      this.cancelBtn = this.$('.cui-btn-cancle');
      this.searchBox = this.$('.cui-input-box');
      this.txtWrapper = this.$('.cui-citys-hd');
      this.searchList = this.$('.seach-list');

    },

    events: {
      'focus .cui-input-box': 'seachTxtFocus',
      'click .cui-btn-cancle': 'closeSearchAction',
      'click .seach-list>li': 'searchItemAction'
    },

    searchItemAction: function (e) {
      var gindex = $(e.currentTarget).attr('data-group');
      var index = $(e.currentTarget).attr('data-index');
      this.forward(this.uidata[gindex].data[index].uiname);
    },

    closeSearchAction: function () {
      this.closeSearch();
    },

    demoItemAction: function (item, groupIndex, index, e) {
      scope.forward(item.uiname);
    },

    seachTxtFocus: function (e) {
      this.openSeach();
    },

    closeSearch: function () {
      this.txtWrapper.removeClass('cui-input-focus');
      this.groupList.show();
      this.searchList.hide();
      this.searchBox.val('');
    },

    //開啟搜尋狀態
    openSeach: function () {
      if (this.TXTTIMERRES) return;

      this.TXTTIMERRES = setInterval($.proxy(function () {
        //        console.log(1);
        //如果當前獲取焦點的不是input元素的話便清除定時器
        if (!this.isInputFocus()) {
          if (this.TXTTIMERRES) {
            clearInterval(this.TXTTIMERRES);
            this.TXTTIMERRES = null;
          }
        }

        var txt = this.searchBox.val().toLowerCase();
        if (txt == '') {
          setTimeout($.proxy(function () {
            if (!this.isInputFocus()) {
              this.closeSearch();
            }
          }, this), 500);
          return;
        }

        this.txtWrapper.addClass('cui-input-focus');
        this.groupList.hide();
        this.searchList.show();

        var list = this.groupList.getFilterList(txt);
        this.searchList.html(list);

      }, this));


    },

    isInputFocus: function () {
      if (document.activeElement.nodeName == 'INPUT' && document.activeElement.type == 'text')
        return true;
      return false;
    },

    initGoupList: function () {
      if (this.groupList) return;
      var scope = this;

      //提示類
      var groupList1 = [
        { 'uiname': 'alert', 'name': '警告框' },
        { 'uiname': 'toast', 'name': 'toast框' },
        { 'uiname': 'reloading', 'name': 'loading框' },
        { 'uiname': 'bubble.layer', 'name': '氣泡框提示' },
        { 'uiname': 'warning404', 'name': '404提醒' },
        { 'uiname': 'layerlist', 'name': '彈出層list' }
      ];

      var groupList2 = [

        { 'uiname': 'identity', 'name': '身份證鍵盤' },
        { 'uiname': 'imageslider', 'name': '圖片輪播' },
        { 'uiname': 'num', 'name': '數字元件' },
        { 'uiname': 'select', 'name': 'select元件' },
        { 'uiname': 'switch', 'name': 'switch元件' },
        { 'uiname': 'tab', 'name': 'tab元件' },
        { 'uiname': 'calendar', 'name': '日曆元件' },
        { 'uiname': 'group.list', 'name': '分組列表' },
        { 'uiname': 'group.list', 'name': '搜尋列表（城市搜尋，地址搜尋，待補充）' }
      ];

      var groupList3 = [
        { 'uiname': 'radio.list', 'name': '單列表選擇元件' },
        { 'uiname': 'scroll.layer', 'name': '滾動層元件（可定製化彈出層，比較常用）' },
        { 'uiname': 'group.select', 'name': '日期選擇類元件' },
        { 'uiname': 'scroll', 'name': '滾動元件/橫向滾動' },
      ];

      var groupList4 = [
        { 'uiname': 'lazyload', 'name': '圖片延遲載入' },
        { 'uiname': 'inputclear', 'name': '帶刪除按鈕的文字框(todo...)' },
        { 'uiname': 'validate1', 'name': '工具類表單驗證' },
        { 'uiname': 'validate2', 'name': '整合表單驗證(todo...)' },
        { 'uiname': 'filp', 'name': '簡單flip手勢工具' }
      ];

      var uidata = [
        { name: '彈出層類元件', data: groupList1 },
        { name: '常用元件', data: groupList2 },
        { name: '滾動類元件', data: groupList3 },
        { name: '全域性類', data: groupList4 }
      ];

      this.uidata = uidata;

      this.groupList = new UIGroupList({
        datamodel: {
          data: uidata,
          filter: 'uiname,name'
        },
        wrapper: this.$('.cui-citys-bd'),
        onItemClick: function (item, groupIndex, index, e) {
          scope.demoItemAction(item.uiname);
        }
      });

      this.groupList.show();
    },

    onPreShow: function () {
      this.turning();
    },

    onShow: function () {
      this.initGoupList();
    },

    onHide: function () {

    }

  });
});

PS：上面的程式碼是我幾個月前寫的，今天一看又覺得可以優化，當真優化無極限啊！！！

變化的關鍵點是每次我點選的事件全部放到了Index這個類的prototype上：

searchItemAction: function (e) {
  var gindex = $(e.currentTarget).attr('data-group');
  var index = $(e.currentTarget).attr('data-index');
  this.forward(this.uidata[gindex].data[index].uiname);
},

closeSearchAction: function () {
  this.closeSearch();
},

demoItemAction: function (item, groupIndex, index, e) {
   scope.demoItemAction(item, groupIndex, index, e);
},

這裡粒度到哪個程度與具體業務相關，我這裡不做論述，於是我這裡繼承至index產生一個新的index類：index.ipad.js，這個是其基本實現：

define([getViewClass('index'), getViewTemplatePath('index'), 'UIGroupList'], function (View, viewhtml, UIGroupList) {
  return _.inherit(View, {

    onCreate: function ($super) {
      $super();
    },

    onPreShow: function ($super) {
      $super();
      this.turning();
    },

    onShow: function ($super) {
      $super();
      this.initGoupList();
    },

    onHide: function ($super) {
      $super();
    },

    events: {

    },

    searchItemAction: function (e) {
      var gindex = $(e.currentTarget).attr('data-group');
      var index = $(e.currentTarget).attr('data-index');
      this.forward(this.uidata[gindex].data[index].uiname);
    },

    demoItemAction: function (item, groupIndex, index, e) {
      scope.forward(item.uiname);
    }

  });
});

這個時候直接執行blade/ipad/debug.html#index.ipad的話，頁面與原來index保持一致：

第二步便是重寫其事件的關鍵位置了，比如要跳出的兩個事件點：

searchItemAction: function (e) {
  var gindex = $(e.currentTarget).attr('data-group');
  var index = $(e.currentTarget).attr('data-index');
  this.forward(this.uidata[gindex].data[index].uiname);
},

demoItemAction: function (item, groupIndex, index, e) {
  scope.forward(item.uiname);
}

//簡單改變

searchItemAction: function (e) {
  var gindex = $(e.currentTarget).attr('data-group');
  var index = $(e.currentTarget).attr('data-index');
  alert(this.uidata[gindex].data[index].uiname);
},

demoItemAction: function (item, groupIndex, index, e) {
   alert(item.uiname);
}

這個時候原版本的跳轉，變成了alert：

這個時候便需要進一步重寫了，比如這裡：我點選alert，事實上是想在右邊載入那個子view，所以框架全域性控制器APP需要新增loadSubView的介面了：

新增介面

loadSubView要實現例項化某一View非常簡單，但是該介面的工作並不輕鬆，換句話說會非常複雜，因為：

History與路由歸一化是mobile與pad版本整合的難點

mobile的view與ipadview是公用的，所以本身不存在主次關係，是業務給予了其主次，這裡需要一個管理關係

子View的例項化會涉及到複雜的History與路由管理，我們這裡先繞過去，下個階段再處理，因為完成pad版本，框架的MVC核心要經過一次重構

//這裡暫時不處理History邏輯，也不管子View的管理，先單純實現功能
//這樣會導致back的錯亂，View重複例項化，這裡先不予關注
loadSubView: function (viewId, wrapper, callback) {

  //子View要在哪裡顯示需要處理
  if (!wrapper[0]) return;

  this.loadView(viewId, function (View) {

    var curView = new View(this, viewId, wrapper);

    //這個是唯一需要改變的
    curView.turning = $.proxy(function () {
      curView.show();
      curView.$el.show();
    }, this);
    curView.onPreShow();
    callback && callback(curView);

  });

},

在樣式上再做一點調整就變成這個樣子了：

這裡History管理還是亂的，但是整個這個方案是可行的，所以我們前哨戰是成功的，方案可行的話便需要詳細的設計了

結語

今天，我們對ipad與mobile統一使用一套view程式碼做了研究，有以下收穫與問題：

① 繼承可實現ipad與mobile程式碼複用，並且不會彼此汙染，至少不會汙染mobile程式

② pad版本中History與路由管理需要重構

③ MVC需要重構，特別是View一塊，甚至需要完全重新寫

④ 樣式方面還需要處理優化

總而言之，今天的收穫還是有的，剩下的問題，需要在核心框架上動大動作了，最後的目標是能夠出一套同用於ipad與mobile的框架。

原始碼：

https://github.com/yexiaochai/blade

demo在此：

http://yexiaochai.github.io/blade/ipad/debug.html#index.ipad