前端基础之代码复用?js代码复用?前言《vue 基础》系列是再次回炉 vue 记的笔记,除了官网那部分知识点外,还会加入自己的一些理解。extends 是 选项/组合 类别下的选项属性之一,而不是 Vue.extend 全局 API,这个事先说下,以免概念上有个混淆。代码复用目前的前端有个非常重要的思想,就是“组件化”,对于代码层面就是最终 html、css、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的简单场景应用。虽然例子不多,但确实是我平时优化后觉得有用的做法。相信这个属性可以让代码复用性更高,减少以后的工作量。
如果你能得到要点并且觉得这篇文章有帮助,请与其他同学分享。
关于我
一个“前端工程师”,愿意实践和分享前端开发经验。
如果你有任何问题或想法,欢迎评论和留言,我们希望你能共同进步。
关注【前端雨爸】,查看更多前端技术经验。
本文来自网络,不代表「专升本要什么条件_专升本要几年_成人高考专升本_山东专升本信息网」立场,转载请注明出处:http://www.sdzsb8.cn/sbwd/18242.html