簡(jiǎn)單特效引發(fā)的大戰(zhàn):移動(dòng)開發(fā)中放棄jquery mobile
我本想安靜的做一個(gè)美男子，可是，老板不漲工資，反而，一月不如一月。
我為什么放棄jquery mobile插件選擇自己寫特效？
在開發(fā)中大家都知道效率很重要，一個(gè)好的工具可以在開發(fā)中大大提升效率，工作做的越多，相應(yīng)的取得的報(bào)酬也就越多，相反就是我自己了。
最近一直在一件事情上，移動(dòng)線上網(wǎng)站測(cè)試必須符合3星，將不合格的網(wǎng)站調(diào)優(yōu)后保證3星，方便線上推廣，難免會(huì)遇見一些問題，大致為題后期會(huì)寫一篇隨筆總結(jié)，“移動(dòng)開發(fā)中網(wǎng)站如何優(yōu)化”。其中遇見的一個(gè)問題就是JS文件過大，CSS文件過大，之前項(xiàng)目一直使用的jquery mobile開發(fā)的前端模板，以至于批量開發(fā)的模板全部是基于jquery mobile，在這中間一直沒有過多的分析這之間會(huì)出現(xiàn)的問題，直到這次考核。
jquery mobile是基于jquery，在應(yīng)用jquery mobile前必須先引入jquery，為了方便也就自然使用了對(duì)應(yīng)的jquery mobile的樣式文件。但是在實(shí)際批量模板的時(shí)候并沒有寫更多的JS特效，也并沒有使用jquery mobile默認(rèn)的樣式，相反還要寫一些樣式來取消原來的樣式。(其實(shí)，這之間有些是可以避免的，不介意的情況下還是可以使用JQM，只是我們的小伙伴有固定的任務(wù)，開發(fā)的使用為了效率，一天可能就要完成兩套模板，相應(yīng)的時(shí)間也就投入在了CSS和模板標(biāo)簽上了)。
原來我們是這么做的移動(dòng)開發(fā)
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
現(xiàn)在我是這么做的
在JQM與zepto之間我還是糾結(jié)了一下，畢竟之前已經(jīng)有很多項(xiàng)目已經(jīng)是基于JQM，最后我還是一致決定使用zepto來重新規(guī)范一下接下來的模板，也許我這只是一個(gè)人的想法，也許這只是一次做著玩的想法，畢竟這不是第一次也不是最后一次。說遠(yuǎn)了，拉回來。
JS：
① require.js
② zepto.min.js
③ touch.min.js
④ baiyun.mobile.min.js
CSS：
① style.css
前前后后對(duì)比分析
>>>對(duì)比一：頁面
圖一，原版，在這個(gè)版本中使用的是JQM，完全沒有使用JQM的默認(rèn)UI，相反使用了很多的獨(dú)立IMG，也就自然而然增加了很多次請(qǐng)求，按照現(xiàn)在的要求，頁面不能單一的設(shè)計(jì)成現(xiàn)在的banner，首頁欄目導(dǎo)航。這個(gè)將自然而然增加更多的請(qǐng)求。
圖二，現(xiàn)版，在這個(gè)版本中使用了zepto，只是為了選擇器方面方便一些，更好的我覺得還是使用原生的javascript，這就是做移動(dòng)開發(fā)的好處，不用考慮蛋疼的IE低版本，對(duì)于基礎(chǔ)知識(shí)的要求也就要更牢靠一些，也許習(xí)慣了使用工具，有時(shí)都很難分清楚到底原生中有沒有這樣一個(gè)方法，隨著更新，也許現(xiàn)在正在使用就會(huì)被下一個(gè)取代，可是萬變還是不離其中。還使用了一個(gè)老方法就是CSS Sprites，現(xiàn)在還有一些其它的方式，這里暫時(shí)不贅述了。
>>>對(duì)比二：首次加載
圖三，原版
圖四，現(xiàn)版
>>>對(duì)比三：二次加載
圖五，原版
圖六，現(xiàn)版
對(duì)比二與對(duì)比三不能作為絕對(duì)數(shù)據(jù)，但是從中我們也能看出一些問題，由于也是剛剛面對(duì)三星檢測(cè)這個(gè)棘手的問題才現(xiàn)學(xué)現(xiàn)賣，關(guān)于網(wǎng)站的優(yōu)化方面還有很多知識(shí)需要學(xué)習(xí)，希望能夠與正在做相關(guān)工作的小伙伴一起交流交流。這里先不說其它因素，要不然就有扯遠(yuǎn)了，圖三中JQM 與 JQ文件是73.9K(原文件還要大一些，具體的可以參見JQUERY官網(wǎng))，耗時(shí)1S左右了，相反require 與 zepto 與 touch文件是17.6K，耗時(shí)52ms，數(shù)據(jù)應(yīng)該能看出一些什么吧？最后我還是決定換掉JQM，使用現(xiàn)在的版本，插件也可以直接使用JQM的插件，更喜歡自己造輪子，主要還是希望在這過程中自我學(xué)習(xí)提升，工資不能再降了啊，再降就只好去讓人打發(fā)點(diǎn)兒了，新聞?wù)f地鐵口乞人日入多少多少，你不一定就可以，這中間涉及的問題太多，最簡(jiǎn)單的就是你沒有這方面的工作經(jīng)驗(yàn)。
#p#
baiyun.mobile.min.js 簡(jiǎn)單特效之Banner
一個(gè)簡(jiǎn)單的banner特效效果圖：
圖片質(zhì)量不是很高，還是用的是同一張圖片，能不能看？不能看，不能看也就先將就著看吧。就是一個(gè)簡(jiǎn)單的幾張圖片輪播，這里有幾點(diǎn)不一樣，看完代碼大家應(yīng)該可以發(fā)現(xiàn)其中的問題。
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代碼：（代碼寫的不是很好，高手路過記得留下點(diǎn)兒高招哦）
- (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};
這中間其實(shí)有遇見一個(gè)問題，因?yàn)榇嬖谠赑C中向客戶大致展示一下，使用background只是為了部分瀏覽器中避免拖動(dòng)時(shí)圖片被拉出，卻發(fā)現(xiàn)了一個(gè)問題，背景代碼：background: url(http://www.pushself.com/noImage.jpg) 50% 50% / 100% 100% no-repeat;在chrome下可以直接解析使用，移動(dòng)端的時(shí)候就被分解了，background-size: 100%;并非是background: 100% 100%;就會(huì)第一次進(jìn)入頁面時(shí)，或者刷新后出現(xiàn)一個(gè)不希望有的特效。
這次分享到此結(jié)束，希望能夠與大家多多交流。
