在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 相关文章推荐
使用新的消息弹出框blackbirdjs
Oct 16 Javascript
可选择和输入的下拉列表框示例
Nov 05 Javascript
js中用window.open()打开多个窗口的name问题
Mar 13 Javascript
jQuery+canvas实现的球体平抛及颜色动态变换效果
Jan 28 Javascript
浅谈js基本数据类型和typeof
Aug 09 Javascript
jquery popupDialog 使用 加载jsp页面的方法
Oct 25 Javascript
微信小程序动态的加载数据实例代码
Apr 14 Javascript
JS Math对象与Math方法实例小结
Jul 05 Javascript
关于vue.js中实现方法内某些代码延时执行
Nov 14 Javascript
Vue中fragment.js使用方法小结
Feb 17 Javascript
创建与框架无关的JavaScript插件
Dec 01 Javascript
js实现简单的倒计时
Jan 28 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
js下函数般调用正则的方法附代码
2008/06/22 PHP
PHP 函数学习简单小结
2010/07/08 PHP
php中批量修改文件后缀名的函数代码
2011/10/23 PHP
Windows和Linux中php代码调试工具Xdebug的安装与配置详解
2014/05/08 PHP
功能强大的PHP POST提交数据类
2016/07/15 PHP
PHP提取字符串中的手机号正则表达式怎么写
2017/07/17 PHP
php大小写转换函数(strtolower、strtoupper)用法介绍
2017/11/17 PHP
javascript 得到变量类型的函数
2010/05/19 Javascript
火狐textarea输入法的bug的触发及解决
2013/07/24 Javascript
jquery插件冲突(jquery.noconflict)解决方法分享
2014/03/20 Javascript
JS下载文件|无刷新下载文件示例代码
2014/04/17 Javascript
jQuery实现手机上输入后隐藏键盘功能
2017/01/04 Javascript
vue.js项目中实用的小技巧汇总
2017/11/29 Javascript
仿京东快报向上滚动的实例
2017/12/13 Javascript
jQuery设置下拉框显示与隐藏效果的方法分析
2019/09/15 jQuery
Vue+scss白天和夜间模式切换功能的实现方法
2021/01/05 Vue.js
[05:17]DOTA2誓师:今天我们在这里 明天TI4等我!
2014/03/26 DOTA
Python(Tornado)模拟登录小米抢手机
2013/11/12 Python
python实现的简单窗口倒计时界面实例
2015/05/05 Python
遍历python字典几种方法总结(推荐)
2016/09/11 Python
python getopt详解及简单实例
2016/12/30 Python
Python关于excel和shp的使用在matplotlib
2019/01/03 Python
Python一行代码实现快速排序的方法
2019/04/30 Python
python调用其他文件函数或类的示例
2019/07/16 Python
Python爬虫实现的根据分类爬取豆瓣电影信息功能示例
2019/09/15 Python
python3中利用filter函数输出小于某个数的所有回文数实例
2019/11/24 Python
解决使用python print打印函数返回值多一个None的问题
2020/04/09 Python
HTML5中的新元素介绍
2008/10/17 HTML / CSS
10个最常见的HTML5面试题 附答案
2016/06/06 HTML / CSS
世界上最大的餐具公司:Oneida
2016/12/17 全球购物
铭立家具面试题
2012/12/06 面试题
常用UNIX 命令(Linux的常用命令)
2015/12/26 面试题
中文专业毕业生自荐信
2013/10/28 职场文书
2013年保送生自荐信格式
2013/11/20 职场文书
十一国庆节“向国旗敬礼”主题班会活动方案
2014/09/27 职场文书
Django 如何实现文件上传下载
2021/04/08 Python