摘要:前言最近开发的页面以及功能大都以表格为主,接口获取来的数据大都是需要经过处理,比如时间戳需要转换,或者状态码的转义。首先,还是在文件中定义一个状态码对应对象,这里我们将其对应的内容设为段落。
前言
最近开发的页面以及功能大都以表格为主,接口获取来的 JSON 数据大都是需要经过处理,比如时间戳需要转换,或者状态码的转义。对于这样的问题,各大主流框架都提供了类似于过滤的方法,在 Vue 中,一般是在页面上定义 filter 然后在模板文件中使用 | 进行处理。
这种方法和以前的遍历数组洗数据是方便了许多,但是,当我发现在许多的页面都有相同的 filter 的时候,每个页面都要复制一遍就显的很蛋疼,遂决定用 Vue.mixin() 实现一次代码,无限复用。
最后,还可以将所有的 filter 包装成一个 vue 的插件,使用的时候调用 Vue.use() 即可,甚至可以上传 npm 包,开发不同的项目的时候可以直接 install 使用。(考虑到最近更新的比较快,遂打包上传这步骤先缓缓,等版本稍微稳定了之后来补全)
正文闲话说够,开始正题。
Vue.mixin 为何物学习一个新的框架或者 API 的时候,最好的途径就是上官网,这里附上 Vue.mixin() 官方说明。
一句话解释,Vue.mixin() 可以把你创建的自定义方法混入所有的 Vue 实例。
示例代码
Vue.mixin({ created: function(){ console.log("success") } })
跑起你的项目,你会发现在控制台输出了一坨 success。
效果出来了意思也就出来了,所有的 Vue 实例的 created 方法都被改成了我们自定义的方法。
使用 Vue.mixin()接下来的思路很简单,我们整合所有的 filter 函数到一个文件,在 main.js 中引入即可。
在上代码之前打断一下,代码很简单,但是我们可以写的更加规范化,关于如何做到规范,在 Vue 的官网有比较详细的 风格指南 可以参考。
因为我们的自定义方法会在所有的实例中混入,如果按照以前的方法,难免会有覆盖原先的方法的危险,按照官方的建议,混入的自定义方法名增加前缀 $_ 用作区分。
创建一个 config.js 文件,用于保存状态码对应的含义,将其暴露出去
export const typeConfig = { 1: "type one", 2: "type two", 3: "type three" }
再创建一个 filters.js 文件,用于保存所有的自定义函数
import { typeConfig } from "./config" export default { filters: { $_filterType: (value) => { return typeConfig[value] || "type undefined" } } }
最后,在 main.js 中引入我们的 filters 方法集
import filter from "./filters" Vue.mixin(filter)
接下来,我们就可以在 .vue 的模板文件中随意使用自定义函数了
{{typeStatus | $_filterType}}包装插件接下来简单应用一下 Vue 中插件的制作方法。创建插件之后,就可以 Vue.use(myPlugin) 来使用了。
首先附上插件的 官方文档。
一句话解释,包装的插件需要一个 install 的方法将插件装载到 Vue 上。
关于 Vue.use() 的源码
function initUse (Vue) { Vue.use = function (plugin) { var installedPlugins = (this._installedPlugins || (this._installedPlugins = [])); if (installedPlugins.indexOf(plugin) > -1) { return this } // additional parameters var args = toArray(arguments, 1); args.unshift(this); if (typeof plugin.install === "function") { plugin.install.apply(plugin, args); } else if (typeof plugin === "function") { plugin.apply(null, args); } installedPlugins.push(plugin); return this }; }很直观的就看到他在最后调用了 plugin.install 的方法,我们要做的就是处理好这个 install 函数即可。
上代码
config.js 文件依旧需要,这里保存了所有状态码对应的转义文字
创建一个 myPlugin.js 文件,这个就是我们编写的插件
import { typeConfig } from "./config" myPlugin.install = (Vue) => { Vue.mixin({ filters: { $_filterType: (value) => { return typeConfig[value] || "type undefined" } } }) } export default myPlugin插件的 install 函数的第一个参数为 Vue 的实例,后面还可以传入一些自定义参数。
在 main.js 文件中,我们不用 Vue.mixin() 转而使用 Vue.use() 来完成插件的装载。
import myPlugin from "./myPlugin" Vue.use(myPlugin)至此,我们已经完成了一个小小的插件,并将我们的状态码转义过滤器放入了所有的 Vue 实例中,在 .vue 的模板文件中,我们可以使用 {{ typeStatus | $_filterType }} 来进行状态码转义了。
结语Vue.mixin() 可以将自定义的方法混入所有的 Vue 实例中。
本着快速开发的目的,一排脑门想到了这个方法,但是这是否是一个好方法有待考证,虽然不是说担心会对原先的代码造成影响,但是所有的 Vue 实例也包括了第三方模板。
本文可以随意转载,只要附上原文地址即可。
如果您认为我的博文对您有所帮助,请不吝赞赏,点赞也是让我动力满满的手段 =3=。
待完善 发布 npm 包 新增项 在 v-html 中骚骚的使用 filter (2018年05月28日)最近碰到一个问题,也是关于状态码过滤的,但是实现的效果是希望通过不同的状态码显示不同的 icon 图标,这个就不同于上面的文本过滤了,上文使用的 {{ styleStatus | $_filterStyleStatus }} 是利用 v-text 进行渲染,若碰到需要渲染 html 标签就头疼了。
按照前人的做法,是这样的,我随意上一段代码。
... ...不!这太不 fashion 太不 cool,我本能的拒绝这样的写法,但是,问题还是要解决,我转而寻找他法。
在看 Vue 的文档的时候,其中一个 API $options 官方文档 就引起了我的注意,我正好需要一个可以访问到当前的 Vue 实例的 API,一拍脑袋,方案就成了。
首先,还是在 config.js 文件中定义一个状态码对应对象,这里我们将其对应的内容设为 html 段落。
export const iconStatus = { 1: "", 2: "", 3: "", 4: "" }接着,我们在 filters.js 文件中引入他,写法还是和以前的 filters 一样。
import { iconStatus } from "./config" export default { $_filterIcon: (value) => { return iconStatus[value] || "icon undefined" } }重头戏在这里,我们在模板文件中需要渲染的地方,使用 v-html 来进行渲染。
大功告成,以后需要根据状态码来渲染 icon 的地方都可以通过这个办法来完成了。
事实证明,懒并不一定是错误的,关键看懒的方向,虽然本篇博客写的标题是 偷懒 ,但其实我只是对于重复性的无意义的搬运代码而感到厌烦,在寻找对应解决办法的时候可是一点都没偷懒,相反的,在寻求更快更好更方便的方法的时候,我逐渐找回了当初敲代码的乐趣。
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/95214.html
相关文章
vue中 利用混入定义全局变量、函数、筛选器
摘要:说一种没人发的,利用混入来实现全局变量和函数。这种方法优点是会有方法变量筛选器提示。一文件进行全局混入一文件,我是把方法变量筛选器这三个分别写到三个文件里面了,方便后期维护。 说一种没人发的,利用混入mixins来实现全局变量和函数。mixins里面的方法、变量、筛选器会和组件里面的方法、变量、筛选器合并。这种方法优点是ide会有方法、变量、筛选器提示。 一、main.js文件 imp...
JS每日一题: Vue中mixin怎么理解?
摘要:两个对象键名冲突时,取组件对象的键值对也使用同样的策略进行合并。代码理解全局混合也可以全局注册混合对象。注意使用一旦使用全局混合对象,将会影响到所有之后创建的实例为自定义的选项注入一个处理器。 20190122 Vue中mixin怎么理解? mixin是为了让可复用的功能灵活的混入到当前组件中,混合的对象可以包含任意组件选项(生命周期,指令之类等等), mixin翻译过来叫混合,高级的...
如何让一个vue项目支持多语言(vue-i18n)
摘要:引入是一个插件,主要作用就是让项目支持国际化多语言。所以新建一个文件夹,存放所有跟多语言相关的代码。目前包含三个文件。全局搜索发现一共有多个。 这两天手头的一个任务是给一个五六年的老项目添加多语言。这个项目庞大且复杂,早期是用jQuery实现的,两年前引入Vue并逐渐用组件替换了之前的Mustache风格模板。要添加多语言,不可避免存在很多文本替换的工作,这么庞杂的一个项目,怎么才能使...
发表评论
0条评论
阅读 2994·2021-10-27 14:15
阅读 2981·2021-09-07 10:18
阅读 1299·2019-08-30 15:53
阅读 1550·2019-08-26 18:18
阅读 3358·2019-08-26 12:15
阅读 3436·2019-08-26 10:43
阅读 616·2019-08-23 16:43
阅读 2175·2019-08-23 15:27