在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 相关文章推荐
可选择和输入的下拉列表框示例
Nov 05 Javascript
JS绘制生成花瓣效果的方法
Aug 05 Javascript
jQuery实现动画效果circle实例
Aug 06 Javascript
移动端 一个简单易懂的弹出框
Jul 06 Javascript
原生js实现鼠标跟随效果
Feb 28 Javascript
移动端使用localResizeIMG4压缩图片
Apr 22 Javascript
浅谈vue自定义全局组件并通过全局方法 Vue.use() 使用该组件
Dec 07 Javascript
vue中使用iview自定义验证关键词输入框问题及解决方法
Mar 26 Javascript
element ui 表格动态列显示空白bug 修复方法
Sep 04 Javascript
一个小时快速搭建微信小程序的方法步骤
Apr 15 Javascript
JavaScript前端页面搜索功能案例【基于jQuery】
Jul 10 jQuery
js实现列表向上无限滚动
Jan 13 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面向对象的方法重载两种版本比较
2008/09/08 PHP
php 文件上传后缀名与文件类型对照表(几乎涵盖所有文件)
2010/05/16 PHP
PHP学习 变量使用总结
2011/03/24 PHP
php二维数组排序与默认自然排序的方法介绍
2013/04/27 PHP
深入解析php之sphinx
2013/05/15 PHP
浅谈web上存漏洞及原理分析、防范方法(安全文件上存方法)
2013/06/29 PHP
php中实现可以返回多个值的函数实例
2015/03/21 PHP
thinkPHP多域名情况下使用memcache方式共享session数据的实现方法
2016/07/21 PHP
PHP基于curl后台远程登录正方教务系统的方法
2016/10/14 PHP
php使用curl_init()和curl_multi_init()多线程的速度比较详解
2018/08/15 PHP
javascript计算当月剩余天数(天数计算器)示例代码
2014/01/09 Javascript
把文本中的URL地址转换为可点击链接的JavaScript、PHP自定义函数
2014/07/29 Javascript
推荐 21 款优秀的高性能 Node.js 开发框架
2014/08/18 Javascript
JavaScript AJAX之惰性载入函数
2014/08/27 Javascript
判断在css加载完毕后执行后续代码示例
2014/09/03 Javascript
node.js中实现同步操作的3种实现方法
2014/12/05 Javascript
jquery实现侧边弹出的垂直导航
2014/12/09 Javascript
javascript顺序加载图片的方法
2015/07/18 Javascript
微信小程序 小程序制作及动画(animation样式)详解
2017/01/06 Javascript
jQuery动态追加页面数据以及事件委托详解
2017/05/06 jQuery
微信小程序页面上下滚动效果
2020/11/18 Javascript
简单介绍Python中的len()函数的使用
2015/04/07 Python
python thrift搭建服务端和客户端测试程序
2018/01/17 Python
Python实现PS滤镜Fish lens图像扭曲效果示例
2018/01/29 Python
Sanic框架蓝图用法实例分析
2018/07/17 Python
Django 接收Post请求数据,并保存到数据库的实现方法
2019/07/12 Python
python 给图像添加透明度(alpha通道)
2020/04/09 Python
学生自我鉴定模板
2013/12/30 职场文书
心理健康教育制度
2014/01/27 职场文书
工作会议方案
2014/05/21 职场文书
工地食品安全责任书
2015/05/09 职场文书
2015年底工作总结范文
2015/05/15 职场文书
2015年电气技术员工作总结
2015/07/24 职场文书
导游词之西江千户苗寨
2019/12/24 职场文书
剑指Offer之Java算法习题精讲二叉树专项训练
2022/03/21 Java/Android
Pillow图像处理库安装及使用
2022/04/12 Python