vue项目的分析--20211009--promise对象&import&export&ES6标准&import和require区别

分析vue项目先分析main.js文件找出项目挂载点和组件内容

main.js文件的分析

引入vue

import Vue from 'vue'

import 'babel-polyfill'//可以解决IE不显示问题

引入的时候没有路径的一般都默认是从node_modules里引入，具体是从哪里引入可以看配置文件

import OneUi from 'one-ui'
import 'one-ui/lib/theme-chalk/index.css'
import '@/styles/red-theme.css'
import locale from 'one-ui/lib/locale/lang/zh-CN' // lang i18n

js里import和require区别
两个都是模块化编程，css文件里一般使用@import
require是运行时加载，所以import命令没有办法代替require的动态加载功能。
import()函数可以完成动态加载

关于ES6
ES6是为了弥补ES5的不足，是js的一个版本标准，增加了类的概念等
https://www.runoob.com/w3cnote/es6-tutorial.html
https://www.runoob.com/w3cnote/es6-concise-tutorial.html

在ES6标准里，一个模块就是一个独立的js 文件，文件里定义的变量是无法被其他文件直接调用的，所以需要export和import功能，这是ES6模块的两个主要功能，export是暴露了对外输出本模块变量的一个接口，import用于加载含有export接口的模块

ES6模块希望尽量的静态化，是的编译的时候就可以确定模块的依赖关系以及输入输出的变量
require是CommonJS的语法，CommonJS的模块是对象，输入时必须查找对象属性，可以把模块对象和对象的方法同时引入成变量

// CommonJS模块
let {
    stat, exists, readFile } = require('fs');

// 等同于
let _fs = require('fs');
let stat = _fs.stat;
let exists = _fs.exists;
let readfile = _fs.readfile;

整体加载了一下fs模块生成一个——fs对象之后从对象上读取三个方法，这种就叫做运行时加载，只有运行的时候才可以得到这个对象，编译的时候无法做到静态化
ES6模块不是对象，所以使用export暴露出输出代码之后才可以使用import引入的

import {
    stat, exists, readFile } from 'fs';

从fs加载“stat, exists, readFile” 三个方法，其他方法不加载

ES6默认使用严格模式，无论是否声明“use strict”

顶层的this指向undefined，即不应该在顶层代码使用this

Object.assign()的使用

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/assign
写入的第一个参数是目标对象，会把写入的第二个对象融入到第一个对象里之后返回第一个对象

const target = {
    a: 1, b: 2 };
const source = {
    b: 4, c: 5 };

const returnedTarget = Object.assign(target, source);

console.log(target);
// expected output: Object { a: 1, b: 4, c: 5 }

console.log(returnedTarget);
// expected output: Object { a: 1, b: 4, c: 5 }

合并多个对象
https://www.jianshu.com/p/f9ec860ecd81

const o1 = {
    a: 1 };
const o2 = {
    b: 2 };
const o3 = {
    c: 3 };

const obj = Object.assign(o1, o2, o3);
console.log(obj); // { a: 1, b: 2, c: 3 }
console.log(o1);  // { a: 1, b: 2, c: 3 }, 注意目标对象自身也会改变。

其实就是对象的拷贝，o1就是目标对象，后面的是源对象，后面的属性等会拷贝到目标对象

合并具有相同属性的对象
1.属性被后续参数中具有相同属性的其他对象覆盖。
2.目标对象的属性与源对象的属性相同，源的会覆盖目标的属性

const o1 = {
    a: 1, b: 1, c: 1 };
const o2 = {
    b: 2, c: 2 };
const o3 = {
    c: 3 };
const obj = Object.