Vue_模块化开发

简介: Vue_模块化开发

1.为什么要模块化?

在网页开发的早期,js制作作为一种脚本语言,做一些简单的表单验证或动画实现等,那个时候代码还是很少的。

那个时候的代码是怎么写的呢?直接将代码写在<script>标签中即可

随着ajax异步请求的出现,慢慢形成了前后端的分离

客户端需要完成的事情越来越多,代码量也是与日俱增。

为了应对代码量的剧增,我们通常会将代码组织在多个js文件中,进行维护。

但是这种维护方式,依然不能避免一些灾难性的问题


60.png

  • 注:主要就是重名问题!!!!

2.解决方案——匿名函数

(function(){
  var flag=  true
})()

注:但是第二个问题,就是复用性降低。所以出现了es5后面的模块雏形

var ModuleA = (function(){
  //1.定义一个对象
  var obj = {}
  //2.在对象内部添加变量和方法
  obj.flag = true
  obj.myFunc = function(info){
    console.log(info);
  }
  //3.将对象返回
  return obj
})()


  • 我们做了什么事情呢?
  • 非常简单,在匿名函数内部,定义一个对象。
  • 给对象添加各种需要暴露到外面的属性和方法(不需要暴露的直接定义即可)。
  • 最后将这个对象返回,并且在外面使用了一个MoudleA接受


3.Vue模块化

常见的模块化规范:CommonJS、AMD、CMD,也有ES6的Modules


3.1 commenJS🛬(了解)

  • 应用在node环境下
  • 导出
