简单特效引发的大战:移动开发中放弃jquerymobile

我本想安静的做一个美男子，可是，老板不涨工资，反而，一月不如一月。

我为什么放弃jquery mobile插件选择自己写特效？

在开发中大家都知道效率很重要，一个好的工具可以在开发中大大提升效率，工作做的越多，相应的取得的报酬也就越多，相反就是我自己了。

最近一直在一件事情上，移动线上网站测试必须符合3星，将不合格的网站调优后保证3星，方便线上推广，难免会遇见一些问题，大致为题后期会写一篇随笔总结，“移动开发中网站如何优化”。其中遇见的一个问题就是JS文件过大，CSS文件过大，之前项目一直使用的jquery mobile开发的前端模板，以至于批量开发的模板全部是基于jquery mobile，在这中间一直没有过多的分析这之间会出现的问题，直到这次考核。

jquery mobile是基于jquery，在应用jquery mobile前必须先引入jquery，为了方便也就自然使用了对应的jquery mobile的样式文件。但是在实际批量模板的时候并没有写更多的JS特效，也并没有使用jquery mobile默认的样式，相反还要写一些样式来取消原来的样式。(其实，这之间有些是可以避免的，不介意的情况下还是可以使用JQM，只是我们的小伙伴有固定的任务，开发的使用为了效率，一天可能就要完成两套模板，相应的时间也就投入在了CSS和模板标签上了)。

原来我们是这么做的移动开发

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

现在我是这么做的

在JQM与zepto之间我还是纠结了一下，毕竟之前已经有很多项目已经是基于JQM，最后我还是一致决定使用zepto来重新规范一下接下来的模板，也许我这只是一个人的想法，也许这只是一次做着玩的想法，毕竟这不是第一次也不是最后一次。说远了，拉回来。

JS：

① require.js

② zepto.min.js

③ touch.min.js

④ baiyun.mobile.min.js

CSS：

① style.css

前前后后对比分析

>>>对比一：页面

图一，原版，在这个版本中使用的是JQM，完全没有使用JQM的默认UI，相反使用了很多的独立IMG，也就自然而然增加了很多次请求，按照现在的要求，页面不能单一的设计成现在的banner，首页栏目导航。这个将自然而然增加更多的请求。

图二，现版，在这个版本中使用了zepto，只是为了选择器方面方便一些，更好的我觉得还是使用原生的javascript，这就是做移动开发的好处，不用考虑蛋疼的IE低版本，对于基础知识的要求也就要更牢靠一些，也许习惯了使用工具，有时都很难分清楚到底原生中有没有这样一个方法，随着更新，也许现在正在使用就会被下一个取代，可是万变还是不离其中。还使用了一个老方法就是CSS Sprites，现在还有一些其它的方式，这里暂时不赘述了。

>>>对比二：首次加载

图三，原版

图四，现版

>>>对比三：二次加载

图五，原版

图六，现版

对比二与对比三不能作为绝对数据，但是从中我们也能看出一些问题，由于也是刚刚面对三星检测这个棘手的问题才现学现卖，关于网站的优化方面还有很多知识需要学习，希望能够与正在做相关工作的小伙伴一起交流交流。这里先不说其它因素，要不然就有扯远了，图三中JQM 与 JQ文件是73.9K(原文件还要大一些，具体的可以参见JQUERY官网)，耗时1S左右了，相反require 与 zepto 与 touch文件是17.6K，耗时52ms，数据应该能看出一些什么吧？最后我还是决定换掉JQM，使用现在的版本，插件也可以直接使用JQM的插件，更喜欢自己造轮子，主要还是希望在这过程中自我学习提升，工资不能再降了啊，再降就只好去让人打发点儿了，新闻说地铁口乞人日入多少多少，你不一定就可以，这中间涉及的问题太多，最简单的就是你没有这方面的工作经验。

#p#

baiyun.mobile.min.js 简单特效之Banner

一个简单的banner特效效果图：

图片质量不是很高，还是用的是同一张图片，能不能看？不能看，不能看也就先将就着看吧。就是一个简单的几张图片轮播，这里有几点不一样，看完代码大家应该可以发现其中的问题。

