在vue.js中抽出公共代码的方法示例
前言
当我们在使用vue构建中大型项目时,通常会遇到某些经常用的方法以及属性,比如说搭建一个员工管理系统,请求的url需要一个共同的前缀,或者在某几个view中需要用到时间,这个时间是通过某方法格式化之后的等等,如果每次用到都写共同的代码,那样如果之后有变动的话维护起来会非常麻烦。
所以我们就得想办法抽出公共代码,因为vue是组件化开发,我们就会很自然的与es6的module模块化联系到一起。其实当我们在搭建项目结构时就应该先提前埋下伏笔,有一个util文件夹,里面放的就是我们要写的公共代码,其实很多vue的例子都是类似于这种结构搭建的。
对于固定的配置参数我们可以放到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' 这里面是指引入哪个模块。
总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对脚本之家的支持。
- MyBatis魔法堂:即学即用篇
- 【设计模式】—— 状态模式State
- php环境无法上传文件的解决方法
- Java魔法堂:JUnit4使用详解
- Windows魔法堂:解决“由于启动计算机时出现页面文件配置问题.......”
- Java魔法堂:自定义和解析注解
- 【Hibernate那点事儿】—— Hibernate应该了解的知识
- 【Hibernate那点事儿】—— Hibernate应该了解的知识
- Java魔法堂:以Windows服务的形式运行Java程序
- 【Hibernate那点事儿】—— Hibernate知识总结
- java获取网页源代码
- Java魔法堂:注解用法详解——@SuppressWarnings
- 日志那点事儿——slf4j源码剖析
- 给Dreamweaver插上Svn的翅膀
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Python爬虫实战练习:爬取美团旅游景点评论数据
- Python爬虫实战:爬取链家网二手房数据
- 前端模块化开发--ES6相关知识
- (一)ROS开发平台环境搭建与测试
- 前端模块化开发--Node基础&&WebPack模块化开发
- CNN神经网络--手写数字识别
- 关于模型预测结果好坏的几个评价指标
- SpringBoot微服务架构项目--Union社交平台
- 如何衡量前端基建的效能价值?
- mbedtls | 移植mbedtls库到STM32裸机的两种方法
- 实用小技巧 | 用socket玩转http接口
- 深度学习之人脸识别模型--FaceNet
- Java常用的设计模式
- HW防守|应急溯源分析手册汇总篇
- Python进阶(一)