一個簡單的特效引起的大戰之移動開發中我爲何放棄jquery mobile

我本想安靜的作一個美男子，但是，老闆不漲工資，反而，一月不如一月。

我爲何放棄jquery mobile插件選擇本身寫特效？

在開發中你們都知道效率很重要，一個好的工具能夠在開發中大大提高效率，工做作的越多，相應的取得的報酬也就越多，相反就是我本身了。
最近一直在一件事情上，移動線上網站測試必須符合3星，將不合格的網站調優後保證3星，方便線上推廣，不免會碰見一些問題，大體爲題後期會寫一篇隨筆總結， 「移動開發中網站如何優化」。其中碰見的一個問題就是JS文件過大，CSS文件過大，以前項目一直使用的jquery mobile開發的前端模板，以致於批量開發的模板所有是基於jquery mobile，在這中間一直沒有過多的分析這之間會出現的問題，直到此次考覈。
jquery mobile是基於jquery，在應用jquery mobile前必須先引入jquery，爲了方便也就天然使用了對應的jquery mobile的樣式文件。可是在實際批量模板的時候並無寫更多的JS特效，也並無使用jquery mobile默認的樣式，相反還要寫一些樣式來取消原來的樣式。(其實，這之間有些是能夠避免的，不介意的狀況下仍是可使用JQM，只是咱們的小夥伴有固定的任務，開發的使用爲了效率，一天可能就要完成兩套模板，相應的時間也就投入在了CSS和模板標籤上了)。
本文原創博客地址：http://www.cnblogs.com/unofficial官網地址： www.pushself.com

原來咱們是這麼作的移動開發

JS：
① jquery-1.9.1.min.js
② jquery.mobile-1.3.1.min.js
③ banner.js
④ 一段JS
CSS：
① jquery.mobile-1.3.1.min.css
② style.css
本文原創博客地址：http://www.cnblogs.com/unofficial 官網地址： www.pushself.com

如今我是這麼作的

在JQM與zepto之間我仍是糾結了一下，畢竟以前已經有不少項目已是基於JQM，最後我仍是一致決定使用zepto來從新規範一下接下來的模板，也許我這只是一我的的想法，也許這只是一次作着玩的想法，畢竟這不是第一次也不是最後一次。說遠了，拉回來。
JS：
① require.js
② zepto.min.js
③ touch.min.js
④ baiyun.mobile.min.js
CSS：
① style.css
本文原創博客地址：http://www.cnblogs.com/unofficial 官網地址： www.pushself.com

前先後後對比分析

>>>對比一：頁面

圖一，原版，在這個版本中使用的是JQM，徹底沒有使用JQM的默認UI，相反使用了不少的獨立IMG，也就天然而然增長了不少次請求，按照如今的要求，頁面不能單一的設計成如今的banner，首頁欄目導航。這個將天然而然增長更多的請求。
 
圖二，現版，在這個版本中使用了zepto，只是爲了選擇器方面方便一些，更好的我以爲仍是使用原生的javascript，這就是作移動開發的好處，不用考慮蛋疼的IE低版本，對於基礎知識的要求也就要更牢靠一些，也許習慣了使用工具，有時都很難分清楚到底原生中有沒有這樣一個方法，隨着更新，也許如今正在使用就會被下一個取代，但是萬變仍是不離其中。還使用了一個老方法就是CSS Sprites，如今還有一些其它的方式，這裏暫時不贅述了。
>>>對比二：首次加載

圖三，原版

圖四，現版
>>>對比三：二次加載

圖五，原版

圖六，現版
對比二與對比三不能做爲絕對數據，可是從中咱們也能看出一些問題，因爲也是剛剛面對三星檢測這個棘手的問題才現學現賣，關於網站的優化方面還有不少知識須要學習，但願可以與正在作相關工做的小夥伴一塊兒交流交流。這裏先不說其它因素，要否則就有扯遠了，圖三中JQM 與 JQ文件是73.9K(原文件還要大一些，具體的能夠參見JQUERY官網)，耗時1S左右了，相反require 與 zepto 與 touch文件是17.6K，耗時52ms，數據應該能看出一些什麼吧？最後我仍是決定換掉JQM，使用如今的版本，插件也能夠直接使用JQM的插件，更喜歡本身造輪子，主要仍是但願在這過程當中自我學習提高，工資不能再降了啊，再降就只好去讓人打發點兒了，新聞說地鐵口乞人日入多少多少，你不必定就能夠，這中間涉及的問題太多，最簡單的就是你沒有這方面的工做經驗。 本文原創博客地址：http://www.cnblogs.com/unofficial 官網地址： www.pushself.com

baiyun.mobile.min.js 簡單特效之Banner

一個簡單的banner特效效果圖：

圖片質量不是很高，仍是用的是同一張圖片，能不能看？不能看，不能看也就先將就着看吧。就是一個簡單的幾張圖片輪播，這裏有幾點不同，看完代碼你們應該能夠發現其中的問題。
HTML代碼：