HTML代码：

 
 
    
  
  
    2. 
  
  
  2.     
      
  
  
    •         
      • 
  
  
    •             
      • 
  
  
    •         
      • 
  
  
    •         
      • 
  
  
    •             
      • 
  
  
    •         
      • 
  
  
    •         
      • 
  
  
    •             
      • 
  
  
    •         
      • 
  
  
    •     
    3.

CSS代码：

 
 
    
  
  
  1. .mbSlider ul { 
    2. 
  
  
  2.   position: relative; 
    3. 
  
  
  3.   z-index: 0; 
    4. 
  
  
  4.   height: 120px; 
    5. 
  
  
  5.   overflow: hidden; 
    6. 
  
  
  6. } 
    7. 
  
  
  7. .mbSlider ul li { 
    8. 
  
  
  8.   position: absolute; 
    9. 
  
  
  9.   top: 0; 
    10. 
  
  
  10.   left: 0; 
    11. 
  
  
  11.   z-index: 0; 
    12. 
  
  
  12.   visibility: hidden; 
    13. 
  
  
  13. } 
    14. 
  
  
  14. .mbSlider ul li, .mbSlider ul a { 
    15. 
  
  
  15.   display: block; 
    16. 
  
  
  16.   width: 100%; 
    17. 
  
  
  17.   height: 100%; 
    18. 
  
  
  18. } 
    19. 
  
  
  19. .mbSlider ul li:nth-child(1) { 
    20. 
  
  
  20.   visibility: visible; 
    21. 
  
  
  21. }
    22.

