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开发中更加方便的使用。需要使用这些方法时,只需要直接调用即可。