一、电话改版
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();
}