JS代码：（代码写的不是很好，高手路过记得留下点儿高招哦）

 
 
    
  
  
  1. (function(i) { 
    2. 
  
  
  2.     var windowWidth = $(window).width(), 
    3. 
  
  
  3.         windowHeight = $(window).height(), 
    4. 
  
  
  4.         name = option.name, 
    5. 
  
  
  5.         AutoMain = function() { 
    6. 
  
  
  6.             this.mbSlider = function() { 
    7. 
  
  
  7.                 var mbSliderThis = this, 
    8. 
  
  
  8.                     directionArr = ["left","right"]; 
    9. 
  
  
  9.                     liLength = $("." + name + " ul li").length, 
    10. 
  
  
  10.                     duration = i.duration in directionArr?i.duration:"left", 
    11. 
  
  
  11.                     initVal = i.initVal && i.initVal
  
  
  12.                     mbSliderHeight = $("." + name + " ul").height(), 
    13. 
  
  
  13.                     mbSliderHeight = mbSliderHeight > 120 && mbSliderHeight < windowHeight / 3?mbSliderHeight:120; 
    14. 
  
  
  14.                 $("." + name + " ul").height(mbSliderHeight);//banner不能过大 
    15. 
  
  
  15.                 if(liLength < 2) { 
    16. 
  
  
  16.                     return; 
    17. 
  
  
  17.                 }else if(liLength == 2) {//便于切换流畅 
    18. 
  
  
  18.                     $("." + name + " ul").append($("." + name + " ul").html()); 
    19. 
  
  
  19.                     liLength = $("." + name + " ul li").length; 
    20. 
  
  
  20.                 } 
    21. 
  
  
  21.                 var direction = i.direction, 
    22. 
  
  
  22.                     t; 
    23. 
  
  
  23.                 mbSliderThis.run = function(direction){ 
    24. 
  
  
  24.                     Action.apply(this,{ 
    25. 
  
  
  25.                                 0: direction, 
    26. 
  
  
  26.                                 1: initVal, 
    27. 
  
  
  27.                                 2: liLength, 
    28. 
  
  
  28.                         "length" : 3 
    29. 
  
  
  29.                     }) 
    30. 
  
  
  30.                     initVal = initVal == liLength - 1?0:++initVal; 
    31. 
  
  
  31.                     t = setTimeout(function() { 
    32. 
  
  
  32.                         mbSliderThis.run(direction); 
    33. 
  
  
  33.                     },3000); 
    34. 
  
  
  34.                 } 
    35. 
  
  
  35.                 $("." + name + " ul li").css({ 
    36. 
  
  
  36.                     "-webkit-transition-duration":i.duration + "s"
    37. 
  
  
  37.                 }); 
    38. 
  
  
  38.                 mbSliderThis.run(direction); 
    39. 
  
  
  39.                 $("." + name + " ul li").swipeLeft(function() { 
    40. 
  
  
  40.                     var direction = "right"; 
    41. 
  
  
  41.                     clearInterval(t); 
    42. 
  
  
  42.                     mbSliderThis.run(direction); 
    43. 
  
  
  43.                 }); 
    44. 
  
  
  44.                 $("." + name + " ul li").swipeRight(function() { 
    45. 
  
  
  45.                     var direction = "left"; 
    46. 
  
  
  46.                     clearInterval(t); 
    47. 
  
  
  47.                     mbSliderThis.run(direction); 
    48. 
  
  
  48.                 }); 
    49. 
  
  
  49.             }; 
    50. 
  
  
  50.         }, 
    51. 
  
  
  51.         Action = function(direction,initVal,liLength) { 
    52. 
  
  
  52.             var liLength = liLength; 
    53. 
  
  
  53.             if(direction == "right") { 
    54. 
  
  
  54.                 var currLiNum = initVal, 
    55. 
  
  
  55.                     prevLiNum = currLiNum == 0?liLength - 1:currLiNum - 1, 
    56. 
  
  
  56.                     nextLiNum = currLiNum == liLength - 1?0:currLiNum + 1; 
    57. 
  
  
  57.                     directionVal = 1; 
    58. 
  
  
  58.             }else { 
    59. 
  
  
  59.                 var currLiNum = initVal == 0?0:-initVal, 
    60. 
  
  
  60.                     prevLiNum = currLiNum == 0?-liLength + 1:currLiNum + 1, 
    61. 
  
  
  61.                     nextLiNum = currLiNum == -liLength + 1?0:currLiNum - 1; 
    62. 
  
  
  62.                     directionVal = -1; 
    63. 
  
  
  63.             } 
    64. 
  
  
  64.             var prevLiWidth = -windowWidth * directionVal, 
    65. 
  
  
  65.                 currLiWidth = 0, 
    66. 
  
  
  66.                 nextLiWidth =  windowWidth * directionVal; 
    67. 
  
  
  67.             $("." + name + " ul li").eq(prevLiNum).css({ 
    68. 
  
  
  68.                 "-webkit-transform":"translate3d(" + prevLiWidth + "px, 0, 0)", 
    69. 
  
  
  69.                 "visibility":"hidden"
    70. 
  
  
  70.             }); 
    71. 
  
  
  71.             $("." + name + " ul li").eq(currLiNum).css({ 
    72. 
  
  
  72.                 "visibility":"visible", 
    73. 
  
  
  73.                 "-webkit-transform":"translate3d(" + currLiWidth + "px, 0, 0)"
    74. 
  
  
  74.             }); 
    75. 
  
  
  75.             $("." + name + " ul li").eq(nextLiNum).css({ 
    76. 
  
  
  76.                 "-webkit-transform":"translate3d(" + nextLiWidth + "px, 0, 0)", 
    77. 
  
  
  77.                 "visibility":"hidden"
    78. 
  
  
  78.             }); 
    79. 
  
  
  79.         }, 
    80. 
  
  
  80.         autoMain = new AutoMain().mbSlider(); 
    81. 
  
  
  81. })(option) 
    82. 
  
  
  82. var option = {"name":"mbSlider","direction":"right","duration":".8","initVal":0};
    83.

这中间其实有遇见一个问题，因为存在在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/p/3975924.html

网页名称：简单特效引发的大战:移动开发中放弃jquerymobile
URL链接：http://www.csdahua.cn/qtweb/news44/333094.html

网站建设、网络推广公司-快上网，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 快上网

成都快上网为您推荐相关内容

小程序开发知识

同城分类信息

四川德阳主机托管　　 　成都网站制作　　 　ios开发　　 　水泥基自流平　　 　四川网站建设　　 　西云服务器托管　　 　虚拟主机　　 　重庆托管服务器　　 　四川成都网站建设　　 　网站建设开发　　 　amruizhi.cn　　 　网络营销公司　　 　网站建设　　 　成都网站优化　　 　网站排名　　 　教育网站设计方案　　 　cdsyaren.com　　 　成都办公窗帘　　 　品牌网站建设　　 　广告品牌策划设计