vuejs项目函数封装,回调

原创 zxsclq 随笔 前端基础 456阅读 2018-02-26 10:37:38 举报

封装

封装,简单来说,就是把一个多次运用的函数,给单独放在一个js文件里边,然后使用的时候调用即可。普通的js这个感念啥的,大家都懂。vuejs里边最简单的封装,即页面上的封装,如下所示。

公共文件的封装,我们会把对应的东西放在,放在一个固定的js文件内,当我们需要的时候,在文件里边调用即可,常量:const mes = '123'.其中const为常量索引,类似于我们设置的变量,在我们这个页面上,mes就能代替123,简单来看实例。
输出:ES6将一个文件视为一个模块,上面的模块通过 export 向外输出了一个变量。

常量封装

举例说明,我现在用到的项目,前后分离,所有所有的数据交互都用到axios以及api。首先,调用axio的时候,我们会用到url路径

以上就是常亮的封装,说白了,就是吧一堆出不多的放在一起,好维护。

函数封装

函数封装,其实和常量封装类,将公共的函数放在固定的js里边,然后调用。这个时候就会存在全引入差异

备注:引入的时候,可以不带参数

封装回调

上边所说的两种方法,均是不需要做回调处理的方式,什么时候需要回调处理呢?就比如说,我一个页面上,调用axios获取数据,我现在把axios封装在公共文件内,然后调用成功之后,我这个获取的数据,需要回到调用的页面上来,然后放到对应的数组,最后呈现在页面上。
这种写法如下,

后边的put和delete这两种我就不写了,自己去琢磨一下,希望高手指出不足,并优化

评论 ( 4 )
最新评论
大神M 2F 2018-02-26 13:49:52 4F

有问题再请教!

大神M 2F 2018-02-26 13:49:27 3F

没问题!

zxsclq 1F 2018-02-26 13:26:24 2F

共勉,有啥问题可以提出来一起讨论

大神M 2018-02-26 12:50:11 1F

写的清楚,受教,最近也在学习vue