Lucy Thompson

## ES6 模块与commonJS模块的差异 1. commonJS 模块输出的是一个值的拷贝，ES6静态分析，动态引用，模块输出的是值的引用 commonJS模块一旦输出一个值，模块内部的变化就影响不到这个值。 ES6模块如果使用import从一个模块加载变量，那些变量不会被缓存，而是成为一个指向被加载模块的引用，原始值变了，import加载的值也会跟着变。需要开发者自己保证，真正取值的时候能够取到值。 2. commonJS 模块是运行时加载，ES6 模块是编辑时输出接口 运行时加载：commonJS 模块就是对象；即在输入时是先加载整个模块，生成一个对象，然后再从这个对象上读取方法，这种加载称为“运行时加载”。commonJS脚本代码在require的时候，就会全部执行。一旦出现某个模板被“循环加载”，就只能输出已经执行的部分，还未执行的部分不会输出。 编译时加载：ES6 模块不是对象，而是通过export命令显式指定输出的代码，import时指定加载某个输出值，而不是加载整个模块，这种加载称为“编译时加载”。 3. commonJS 加载的是整个模块，即将所有的接口全部加载进来，ES6 可以单独加载其中的某个接口（方法） 4. commonJS this 指向当前模块，ES6 this 指向undefined

## 从输入 URL 到页面加载完成的过程 - 首先通过DNS解析获得网址的对应IP地址，如果这一步做了智能 DNS 解析的话，会提供访问速度最快的 IP 地址。 - 接下来是 TCP 握手 （3次握手4次挥手），应用层会下发数据给传输层，这里 TCP 协议会指明两端的端口号，然后下发给网络层。网络层中的 IP 协议会确定 IP 地址，并且指示了数据传输中如何跳转路由器。然后包会再被封装到数据链路层的数据帧结构中，最后就是物理层面的传输了。 - TCP 握手结束后会进行 TLS 握手，然后就开始正式的传输数据。 - 数据在进入服务端之前，可能还会先经过负责负载均衡的服务器，它的作用就是将请求合理的分发到多台服务器上，这时假设服务端会响应一个 HTML 文件。...

## vue生命周期图示  ## 1. beforeCreate( 创建前 ) 在实例初始化之后，数据观测和事件配置之前被调用，此时组件的选项对象还未创建，el 和 data 并未初始化，因此无法访问methods， data， computed等上的方法和数据。 ## 2. created ( 创建后 ） 实例已经创建完成之后被调用，在这一步，实例已完成以下配置：数据观测、属性和方法的运算，watch/event事件回调，完成了data 数据的初始化，el没有。 然而，挂在阶段还没有开始, $el属性目前不可见，这是一个常用的生命周期，因为你可以调用methods中的方法，改变data中的数据，并且修改可以通过vue的响应式绑定体现在页面上，，获取computed中的计算属性等等，通常我们可以在这里对实例进行预处理，也有一些童鞋喜欢在这里发ajax请求，值得注意的是，这个周期中是没有什么方法来对实例化过程进行拦截的，因此假如有某些数据必须获取才允许进入页面的话，并不适合在这个方法发请求，建议在组件路由钩子beforeRouteEnter中完成。 ## 3. beforeMount 挂在开始之前被调用，相关的render函数首次被调用（虚拟DOM），实例已完成以下的配置： 编译模板，把data里面的数据和模板生成html，完成了el和data 初始化，注意此时还没有挂在html到页面上。...

## svg实现loading效果 `效果`  `思路`：通过svg实现动画效果，通过svg的width、height属性控制大小，通过path的fill属性控制颜色。 `html` ```javascript ``` `css` ``` svg { width: 100px; height: 100px; } svg path { fill: lightgreen; } ``` ## animation实现loading效果 `效果`  `思路`：animation控制图形元素进行transform:rotate()。 `html`...

## 什么是nginx？ Nginx("engine x")是一款是由俄罗斯的程序设计师Igor Sysoev所开发高性能的Web和反向代理服务器，也是一个 IMAP/POP3/SMTP 代理服务器。 在高连接并发的情况下，Nginx是Apache服务器不错的替代品。 ## nginx服务器基本特征 - 处理静态文件，索引文件以及自动索引；打开文件描述符缓冲 - 无缓存的反向代理加速，简单的负载均衡和容错 - FastCGI，简单的负载均衡和容错 - 模块化的结构。包括gzipping, byte ranges, chunked responses,以及 SSI-filter等filter。如果由FastCGI或 其它代理服务器处理单页中存在的多个SSI，则这项处理可以并行运行，而不需要相互等待 - 支持SSL 和 TLSSNI ## nginx常用功能...

## 动态import() ``` import React {Suspense，lazy} from 'react' const LoadableComponent = lazy(() => import("./my-component")); class Test extends React.Component { render () { return ( ) } } export default Test...

``` function copyText (text) { let input = document.createElement('input'); input.setAttribute('readonly', 'readonly'); input.setAttribute('value', text); document.body.appendChild(input); input.select(); // 不能少 if (!text || !text.length) { console.log('复制内容不能为空！'); return; } input.setSelectionRange(0, text.length); if (document.execCommand('copy')) {...

## 为什么要用this > this提供了一种更优雅的方法来隐式`传递`一个对象的引用，因此可以将API设计得更加简洁并且易于复用。 ## 什么是 this > this 就是一个指针，指向我们调用函数的对象。 ## this的值由什么决定 > this的值并不是由函数定义放在哪个对象里面决定，而是函数执行时由谁来唤起决定。 ## 什么是执行上下文 > 执行上下文 是语言规范中的一个概念，用通俗的话讲，大致等同于函数的执行“环境”。具体的有：变量作用域（和 作用域链条，闭包里面来自外部作用域的变量），函数参数，以及 this 对象的值。 现在起，我们专注于查明 this 关键词到底指向哪。因此，我们现在要思考的就一个问题： - 是什么调用函数？是哪个对象调用了函数？ 为了理解这个关键概念，我们来测一下下面的代码。 ``` let...

## 什么是闭包 MDN的解释：闭包是`函数`和`声明该函数的词法环境`的组合。 简单讲，闭包就是指有权访问另一个函数作用域中的变量的函数。 它由两部分构成：函数，以及创建该函数的环境。环境由闭包创建时在作用域中的所有局部变量组成。 理解闭包的关键在于：外部函数调用之后其变量对象本应该被销毁，但闭包的存在使我们仍然可以访问外部函数的变量对象，这就是闭包的重要概念。 ## 如何产生一个闭包函数 > 创建闭包最常见方式，就是在一个函数内部创建另一个函数。 ``` function outer() { let name = "hello"; // 闭包创建时所能访问的局部变量 function sayHello() { // 闭包函数 alert(name); } return sayHello; //...

less-loader、css-loader、style-loader插件作用 less-loader：用于加载.less文件，将less转化为css css-loader：用于加载.css文件，将css转化为commonjs style-loader: 将样式通过标签插入到header中 先安装这几款插件 ``` npm i style-loader css-loader less less-loader -D ``` 在webpack.config.js文件中加入如下配置 ``` 'use strict' const path = require('path') module.exports = { mode: 'production', entry: {...