项目总结 - 掘金

1我学会了什么

在本次项目中我学会了以下几点（以前未能熟练掌握的）

原生dom 轮播图
页面间传值跳转
放大镜
登陆注册的原理实现（通过正则验证）
通过ajax渲染页面
页面适配问题（通过使用插件）
处理请求的数据（分析接口返回值，按要求处理数据）

2 你的进步有哪些

本次项目中自我感觉进步的部分还是有很多地方的，之前未能掌握的轮播图。页面间传值有些缺陷，这也是我找我不够熟练的地方，在之后的学习中还需在这个部分多加训练。小功能上的小demo 放大镜巩固，table切换，楼层滚动。

document.documentElement.scrollTop<=allLi[i].offsetTop+allUl[i].offsetHeight

有关滑轮滚动值，元素高度，可视窗口高度等进一步加深印象

说到进步地方，感觉这个项目就是我最大的进步。业务能力之前完全不懂，小试牛刀后的我，总体的思路得到了不止薪点的提升，以前在脑海里没有一点概念的东西，反倒是学会了十之七八。轮播图，感觉成为我能不能进入js大门的一个标准了。也在自己的思考下给做了出来。以前做的小demo部分真的挺多的，时间一长，多少还是体现出来自己好多不足之处。

3 你那里不会

本次项目让我发现自己很多不够熟练的地方，通过本次项目也让我哪些好多不懂的地方得到提升。不会的部分楼层滚动，放大镜涉及到的关于各个部分的值之间的关系理解起来还有问题。页面间传值的问题还有些许不熟。

有关页面间传值，相关接口数据的处理，这是我此次项目中体现出来最大的问题。

4 总结项目中有哪些业务

首页商品渲染，使用接口获取数据然后渲染
分类页渲染，通过url传值的方法将参数传到分类页，再通过接口获取数据进行数据处理
搜索页渲染，也是通过url传值的方式将参数传到搜索页，再通过接口获取数据进行数据处理
分类页的楼层滚动，这也是以前学过的小demo

for (var i = 0; i < data.length; i++) { if (i == 0 || data[i].type_two != data[i - 1].type_two) { var h1 = document.createElement('h1'); h1.innerHTML = data[i].type_two; searchShop.appendChild(h1); var ul = document.createElement('ul'); searchShop.appendChild(ul); } }
商品详情页渲染，主要是把基础样式先写好，然后也是通过url传值将商品id传到详情页，通过接口获取数据处理数据，详情页有放大镜、tab切换和加入购物车，放大镜是学过的小demo，主要是比例的问题，左边盒子/悬浮框==右边图片/右边盒子，tab切换也是学过的小demo，就是点击下面的图片，将这张图片赋值给左边及右边的图片，加入购物车就是传token和商品id，通过接口/add向服务器发请求，然后服务器那边会帮你计数，下面的相似商品推荐就是通过商品详情获取到它的type_one，然后通过分类的接口获取数据渲染出来
购物车的页面就是拿本地储存的token向服务器发请求拿数据渲染，加减都是用接口，但是加减会在服务器数据库那边进行加减，但是页面不会刷新出来，所以要自己写加减的样子，删除就用接口删除，再在页面的操作中讲这一整条商品删掉
权限验证就是进入页面的时候先进行判断，看本地有没有token

5 总结你的项目中有哪些技术亮点

项目中的亮点也是比较单一的体现，每次对接口获取到数据的处理。更多的部分是对每个接口文档进行分析。

无缝轮播的实现，部分bug处理的思路。

function qj() {
    btnright.onclick = null;
    setTimeout(function () {
        btnright.onclick = function () {
            qj()
        }
    }, 1000)
    if (index <= 5) {
        carInside.classList.add('donghua');
        index++;
        carInside.style.left = `-${index * 8.571429}rem`;
        if (index == 5) {
            index = 0
            // divs[index].setAttribute("id", "black");
            setTimeout(function () {
                carInside.classList.remove('donghua');
                carInside.style.left = `-${index * 8.571429}rem`;
            }, 1000)
        }
    }
    run()
}

上述代码中涉及到相关适配问题，关于适配也是这个项目中提升的地方，之前并未用到过。

代码块中px的数值被适配自动转化为相对应的rem值

@media screen and (min-width:1400px) {
    html {
        font-size: 140px;
    }
}

将第一个和第三个值写成css一样的值

导入js适配文件

(function flexible (window, document) {
  var docEl = document.documentElement
  var dpr = window.devicePixelRatio || 1

  // adjust body font size
  function setBodyFontSize () {
    if (document.body) {
      document.body.style.fontSize = (12 * dpr) + 'px'
    }
    else {
      document.addEventListener('DOMContentLoaded', setBodyFontSize)
    }
  }
  setBodyFontSize();

  // set 1rem = viewWidth / 10
  function setRemUnit () {
    var rem = docEl.clientWidth / 10
    docEl.style.fontSize = rem + 'px'
  }

  setRemUnit()

  // reset rem unit on page resize
  window.addEventListener('resize', setRemUnit)
  window.addEventListener('pageshow', function (e) {
    if (e.persisted) {
      setRemUnit()
    }
  })

  // detect 0.5px supports
  if (dpr >= 2) {
    var fakeBody = document.createElement('body')
    var testElement = document.createElement('div')
    testElement.style.border = '.5px solid transparent'
    fakeBody.appendChild(testElement)
    docEl.appendChild(fakeBody)
    if (testElement.offsetHeight === 1) {
      docEl.classList.add('hairlines')
    }
    docEl.removeChild(fakeBody)
  }
}(window, document))

就可以弄个简单的页面适配。

有关页面适配问题我了解的不是很多，这个也是我接下来需要去了解的地方，方法还有很多种目前只掌握了这种方法用来解决简单的页面适配问题。