一个简单的特效引发的大战之移动开发中我为什么放弃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

时间: 2024-10-05 23:09:25

一个简单的特效引发的大战之移动开发中我为什么放弃jquery mobile的相关文章

C# 一个简单的秒表引发的窗体卡死问题

一个秒表程序也是我的一个心病,因为一直想写这样的一个东西,但是总往GUI那边想,所以就比较怵,可能是上学的时候学MFC搞出的后遗症吧,不过当我今天想好用Win Form(话说还是第一次写win form)写这么一个东西的时候,居然so easy. 所以说,做不了不可怕,怕的是你不去做,因为你不去做,你就永远不知道你能不能做它.事实证明,大部分你犹豫能不能做的事情,实际上你都能搞定. 虽然成功实现了一个秒表的简单功能,即开始计时和停止.但是却引发了一个关于win form和C#线程的问题. 下面一

使用Multiplayer Networking做一个简单的多人游戏例子-2/3(Unity3D开发之二十六)

猴子原创,欢迎转载.转载请注明: 转载自Cocos2Der-CSDN,谢谢! 原文地址: http://blog.csdn.net/cocos2der/article/details/51007512 使用Multiplayer Networking做一个简单的多人游戏例子-1/3 使用Multiplayer Networking做一个简单的多人游戏例子-2/3 使用Multiplayer Networking做一个简单的多人游戏例子-3/3 7. 在网络中控制Player移动 上一篇中,玩家操

一个简单算法题引发的思考&lt;DNA sorting&gt;(about cin/template/new etc)

首先是昨天在北京大学oj网上看到一个简单的算法题目,虽然简单,但是如何完成一段高效.简洁.让人容易看懂的代码对于我这个基础不好,刚刚进入计算机行业的小白来说还是有意义的.而且在写代码的过程中,会发现自己平时学习中不会发现的问题,所以想写下这个博客,主要是便于自己对算法的理解. 来,上题. DNA Sorting Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 91599   Accepted: 36781 Descript

大话JS面向对象之扩展篇 面向对象与面向过程之间的博弈论(OO Vs 过程)------(一个简单的实例引发的沉思)

一,总体概要 1,笔者浅谈 我是从学习Java编程开始接触OOP(面向对象编程),刚开始使用Java编写程序的时候感觉很别扭(面向对象式编程因为引入了类.对象.实例等概念,非常贴合人类对于世间万物的认知方式和思考方式.对于复杂的事物,人类是如何去认识.归纳.总结的?面向对象式编程就是在努力回答这个问题,而答案的核心就是两个字:抽象.所以面向对象式编程特别适合处理业务逻辑,因此被广泛应用于目前的软件开发当中.因为我们开发软件就是为了解决问题,面向对象式编程符合人类对于“问题”的认知方式),因为我早

用MFC完成一个简单的猜数字游戏: 输入的四位数中,位置和数字都正确为A,数字相同而位置不同的为B。

最近学习了MFC一些比较基础的知识,所以打算通过做一个简单的数字游戏来理解MFC的流程并进一步熟悉其操作. 在这里,我做了一个猜数字的小游戏.第一步当然是设计主界面,先给大家展示一下游戏界面: 主界面: 从这个主界面可以看到,它包含标题,菜单栏,工具栏. 标题是给人一个认识,这是什么游戏,标题设置为:“猜数游戏”: 而菜单栏和工具栏才是游戏的核心,它要保证能够完成游戏的基本功能. 菜单栏和工具栏是对应的,包含了”start“,"help","restart"这三个菜

0.28+0.34=? 一个简单小数加法引发的思考

0.28+0.34=? 我相信这个简单的加法,谁都会,肯定等于0.62嘛. 这是两个特别简单的加法,那如果我在其整数位置上加上其他的数字,或者多加几个和项,你是否还能快速算过来? 我想这时候,我们又得借助计算器了!而这,有时可能就是电脑!尤其是如果咱们借助简单程序语言来算的时候,嘿嘿,可能就不是那么回事了~ 不信你看,用javascript算的结果: 用python算的结果: 当然了,我尝试着用其他语言来试一下,结果好像并不都是这样. 其中,java只会在类型转换的时候出现奇怪的值:(当然这在我

一个简单的特效

<html> <head> </head> <body> <p id="demo"></p> <script> function myFunction() { x=document.getElementById("demo"); x.innerHTML="Hello JavaScript!"; } </script> <button type=&

一个简单的基于Tornado二手房信息统计项目的开发实现

Purpose 最近因为要买房子,扫过了各种信息,貌似lianjia上的数据还是靠点谱的(最起码房源图片没有太大的出入),心血来潮想着做几个图表来显示下房屋的数据信息,顺便练练手. 需求分析 1从lianjia的网站上获取关键的房屋信息数据,然后按照自己的需求通过图表显示出来. 2每天从lianjia的网站上获取一次数据 3以上海地区为主(本人在上海) 4最终生成图表有:房屋交易总量,二手房均价,在售房源,近90天成交量,昨日带看次数 分析获取网站数据 1 数据源 数据的获取主要是从两个地方:

使用Multiplayer Networking做一个简单的多人游戏例子-1/3(Unity3D开发之二十五)

猴子原创,欢迎转载.转载请注明: 转载自Cocos2Der-CSDN,谢谢! 原文地址: http://blog.csdn.net/cocos2der/article/details/51006463 本文主要讲述了如何使用Multiplayer Networking开发多人游戏,文中实例.代码来源于Unity官方教程. 原文:INTRODUCTION TO A SIMPLE MULTIPLAYER EXAMPLE Networking Overview The High Level API N