module.exports = {
  flag: true,
  test(a,b){
    return a+b
  },
  demo(a,b){
    return a*b
  }
  • 导入
//Commenjs模块
let {test,demo,flag} = require('moduleA');
//等同于
let _mA = require('moduleA');
let test = _mA.test;
let demo= _mA.demo;
let flag= _mA.flag;

3.2 es6

  • index.html
  • 其中引入js,type属性表示每个js文件模块化,互不影响
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<script src='aaa.js' type="module"></script>
<script src='bbb.js' type="module"></script>
<script  src="mmm.js" type="module"></script>
</body>
</html>


  • aaa.js文件
  • 导出
let name = '小明'
let age = 18 
let flag = true
function sum(num1,num2){
    return num1 + num2;
} 
console.log("aaa.js");
if(flag){
    console.log(sum(20,30));
}
//1.导出方式一
//导出需要的变量
export{
    flag,sum
}
//2.导出方式二
export let num1 = 1000;
export let num2 = 2000;
//3.导出函数/类
export function mul(a,b){
    return a*b;
}
export class Person{
    run(){
        console.log('奔跑');
    }
}
//4.export default
//只能定义一个
const address = '北京市';
export default address
  • bbb.js
  • 导入
// 导入aaa的变量
import {sum} from './aaa.js'
console.log("bbb.js");
let name = "小红"
var flag = false
console.log(sum(20,52));


  • mmm.js
  • 导入
// 1.导入aaa中{}定义的变量
import {flag,sum} from './aaa.js'
console.log("mmm.js");
if(flag){
    console.log("小明是天才!!!");
    console.log(sum(20,30));
}
// 2.直接导入aaa中export定义的变量
import {num1,num2} from './aaa.js'
console.log(num1);
//3.导入export的function
import {mul,Person} from './aaa.js';
console.log(mul(30,50));
const p = new Person();
p.run();
//4.导入export default
import myOwn from './aaa.js'
console.log(myOwn);
//5.统一全部导入
import * as info from './aaa.js'
console.log(info.num1);



目录
相关文章
|
1月前
|
JavaScript
Vue中如何实现兄弟组件之间的通信
在Vue中,兄弟组件可通过父组件中转、事件总线、Vuex/Pinia或provide/inject实现通信。小型项目推荐父组件中转或事件总线,大型项目建议使用Pinia等状态管理工具,确保数据流清晰可控,避免内存泄漏。
208 2
|
4月前
|
人工智能 JavaScript 算法
Vue 中 key 属性的深入解析:改变 key 导致组件销毁与重建
Vue 中 key 属性的深入解析:改变 key 导致组件销毁与重建
645 0
|
4月前
|
JavaScript UED
用组件懒加载优化Vue应用性能
用组件懒加载优化Vue应用性能
|
3月前
|
JavaScript 安全
在 Vue 中,如何在回调函数中正确使用 this?
在 Vue 中,如何在回调函数中正确使用 this?
143 0
|
3月前
|
人工智能 JSON JavaScript
VTJ.PRO 首发 MasterGo 设计智能识别引擎,秒级生成 Vue 代码
VTJ.PRO发布「AI MasterGo设计稿识别引擎」,成为全球首个支持解析MasterGo原生JSON文件并自动生成Vue组件的AI工具。通过双引擎架构,实现设计到代码全流程自动化,效率提升300%,助力企业降本增效,引领“设计即生产”新时代。
299 1
|
4月前
|
JavaScript 前端开发 开发者
Vue 自定义进度条组件封装及使用方法详解
这是一篇关于自定义进度条组件的使用指南和开发文档。文章详细介绍了如何在Vue项目中引入、注册并使用该组件,包括基础与高级示例。组件支持分段配置(如颜色、文本)、动画效果及超出进度提示等功能。同时提供了完整的代码实现,支持全局注册,并提出了优化建议,如主题支持、响应式设计等,帮助开发者更灵活地集成和定制进度条组件。资源链接已提供,适合前端开发者参考学习。
404 17
|
4月前
|
JavaScript 前端开发 UED
Vue 表情包输入组件实现代码及详细开发流程解析
这是一篇关于 Vue 表情包输入组件的使用方法与封装指南的文章。通过安装依赖、全局注册和局部使用,可以快速集成表情包功能到 Vue 项目中。文章还详细介绍了组件的封装实现、高级配置(如自定义表情列表、主题定制、动画效果和懒加载)以及完整集成示例。开发者可根据需求扩展功能,例如 GIF 搜索或自定义表情上传,提升用户体验。资源链接提供进一步学习材料。
229 1
|
4月前
|
JavaScript API 开发者
Vue框架中常见指令的应用概述。
通过以上的详细解析,你应该已经初窥Vue.js的指令的威力了。它们是Vue声明式编程模型的核心之一,无论是构建简单的静态网站还是复杂的单页面应用,你都会经常用到。记住,尽管Vue提供了大量预定义的指令,你还可以创建自定义指令以满足特定的需求。为你的Vue应用程序加上这些功能增强器,让编码变得更轻松、更愉快吧!
81 1
|
4月前
|
存储 JavaScript 前端开发
如何高效实现 vue 文件批量下载及相关操作技巧
在Vue项目中,实现文件批量下载是常见需求。例如文档管理系统或图片库应用中,用户可能需要一次性下载多个文件。本文介绍了三种技术方案:1) 使用`file-saver`和`jszip`插件在前端打包文件为ZIP并下载;2) 借助后端接口完成文件压缩与传输;3) 使用`StreamSaver`解决大文件下载问题。同时,通过在线教育平台的实例详细说明了前后端的具体实现步骤,帮助开发者根据项目需求选择合适方案。
374 0
|
4月前
|
JavaScript 前端开发 UED
Vue 项目中如何自定义实用的进度条组件
本文介绍了如何使用Vue.js创建一个灵活多样的自定义进度条组件。该组件可接受进度段数据数组作为输入,动态渲染进度段,支持动画效果和内容展示。当进度超出总长时,超出部分将以红色填充。文章详细描述了组件的设计目标、实现步骤(包括props定义、宽度计算、模板渲染、动画处理及超出部分的显示),并提供了使用示例。通过此组件,开发者可根据项目需求灵活展示进度情况,优化用户体验。资源地址:[https://pan.quark.cn/s/35324205c62b](https://pan.quark.cn/s/35324205c62b)。
159 0

热门文章

最新文章