自己封装一个公共组件，多配置。怎么拥有一个属于自己的组件轮子，并且是可复用的。例子为：返回顶部按钮组件

每个人都会拥有属于自己的轮子，如果你还不会，或者封装的不够好，看了接下来的文章，对你或许有帮助，你也试着封装一个复用高效的轮子

文章目录

为什么要封装组件？

现在工作，不会封装组件都不好意思说自己是前端了，面试基本也是必问的。写移动端，开发经验丰富的老手，基本都不会使用ui库，例如vant，antd这些。因为他们已经拥有了属于自己的一套轮子库，毕竟自己写的用起来方便，虽然说性能可能会差一点，但是现在手机和电脑的性能，这些都看不出来

提示：以下是本篇文章正文内容，下面案例可供参考

一、组件是什么？

其实组件就是一个html文件，只不过在框架的作用下，写法bu'yu。

A页面，引入了B页面，B页面就是子页面，A就是父组件。

B页面就相当于appendChaild（"body"）到A页面的body里面

其实就是两段html，合并到了成了一个文件，引入在哪个DOM下就

appendChild（）到对应的父级下面。相当于插入一段html文件

二、怎么封装一个复用组件

1.举例为返回顶部按钮

这里以返回顶部案例为例，因为在很多地方都会使用到返回顶部，尤其时移动端在做列表的时候，

产品经理都会让你价格按钮点击回到顶部，如果你不满意ui的样式，就可以自己封装一个。

具体效果图如下：

html + css 代码如下：结构非常简单



//代码过多放在下面，对应是写在这里

到这儿组件就写好逻辑了，可能有写的不好的地方，借鉴一下就可以了。

3.其他页面进行引用, 导入进来就可以了

总结

返回顶部按钮就是一个复用的公共组件，可以配置大小，样式，位置。因为很多地方会使用到，

适当的封装一下，就会使得代码简洁许多。

在项目中，还会有许多公共的方法，组件。如果抽离封装的话，项目结构会更加清晰，也容易维护。不然每人都写个方法，大家写法不一样，定位问题会很麻烦，也容易出现问题。