关于开发中遇到的一些问题记录

元素进入可视区，执行回调的需求

 今天遇到了一个特别的需求，及在社区论坛app中，帖子从上往下加载。每次加载的10条，每个帖子为独立元素
当它出现在可视区域内，执行事件上报（这条帖子被浏览了），上报事件只执行一次，不重复触发！思考很久，因为内嵌在app里面的一个前端web页面，顶部关闭按钮是原生提供的，无法使用页面关闭时，
执行事件上报一共请求了多少条数据！考虑给每个元素添加监听事件，以后台提供的id 给元素动态添加唯一id，再id开头以xxx，作为标识，
然后通过let ids = document.querySelectorAll("[id^='xxxx']") 拿到一xxx开头的元素，给每个元素
添加监听，移除监听事件，但感觉特别麻烦，给否定了！后来了解到 web api 有一个Intersection Observer 接口提供了一种异步观察目标元素与其祖先元素
或顶级文档视窗(viewport)交叉状态的方法。祖先元素与视窗(viewport)被称为根(root)。IntersectionObserver.observe()使IntersectionObserver开始监听一个目标元素。IntersectionObserver.unobserve()使IntersectionObserver停止监听特定目标元素。IntersectionObserver.disconnect()使IntersectionObserver对象停止监听工作。通过intersectionRatio可以看到目标元素现在的可见比例
目标元素在我们的范围内可见，及intersectionRatio它大于0

、、该方法写在vue当中

// 帖子浏览量埋点统计，没出现一个帖子，上报一次func(){this.$nextTick(()=>{let observer = new IntersectionObserver((entries) =>{entries.forEach((entry)=>{// 当前有多少目标元素在我们的范围内可见，所以如果它大于0if (entry.intersectionRatio > 0) {console.log('出现在可视窗口')// 执行埋点const {aplus_queue} = window;aplus_queue.push({action: 'aplus.record',arguments: ['mt_post_page_views', 'CLK', {action: 'view',target: '推荐',}],});// 如果监听过后不再监听，在此回调中清除元素，entry.target代表清除目标dom节点observer.unobserve(entry.target)}})})// dynamic_content2 ，需要监听的元素都用这个classlet list = document.querySelectorAll(".dynamic_content2")// list 拿到时是一个伪数组，需要转化为数组，才能调用数组apilist = Array.prototype.slice.call(list)// 因为帖子每次往后追加10条，所以下次调用函数只取最后10条添加监听list =  list.slice(-10)list.forEach((section)=>{observer.observe(section)})})},

安卓和ios时间兼容性问题

ios系统下

Date.parse(new Date('2022-04-04 12:00:00'))

Android系统下

Date.parse(new Date('2022/04/04 12:00:00'))

兼容性写法

Date.parse(new Date('2022-04-04 12:00:00')) || Date.parse(new Date('2022/04/04 12:00:00'))
或者
function Time (time) {return Date.parse(new Date('2022-04-04 12:00:00')) || Date.parse(new Date('2022/04/04 12:00:00'))
}

前端优化

一、资源压缩与合并
二、非核心代码异步加载异步加载的方式
三、减少http请求，合理利用浏览器缓存
四、使用CDN
五、预解析DNS（暂时没有使用过）

ios 安全区问题

我遇到的是安全区白条，h5 页面无法铺满ios页面
iOS11 新增特性，苹果公司为了适配 iPhoneX 对现有 viewport meta 标签的一个扩展，用于设置网页在可视窗口的布局方式，可设置三个值：

contain: 可视窗口完全包含网页内容（左图）
cover：网页内容完全覆盖可视窗口（右图）
auto：默认值，跟 contain 表现一致

注意：网页默认不添加扩展的表现是 viewport-fit=contain，需要适配 iPhoneX 必须设置 viewport-fit=cover，这是适配的关键步骤。

<meta name="viewport" content="width=device-width, viewport-fit=cover">
html,
body {padding-top: env(safe-area-inset-top);padding-right: env(safe-area-inset-right);padding-bottom: env(safe-area-inset-bottom);padding-left: env(safe-area-inset-left);
}

在IOS下页面时滑动卡顿，而Andoid没问题

body {-webkit-overflow-scrolling:touch; overflow-scrolling: touch;}

IOS下input默认样式（圆角、阴影）

input {-webkit-appearance: none;border-radius: 0;
}

三、多图上传问题

安卓上不能多图上传，无法解决

页面缓存的坑

