Web前端开发实战项目经验

前端开发教程推荐|前端页面接口开发教程|前端开发项目实战

1.WEBP

介绍webp的兼容性

webp兼容性

由于我们商城商品有3000多个所以有很多图片,这次先把一个介绍页面的图片替换成webp的。对了,一般的webp都要配合懒加载,这样才有时间去判断。data-src里面放的是接口获取的图片地址(这里是本地的图片),后缀是.jpg的,然后判断浏览器是否支持.webp,如果支持就用正则替换成.webp结尾的,然后再判断这个图片有没有(毕竟那么多图片,运营可能只上传了一部分.webp的),如果没有还是用之前.jpg格式的图片。注意imgObj.onerror = null;否则多次触发。下面是一个懒加载+webp的小插件。
javascript 代码

“use strict”;
var imgLazy = {
    checkWebp: function () {
        try {
            return (document.createElement(‘canvas’).toDataURL(‘image/webp’).indexOf(‘data:image/webp’) == 0);
        } catch (err) {
            return false;
        }
    },
    checkImgUrl: function (imgurl, imgObj) {
        imgObj.src = imgurl;
        imgObj.onerror = function () {
            imgObj.src = imgurl.replace(/.webp$/, ‘.jpg’);
            imgObj.onerror = null;
        };
    },
    getImgTop: function (img) {
        var offsetTop = img.getBoundingClientRect().top,
            winHeight = document.documentElement.clientHeight || document.body.clientHeight;
        if (offsetTop < winHeight + 2000) {
            return true;
        }
    },
    lazyLoadImg: function (imgsrc) {
        var img = document.getElementsByTagName(“img”);
        for (var i = 0, length = img.length; i < length; i++) {
            if (img[i].getAttribute(imgsrc)) {
                img[i].style.opacity = .5;
                img[i].style.filter = “alpha(opacity = ” + 50 + “)”;
                if (this.getImgTop(img[i])) {
                    var url = img[i].getAttribute(imgsrc).replace(/.jpg$/, ‘.webp’);
                    // 判断浏览器是否支持.webp格式
                    if (this.checkWebp()) {
                        // 判断有没有.webp图片
                        this.checkImgUrl(url, img[i]);
                    } else {
                        img[i].src = img[i].getAttribute(imgsrc);
                    }
                    img[i].removeAttribute(imgsrc);
                    img[i].style.webkitTransition = ‘opacity 1s’;
                    img[i].style.opacity = 1;
                    img[i].style.filter = “alpha(opacity = ” + 100 + “)”;
                }
            }
        }
    },
    throttle: function (method, parma, context) {
        clearTimeout(method.tId);
        method.tId = setTimeout(function () {
            method.call(context, parma);
        }, 200);
    },
    init: function () {
        var oThis = this;
        oThis.lazyLoadImg(‘data-src’);
        window.onscroll = function () {
            oThis.throttle(oThis.lazyLoadImg, ‘data-src’, oThis);
        };
    }
};
imgLazy.init();

####2.备忘录模式
备忘录模式在js中经常用于数据缓存. 比如一个分页控件, 从服务器获得某一页的数据后可以存入缓存。以后再翻回这一页的时候,可以直接使用缓存里的数据而无需再次请求服务器。
具体的设计模式可以推荐这篇
js设计模式
这次我是用在了分类页面。一共4个tab切换,用一个对象在每一个tab第一次点击的时候就缓存住数据,然后再第二次点击的时候就不用请求数据了。注意的事这种模式在每一个tab数据量很大的时候不要用。我后来在订单页面页用了,由于我们的订单页面每一个tab没有分页,所以在每一个tab下有200+数据的时候就会点击卡顿要过一会才会有响应,这样的体验就很不好啦,还是采用点击出现loading再请求数据的方式。线上地址可以查看 维妮海购分类页

3.滑动到最后直接到图文说明

这个需求是后来提的,就是仿造淘宝app里面的商品详情页最上面的banner,当用户滑到最后一张商品图片的时候提示放开滑动图文说明。由于之前的滑动用了swiper,所以就去找api,发现还真有一个api是在滑动到最后一张手指放开触发的——onTouchEnd,不得不感慨一句swiper真的很强大,不过要注意的是一定要下载最新的swiper,否则swiper.translate时不存在的。还有一个坑就是我移动端用了zepto是没有animat额e()方法的,所以得自己写一个缓动函数哈。效果可以看这个
滑到最后一张图片跳转到图文说明

####4.后台返回的时间格式,ios手机显示NaN
这个bug是要上线的时候突然发现的,太让我震惊了。这次是关于活动的,因为每一个活动的显示不仅要有活动名称还要判断服务器时间是不是在活动开始时间和结束时间之间,所以会对后台接口中的时间转化为距离1970的毫秒才比较,NaN就出现转化时间上面,当后台返回的时间格式为Jan 20, 2017 9:39:20 PM这种,那么直接return new Date(nowTime).getTime()就行了,如果是2016-12-01 01:12:00这样的格式就会报错,这样的错误只有在实体机里面才会出现,模拟器里面都不会出现,要不是我一遍拿着苹果手机一边小米对着看根本发现不了。解决的办法就很简单了,用 return eval(“new Date(“+ nowTime.replace(/\D+/g,”,”)+”)”).getTime();就好,原因是苹果手机不支持那种时间格式。

前端开发 项目案例|web前端开发项目经验描述|前端项目开发问题

» 本文来自:前端开发者 » 《Web前端开发实战项目经验》
» 本文链接地址:https://www.rokub.com/4090.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!