2021-07-14

webpack原理配置

webpack是高度可配置的,是一个打包模块化js的工具，可以通过loader转换文件，通过plugin扩展功能。

一、入口（entry）：入口起点（entry point）指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始。进入入口起点后， webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的。* 每个依赖项随即被处理，最后输出到称之为 bundles 的文件中。*

    //可以通过在 webpack.config.js 文件中配置 entry 属性，来指定一个入口起点:
    module.exports = {
        entry : './path/to/my/entry/files.js'
    }

二、 输出（output）:告诉 webpack 在哪里输出它所创建的 bundles ，以及如何命名这些文件。

    module.exports = {
        output: {
             path       : './dist',
             //按需加载(on-demand-load)或加载外部资源(external resources)（如图片、文件等）
             publicPath : '/dist', 
             filename   : 'js/[name].js'
        }
    }
代码解释：
1.通过 output.filename和output.path属性，来告诉 webpack bundle 的名称，以及我们想要生成（emit）到哪里。

三、loader：让 webpack 能够处理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）。loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块，然后就可以利用 webpack 的打包能力，对它们进行处理。

四、 插件（plugins）：插件的目的在于解决 loader 无法实现的其他事。

webpack 插件是一个具有 apply属性的 JavaScript 对象。apply属性会被webpack compiler 调用，并且 compiler 对象可在整个编译生命周期访问。

Function.prototype.apply：通过这个方法可以把任意函数作为插件传递（this将指向compiler）。

webpack的构建流程是什么?从读取配置到输出文件这个过程尽量说全

Webpack 的运行流程是一个串行的过程，从启动到结束会依次执行以下流程：

（1）初始化参数：从配置文件和 Shell 语句中读取与合并参数，得出最终的参数；

（2）开始编译：用上一步得到的参数初始化 Compiler 对象，加载所有配置的插件，执行对象的 run 方法开始执行编译；

（3）确定入口：根据配置中的 entry 找出所有的入口文件；

（4）编译模块：从入口文件出发，调用所有配置的 Loader 对模块进行翻译，再找出该模块依赖的模块，再递归本步骤直到所有入口依赖的文件都经过了本步骤的处理；

（5）完成模块编译：在经过第4步使用 Loader 翻译完所有模块后，得到了每个模块被翻译后的最终内容以及它们之间的依赖关系；

（6）输出资源：根据入口和模块之间的依赖关系，组装成一个个包含多个模块的 Chunk，再把每个 Chunk 转换成一个单独的文件加入到输出列表，这步是可以修改输出内容的最后机会；

（7）输出完成：在确定好输出内容后，根据配置确定输出的路径和文件名，把文件内容写入到文件系统。

在以上过程中，Webpack 会在特定的时间点广播出特定的事件，插件在监听到感兴趣的事件后会执行特定的逻辑，并且插件可以调用 Webpack 提供的 API 改变 Webpack 的运行结果。

————————————————
版权声明：本文为CSDN博主「野野YE」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/u014490083/article/details/79423065

打包的原理 npm run build 以什么方法打包的

let const var 区别

1，什么时候提出的？

var是ES5提出的，let和const是ES6提出的。

2，是否存在变量提升？

var声明的变量存在变量提升（将变量提升到当前作用域的顶部）。即变量可以在声明之前调用，值为undefined。

let和const不存在变量提升。即它们所声明的变量一定要在声明后使用，否则报ReferenceError错。

3，是否存在暂时性死区？

let和const存在暂时性死区。即只要块级作用域内存在let命令，它所声明的变量就“绑定”（binding）这个区域，不再受外部的影响。

4，是否允许重复声明变量？

var允许重复声明变量。let和const在同一作用域不允许重复声明变量。

5，是否存在块级作用域？

var不存在块级作用域。let和const存在块级作用域。

到底什么叫块级作用域呢，
ES5中作用域有：全局作用域、函数作用域。没有块作用域的概念。ECMAScript 6(简称ES6)中新增了块级作用域。块作用域由 { } 包括，if语句和for语句里面的{ }也属于块作用域。

