关键词不能为空

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

作者:admin
来源:http://www.sdzsb8.cn/sbwd/18242.html
日期:2022-07-03 10:16
评论:0
阅读 171

前端基础之代码复用?js代码复用?前言《vue 基础》系列是再次回炉 vue 记的笔记,除了官网那部分知识点外,还会加入自己的一些理解。extends 是 选项/组合 类别下的选项属性之一,而不是 Vue.extend 全局 API,这个事先说下,以免概念上有个混淆。代码复用目前的前端有个非常重要的思想,就是“组件化”,对于代码层面就是最终 html、css、js 这些元素都会被挪到一起来实现一个较为完整的功能。这些举例都有个共同的特性就是 代码复用 。

前端基础之代码复用(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

前端基础之代码复用(js代码复用)的相关文章

  • 【赏析】只有登高方能望远——王之涣《登鹳雀楼》赏析

    【赏析】只有登高方能望远——王之涣《登鹳雀楼》赏析:只有登高 方能望远——王之涣《登鹳雀楼》赏析作者:赵铁军王之涣:登鹳雀楼白日依山尽,黄河入海流。欲穷千里目,更上一层楼。王之涣(688——742年),字季凌,绛州(今山西新

    百科
  • 【化学反应】化合反应与氧化反应之间的关系

    【化学反应】化合反应与氧化反应之间的关系:1,化合反应 (1)概念:由两种或两种以上物质生成另一种物质的反应,叫做化合反应。 (2)特点:反应通式 A + B = AB (多变一)。 (3)化合反应是化学反应基本类型(根据反应物与

    百科
  • 会计基础知识,有哪些?(会计基础知识重点)

    会计基础知识,有哪些?(会计基础知识重点):1、会计工作是根据《会计法》、《预算法》、《统计法》、各种税收法规为法律依据来核对记账凭证、财务账簿、财务报表,从事经济核算和监督的过程。2、是以货币为主要计量单位,

    热讯
  • 公共基础知识内容「公共基础90分经验」

    公共基础知识内容「公共基础90分经验」:公共基础知识的考试内容一般包括政治、经济、法律、时事、科技人文、行政管理、公文等。 需要注意的是并不是所有的考试综合知识就是公共基础知识,要根据具体的...现阶段,辅警职

    招生学校
  • 如何提高英语成绩「英语基础太差怎么补救」

    如何提高英语成绩「英语基础太差怎么补救」:1想 考研 可是 英语 基础太差怎么办对于考研的学生来说,现在应该开始着手复习英语了。只要坚持,英语是完全可以提高的。那么,想考研可是英语基础太差怎么办?下面...心理学包含对大

    招生学校
  • 历年二建考试真题「零基础考二建有多难」

    历年二建考试真题「零基础考二建有多难」:零基础考二建有一定的难度,但是零基础考二建也并不是完全没有希望的。二建考试有三门科目,分别是《建设工程施工管理》、《建设工程法规及相关知... 这几年二建考试的热度不断

    资讯
  • 计算机文化基础试题(计算机文化基础试题下载)

    计算机文化基础试题(计算机文化基础试题下载):大家好,今天来为大家关于计算机文化基础试题(计算机文化基础试题下载)很多人还不知道,现在让我们一起来看看吧 1.在Excel中运算符&表示( A)A.逻辑值的“与”运算 B. 子字符串的

    问答
  • 大专层次的考生,不妨选择报考这5种院校,解除自己的后顾之忧

    大专层次的考生,不妨选择报考这5种院校,解除自己的后顾之忧:在每年的填报高考志愿的过程中,祖国各地有不少考生因为各种原因进入了大专层次的招生录取层次,但是,这类考生又满意自己所就读院校的层次,还想提升自己人生的质量,因此,

    百科
  • 辽宁考试之窗网站「辽宁考试之窗查询入口」

    辽宁考试之窗网站「辽宁考试之窗查询入口」:6月22日开始,各省市进入高考成绩查询时间,在此期间如果考试院网站打不开怎么办? 为此小编特别整理了《辽宁招生考试之窗打不开怎么办》,希望可以帮到大家。 辽宁...据辽宁招生考试

    资讯
网站公告