weixin_45449964的博客

react基础，安装，脚手架的简单使用

this 深度解析这是《你不知道的JavaScript》第三节，深入了解 this 的含义，以及如何判断 this 的指向。this 是什么首先我们要知道 this 到底是什么。我认为，this 更像是一个关键字，他最终可能会指向某个对象（也有可能指向undefined）。在函数中，this 只在函数调用的时候才确定其最终指向的对象，当我们在函数中对 this 进行操作的时候，实际是操作 this 指向的变量。这里会有一些误区：误区1：this 指向函数本身，这种想法是错的，虽然从 this 的字

$refs$parent / $children$provide / $inject$attrs / $listener

文章目录简介闭包作用域缓存如何消除闭包模块化简介这是《你不知道的JavaScript》系列的第二个比较重要的内容，闭包。在没有仔细研究过闭包的机制前，我对他的了解可能仅仅是函数中返回一个函数，且该函数引用了上一个函数的成员变量。下面我就按我对书中知识的理解做一下总结闭包相信了解闭包的同学都是通过下面这个函数来认识闭包的：function add () { var count = 0 return function fn() { count++ console.log(count) }

简介本文是我在阅读书籍《你不知道的JavaScript-上卷》时的总结和看法。主要是对一些重要知识点的梳理和归纳，并用自己的思路去进行书写成记录来便于日后的回顾和加深知识点的认识，所描述内容仅供学习参考。作用域以及作用域链作用域以前一直不知道什么是作用域，或者说只知道作用域，而不知道他实际代表的含义。作用域实际是浏览器引擎在查询变量的一套规则。按我的理解，作用域存储了已经被声明的变量，以及这些被声明的变量所代表的值，当引擎在进行 LHS 或者 RHS 查询的时候，就需要到对应的作用域进行查询。

vue 构建 SSR 服务端渲染 — 简单的服务端渲染简单的服务端渲染基础的服务端渲染需要安装几个比较重要的模块npm i vue vue-server-renderer express在根路径下创建文件 server.js简易的服务端首先需要构建一个简易的服务器，因为是服务端渲染，所以需要在服务端返回 html 代码// server.jsconst server = require('express')()// 当浏览器请求该地址时返回信息server.get('/', (req,

nuxt 使用进阶-自定义路由配置自定义路由配置nuxt.config.js配置文件extendRoutes()自定义路由配置nuxt 本身会根据 pages 目录下的文件结构生成站点路由，这种方式非常的方便，不需要我们自己去配置路由。但是有些情况下需要根据项目的实际情况去定义一个路由，这种情况该怎么办呢？nuxt 也是给我们提供了方法。nuxt.config.js配置文件nuxt 允许我们在 nuxt.config.js 文件中对 项目进行进一步的配置，如路由配置。首先我们需要在 项目根路径下创

Vue 数据响应式原理Vue2 中的数据响应式原理用的是观察者模式，下面用一张流程图来简单说明一下观察者模式的原理。从流程图不难看出，观察者模式的核心就是 Dep 和 Watcher 这两个对象。Dep 负责收集依赖（这里的依赖实际就是 watcher），并在监听到数据变化的时候发送通知。发送通知的过程实际就是调用 watcher.update() 方法。从而更新视图内容。下面我们来详细看看 Vue 具体是如何实现数据响应式的。我将 Vue 实现数据响应式的过程分为三步：创建响应式数据，也就是

nuxt的基础使用安装第一个页面启动项目pages 目录路由导航nuxt-link编程式导航动态路由nuxt 是用于解决 vue 服务端渲染+客户端渲染（同构渲染）的方法，他的内部集成了 vue、vue-router 等模块，可以让开发更加的方便安装新建一个文件夹，并移动到当前目录中初始化项目 npm init -ynuxt 的安装非常的简单，只需要安装 nuxt 模块即可npm i nuxt第一个页面创建好项目和安装模块后，在项目根路径下创建 pages 目录，该目录将存放项目的所有页面

模拟 vue-router hash 模式的基础功能实现模拟 vue-router 的实现实现 vue-router 的核心步骤构建类构建响应式数据属性 currentinstall方法初始化 router-link，router-view 组件match 匹配路由监听 hash 改变模拟 vue-router 的实现以下内容基于 vue-router hash 模式来实现实现 vue-router 的核心步骤构建 vue-router 类构建响应式数据属性 current，动态渲染 dom添

发布/订阅模式发布/订阅模式基础原理事件中心subs订阅事件方法 $on发布事件 $emit发布/订阅模式基础原理发布/订阅模式是响应式的解决办法之一，先看下图：可以看到，所有的事件其实是由事件中心管理。我们可以订阅事件中心的任意事件，并且传递事件触发函数（也就是我们订阅的事件被触发后希望执行的函数）。当某个事件被发布的时候，事件中心就会触发该事件所有的事件触发函数，从而实现响应式。不难看出，发布/订阅模式的组成部分主要有：事件中心 eventCenter订阅事件 $on发布事件 $emi

webpack—webpack-dev-server的使用webpack-dev-server安装启动自动打开浏览器优化执行命令在日常的webpack项目的开发中，如果每次测试都需要自己手动的编译和刷新浏览器，那么将会是一个无比痛苦和低开发效率的事情，所以为了提高我们的开发效率，我们希望我们每次编辑代码的时候，webpack可以自动编译并且刷新浏览器，而这里我们就可以使用webpack-dev-server这个插件了。本章只介绍关于webpack-dev-server的自动编译和自动刷新的功能。它还有更

webpack源码分析—ESModule规范模块的导入与导出详解前言ESModule规范模块的导入与导出导入分析r方法—模块类型标记前言上一章分析了CommonJS规范模块的导入与导出，这一章我们来分析ESModule规范模块的导入与导出。ESModule规范模块的导入与导出示例代码// index.jsimport data, { param1, param2 } from './module.js'console.log(data)console.log(param1)console.

webpack源码分析—模块的导入与导出详解前言CommonJS规范的导入和导出导入导出总结前言上一章我们说了webpack打包后代码的一个整体分析，这一章我们来详细说一下webpack打包后的代码是如何实现模块的导入和导出的，因为commonjs规范和esmodule规范两者有一定差异，且esmodule的差异更大，所以我们先分析CommonJS规范下的导入导出CommonJS规范的导入和导出示例代码// 主模块入口const data = require('./module.js')con

webpack源码分析—打包文件的整体分析打包文件分析模块定义路径匿名函数的形参module & exports__webpack_require__参数总结主逻辑代码__webpack_require__方法图解打包文件分析模块定义路径webpack会将入口文件及其依赖的模块打包成一个文件。从图上面可以看到，webpack打包后的结果，实际是一个立即执行函数，函数接收一个modules的参数。这个参数是模块打包核心之一，我们展开来看一下可以看到，传递的参数是一个对象类型的数据，而它的键

ESLint介绍使用安装介绍最主流的JavaScript lint工具，检测JS代码质量ESLint很容易统一开发者的编码风格ESLint可以帮助开发者提升编码能力使用安装yarn add eslint --dev

webpack—plugin的用法及常用的pluginplugin有什么用处基本用法html-webpack-plugin零配置使用传递参数来定义html文件的内容根据模板生成html文件添加模板参数clean-webpack-pluginplugin有什么用处插件也是webpack最强大的一个功能之一，插件可以实现很多loader无法完成的事情。他的工作其实是在打包构建的每个环节去添加对应生命钩子函数，并执行对应的钩子来对文件进行修改。如果说loader是实现模块化打包，那么plugin就是帮助我们构

常用的loader加载器的使用前言css-loader前言这一章主要讲解了webpack中一个很重要的功能，加载器-loader。上一章讲到，webpack可以打包不同类型的文件，而webpack本身仅支持js文件的模块化打包，所以其他类型的文件需要不同的loader进行转化加载。下面我们将以几种常见的loader来介绍loader的用法css-loader前端应用免不了使用的就是css代码，如果通过常规的link方式，会将所有的样式都进行加载，但实际上，页面使用到的样式是只有一部分的。所以很大程度