1，拆站分析----微店手機版

  模仿就是學習能令人進步，前端技術相對於其餘高級語言來講開源就是優點。

  此次咱們來分析下微店的手機站是怎麼作的

  地址：http://wd.koudai.com/plaza/plaza.html

  分析一個站主要從如下方面來進行

  1,html和css結構寫法

  2，前端js框架和模式

  3，和後端的交互方式

 

       html和css

  　　首先打開微店網站，整站看上去是比較簡約的，顏色單調，html結構不復雜。 整站內容由上面的頭部+中間的搜索部分+下內容部分 三大部組成，頁面是按照百分百來自適應的，並無使用CSS3 Media Queries 來控制自適應。html代碼也進行了壓縮，源代碼須要格式化才能看清結構。

         手機站的佈局和pc端有個很明顯的區別，pc站的主內容區基本上一行一行直接佈局在body下面，而手機站雖然也是一行一行的可是整個內容會用一個盒子包起來

        

 

　　　　html 和 css這一塊沒有太多的特別的，相對來講都不是太難。其中有幾個地方是如今手機端比較流行的寫法，就是用css3來繪製圖標，不用圖片。在微店首頁裏面的返回和商品的圖標都是用css3繪製的， 用一個塊級元素加上一個邊框而後用css3的 transfrom的rotate設置旋轉就能夠了

 　　　　

width: 6px;
height: 6px;
display: block;
border-top: #828282 solid 1px;
border-right: #828282 solid 1px;
content: '';
position: absolute;
top: 16px;
left: 65px;
z-index: 0;
-webkit-transform: rotate(135deg);
transform: rotate(135deg);

     咱們再來看看熱門分類做者是怎麼實現的，先看圖

　　

     做者是以左右結構來實現的，左邊的ico是一個絕對定位，絕對定位是不佔空間的，因此左邊的ico空間是用大紅色盒子的左padding來填充的，而後剩下的紫色列表就是個ul，

　　而後須要作到自適應屏幕的話，那確定給li的寬度設置個百分比，這裏做者是設置的25%，由於每行放四個。

　　JS

    相對於pc端來說，移動端是能少用js就少用，css3能解決大部分的動畫效果，這些就沒有必要使用js去解決了，移動端的處理能力和pc端可謂是「天壤之別」。js稍微寫得很差就容易形成頁面卡住。

    微店的js應該是仿照jquery的語法本身從新寫了個庫，去掉了一些沒有用的，寫在庫裏面的基本上就是都用到了的，這樣體積要比jquery小不少，我看了下，在不壓縮的狀況下也才25K。估計壓縮以後就剩下幾k的樣子。

　

    var $ = function (a) {
        return a ? "object" == typeof a ? new B(a) : "string" == typeof a ? new B(0 === a.indexOf("#") ? document.querySelector(a) : document.querySelectorAll(a)) : void 0 : null
    }

　　//全部方法都封裝在方法B的屬性裏面， 使用美圓符號選擇器返回的都是B的實例
    var B = function (a) {
        this.get = function (i) {
            return i?a[i]:a;
        },
        this.find = function (b) {           
            return new B(b ? a.querySelector(b) : a.childer);
        }
　　　　　

　     //這位js做者的寫法都比較精闢，基礎不在暫時的還真有點看不懂，像下面這個val方法，當出入的b沒有值的時候很簡單，就是獲取value屬性值，當要設置value的時候用(a.value = b, this)，這樣設置完以後返回本身，繼續能夠鏈式的操做

　　　　 this.val = function(b) {
        　　return b || "string" == typeof b ? (a.value = b, this) : a.value

 

　
    },
　　　　　..........
    }

    var t = $("#cid1");
　　

 

　　數據交互

　　微店手機版和其餘大多數的收集站相似，都是採用的jsonp來獲取數據的，post數據的時候也應該是採用模擬表單來提交，這個我沒有具體看了，由於js庫裏面有這樣一段代碼

  總結

  整個站無論是從html的佈局css的寫法和js的實現上都沒有太多的新技術和難點，這種架構做者的第一目的追求的就是塊。

  頁面的css js 和html代碼都被壓縮減少體積，也沒有用到任何流行的框架和js庫因此基本上沒有多餘的代碼。

  特別是js，js庫方法豐富可是做者的精闢寫法使體積降到了最小。

  我特地同2g網絡訪問多個手機商城作了比較，微店的速度確實稍占上風。

 

1. 
   max-width: 640px;