前端基础之代码复用(js代码复用）

序

《vue 基础》系列是vue再次回炉时拿的笔记。除了官网的知识点，他还会补充一些自己的理解。(会有一部分和官网的一样的文案，有经验的同学可以选择自己感兴趣的阅读。)

Ends是选项/组合类别下的选项属性之一，而不是Vue.extends全局API。为了避免概念上的混淆，我们先提前说一下这个。

代码重用

目前“组件化”前端有一个很重要的思路。对于代码层面，会将html、css、js等元素搬到一起，实现相对完整的功能。比如element-ui，如果想实现分页栏，可以直接获取。

如果你想通过标签对数据进行过滤，有一些特殊的功能，可以相应的定制一些过滤器和说明。

所有这些例子都有一个共同的特点：代码重用。先不说随处可见的好处。这里有个问题，如何在vue中只重用js函数？(可能会有一些限制)

答案是extends，一个普通的属性，但是我直到掉了一撮毛才使用。

延伸

类型：对象函数

允许声明在不使用Vue的情况下扩展另一个组件(可以是简单的option对象或构造函数)，extend这主要是为了方便单文件组件的扩展。这类似于mixins。

事件

举几个简单的例子。

论使用生命周期的生命周期

有一些需求(例如，控制mint-ui loadmore组件的高度)。当元素安装在dom节点上时，需要控制页面某些区域的固定高度。

我们以前经常这样。所有需要控制高度的页面都有这个类似的代码。

使用扩展时，可以简化为：

使用extends调用封装方法heightControl。只需将这行代码添加到您想要使用的vue模块中：

HeightControl是原始安装中的所有定义：

简化方法

再比如，我们会有注册、忘记密码、获取短信的功能。它们有相同的接口和相似的参数。那么两个页面之间就会有99%相似度的模板化代码。

使用扩展时，可以简化为：

覆盖methods属性，列出获取短消息的公共方法，实现更公共的发送短消息的功能：

摘要

通过这两个例子，描述了extends的简单场景应用。虽然例子不多，但确实是我平时优化后觉得有用的做法。相信这个属性可以让代码复用性更高，减少以后的工作量。

如果你能得到要点并且觉得这篇文章有帮助，请与其他同学分享。

关于我

一个“前端工程师”，愿意实践和分享前端开发经验。

如果你有任何问题或想法，欢迎评论和留言，我们希望你能共同进步。

关注【前端雨爸】，查看更多前端技术经验。