小tips: PC端传统网页试试使用Zepto.js进行开发

这篇文章发布于 2016年07月20日,星期三,20:25,归类于 jQuery相关。 阅读 52035 次, 今日 2 次 36 条评论

 

一、Zepto.js很小我很喜欢

Zepto.js设计之初专为移动端,不对一些古董浏览器支持。所以,尺寸很小,压缩后20K多一点,但是,jQuery压缩后,3.*版本要80多K,1.*版本则要90多K,4倍差距。

由于每个页面都会使用,网站如果访问量大的话,省的流量费还是有那么一点点的。

从个人角度讲,使用最精简的资源,心里头开心。所以,Zepto.js很小我很喜欢!

二、绝大部分浏览器都是现代浏览器

随着浏览器的进步,前端技术也在发展。目前,从用户访问情况来看,绝大多数用户使用的是现代浏览器,也就是IE10+,Chrome,Safari,FireFox之类的浏览器。而这些浏览器,对Zepto.js是天然支持的。

由于Zepto.js和jQuery.js的API(凡事支持的)都是一样的,因此,理论上,现代浏览器使用Zepto.js,其他比较挫的浏览器继续使用jQuery.js是可行的。

由于现代浏览器的用户超过一大半,因此,使用Zepto.js的价值还是有的。

三、PC项目如何使用Zepto.js开发

下面要做的其实很简单了,就是先加载不同的JS库,然后再初始化我们的具体业务JavaScript代码。

我们需要一个简单的加载器,和浏览器辨识。

加载器代码如下(参考自《高性能网站建设进阶指南》一书):

高性能网站建设进阶指南

var fnJsLoad = function(url, callback) {
    callback = callback || function() {};

    var eleScript = document.createElement('script');
    
    eleScript.onload = function() {
        if (!eleScript.isInited) {
            eleScript.isInited = true;
            callback();
        }
    };
    // 一般而言,低版本IE走这个
    eleScript.onreadystatechange = function() {
        if (!eleScript.isInited && /^loaded|complete$/.test(eleScript.readyState)) {
            eleScript.isInited = true;
            callback();
        }
    };

    eleScript.src = url;

    doc.getElementsByTagName('head')[0].appendChild(eleScript);
};

然后,我们就可以加载Zepto或者jQuery了:

// IE10+加载zepto.js
// IE7-IE9加载jQuery
var URLLIB = '/js/zepto.min.js';

if (!history.pushState) {
    URLLIB = '/js/jquery.min.js';
}

fnJsLoad(URLLIB, function() {
    // 业务脚本初始化
    init();
});

然后,具体的业务代码你该怎么写,还是怎么写,只要不要使用一些过深的功能,基本上都是没问题的。

五、案例与结语

当然,本文所说的策略是经过真实项目验证过的,有兴趣可以访问“阅文集团官网”,就是采用这种策略开发的,兼容IE7+浏览器。

比方说Chrome浏览器下,我们查看加载资源的时候,就会发现使用的是Zepto.js,如下截图:
Zepto.js加载示意

奇怪,怎么是304, 明天找同事问问。(补充于翌日:问过了:原来打开控制台F5刷新确实是会304,普通访问则200 from cache)

IE9浏览器就是jQuery同学:
IE9使用jQuery示意

结语
如果大家手上已经有基于jQuery的项目,想换成Zepto.js,我的建议呢,如果jQuery根植较深,就不要动了,毕竟不可能完全无缝对接的。如果是新的些项目,啧啧,就可以使用从本文get到的小技能啦!

对了,兼容Zepto.js还有个好处,可以无缝对接移动端上,对吧,移动端对流量要求可要严多了哟!

好了,小文一篇,感谢阅读,欢迎交流。

(本篇完)

分享到:


