温故知新——总结项目中的问题(二)

本文分享了原生封装Ajax方法的过程,探讨了在项目中创建公共模板的重要性,并介绍了预加载和懒加载技术的应用,以及iOS音频播放的兼容性解决方案。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

一、电话改版

1.原生封装一个jquery里的ajax方法

由于项目的需求是提供一个供其他多个项目使用的电话模板,其他项目不一定引用了jquery,所以项目中的ajax请求需要使用原生的。但如果还需要像jquery中一样使用,就需要自己封装一个。

    //封装的ajax--原生
    function ajax(){
        var ajaxData = {
            type:arguments[0].type || "GET",
            url:arguments[0].url || "",
            async:arguments[0].async || "true",
            data:arguments[0].data || null,
            dataType:arguments[0].dataType || "text",
            contentType:arguments[0].contentType || "application/x-www-form-urlencoded",
            beforeSend:arguments[0].beforeSend || function(){},
            success:arguments[0].success || function(){},
            error:arguments[0].error || function(){}
        }
        ajaxData.beforeSend()
        var xhr = createxmlHttpRequest();
        xhr.responseType=ajaxData.dataType;
        xhr.open(ajaxData.type,ajaxData.url,ajaxData.async);
        xhr.setRequestHeader("Content-Type",ajaxData.contentType);
        xhr.send(convertData(ajaxData.data));
        xhr.onreadystatechange = function() {
            if (xhr.readyState == 4) {
                if(xhr.status == 200){
                    ajaxData.success(xhr.response)
                }else{
                    ajaxData.error()
                }
            }
        }
    }
    function createxmlHttpRequest() {
        if (window.ActiveXObject) {
            return new ActiveXObject("Microsoft.XMLHTTP");
        } else if (window.XMLHttpRequest) {
            return new XMLHttpRequest();
        }
    }
    function convertData(data){
        if( typeof data === 'object' ){
            var convertResult = "" ;
            for(var c in data){
                convertResult+= c + "=" + data[c] + "&";
            }
            convertResult=convertResult.substring(0,convertResult.length-1)
            return convertResult;
        }else{
            return data;
        }
    }

封装完以后就可以像jquery中一样进行使用。

ajax({
     type: 'get',
     url: the_url,
     dataType: 'json',
     success: function (ret) {
     },
     error: function () {
     }
});

2.项目的一些总结

在这个项目中让我学到了挺多的。

第一点,刚开始我是觉得这种事直接去改动他们原来的代码就好了,写一个公有的会不会过于繁琐。leader告诉我,“如果去改其他人的代码,可能更改的是一个其中的功能点。目前有三份项目牵扯到这个功能你就要三份代码,未来其他项目还需要的话,还要继续改。这就需要你去看别人的源码,还要与开发者做过多的协商如何更改协商,这是个无止境的活儿了”。

事实证明了,写一个公用的模板是一个一劳永逸的事,把自己的功能封装在一个js文件中,别人使用的时候只需要引入我的js,在需要使用的地方增加一个我定义的class,再进行简单的配置就生效了。这道理就有点类似如果我们要使用轮播图,去引入swiper插件是一个更便捷的方法。

第二点,如果在做更改的是一个已经上线的项目,就需要考虑一个迭代周期的问题。如果你的js文件一旦发布到线上,会立即生效,但是涉及到的html静态页有数百个,需要几个小时甚至几天才可以完成更新。如果不考虑这个问题,就可能出现这种状况:js是新的,但是html页面还是旧的,这时候html上没有绑定相应的元素,而旧的js文件不在了,相应的功能就在这个迭代期内失效了。

事实告诉我,做开发一定要格外严谨,考虑问题要更加全面,切记切记。

二、新机场

1.预加载和懒加载

之前听过但是都没有用过,在这次中实现了一下,其实也很简单。

预加载:例如一些h5页面,很多内容是display:none,因此其中的background的图片资源是不会预先进行加载的,只有当需要呈现它的时候才进行加载,这对于网速不是很快的用户或是当图片过大是,页面上就会有区域是留白的。为了解决这种用户体验差的问题,就有了预加载。

        var img = [
            basUrl+'plane.png',
            basUrl+'days.png',   
        ];
        for(var i=0;i<img.length;i++){
            new Image().src=img[i];
        }

大致就是将请求的资源放在js中(或者直接怼到html标签里),实现起来简单,但对于我这个小白来说是个新的知识点,所以记下来。

懒加载:有些页面过长,图片等资源过多,例如电商网站。当还没有在用户可视区域的时候,就不需要进行加载,可以先设置一个data-origin放置图片的url,将img的src设为空,当出现在用户可视区域前,再把data-origin赋值给src。

2.ios兼容性问题

再音频播放方面,ios是不支持自动播放的,这时候需要引入插件进行处理。

<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
    function autoPlayAudio() {
        wx.config({
            // 配置信息, 即使不正确也能使用 wx.ready
            debug: false,
            appId: '',
            timestamp: 1,
            nonceStr: '',
            signature: '',
            jsApiList: []
        });
        wx.ready(function() {
            var globalAudio=document.getElementById("music");
            globalAudio.play();
        });
    };
    if(/iPhone/.test(window.navigator.userAgent)){
        autoPlayAudio();
    }
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值