<div class="mbSlider">
    <ul>
        <li style="background: url(http://www.pushself.com/noImage.jpg) 50% 50% no-repeat;">
            <a href="http://www.pushself.com"></a>
        </li>
        <li style="background: url(http://www.pushself.com/noImage.jpg) 50% 50% no-repeat;">
            <a href="http://www.pushself.com"></a>
        </li>
        <li style="background: url(http://www.pushself.com/noImage.jpg) 50% 50% no-repeat;">
            <a href="http://www.pushself.com"></a>
        </li>
    </ul>
</div>

CSS代碼：

.mbSlider ul {
  position: relative;
  z-index: 0;
  height: 120px;
  overflow: hidden;
}
.mbSlider ul li {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  visibility: hidden;
}
.mbSlider ul li, .mbSlider ul a {
  display: block;
  width: 100%;
  height: 100%;
}
.mbSlider ul li:nth-child(1) {
  visibility: visible;
}

JS代碼：（代碼寫的不是很好，高手路過記得留下點兒高招哦）

(function(i) {
    var windowWidth = $(window).width(),
        windowHeight = $(window).height(),
        name = option.name,
        AutoMain = function() {
            this.mbSlider = function() {
                var mbSliderThis = this,
                    directionArr = ["left","right"];
                    liLength = $("." + name + " ul li").length,
                    duration = i.duration in directionArr?i.duration:"left",
                    initVal = i.initVal && i.initVal<liLength?parseInt(i.initVal):0,
                    mbSliderHeight = $("." + name + " ul").height(),
                    mbSliderHeight = mbSliderHeight > 120 && mbSliderHeight < windowHeight / 3?mbSliderHeight:120;
                $("." + name + " ul").height(mbSliderHeight);//banner不能過大
                if(liLength < 2) {
                    return;
                }else if(liLength == 2) {//便於切換流暢
                    $("." + name + " ul").append($("." + name + " ul").html());
                    liLength = $("." + name + " ul li").length;
                }
                var direction = i.direction,
                    t;
                mbSliderThis.run = function(direction){
                    Action.apply(this,{
                                0: direction,
                                1: initVal,
                                2: liLength,
                        "length" : 3
                    })
                    initVal = initVal == liLength - 1?0:++initVal;
                    t = setTimeout(function() {
                        mbSliderThis.run(direction);
                    },3000);
                }
                $("." + name + " ul li").css({
                    "-webkit-transition-duration":i.duration + "s"
                });
                mbSliderThis.run(direction);
                $("." + name + " ul li").swipeLeft(function() {
                    var direction = "right";
                    clearInterval(t);
                    mbSliderThis.run(direction);
                });
                $("." + name + " ul li").swipeRight(function() {
                    var direction = "left";
                    clearInterval(t);
                    mbSliderThis.run(direction);
                });
            };
        },
        Action = function(direction,initVal,liLength) {
            var liLength = liLength;
            if(direction == "right") {
                var currLiNum = initVal,
                    prevLiNum = currLiNum == 0?liLength - 1:currLiNum - 1,
                    nextLiNum = currLiNum == liLength - 1?0:currLiNum + 1;
                    directionVal = 1;
            }else {
                var currLiNum = initVal == 0?0:-initVal,
                    prevLiNum = currLiNum == 0?-liLength + 1:currLiNum + 1,
                    nextLiNum = currLiNum == -liLength + 1?0:currLiNum - 1;
                    directionVal = -1;
            }
            var prevLiWidth = -windowWidth * directionVal,
                currLiWidth = 0,
                nextLiWidth =  windowWidth * directionVal;
            $("." + name + " ul li").eq(prevLiNum).css({
                "-webkit-transform":"translate3d(" + prevLiWidth + "px, 0, 0)",
                "visibility":"hidden"
            });
            $("." + name + " ul li").eq(currLiNum).css({
                "visibility":"visible",
                "-webkit-transform":"translate3d(" + currLiWidth + "px, 0, 0)"
            });
            $("." + name + " ul li").eq(nextLiNum).css({
                "-webkit-transform":"translate3d(" + nextLiWidth + "px, 0, 0)",
                "visibility":"hidden"
            });
        },
        autoMain = new AutoMain().mbSlider();
})(option)
var option = {"name":"mbSlider","direction":"right","duration":".8","initVal":0};

這中間其實有碰見一個問題，由於存在在PC中向客戶大體展現一下，使用background只是爲了部分瀏覽器中避免拖動時圖片被拉出，卻發現了一個問題，背景代碼：background: url(http://www.pushself.com/noImage.jpg) 50% 50% / 100% 100% no-repeat;在chrome下能夠直接解析使用，移動端的時候就被分解了，background-size: 100%;並不是是background: 100% 100%;就會第一次進入頁面時，或者刷新後出現一個不但願有的特效。

此次分享到此結束，但願可以與你們多多交流。
本文原創博客地址：http://www.cnblogs.com/unofficial 官網地址： www.pushself.com