6，是否能修改声明的变量？
var和let可以。
const声明一个只读的常量。一旦声明，常量的值就不能改变。const声明的变量不得改变值，这意味着，const一旦声明变量，就必须立即初始化，不能留到以后赋值。

————————————————
版权声明：本文为CSDN博主「前端的我」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_43004614/article/details/90697463

什么叫块级作用域 

本文结合执行上下文分析了变量提升与块级作用域的实现，变量提升其实就是在编译阶段把var声明的变量注入到变量环境中，而块级作用域的实现其实是通过不同的块来保存块中使用let、const 声明的变量，通过栈的机制来处理不同的块。执行上下文对理解 this，闭包有很大的作用。大家加油。https://blog.csdn.net/lefex/article/details/104046893
闭包

https://blog.csdn.net/weixin_39194176/article/details/80909666?utm_medium=distribute.pc_relevant_t0.none-task-blog-2%7Edefault%7EBlogCommendFromMachineLearnPai2%7Edefault-1.control&depth_1-utm_source=distribute.pc_relevant_t0.none-task-blog-2%7Edefault%7EBlogCommendFromMachineLearnPai2%7Edefault-1.control

promise.then

new Promise(
  function (resolve, reject) {
    // 一段耗时的异步操作
    resolve('成功') // 数据处理完成
    // reject('失败') // 数据处理出错
  }
).then(
  (res) => {console.log(res)},  // 成功
  (err) => {console.log(err)} // 失败
)

• resolve作用是，将Promise对象的状态从“未完成”变为“成功”（即从 pending 变为 resolved），在异步操作成功时调用，并将异步操作的结果，作为参数传递出去；
  reject作用是，将Promise对象的状态从“未完成”变为“失败”（即从 pending 变为 rejected），在异步操作失败时调用，并将异步操作报出的错误，作为参数传递出去。
• promise有三个状态：
  1、pending[待定]初始状态
  2、fulfilled[实现]操作成功
  3、rejected[被否决]操作失败
  当promise状态发生改变，就会触发then()里的响应函数处理后续步骤；
  promise状态一经改变，不会再变。
• Promise对象的状态改变，只有两种可能：
  从pending变为fulfilled
  从pending变为rejected。
  这两种情况只要发生，状态就凝固了，不会再变了。

.then()

1、接收两个函数作为参数，分别代表fulfilled（成功）和rejected（失败）
2、.then()返回一个新的Promise实例，所以它可以链式调用
3、当前面的Promise状态改变时，.then()根据其最终状态，选择特定的状态响应函数执行
4、状态响应函数可以返回新的promise，或其他值，不返回值也可以我们可以认为它返回了一个null；
5、如果返回新的promise，那么下一级.then()会在新的promise状态改变之后执行
6、如果返回其他任何值，则会立即执行下一级.then()

mix混入 vue3.0新的

一、什么是Mixins？ mixins（混入），

官方的描述是一种分发 Vue 组件中可复用功能的非常灵活的方式，mixins是一个js对象，它可以包含我们组件中script项中的任意功能选项，如data、components、methods 、created、computed等等。我们只要将共用的功能以对象的方式传入 mixins选项中，当组件使用 mixins对象时所有mixins对象的选项都将被混入该组件本身的选项中来，这样就可以提高代码的重用性，使你的代码保持干净和易于维护。

二、什么时候使用Mixins？

当我们存在多个组件中的数据或者功能很相近时，我们就可以利用mixins将公共部分提取出来，通过 mixins封装的函数，组件调用他们是不会改变函数作用域外部的。

路由导航钩子

1. 全局导航钩子：

全局导航钩子主要有两种钩子：前置守卫、后置钩子，