发表评论(目前36 条评论)

  1. 阿虎说道:

    写load函数来加载zepto的意义是什么?同步加载吗?但是直接把zepto 放在业务js上面不就行了吗?

    • 某某某说道:

      如果浏览器跑不起来zepto,则使用jQuery。有些时候可以利用不靠谱的CDN.,然后呢,,,呢,,,,

  2. chris573说道:

    zepto据说bug多,性能差。 功能比jq少很多,所以bootstrap也放弃了这库,是否有影响? 同事实战遇到bug,就是zepto导致的,貌似和弹出层有关

  3. 不错,很好的使用技巧!!!

  4. Jay说道:

    单纯从流量考虑的话,为什么不考虑CDN方案。 话说是从什么时候开始,人们就一直认为web就应该是非常快速加载的,万一我的webapp确实很庞大呢?

  5. 石艺张说道:

    的确是的,zepto比起JQ更加轻便,对手机端来说减少加载,是极好的!

  6. 小叶子说道:

    不注册能评论吗

  7. angus说道:

    这样的话,没太大的意义啊,那些jq中zepto不支持的API就不可以直接使用了啊

  8. 小明说道:

    真不错!!!

  9. hymin说道:

    感觉移动网站开发可以直接用zepto~最近在做微信端的开发, 其实个人觉得css3动画+document.querySelector+element.style已经可以代替大部分以前用jQuery完成的任务了……就差ajax了

  10. 小杏仁说道:

    jquery最厉害的地方在于抽象了一个、一组DOM的链式操作,与其用Zepto还不如直接用h5自带的就足够了,如果对DOM的操作不那么频繁的话

  11. 乐网说道:

    果然是前端大神啊,不亏是华科出去的!

  12. nick513说道:

    擦。。阅文集团。。强行一波软广啊

  13. 京2000说道:

    张老师好:
    近日有一个问题比较困惑,还请指教
    我最近在做微信相关开发,发现微信的上传图片是一个异步的任务。我现在想一次性上传多个图片,只能写成嵌套式的代码,有没有什么比较好的,能写成for循环的解决办法?

    • 请低下头说道:

      微信的sdk 是允许上传多张图片的啊。 只不过跟手机型号有关。有的手机型号不能上传多张

  14. 还是小菜鸟说道:

    新人求教,关于移动端按钮中的文本总是偏上而无法像PC端一样绝对居中,始终找不到解决方法,看了许多移动端的网站,研究了一下那些解决了这个问题的网站的CSS,然后照着做,但却达不到效果,张老师您有解决方法么,拜谢

    • smohan说道:

      不要固定高度,使用line-height,padding来定高, 中文字体,尤其雅黑基线不准,可以参考微信的做法,使用单倍字号,如15px

  15. 轩辕Rowboat说道:

    原来还可以根据不同的浏览器,选择加载不同的js,又学到了一招。今天发现你和小胡子哥(李靖)大学是同一个团队的。Zepto.js和jquery 2版本,手机端加载Jquery 都要1s,但在互联网时代,1s好像确实慢了。

  16. 曾经过往cjgw说道:

    张老师你好,你的文章我读过一些,有很多收获不少,想请教一个问题:
    在移动端,手指触摸屏幕的时候设备会终止css动画及js的执行(在iphone上比较明显,但在andriod上有可能会造成dom元素的隐藏),这种问题有什么好的解决方案,或者相关资料么?
    现今我知道的是通过,preventDefault()直接阻止touchstart或者touchmove的默认动作,这样做的弊端是:页面中可能有其他元素已经绑定了事件,另外这样也会阻止浏览器自带的上下拉效果,不算是理想的解决方案。
    希望老师可以解惑,非常感谢~

    • Pandamo说道:

      用iscroll js或者
      document.addEventListener(‘touchstart’,touch, false);
      document.addEventListener(‘touchmove’,touch, false);
      document.addEventListener(‘touchend’,touch, false);

      //touch为你自己写的function

      • 只有这种?说道:

        采用body或document做事件代理,然后用prenventDefault()阻止默认事件,浏览器的默认上下拉动事件靠自己写?

    • 某某某说道:

      直接忽略. 现在我的手机面对一堆堆的动画卡卡的.

  17. 第一个清晨说道:

    收藏了 赞赞

  18. 冷色的咖啡说道:

    这个思路和我把iOS和Android分别加载脚本和样式有点类似,因为开发的一些特效在低端Android上效果不好,所以就在分别写功能和样式,配合Webpack打包下样式之类的,比较方便的兼顾两个平台。

  19. Pandamo说道:

    zepto还是有不少坑,如果页面交互、逻辑实在很简单,要求加载速度快,可以试试zepto。

  20. 云库网说道:

    对zepto.js了解不多,jquery有时真的太重了,zepto.js考虑中!

  21. rotate720deg说道:

    666,前端大神

  22. 很养眼的丑男说道:

    张老师,我要做你的助理

  23. 正常的敦大侠说道:

    感谢旭哥指引~最近就一直在纠结用不用jquery,因为体积有点大,但原生JS又好啰嗦。我对我的发展方向都有点迷茫了,不知道要追求效率(bootstrap+less搞起来)还是追求css代码的精简、分离(纯手写),莫非我也有强迫症么哈哈。

  24. meepo说道:

    有道理!

    对于使用那些zepto没有实现的jquery方法(比如slideDown) 就要小心了.

  25. dont说道:

    访问过一次的话,304浏览器缓存过了吧。