项目难点总结汇总

MQliferecord
242 阅读6分钟

主要手段：

  1. vm/vh是指相对于视窗的大小，通常设置为1/100
  2. @media媒体查询
@media screen and (min-width:375px）{
    padding-top:40px;
}
  1. rem相对于根html的font-size的大小设置
  2. em相对于父元素的font-size的大小设置
  3. 使用flex和grid布局
.parent{
    display:flex;
    width:200px;
    height:100px;
    justify-content:space-between;
    align-items:center;
}
  1. width/height:100%

希望实现文本截断

.container{
    flex:1;
    /*flex-grow:0;flex-shrink:1;flex-basis:auto*/
    white-space:nowrap;/*不换行*/
    overflow:hidden;/*隐藏溢出部分*/
    text-overflow:ellipsis;/* 使用省略号表示截断的文本 */
}

处理窗口过小时的页面显示情况

  1. 一律使用rem进行的一个字体布局
  2. 父根元素添加一个script函数，去检测当前窗口document.documentElement.clientWidth元素的大小，然后对于这个不同的大小，建立一个阈值，处理情况可以分为375和750这两个阈值点去设置不同的font-size:

我的处理方案是大于375，则fontsize就是100px；一旦小于375这个阈值点，就按比例进行一个缩放。

  ~function anonymous(window) {
    let computedREM = function computedREM() {
      let winW = document.documentElement.clientWidth,
        desW = 375;
      if (winW >= 375) {
        document.documentElement.style.fontSize = '100px';
        return;
      }
      document.documentElement.style.fontSize = winW / desW * 100 + 'px';
    };
    computedREM();
    window.addEventListener('resize', computedREM);
  }(window);

  1. 在使用两栏布局时，依然会出现当窗口过小时字体超出了div的情况，所以同样去设置一个阈值点，当窗口过小时更改为单栏布局显示。

  2. 同时当窗口过小时，导航栏也进行一个更改，将原本平坦的导航栏更改为点击下拉列表的形式。

  3. 然后当窗口过小的时候，原本点进note记录的页面的时候，是有两个可以点击按钮的一个是后退跳回首页，一个是点击保存，然后文本就会触发post的请求给后端修改数据库的内容；一旦窗口过小时，就页面就会display：none这个保存的按钮，只剩下回退的按钮。

  4. 然后todo栏的话是对于用户的todo输入限制死了字数，不允许大于20字，然后窗口过小的时候就通过@media将后面的文本进行...截断

  5. 同样的文件上传原本正常窗口是一个大的样式图+button进行上传，当很小窗口时样式图会变成一个图标+button

无限滚动的数据怎么处理

下拉删除：

  1. 通过检测滚动位置来确定用户的数据加载到了什么位置
  2. 由此计算出用户目前展示的数据index位置
  3. 然后对于远离这个index位置的数据添加标记进行清理，对于不需要清理但是目前不显示的数据开启浏览器缓存
  4. 对于有这个标记的数据在用户再次触发滚动事件的时候进行清理
  5. 渲染数据

上拉刷新：

  1. 对于用户上拉到已经删除数据的情况，监听用户的滚动事件，是否上拉到删除数据的情况
  2. 一旦上拉到该数据就立马触发请求向后端索要数据
  3. 前端将数据unshift进数据首部
  4. 在用户触发滚动事件时重新渲染

便签状态更新

填写便签在返回原始页面希望能够保留滚动的一个index位置，并且对于已经修改的便签内容，希望能够同步渲染到页面上

  1. 为了优化渲染性能，首先对于点进去修改的便签会记录未修改的内容的contenthash

  2. 以及用户点击保存之后的contenthash

  3. 对比两个hash的值来判断是否发生了内容的更改，如果进行了内容更改的话就说明需要发起请求要求新的数据进行替换，如果没有进行更改就不需要发起请求，其他的数据就使用浏览器缓存进行一个数据的缓存，主要是给文件设置headers里的ETag、Expires和cache-control这三项，其他的可以根据具体情况开启。

  4. 然后这里通过记录一个用户点击时当前页面可见区域的startIndex和endIndex的值以及点击的index的值，然后返回时进行该区域的重新渲染

刚发现目前通用的最优做法是，在路由导航代码区域使用BeforeRouterEnter中进行逻辑处理，判断是否需要获取最新的数据，然后在一些Vue代码里也可以用activated的生命周期钩子函数里面进行判断。

用户输入安全验证

  1. 对于TODO栏，一律使用innerText进行内容的展示，而不使用innerHtml，主要是防止潜在的xss攻击

限制用户上传的文件

  1. input+button实现的文件上传的，也就是input把本地i/o读入，然后button点击传给后端，希望限制用户文件上传的类型只有图片png和jepg以及MP4的方式，就检测文件的type属性是否是以上三种，如果不符合的话就禁用button按钮，也就是无法触发上传请求

  2. 同时限制用户上传的文件大小，比如只能上传200m以下，就对于文件的size属性进行判断；同样超过就禁用按钮并alert弹窗表示不允许上传200m以上的文件

  3. 整个文件传输使用的formdata，他是一种js内置的表单处理对象

  4. 然后为了缓解用户焦虑，还可以创建一个进度条，分成N份，每上传完一个分片，就将进度百分比增加1/n

前端性能监控

  1. 浏览器的控制台的网络可以看到请求数以及耗时，以及每个请求的耗时，以及请求的大小
  2. 浏览器的Memory记录内存使用情况，防止内存占有过多泄露情况
  3. 保持优秀的编码习惯： 及时清除定时器，对于可能的错误进行捕获和日志记录；模块化开发；使用git等代码管理工具；对于用户输入进行检测和转义，并且避免用户的输入会被作为函数等方式进行执行
avatar
文章
阅读
粉丝