- 博客(65)
- 资源 (2)
- 问答 (1)
- 收藏
- 关注
RSS订阅原创 this 深度解析
this 深度解析这是《你不知道的JavaScript》第三节，深入了解 this 的含义，以及如何判断 this 的指向。this 是什么首先我们要知道 this 到底是什么。我认为，this 更像是一个关键字，他最终可能会指向某个对象（也有可能指向undefined）。在函数中，this 只在函数调用的时候才确定其最终指向的对象，当我们在函数中对 this 进行操作的时候，实际是操作 this 指向的变量。这里会有一些误区：误区1：this 指向函数本身，这种想法是错的，虽然从 this 的字
2021-07-14 10:52:04
225
原创 vue 组件通信的几种方式
$refs$parent / $children$provide / $inject$attrs / $listener
2021-06-30 17:25:53
632
1
原创 你不知道的JavaScript——闭包
文章目录简介闭包作用域缓存如何消除闭包模块化简介这是《你不知道的JavaScript》系列的第二个比较重要的内容，闭包。在没有仔细研究过闭包的机制前，我对他的了解可能仅仅是函数中返回一个函数，且该函数引用了上一个函数的成员变量。下面我就按我对书中知识的理解做一下总结闭包相信了解闭包的同学都是通过下面这个函数来认识闭包的：function add () { var count = 0 return function fn() { count++ console.log(count) }
2021-06-28 18:35:30
281
原创 你不知道的JavaScript——作用域以及作用域链
简介本文是我在阅读书籍《你不知道的JavaScript-上卷》时的总结和看法。主要是对一些重要知识点的梳理和归纳，并用自己的思路去进行书写成记录来便于日后的回顾和加深知识点的认识，所描述内容仅供学习参考。作用域以及作用域链作用域以前一直不知道什么是作用域，或者说只知道作用域，而不知道他实际代表的含义。作用域实际是浏览器引擎在查询变量的一套规则。按我的理解，作用域存储了已经被声明的变量，以及这些被声明的变量所代表的值，当引擎在进行 LHS 或者 RHS 查询的时候，就需要到对应的作用域进行查询。
2021-06-24 18:34:45
138
1
原创 vue 构建 SSR 服务端渲染 — 简单的服务端渲染
vue 构建 SSR 服务端渲染 — 简单的服务端渲染简单的服务端渲染基础的服务端渲染需要安装几个比较重要的模块npm i vue vue-server-renderer express在根路径下创建文件 server.js简易的服务端首先需要构建一个简易的服务器，因为是服务端渲染，所以需要在服务端返回 html 代码// server.jsconst server = require('express')()// 当浏览器请求该地址时返回信息server.get('/', (req,
2021-06-03 18:05:10
155
原创 nuxt 使用进阶-自定义路由配置
nuxt 使用进阶-自定义路由配置自定义路由配置nuxt.config.js配置文件extendRoutes()自定义路由配置nuxt 本身会根据 pages 目录下的文件结构生成站点路由，这种方式非常的方便，不需要我们自己去配置路由。但是有些情况下需要根据项目的实际情况去定义一个路由，这种情况该怎么办呢？nuxt 也是给我们提供了方法。nuxt.config.js配置文件nuxt 允许我们在 nuxt.config.js 文件中对 项目进行进一步的配置，如路由配置。首先我们需要在 项目根路径下创
2021-06-02 15:04:17
6969
原创 Vue 数据响应式原理
Vue 数据响应式原理Vue2 中的数据响应式原理用的是观察者模式，下面用一张流程图来简单说明一下观察者模式的原理。从流程图不难看出，观察者模式的核心就是 Dep 和 Watcher 这两个对象。Dep 负责收集依赖（这里的依赖实际就是 watcher），并在监听到数据变化的时候发送通知。发送通知的过程实际就是调用 watcher.update() 方法。从而更新视图内容。下面我们来详细看看 Vue 具体是如何实现数据响应式的。我将 Vue 实现数据响应式的过程分为三步：创建响应式数据，也就是
2021-06-02 11:37:19
717
原创 nuxt的基础使用
nuxt的基础使用安装第一个页面启动项目pages 目录路由导航nuxt-link编程式导航动态路由nuxt 是用于解决 vue 服务端渲染+客户端渲染（同构渲染）的方法，他的内部集成了 vue、vue-router 等模块，可以让开发更加的方便安装新建一个文件夹，并移动到当前目录中初始化项目 npm init -ynuxt 的安装非常的简单，只需要安装 nuxt 模块即可npm i nuxt第一个页面创建好项目和安装模块后，在项目根路径下创建 pages 目录，该目录将存放项目的所有页面
2021-05-18 23:43:49
3423
3
原创 模拟 vue-router hash 模式的基础功能实现
模拟 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添
2021-04-13 17:37:22
285
原创 发布/订阅模式
发布/订阅模式发布/订阅模式基础原理事件中心subs订阅事件方法 $on发布事件 $emit发布/订阅模式基础原理发布/订阅模式是响应式的解决办法之一，先看下图：可以看到，所有的事件其实是由事件中心管理。我们可以订阅事件中心的任意事件，并且传递事件触发函数（也就是我们订阅的事件被触发后希望执行的函数）。当某个事件被发布的时候，事件中心就会触发该事件所有的事件触发函数，从而实现响应式。不难看出，发布/订阅模式的组成部分主要有：事件中心 eventCenter订阅事件 $on发布事件 $emi
2021-04-08 10:25:41
801
原创 webpack—自动编译和自动刷新浏览器
webpack—webpack-dev-server的使用webpack-dev-server安装启动自动打开浏览器优化执行命令在日常的webpack项目的开发中，如果每次测试都需要自己手动的编译和刷新浏览器，那么将会是一个无比痛苦和低开发效率的事情，所以为了提高我们的开发效率，我们希望我们每次编辑代码的时候，webpack可以自动编译并且刷新浏览器，而这里我们就可以使用webpack-dev-server这个插件了。本章只介绍关于webpack-dev-server的自动编译和自动刷新的功能。它还有更
2021-03-19 00:36:29
567
原创 webpack源码分析—ESModule规范模块的导入与导出详解
webpack源码分析—ESModule规范模块的导入与导出详解前言ESModule规范模块的导入与导出导入分析r方法—模块类型标记前言上一章分析了CommonJS规范模块的导入与导出，这一章我们来分析ESModule规范模块的导入与导出。ESModule规范模块的导入与导出示例代码// index.jsimport data, { param1, param2 } from './module.js'console.log(data)console.log(param1)console.
2021-03-19 00:09:44
1338
原创 webpack源码分析—CommonJS规范模块的导入与导出详解
webpack源码分析—模块的导入与导出详解前言CommonJS规范的导入和导出导入导出总结前言上一章我们说了webpack打包后代码的一个整体分析，这一章我们来详细说一下webpack打包后的代码是如何实现模块的导入和导出的，因为commonjs规范和esmodule规范两者有一定差异，且esmodule的差异更大，所以我们先分析CommonJS规范下的导入导出CommonJS规范的导入和导出示例代码// 主模块入口const data = require('./module.js')con
2021-03-16 00:58:26
647
原创 webpack源码分析—打包文件的整体分析
webpack源码分析—打包文件的整体分析打包文件分析模块定义路径匿名函数的形参module & exports__webpack_require__参数总结主逻辑代码__webpack_require__方法图解打包文件分析模块定义路径webpack会将入口文件及其依赖的模块打包成一个文件。从图上面可以看到，webpack打包后的结果，实际是一个立即执行函数，函数接收一个modules的参数。这个参数是模块打包核心之一，我们展开来看一下可以看到，传递的参数是一个对象类型的数据，而它的键
2021-03-14 13:03:51
322
原创 规范化标准—ESLint的使用
ESLint介绍使用安装介绍最主流的JavaScript lint工具，检测JS代码质量ESLint很容易统一开发者的编码风格ESLint可以帮助开发者提升编码能力使用安装yarn add eslint --dev
2021-03-11 23:39:18
388
原创 webpack—plugin的用法及常用的plugin
webpack—plugin的用法及常用的pluginplugin有什么用处基本用法html-webpack-plugin零配置使用传递参数来定义html文件的内容根据模板生成html文件添加模板参数clean-webpack-pluginplugin有什么用处插件也是webpack最强大的一个功能之一，插件可以实现很多loader无法完成的事情。他的工作其实是在打包构建的每个环节去添加对应生命钩子函数，并执行对应的钩子来对文件进行修改。如果说loader是实现模块化打包，那么plugin就是帮助我们构
2021-03-10 23:35:58
637
原创 webpack—常用的loader加载器的使用
常用的loader加载器的使用前言css-loader前言这一章主要讲解了webpack中一个很重要的功能，加载器-loader。上一章讲到，webpack可以打包不同类型的文件，而webpack本身仅支持js文件的模块化打包，所以其他类型的文件需要不同的loader进行转化加载。下面我们将以几种常见的loader来介绍loader的用法css-loader前端应用免不了使用的就是css代码，如果通过常规的link方式，会将所有的样式都进行加载，但实际上，页面使用到的样式是只有一部分的。所以很大程度
2021-03-08 20:38:07
292
原创 快速了解webpack，及其基础知识
快速了解webpack，及其基础知识前言什么webpack快速开始webpack安装使用webpack模块配置webpack.config.js前言这是webpack学习总结及心得分栏的第一章，主要讲述一下我对webpack的一些新的认识，和webpack的基础用法，webpack源代码文档什么webpackwebpack是一个模块打包工具，但这里的模块化不仅仅是对js文件而言的，而是整个前端的打包，它可以将根据项目中的依赖将所有类型的文件打包在一起，如css文件，资源文件等。它可以将项目中零散
2021-03-06 21:58:23
192
原创 前端性能优化
前端性能优化一慎用全局变量缓存全局变量通过原型对象添加附加方法慎用全局变量全局变量如果不主动释放，会一直占用内存资源，而且全局变量容易重复定义，导致某些变量被覆盖而使程序出错缓存全局变量对于一些无法避免的使用的全局变量，我们应该在局部用变量缓存起来，这其实使减少了变量的作用域查找的层级示例let obj = { name: '前端性能优化', version: 1}function test() { let o = obj // 在局部缓存obj console.log(o.name
2021-03-05 00:33:08
81
原创 了解es6模块化，看这篇就够了
了解es6模块化，看这篇就够了ES ModuleES 的基本特性script标签中使用ES自动采用严格模式独立的私有作用域ESM通过CORS去请求外部JS模块ESM的script脚本会延迟执行ES 导入和导出exportexport <成员声明变量>export { 变量 }as关键字default关键字import基础用法导入defualt变量as关键字*关键字import导入的变量的特性接收普通变量和default变量ES Modulees module 是es6近几年最新出的一个模块化
2021-03-04 17:10:36
1166
2
原创 构建gulp自动化流程的思路及示例
构建gulp自动化流程的思路gulp实现思路项目准备开发准备gulp自动化构建gulpfile.js对HTML、Css、JavaScript进行自动化构建css任务的构建javascript任务的构建html页面的构建合并任务图片、子图图标的压缩与额外操作构建web server服务以及热更新构建dev开发模式任务完整的构建任务，代码清除、代码和文件的压缩处理html、css、javascript代码的压缩构建clean任务构建build任务示例gulpgulp本身只是一个平台，并不具备对项目进行构建的
2021-03-02 21:21:19
159
原创 实现一个简单的脚手架
实现思路按我的理解，脚手架实际就是种对模板文件进行读写的操作，所以大致的步骤有三个通过命令行接收传递的参数通过fs读取模板目录下的文件内容将读取的文件内容写入到项目目录下开始准备首先需要初始化一个脚手架项目初始结构yarn init --yes然后我们需要创建一个cli.js作为入口执行文件，并且需要定义头部#!/usr/bin/env node，并在package.json中定义bin字段的值为该入口文件命令行发起询问如何通过命令行接收用户输入的参数，这里我们可以使用inquir
2021-03-01 23:41:02
400
原创 Plop快速入门
Plop快速入门什么是Plop基本使用项目目录安装Plopplopfile.jssetGeneratoroptiondescriptionpromptsactions使用什么是PlopPlop是一个小而美的脚手架工具，它主要用于创建项目中特定类型的文件，Plop主要集成在项目中使用，帮助我们快速生成一定规范的初始模板文件。比如我们去书写Vue的组件，如果每次都是手动去写组件的初始内容，会比较繁琐，有可能会出错，且每个人写的规范可能都不一样。这时候我们就可以用Plop来创建规范的Vue组件的初始内容，方便
2021-02-23 18:23:10
962
原创 关于yeoman报错：requires yeoman-environment at least 3.0.0-beta.1解决方案
关于yeoman报错：requires yeoman-environment at least 3.0.0-beta.1解决方案最近在学习yeoman的使用，在运行创建自定义generator的命令时候遇到一个问题yo <my generator>解决办法将yeoman-generator的版本降到4.0或者全局安装yeoman-environment，并且使用yo run <your generator>...
2021-02-22 21:40:36
865
原创 this指向总结
普通函数this指向函数的this指向遵循一个基本原则：谁调用的函数，函数的this就指向谁，否则指向全局示例var name = 'window'let obj = { name: 'object', sayHi: function () { console.log(this.name) }, sayFoo: function () { return function () { console.log(this.name) } }}//
2021-02-22 17:53:51
6653
2
原创 手写promise原理
/** * promise 原理 * * 1. exector * 需要传递一个执行函数exector参数，用于执行何时进行状态改变的逻辑 * 这个函数需要两个参数 resovle, reject 分别用于处理成功、失败的状态改变 * * 2. status * status 状态 * 仅可以通过内部的resolve、reject内置函数进行修改，且仅当status == 'pending'状态可以被修改，状态一旦确定就无法被再次修改 * resolve
2021-02-22 16:51:13
154
原创 yeoman快速开始
yeoman的作用yeoman是一个通用的脚手架工具，可以搭配对应的generator创建任意类型的项目，也就是说我们可以通过yeoman来搭建自己的脚手架工具安装yo模块// 全局安装yo，这里我们要注意安装的模块是yo，不是yeomanyarn global add yo这里我们要注意，yo还需要搭配对应的generator来创建对应类型的项目安装generator模块示例// 全局安装generator-node模块yarn global add generator-node这
2021-02-22 16:20:43
148
原创 typescript数据类型
原始数据类型// string，存放字符串let str: string = 'string-type'// number，存放数值let num: number = 0// boolean，存放布尔值let bool: boolean = true// void，存放undefinedlet v: void = undefined// undefined，存放undefinedlet u: undefined = undefined// null，存放nulllet n:
2021-02-21 17:41:41
125
原创 开始typescript
什么是typescripttypescript是JavaScript的超集，它支持JavaScript的所有语法，并拥有一个强大的类型系统，以及ECMAScript的最新语法支持。但typescript本身并不能被浏览器执行，它最终还是需要通过编译转化成JavaScript代码快速上手安装typescript可以安装到全局或者项目中，但是考虑到项目依赖，建议安装到项目中cd <当前项目路径>yarn add typescripttsc文件在node_modules/_bin目
2021-02-21 10:44:31
147
原创 performance的使用
performance工具的使用performance任务管理器performance工具内存的变化TimeLineGC回收堆块照查找分离DOMperformanceperformance是一种用于监控浏览器运行的时候性能变化的工具，他可以帮助我们观察页面运行时内存的变化，渲染的时长；并分析需要改进优化的地方。任务管理器通过shift+esc，我们可以调出浏览器的任务管理器。通过任务管理器我们可以观察页面的内存占用空间cpu使用率网络情况进程ID这里我们使用较多的时内存的占用以及cp
2021-02-19 16:46:31
2380
原创 V8及其垃圾回收机制
什么是V8v8 是谷歌浏览器开发的一款目前最主流的 js 执行引擎，它内部有自己一套独特的垃圾回收机制v8 的垃圾回收机制最大内存：为了更好更快的垃圾回收，v8对于内存的使用有一个最大限制，对于64位操作系统，内存最大限制约是1.5G，32位操作系统是800M，并分为新生代区域和老生代区域回收策略：v8 对于垃圾的回收主要分为新生代对象和老生代对象，而且新生代和老生代的垃圾回收策略也不相同新生代对象什么是新生代对象新生代对象指的是存活时间较短的对象，主要存放在新生代区域，新生代区域在64位
2021-02-16 11:19:15
548
1
原创 JavaScript内存管理以及GC算法
内存管理以及GC算法内存管理JavaScript的内存管理什么是垃圾GC回收算法引用计数算法标记清除算法标记整理算法内存管理内存管理是开发者申请，使用，释放内存的过程，但JavaScript的内存管理是自动的，它内部并没有暴露api给开发者去操作内存。JavaScript的内存管理JavaScript并没有直接暴露api给开发者去申请，使用以及释放内存，它内部会自动分配内存申请内存// javascript 在声明变量的时候会自动分配一定的内存空间let a = []使用内存// 使用内
2021-02-13 11:25:55
194
2
原创 一篇文章带你了解和使用Promise对象
Promise的理解与使用什么是PromisePromise的特点Promise的基础用法Promise实例化resolve函数传入的是promisePromise.prototype.then()then方法回调函数的参数与返回值Promise.prototype.catch()Promise.all()Promise.racePromise.resolve()Promise.reject()什么是Promisepromise是解决异步编程的一种方案，对比传统的回调函数更加的便捷和强大。Promis
2020-11-09 17:23:43
239
原创 正则表达式-y修饰符
y修饰符y修饰符和g修饰符是类似的，都是全局匹配，但y修饰符有一定的匹配要求g修饰符只要剩余的字符中存在匹配即可y修饰符必须从剩余字符的第一个位置开始匹配，否则退出匹配示例讲解let str = "aaa_aa_aaaa"let reg_g = /a+/glet reg_y = /a+/yreg_g.exec(str)// aaareg_y.exec(str)// aaareg_g.exec(str)// aareg_y.exec(str)// null从上面的示例
2020-08-25 18:35:15
1466
1
原创 解决webpack “regeneratorRuntime is not defined“报错的问题
webpack "regeneratorRuntime is not defined"报错原因：这是因为在打包的文件中使用了高级的es6语法，但是webpack并没有帮我们去进行校验，解决办法：安装对应的安装依赖和开发依赖npm install @babel/plugin-transform-runtime -Dnpm install @babel/runtime -S...
2020-08-19 00:11:31
4685
原创 webpack-es6语法转化
普通的es6语法转化成低级的js语法模块安装// babel-loader babel转化加载器// @babel/core babel的核心转化模块// @babel/preset-env 定义了代码的转化npm install babel-loader @babel/core @babel/preset-env -Dwebpack.config.js{ entry: '', ouput: { ... }, module: { // 模块的定义 rules: [{ //
2020-08-18 23:02:52
135
原创 linux本地部署jenkins服务
安装在linux环境下使用docker容器进行安装docker run --name <容器名称> -itd -p 11005:8080 -p 50000:50000 jenkins/jenkins:lts获取jenkins初始化密码在jenkins初始化的时候会有一个初始的密码，这个密码用于我们在登录jenkins的时候使用docker logs -f <容器名称>使用logs命令来查看jenkins运行的日志，并从中获取密钥放行端口我们需要放行linux防火
2020-07-08 11:00:30
310
原创 SVG常用图形与path路径详解
基础知识svg描述所有的svg元素都应放在svg标签下才可以生效，svg实际上是用于显示所创建的svg矢量图的一个画布属性参数描述widthsvg画布的真实宽度heightsvg画布的真实高度viewBox视野，用于规定svg画布显示的位置以及显示的范围，由4个参数x，y，w，h控制viewBox详解： 首先，对于svg的是没有边界的，svg画布只是用于展示svg世界中某一个范围的内容，而对于超过了svg画布范围的内容，则会被遮挡。默认svg画布默认
2020-06-17 18:45:26
5874
1
原创 玩转canvas之你不知道的transform
canvas之transform精解transformcanvas-transform实现的效果差异css3的transformcanvas的tranformcanvas转换的缺点canvas转换矩阵的重置canvas中转换矩阵的b和c总结transformcanvas中的transform和css3中的transform在所表达的含义是相同的，都是对当前的元素/图像的的环境进行转换，也就是我们熟知的平移，旋转，缩放。虽然使用方法是相同的，但所实现出来的效果却是不同的。canvas-transform
2020-05-17 17:02:16
1041
node使用mssql连接sql server数据库报错code：ESOCKET
2021-04-08
TA创建的收藏夹 TA关注的收藏夹
TA关注的人