在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 学习笔记(九)call和apply方法
Jan 11 Javascript
JQuery 实现在同一页面锚点链接之间的平滑滚动
Oct 29 Javascript
JQuery异步获取返回值中文乱码的解决方法
Jan 29 Javascript
javascript实现获取服务器时间
May 19 Javascript
JQuery中DOM事件合成用法实例分析
Jun 13 Javascript
jQuery实现鼠标跟随提示层效果代码(可显示文本,Div,Table,Html等)
Apr 18 Javascript
picLazyLoad 实现图片延时加载(包含背景图片)
Jul 21 Javascript
JS实现的汉字与Unicode码相互转化功能分析
May 25 Javascript
vuex + axios 做登录验证 并且保存登录状态的实例
Sep 16 Javascript
浅谈React Native 传参的几种方式(小结)
May 21 Javascript
使用JQuery自动完成插件Auto Complete详解
Jun 18 jQuery
vue拖拽组件 vuedraggable API options实现盒子之间相互拖拽排序
Jul 08 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
两个强悍的php 图像处理类1
2009/06/15 PHP
PHP多个文件上传到服务器实例
2014/10/29 PHP
php遍历目录方法小结
2015/03/10 PHP
详解php中 === 的使用
2016/10/24 PHP
PHP7扩展开发之基于函数方式使用lib库的方法详解
2018/01/15 PHP
laravel 自定义常量的两种方案
2019/10/14 PHP
jQuery的deferred对象使用详解
2011/08/20 Javascript
jquery显示和隐藏div特效实例
2013/02/27 Javascript
javascript ie6兼容position:fixed实现思路
2013/04/01 Javascript
千分位数字格式化(用逗号隔开 代码已做了修改 支持0-9位逗号隔开)的JS代码
2013/12/05 Javascript
浅谈轻量级js模板引擎simplite
2015/02/13 Javascript
JS实现的通用表单验证插件完整实例
2015/08/20 Javascript
Jquery+Ajax+PHP+MySQL实现分类列表管理(下)
2015/10/28 Javascript
jquery radio的取值_radio的选中_radio的重置方法
2016/09/20 Javascript
JavaScript中的ajax功能的概念和示例详解
2016/10/17 Javascript
详解一个基于react+webpack的多页面应用配置
2019/01/21 Javascript
详解原生JS回到顶部
2019/03/25 Javascript
JavaScript实现的弹出遮罩层特效经典示例【基于jQuery】
2019/07/10 jQuery
通过Kettle自定义jar包供javascript使用
2020/01/29 Javascript
利用python发送和接收邮件
2016/09/27 Python
Pyqt实现无边框窗口拖动以及窗口大小改变
2018/04/19 Python
浅析python内置模块collections
2019/11/15 Python
迪卡侬印度官网:购买所有体育用品
2017/06/24 全球购物
英国领先的名牌服装折扣零售商:Brown Bag Clothing
2019/01/08 全球购物
JavaScript获取当前url根目录(路径)
2014/02/19 面试题
20年同学聚会感言
2014/02/03 职场文书
企业标语口号
2014/06/10 职场文书
合作意向书
2014/07/30 职场文书
2014年外贸业务员工作总结
2014/12/11 职场文书
公司开除员工通知
2015/04/22 职场文书
2015年初一班主任工作总结
2015/05/13 职场文书
关于社会实践的心得体会(2016最新版)
2016/01/25 职场文书
求职信:求职应该注意的问题
2019/04/24 职场文书
FP-growth算法发现频繁项集——构建FP树
2021/06/24 Python
美元符号 $
2022/02/17 杂记
漫画《催眠麦克风-Dawn Of Divisions》第二卷PV公开
2022/04/05 日漫