Vue学习笔记——前端模块化

视频资源来自：b站coderwhy王红元老师——最全最新Vue、Vuejs教程，从入门到精通
文件仅为个人观看视频后的学习心得笔记，用于个人查看和记录保存。文中定有疏漏错误之处，恳请指正。

本节目录：
为什么需要模块化

前端模块化

为什么需要模块化

JavaScript原始功能

js文件太多，可能造成变量冲突。

加载的顺序不同，可能造成覆盖

匿名函数的解决方案

使用闭包，把函数括起来

(function () {
  var name = '小红';
  var flag = false;
  console.log(name);
}
 function sum(aa,bb) {
  return aa+bb
}
)()

使用模块作为出口

//main.js
;(function () {
  //1.想使用flag
  if(moduleA.flag){
    console.log('小明是天才');
  }
  //2.使用sum函数
  console.log(moduleA.sum(20,30));
}
)()

//aaa.js
var moduleA=(function () { //模块化！不同的模块这个名字必须不同，不然就冲突了
  //导出的对象
  var obj= {}
  var name = '小红';
  var flag = true;
  function sum(a,b){
    return a+b
  }
  
  //要导出的东西写在这。没导出别人就用不了
  obj.flag = flag;
  obj.sum = sum;
  return obj
  }
)()

常见的模块化规范：CommonJS、AMD、CMD、ES6的Modules

CommonJS（了解）

模块化两个核心：导出、导入

//ES6对象的增强写法，导出 exports ！
module.exports = {
  flag:flag,
  sum:sum
}

//解析对象 require！！

//方法1
var aaa = require('./aaa.js')
var flag=aaa.flag;
//方法2
var {flag,sum} = require('./aaa.js')

ES6的export指令

导入的{}中定义的变量

let name = '小明'
var age = 18
var flag = true

function  sum(num1,num2) {
  return num1+num2
}

if(flag){
  console.log(sum(20,30))
}

//复杂写法失败了，暂时只用简便写法
export  {
  flag,sum
}

import {flag,sum} from "./aaa.js"

if(flag)
{
  console.log(sum(10,20))
}

另一种导出方式：直接导入export定义的变量

export  var num1=1000;
export  var height=1.88;

import {num1,height} from "./aaa.js"
console.log(num1+' '+height)

导出函数/类：export的function

export function mul(num1,num2) {
  return num1*num2
}

export class Person {
  run(){
    console.log("run")
  }
}

import {mul,Person} from "./aaa.js";
console.log(mul(10,20))

const p=new Person();
p.run()

自己命名导入的数据叫什么：export default

默认导出，全模块最多只能有一个

const address='北京市'
export default address

import addr from "./aaa.js";
console.log(addr)

统一全部导入

*：通配符

import * as aa from "./aaa.js"
console.log(aa.flag)

总目录：
邂逅Vuejs
Vue基础语法
组件化开发
前端模块化
webpack详解
Vue CLI详解
vue-router
Promise的使用
Vuex详解
网络模块封装
项目实战