有个填写信息的页面，需要填写一部分信息，进入查新协议页面，返回的时候，页面上填写的信息还需要留存。解决办法：使用vue提供的keep-alive，来完成页面的缓存的

文件缓存问题

更新文件缓存的坑。每次打包好文件给后端更新的时候，用户手机上总会留下，上次版本的信息，而且每次都得清下缓存，才会显示最新版本的数据。后来，我师傅提了个建议，让后端返回一个更新版本的接口，前端每次更新版本的时候，都会给后端传入时间戳，然后后端接收后判断和库里的时间戳是否相同，相同的返回不需要更新，不相同的话，返回要更新，然后前端这边的处理方法是：需要更新的话，清除掉缓存，刷新页面即可。

选中id以什么开头的所有元素

let ids = document.querySelectorAll("[id^='xxxx']")

display:none与visibility：hidden 的区别

1.dispaly:none;会让元素完全从渲染树消失，渲染的时候不占据任何空间;
visibility：hidden 不会让元素从渲染树消失，渲染的元素继续占据空间，只是内容不可见2.display:none;是非继承属性，子孙节点消失由于元素从渲染树消失造成，通过修改子孙节点属性无法显示
visibility：hidden；是继承属性，子孙节点消失是由于继承了hidden，
通过设置visibility：visible；可以让子孙节点显示3.修改元素的display:none通常会造成文重排。而修改visibility：hidden属性只会造成当前元素的重绘4.读屏器不会读取display:none元素内容；会读取visibility：hidden元素内容

关于透明度

透明度一般有两种做法第一种： opacity:0.5；这种设置透明度的方法会影响子节点。
也就是说包含在该元素内的所有子节点都会被添加透明度。第二种：background:rgba(0,0,0,0.5);这种设置透明度的方法不会影响到子节点，只给本身设置透明度。

什么是层叠

层叠就是对一个元素多次设置同一个样式，这将使用最后一次设置的属性。

CSS伪类和伪元素的区别

伪类：用于选择DOM树之外的信息，或是不能用简单选择器进行表示的信息。
（相当于一个特殊的class选择器，用来添加一些特殊效果）

伪元素：为DOM树没有定义的虚拟元素。不同于其他选择器，它不以元素为最小选择单元，
它选择的是元素指定内容。（相当于一个特殊的元素（div、span），可以用来存放一些特殊样式或者内容）
简而言之作用于元素当前内容修饰（之前，之后，首字，首行）

文字展示

文字一行展示
text-overflow:ellipsis;
overflow: hidden;
white-space:nowrap;文字多行展示，超出显示...
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
line-clamp: 3;
-webkit-box-orient: vertical;

表格制作

        <table border="1" cellspacing="0"><tr><td class="order">序号</td><td class="name">权限名称</td><td class="function">涉及功能</td><td class="describe">功能描述</td></tr><tr><td>1</td><td>INTERNET</td><td  rowspan="3">几乎所有功能</td><td rowspan="3">原子清单是一个联网应用</td></tr><tr><td>2</td><td>ACCESS_NETWORK_STATE</td></tr><tr><td>3</td><td>ACCESS_WIFI_STATE</td></tr><tr><td>4</td><td>READ_PHONE_STATE</td><td>用户服务</td><td>获取用户设备标识，以便提供服务。</td></tr><tr><td>5</td><td>READ_EXTERNAL_STORAGE</td><td>用户登录标识业务</td><td>保持用户登录状态。</td></tr><tr><td>6</td><td>WRITE_EXTERNAL_STORAGE</td><td>数据缓存</td><td>用于减少网络开销和提升弱网情况下的服务可用性。</td></tr><tr><td rowspan="2">7</td><td>READ_CALENDAR</td><td  rowspan="3">日程同步</td><td rowspan="3">将日历里的日程同步到应用</td></tr><tr><td>WRITE_CALENDAR</td></tr></table>

input 背景透明，清除默认样式

input {text-align: center;width: 165px;background-color: transparent;outline: none;border: 0;border-bottom: 2px solid #000;/*去除iOS默认样式*/-webkit-appearance: none;
}/*背景透明*/
input:-webkit-autofill {/*自动填入文本颜色*/-webkit-text-fill-color: #ffffff !important;/*自动填入光标颜色*/caret-color: white;/*背景透明；原理：动画由透明变有背景色；参数：背景色属性、动画时间、动画速度曲线、延迟时间*/transition: background-color 0s linear 3600s;
}