在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 相关文章推荐
屏蔽鼠标右键、Ctrl+n、shift+F10、F5刷新、退格键 的javascript代码
Apr 01 Javascript
jQuery 表单验证插件formValidation实现个性化错误提示
Jun 23 Javascript
AngularJS equal比较对象实例详解
Sep 14 Javascript
JS判断一个数是否是水仙花数
Jun 11 Javascript
Vue使用vue-cli创建项目
Sep 01 Javascript
浅谈Angular4实现热加载开发旅程
Sep 08 Javascript
3种vue路由传参的基本模式
Feb 22 Javascript
vue router动态路由下让每个子路由都是独立组件的解决方案
Apr 24 Javascript
详解javascript中的变量提升和函数提升
May 24 Javascript
学习LayUI时自研的表单参数校验框架案例分析
Jul 29 Javascript
ES6中异步对象Promise用法详解
Jul 31 Javascript
vue图片裁剪插件vue-cropper使用方法详解
Dec 16 Vue.js
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
php实现的mongodb操作类实例
2015/04/03 PHP
Zend Framework教程之模型Model用法简单实例
2016/03/04 PHP
PHP学习笔记之php文件操作
2016/06/03 PHP
PHP实现电商订单自动确认收货redis队列
2017/05/17 PHP
PHP7 参数处理机制修改
2021/03/09 PHP
jquery 学习笔记一
2010/04/07 Javascript
jquery刷新页面的实现代码(局部及全页面刷新)
2011/07/11 Javascript
firebug的一个有趣现象介绍
2011/11/30 Javascript
jQuery ui插件的使用方法代码实例
2013/05/08 Javascript
JS 退出系统并跳转到登录界面的实现代码
2013/06/29 Javascript
jquery高级编程的最佳实践详解
2014/03/23 Javascript
JQuery对表格进行操作的常用技巧总结
2014/04/23 Javascript
让alert不出现弹窗的两种方法
2014/05/18 Javascript
javascript移动设备Web开发中对touch事件的封装实例
2014/06/05 Javascript
如何使用HTML5地理位置定位功能
2015/04/27 Javascript
Bootstrap Paginator分页插件与ajax相结合实现动态无刷新分页效果
2016/05/27 Javascript
Angular实现购物车计算示例代码
2017/02/21 Javascript
如何使用七牛Python SDK写一个同步脚本及使用教程
2015/08/23 Python
老生常谈进程线程协程那些事儿
2017/07/24 Python
python将文本分每两行一组并保存到文件
2018/03/19 Python
python 用所有标点符号分隔句子的示例
2019/07/15 Python
Python如何筛选序列中的元素的方法实现
2019/07/15 Python
在vscode中配置python环境过程解析
2019/09/28 Python
如何基于python实现归一化处理
2020/01/20 Python
python打开文件的方式有哪些
2020/06/29 Python
Moda Operandi官网:美国奢侈品电商,海淘秀场T台同款
2020/05/26 全球购物
综合素质的自我鉴定
2013/10/07 职场文书
大学生活动策划方案
2014/02/10 职场文书
2014年六一儿童节演讲稿
2014/05/23 职场文书
公司市场专员岗位职责
2014/06/29 职场文书
作风建设年活动总结
2014/08/27 职场文书
医德医风自我评价
2014/09/19 职场文书
2015年“我们的节日·重阳节”活动总结
2015/07/29 职场文书
初三数学教学反思
2016/02/17 职场文书
Python 可迭代对象 iterable的具体使用
2021/08/07 Python
python中filter,map,reduce的作用
2022/06/10 Python