淘先锋技术网

首页 1 2 3 4 5 6 7

App开发中,我们经常会用到各种前端技术。其中,CSS和JavaScript是关键技术之一,也是开发中经常会运用到的两种技术。同时,为了让CSS和JavaScript更好的发挥作用,我们也需要对这两种技术进行封装。

/**
 * 封装一个常用的CSS样式库
 */
/* 样式重置 */
html,body,div,span,object,iframe,hr,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code, del,dfn,em,img,ins,kbd,q,
samp,small,strike,strong,sub,sup,tt,var,b,i,u,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td {
margin: 0;
padding: 0;
}
/* 清除浮动 */
.clearfix::before,.clearfix::after {
clear:both;
content:'';
display:block;
height:0;
}
.clearfix {
zoom:1;
}
/* 文本截断 */
.ellipsis {
display: block;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
/* 弹出提示 */
.tooltip {
position: relative;
display: inline-block;
cursor: pointer;
}
.tooltip .tip-content {
display: none;
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
padding: 5px;
background-color: #fff;
border: 1px solid #333;
border-radius: 3px;
box-shadow: 0 0 5px #666;
}
.tooltip:hover .tip-content {
display: block;
}
/* 模糊背景 */
.blur-bg {
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
z-index: 9999;
backdrop-filter: blur(5px);
background-color: rgba(0,0,0,.5);
}

可以看到,我们将常用的CSS样式进行了一些封装,以便在App开发中更加方便的使用。在使用时,只需要将对应的样式类添加到需要使用的标签上即可。

/**
 * 封装常用的JavaScript方法
 */
 // 获取URL参数
 function getQueryString(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
var r = window.location.search.substr(1).match(reg);
if (r != null) return unescape(r[2]); return null;
 }
 // 判断是否为移动设备
 function isMobile() {
return /Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent);
 }
 // 异步请求
 function ajax(options) {
var xhr = null;
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
} else if (window.ActiveXObject) {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
xhr.open(options.type, options.url, true);
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
options.success(xhr.responseText);
}
}
if (options.type == "POST") {
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.send(options.data);
} else {
xhr.send();
}
 }

同样的,我们把常用的JavaScript方法进行了封装,以便在App开发中更加方便的使用。需要使用这些方法时,只需要直接调用即可。