在vue.js中抽出公共代码的方法示例


Posted in Javascript onJune 08, 2017

前言

当我们在使用vue构建中大型项目时,通常会遇到某些经常用的方法以及属性,比如说搭建一个员工管理系统,请求的url需要一个共同的前缀,或者在某几个view中需要用到时间,这个时间是通过某方法格式化之后的等等,如果每次用到都写共同的代码,那样如果之后有变动的话维护起来会非常麻烦。

所以我们就得想办法抽出公共代码,因为vue是组件化开发,我们就会很自然的与es6的module模块化联系到一起。其实当我们在搭建项目结构时就应该先提前埋下伏笔,有一个util文件夹,里面放的就是我们要写的公共代码,其实很多vue的例子都是类似于这种结构搭建的。

在vue.js中抽出公共代码的方法示例

对于固定的配置参数我们可以放到config.js中,就像下面这样。

const config = {
 request_prefix: 'http://localhost:10003',
 base_img: 'http://www.baidu.com',
 
}

const DingConf = function(data){
 xxxxxxxxx
}


export {config, DingConf}

对于常用的工具函数我们可以放到util.js中,结构跟上面一样。

然后为什么我要用export来导出,而不用export default呢?

因为前者更为灵活,因为对于大中型项目来说,我们的工具函数以及配置参数往往较多,如果我们使用export default导出的话,在组件中引入就会全部引入,但我们的需求是只在相应的页面中按需引入即可,所以在vue文件中,我们就可以这样写

import {config} from 'src/util/config'      // 引入模块
export default {
created(){


this.$http({



url: config.request_prefix + xxxxxxxxxxxxx  // 使用


})

}
}

这样写的优点是增强了可读性并利于维护。如果有同学不太理解es6中的import,export,建议大家去看下阮一峰大神的es6入门教程,在这里我也简单的说下吧,因为vue是模块化,所以就得导出某些东东,然后每个模块只负责不同的业务,所以嘛我们最后就得export一下,因为const是不变的常量,所以在配置项中尽可能用这个,在工具函数中用let声明变量,然后import后面的{ ... }就是引入某个模块的某些属性或方法,from 'xxxx' 这里面是指引入哪个模块。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
使用JavaScript switch case 另类写法
Mar 14 Javascript
JS 显示当前日期与时间的代码
Mar 24 Javascript
Jquery Ajax的Get方式时需要注意URL地方
Apr 07 Javascript
js格式化货币数据实现代码
Sep 04 Javascript
jquery实现弹出层遮罩效果的简单实例
Mar 03 Javascript
JavaScript获取某年某月的最后一天附截图
Jun 23 Javascript
关于在Servelet中如何获取当前时间的操作方法
Jun 28 Javascript
jquery.uploadifive插件怎么解决上传限制图片或文件大小问题
May 08 jQuery
关于Bootstrap按钮组件消除黄框的方法
May 19 Javascript
vue better scroll 无法滚动的解决方法
Jun 07 Javascript
微信小程序时间戳转日期的详解
Apr 30 Javascript
如何通过vscode运行调试javascript代码
Jul 24 Javascript
Ionic3 UI组件之autocomplete详解
Jun 08 #Javascript
jQuery+ajax实现局部刷新的两种方法
Jun 08 #jQuery
gulp解决跨域的配置文件问题
Jun 08 #Javascript
angular 用拦截器统一处理http请求和响应的方法
Jun 08 #Javascript
jQuery 添加样式属性的优先级别方法(推荐)
Jun 08 #jQuery
Ionic项目中Native Camera的使用方法
Jun 07 #Javascript
详解angular ui-grid之过滤器设置
Jun 07 #Javascript
You might like
PHP5.3新特性小结
2016/02/14 PHP
解决php 处理 form 表单提交多个 name 属性值相同的 input 标签问题
2017/05/11 PHP
详解php几行代码实现CSV格式文件输出
2017/07/01 PHP
php使用imagecopymerge()函数创建半透明水印
2018/01/25 PHP
PHP 进程池与轮询调度算法实现多任务的示例代码
2019/11/26 PHP
js加解密 脚本解密
2008/02/22 Javascript
javascript各浏览器中option元素的表现差异
2011/04/07 Javascript
Jquery中Event对象属性小结
2015/02/27 Javascript
js实现仿阿里巴巴城市选择框效果实例
2015/06/24 Javascript
JavaScript记录光标在编辑器中位置的实现方法
2016/04/22 Javascript
jquery获取table指定行和列的数据方法(当前选中行、列)
2016/11/07 Javascript
jQuery 出现Cannot read property ‘msie’ of undefined错误的解决方法
2016/11/23 Javascript
js正则表达式惰性匹配和贪婪匹配用法分析
2016/12/26 Javascript
JavaScript中click和onclick本质区别与用法分析
2018/06/07 Javascript
使用webpack搭建vue项目及注意事项
2019/06/10 Javascript
JS实现密码框效果
2020/09/10 Javascript
[49:12]完美世界DOTA2联赛PWL S2 Magma vs GXR 第二场 11.29
2020/12/02 DOTA
Python EOL while scanning string literal问题解决方法
2020/09/18 Python
python下如何查询CS反恐精英的服务器信息
2017/01/17 Python
LRUCache的实现原理及利用python实现的方法
2017/11/21 Python
Python使用jsonpath-rw模块处理Json对象操作示例
2018/07/31 Python
在cmd中查看python的安装路径方法
2019/07/03 Python
Django命名URL和反向解析URL实现解析
2019/08/09 Python
Flask框架学习笔记之模板操作实例详解
2019/08/15 Python
jupyter notebook实现显示行号
2020/04/13 Python
keras topN显示,自编写代码案例
2020/07/03 Python
详解python安装matplotlib库三种失败情况
2020/07/28 Python
大学生自我鉴定
2013/12/08 职场文书
八年级英语教学反思
2014/01/09 职场文书
2014年设备管理工作总结
2014/11/26 职场文书
文案策划岗位职责
2015/02/11 职场文书
2015年幼儿园保育工作总结
2015/05/12 职场文书
不服劳动仲裁起诉书
2015/05/20 职场文书
2015年员工试用期工作总结
2015/05/28 职场文书
2016年优秀少先队员事迹材料
2016/02/26 职场文书
Golang 正则匹配效率详解
2021/04/25 Golang