阅读 1465

21年前端实操项目-官网dy(你会在这里收获到不一样的细节点~)

image.png

image.png

技术栈

Vue、nuxt、less

开发思路

分为5个部分,组件抽离方式,数据用mock拦截数据模拟,后期从Vue迁移到nuxt,实现SSR服务器渲染,图片懒加载,flex布局,css样式使用less

创新

组件数据层和逻辑层分离,虽然在这个项目,逻辑处理很简单,好像没这个必要,但是考虑到以后开发复杂逻辑,这个思路很有必要去践行。

具体有记录性功能思路:

1. 下拉栏组件:

头部下拉栏组件抽离出来,一开始hover没想到直接用样式控制兄弟元素样式方式,直接用了数据驱动进行操控,不推荐,涉及到dom操作,这种类型下次直接使用样式方式控制即可,谨记。

2. 轮播图组件:

项目出现两个相似轮播图,但是小圆点位置不同,一开始分开做,后来考虑添加变量传入props进行样式控制,进而做成通用轮播图。推荐用vue做法:即v-for后v-show="currentIndex === index"这种方式,简约方便,符合vue数据驱动特色,这里有个坑点是,v-for里面的key值尽可能唯一,不能用index作为key值,其他关于特效方面可以加点transition过渡优化一下。以后类似这种可复用的,尽可能做成可复用。

3. 推荐产品组件:

搬砖组件,没什么好说,值得说的是Hover图片后有一个流光效果, 鼠标移入图片有流光滑过。

实现思路:

可以用伪元素或者DIV、i(light)作为流光,绝对定位放在左方。

.light {
    cursor: pointer;
    position: absolute;
    left: -510px;
    top: 0px;
    height: 436px;
    background-image: -moz-linear-gradient(0deg,rgba(255,255,255,0),rgba(255,255,255,0.5),rgba(255,255,255,0))
    background-image: -webkit-linear-gradient(0deg,rgba(255,255,255,0),rgba(255,255,255,0.5),rgba(255,255,255,0))
    transform: skewx(-25deg)
    -o-transform: skewx(-25deg)
    -moz-transform: skewx(-25deg)
    -webkit-transform: skewx(-25deg)
}
复制代码

需要加效果的图片(rec):

.rec:hover .light {
    left: 305px;
    -moz-transition: 0.5s;
    -o-transition: 0.5s;
    -webkit-transition: 0.5s;
    transition: 0.5s;
}
复制代码
linear-gradient创建一个表示两种或多种颜色线性渐变的图片
-moz代表firefox浏览器私有属性
-ms代表IE浏览器私有属性
-webkit代表chrome、safari私有属性
-o代表Opera私有属性
skewX() 函数定义了一个转换,该转换将元素倾斜到二维平面上的水平方向
复制代码

4. 产品组件

产品组件也是个搬砖的开发,有几点值得注意:

有二维码和没二维码的时候,需要样式改变

可以通过数据驱动动态改变样式,边界识别这个需要做一个自定义指令,推荐使用getboundingclientrect这个api,可获取元素的大小及其相对于视口的位置。但是要考虑兼容性问题。开发这个重点注意,隐藏元素是无法获取属性值,所以折中方法是可以做一些特殊处理,先把他显示,后面再隐藏回去,这里也是一个比较坑的点。

5. 图片懒加载

简单省事就直接用Vue提供的指令vue-lazyload,下载即用即可,但是建议自己写一个自定义指令,会收获更多,细节点要敲过后才能知道原理。

主要思路:

第一种是绑定scroll事件进行监听。

第二种是IntersectionObserver判断图片是否在可视区域。

但是IntersectionObserver这个api是有兼容性问题,所以可以两者结合,先判断是否兼容IntersectionObserver,可以用,不可以就用scroll;scroll这个点可以防抖节流优化。

6. nuxt(SSR)迁移

基础可浏览官网,nuxt.js给我感觉和Vue在目录上的改变主要是main.js,以及router缺失。

nuxt是自动路由化,这个就是 nuxt 框架的独到之处,为了能实现更好的SSR渲染,它使用的是根据页面结构,所以文件名,就是路由名称。

main.js被nuxt.config.js代替。迁移过程直接在nuxt创建src目录,把相关目录拉进src中,结构参照vue即可,记得在nuxt.config.js中修改源目录配置srcDir为'src/'

如果在vue项目中已经封装了axios,直接可以把vue中写的关于api的js都挪到plugins下,把export default axios抛出,再在nuxt.config.js下按照扩展的配置在plugins中添加就可以正常使用; 或者用nuxt提供的asyncData发送请求。迁移完正常启动即可,代码就是Vue的代码。

总结

1 开发时候总体思路很重要,先确定大致框架,然后怎么搭建,用什么技术栈,用什么组件,怎么抽离,通用,传的参数等,需要先构思好,不建议边做边想,后期重构会很难受。
2 能用vue提供的方法尽量别用原生,不然用vue框架意义不大。
3 v-for不推荐用index作为key值。
4 轮播图考虑复用性问题,同时不应该为了抽组件而抽组件,有些地方没要抽出来就不需要抽,同时轮播图定时器在生命周期销毁时候清除。
5 封装组件可以将数据和逻辑分开,方便操作。
6 自定义指令可以统一在index管理,丢进一个对象,然后再统一注册。
7 命名规范很重要,无论是组件名或者样式名,建议统一规范,这个可以看个人风格。
8 注释会很重要,提高可读性,给予阅读者遍历,毕竟不同人风格不同,你不备注,别人可能看不懂。
9 scoped下less样式建议不要用标签名,渲染效果不佳,建议给个class。
10 css样式规范也很重要,一些方位margin、paddinig、width、height建议放在前面,会提高那么点速度。
复制代码

如果对你有帮助,希望能够获得你的点赞认可~谢谢。

文章分类
前端
文章标签