vue模块化

你的名字 2022-12-29 01:47 191阅读 0赞

# vue模块化 #

故心故心故心故心小故冲啊

--------------------

### 文章目录 ###

*  vue模块化
 *  定义
 *  模块的优点
 *  CommonJS AMD/CMD
 *  ES6模块(module)
 *   *  导出export 一个
     *  导出export 多个
     *  导出export 别名
     *  导出export default 仅有一个
     *  export 和export default
     *  定义公共数据
     *  定义公共函数
     *  图片的导入
 *  common.js和ES6模块区别

--------------------

# 定义 #

模块通常是指编程语言所提供的代码组织机制，利用此机制可将程序拆解为独立且通用的代码单元。所谓模块化主要是解决代码分割、作用域隔离、模块之间的依赖管理以及发布到生产环境时的自动化打包与处理等多个方面。

简单的说：模块化就是将变量和函数 放入不同的文件中；

# 模块的优点 #

1.可维护性。 因为模块是独立的，一个设计良好的模块会让外面的代码对自己的依赖越少越好，这样自己就可以独立去更新和改进。

2.命名空间。 在 JavaScript 里面，如果一个变量在最顶级的函数之外声明，它就直接变成全局可用。因此，常常不小心出现命名冲突的情况。使用模块化开发来封装变量，可以避免污染全局环境。

3.重用代码。 我们有时候会喜欢从之前写过的项目中拷贝代码到新的项目，这没有问题，但是更好的方法是，通过模块引用的方式，来避免重复的代码库。

# CommonJS AMD/CMD #

CommonJS是一种规范，其内容有很多种，NodeJS是这种规范的实现。SeaJS是模块加载器，是用CMD规范  
AMD/CMD是从 CommonJS 讨论中诞生的，  
RequireJS 遵循 AMD（异步模块定义）规范，  
Sea.js 遵循 CMD （通用模块定义）规范；  
规范的不同，导致了两者 API 不同。

AMD 提前执行：提前异步并行加载  
优点：尽早执行依赖可以尽早发现错误；  
缺点：容易产生浪费

CMD 延迟执行：延迟按需加载  
优点：减少资源浪费  
缺点：等待时间长、出错时间延后

扩展：

RequireJS 是一个前端的模块化管理的工具库，遵循AMD规范,通过一个函数来将所有所需要的或者说所依赖的模块实现装载进来，然后返回一个新的函数（模块），我们所有的关于新模块的业务代码都在这个函数内部操作，其内部也可无限制的使用已经加载进来的以来的模块。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTU1ODU0_size_16_color_FFFFFF_t_70]  
CMD  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTU1ODU0_size_16_color_FFFFFF_t_70 1]

# ES6模块(module) #

模块Module  
一个模块，就是一个对其他模块暴露自己的属性或者方法的文件。  
导出Export  
作为一个模块，它可以选择性地给其他模块暴露（提供）自己的属性和方法，供其他模块使用。

## 导出export 一个 ##

export const x = 20;
    
    导入
    import {x} from './views/moduleE'

## 导出export 多个 ##

var name = 'amy';
    var age = 18;
    var hobby = '购物';
    export {name, age, hobby};
    
    导入
    import {name, age, hobby} from './views/moduleA'

## 导出export 别名 ##

var name = 'amy';
    var age = 18;
    var hobby = '购物';
    export { name as v1, age as v2, hobby as v3};
    
    导入
    import {v1, v2, v3} from './views/moduleA';

## 导出export default 仅有一个 ##

export default {name:'abc',hobby:'games'}
    
    导入
    import obj from './views/moduleD'

## export 和export default ##

export default {name:'abc',id:1};
    
     var x = 100;
     var y = 1000;
    
     export  {x as v1,y as v2}  
     
     导入
    import box,{v1,v2} from './views/moduleD'

## 定义公共数据 ##

//性别
    export const sexData = [
        { key: 'man', value: '男' },
        { key: 'woman', value: '女' }
      ];
      //用户
    export const userData = [
        { id: '1', value: 'name1' },
        { id: '2', value: 'name2' }
      ];
      
    导入
    import {sexData,userData} from './views/moduleB'

## 定义公共函数 ##

## 图片的导入 ##

1、页面直接引入

2、通过import的方式

import img1 from '@/assets/img/1.jpg'  //导入图片
    <img  :src="img1" /></div>

3、通过require的方式

data () {
        return {
          img:[require("@/assets/img/1.jpg"),
               require("@/assets/img/2.jpg")]
    
        }
      },

# common.js和ES6模块区别 #

node使用的是commonjs 在使用模块的时候是运行时同步加载的 拷贝模块中的对象

模块可以多次加载，但只会在第一次加载 之后会被缓存 引入的是缓存中的值

1.commonjs输出的，是一个值的拷贝，而es6输出的是值的引用；

2.commonjs是运行时加载，es6是编译时输出接口；

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTU1ODU0_size_16_color_FFFFFF_t_70]: /images/20221120/80288ed5b34245cdb2c50c04c17c3d63.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTU1ODU0_size_16_color_FFFFFF_t_70 1]: /images/20221120/cedc48f83465433d83aafa25d2b49056.png