router.beforeEach((to, from, next) => { // do someting });

1. to: Route，代表要进入的目标，它是一个路由对象

2. from: Route，代表当前正要离开的路由，同样也是一个路由对象

3. next: Function，这是一个必须需要调用的方法，而具体的执行效果则依赖 next 方法调用的参数

router.afterEach((to, from) => { // do someting });

2. 路由独享的钩子

顾名思义，即单个路由独享的导航钩子，它是在路由配置上直接进行定义的：

cont router = new VueRouter({
    routes: [
        {
            path: '/file',
            component: File,
            beforeEnter: (to, from ,next) => {
                // do someting
            }
        }
    ]
});

3. 组建内的导航钩子

组件内的导航钩子主要有这三种：beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave。他们是直接在路由组件内部直接进行定义的

我们看一下他的具体用法：

const File = {
    template: `<div>This is file</div>`,
    beforeRouteEnter(to, from, next) {
        // do someting
        // 在渲染该组件的对应路由被 confirm 前调用
    },
    beforeRouteUpdate(to, from, next) {
        // do someting
        // 在当前路由改变，但是依然渲染该组件是调用
    },
    beforeRouteLeave(to, from ,next) {
        // do someting
        // 导航离开该组件的对应路由时被调用
    }
}
————————————————
版权声明：本文为CSDN博主「神圣光」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_41399785/article/details/79382243

vueX

https://www.jianshu.com/p/2e5973fe1223

JavaScript中常用es6语法整理总结

https://baijiahao.baidu.com/s?id=1668836162315091290&wfr=spider&for=pc

es6 新数据结构

https://www.cnblogs.com/zpsakura/p/11724930.html

css3新特性

https://www.jianshu.com/p/56b7302d7f7f

html5新特性

https://www.cnblogs.com/binguo666/p/10928907.html

垂直水平居中

https://www.cnblogs.com/linsinan/p/6132241.html

display: flex;//flex布局

justify-content: center;//使子项目水平居中

align-items: center;//使子项目垂直居中

hash history 区别

• hash模式是通过改变锚点(#)来更新页面URL，并不会触发页面重新加载，我们可以通过window.onhashchange监听到hash的改变，从而处理路由。
• history模式是通过调用window.history对象上的一系列方法来实现页面的无刷新跳转

计算属性 监听器区别

watch和computed的区别

computed一定有返回值，而watch不需要返回值
computed是依赖的数据发生改变时重新调用, watch是监听的响应式数据发生改变时重新调用

watch和methods的区别

methods是每次调用都会执行函数
watch不需要调用,并且只有监听数据发生改变时才会重新调用

继承

原型链

深拷贝浅拷贝区别

浅拷贝只复制指向某个对象的指针，而不复制对象本身，新旧对象还是共享同一块内存。

但深拷贝会另外创造一个一模一样的对象，新对象跟原对象不共享内存，修改新对象不会改到原对象。

实现深拷贝

1.JSON.stringfy() & JSON.parse()，function 和 undefined 不可用

2.其实深拷贝可以拆分成 2 步，浅拷贝 + 递归，浅拷贝时判断属性值是否是对象，如果是对象就进行递归操作，两个一结合就实现了深拷贝。

3.使用lodash.cloneDeep实现深拷贝

Vue项目打包后dist文件目录详解

https://blog.csdn.net/qq_41611820/article/details/103699395

vue数据双向绑定原理

https://www.cnblogs.com/canfoo/p/6891868.html

MVVM

View是视图层，也就是用户界面。前端主要由HTML和CSS来构成，为了更方便地展现ViewModel或者Model层的数据。
Model是指数据模型，泛指后端进行的各种业务逻辑处理和数据操控，主要围绕数据库系统展开。
ViewModel由前端开发人员组织生成和维护的视图数据层。在这一层，前端开发者从后端获取得到Model数据进行转换出来，做二次封装，以生成符合View层使用预期的视图数据模型。视图状态和行为都封装在ViewModel里。这样的封装使得ViewModel可以完整地去描述View层。

javascript 判断数据类型的几种方法

https://lequ7.com/javascript-pan-duan-shu-ju-lei-xing-de-ji-zhong-fang-fa.html

一、typeof 直接返回数据类型字段，但是无法判断数组、null、对象

二、instanceof 判断某个实例是不是属于原型
// 构造函数
function Fruit(name, color) {
this.name = name;
this.color = color;
}
var apple = new Fruit(“apple”, “red”);

// (apple != null)
apple instanceof Object // true
apple instanceof Array // false

三、使用 Object.prototype.toString.call()判断