我本想安靜的做一個美男子，可是，老闆不漲工資，反而，一月不如一月。
我為什麼放棄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來重新規範一下接下來的模闆，也許我這隻是一個人的想法，也許這隻是一次做着玩的想法，畢竟這不是第一次也不是最後一次。說遠了，拉回來。
① require.js
② zepto.min.js
③ touch.min.js
④ baiyun.mobile.min.js
① style.css
前前後後對比分析
>>>對比一：頁面
圖二，現版，在這個版本中使用了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