专业编程基础技术教程

网站首页 > 基础教程 正文

阿里学姐实习期间总结的12个前端工作实用技巧

ccvgpt 2024-07-24 11:11:32 基础教程 75 ℃

1、CSS一行文本超出隐藏

overflow: hidden;

阿里学姐实习期间总结的12个前端工作实用技巧

text-overflow: ellipsis;

white-space: nowrap;

2、CSS多行文本溢出隐藏

display: -webkit-box;

-webkit-box-orient: vertical;

-webkit-line-clamp: 3;

overflow: hidden;

3、IOS手机容器滚动条滑动不顺畅

overflow: auto;

-webkit-overflow-scrolling: touch;

4、修改滚动条样式,隐藏div元素的滚动条

div::-webkit-scrollbar {

display:none;

}

5、解决img底边3像素的问题

img {

vertical-align: middle;

}

6、移动端去除input默认样式

input {

background: none;

outline: none;

border: none;

-webkit-appearance: none;

}

input : focus {

border: none;

}

7、解决ios audio / video 无法自动播放、循环播放的问题

//解决ios audio无法自动播放、循环的问题

var oVideo = document.getElementById('video');

var state = 0;

document.addEventListener('touchstar',function(){

if (state == 0){

oVideo.play();

state == 1;

}

},false);

document.addEventListener('weixinJSBridgeReady',function(){

oVideo.play();

},false);

//循环播放

oVideo.onended = function(){

oVideo.load();

oVideo.play();

}

8、contenteditable

contenteditable = "true"; //可以将标签编程可编辑状态。

<div contenteditable = "true"></div>

9、css中的 cale() 方法

这个属性能适应自适应的布局。

10、解析 get 参数

const l = {}

location.search.replace(/([^?&=]+)=([^&]+)/g,(_,k,v)=>q[k]=v);

console.log(l)

通过 replace 方法获 url 中的参数键值对,可以快速解析get参数

11、解析连接URL

//创建a标签

const aEle = document.createElement('a');

//给a标签复制href属性

aEle.href = 'a.html';

//访问aEle中的属性

aEle.protocol;//获取协议

aEle.pathname;//获取path

aEle.origin;

aEle.host;

aEle.search;

创造 a 标签,给 a 标签复制 href 属性的方式,获取到协议,

pathname,origin等 location 对象傻瓜的属性

12、跨域的四种常见方式

jsonp是一种借助于 script 标签发送跨域请求的方式

CORS 跨域资源共享:需要在被请求的服务器相应的时候添加

Access-Control-Allow-Origin响应头,表示这个资源是否

允许指定域请求

nginx反向代理:可以不用目标服务器配合,不过需要搭建一个

中转nginx服务器,用于转发请求

nodejs 中间件代理跨域: node中间件实现跨域代理,原理大致

与nginx相同,通过启一个代理服务器,实现数据的转发,也可通过

设置cookieDomainRewrite参数修改响应头中cookie中域名,

实现当前域的cookie写入,方便接口登录认证

最近发表
标签列表