不写博客的前端不是好前端-CSDN博客

原创 win10安装Openssh

可视化流程点击win键，弹出的菜单中选择设置按钮，如图所示在windows设置中，点击应用弹出的应用和功能界面中，点击管理可选功能，如图所示点击如图所示的添加功能可选功能下面找到OpenSSH server,并点击点击如图所示的安装，等待安装完成即可。如需安装openssh client同样的方法命令行流程如果上述的安装出现了问题，则可以采用命令行进行安装以管理员身份打开PowerShell,然后输入 Get-WindowsCapability -Online | ? N

2020-11-12 19:16:17 1762

原创 vscode 常用快捷键

参考文档：https://code.visualstudio.com/docs/getstarted/keybindingscommandkeyCut line (empty selection)Ctrl+XCopy line (empty selection)Ctrl+CPasteCtrl+VDelete LineCtrl+Shift+KInsert Line BelowCtrl+EnterInsert Line AboveCtrl+Shif

2020-11-12 10:31:52 236

原创【黑马程序员】vue学习笔记（未完）

Vue的核心是帮我减少不必要的DOM操作，提高渲染效率Vue同时提供双向绑定的功能，通过提供的指令，我们只需要刷新数据，不再需要去管更新DOM的操作了

2020-11-09 16:39:16 1938 1

原创 vscode 远程配置开发机

我们都会遇到远程开发的情况，我的代码在服务器上，我需要在开发工具里对它进行更新，此篇博客就是vscode连接linux服务器的流程。一、远程主机配置sshsudo apt install openssh-server二、查找extension market点击屏幕右侧中间的位置，即可以显示extension market三、cannot connect to the extensions market然而当我在公司的机子上运行的时候，会提示我cannot connect to the ext

2020-11-06 23:27:49 513

原创 range对象实现DOM精确操作

range对象实现DOM精确操作Range定义使用方法使用场景CSSOMDOM操作的实现caseMDN接口文档：https://developer.mozilla.org/zh-CN/docs/Web/API/RangeRange定义我们先来看下MDN对range对象的定义：Range 接口表示一个包含节点与文本节点的一部分的文档片段。使用方法我们可以用 Document 对象的 Document.createRange 方法创建 Range，也可以用 Selection 对象的 getRange

2020-11-04 17:00:15 655

原创手写实现基础的reactive

手写实现基础的reactiveproxy的基本用法模仿reactive实现原理reactive基础上实现调色盘caseproxy的基本用法看一下MDN对proxy的定义：Proxy 对象用于定义基本操作的自定义行为（如属性查找、赋值、枚举、函数调用等）。语法：const p = new Proxy(target, handler)所以根据proxy的特性，我们可以看到，使用了proxy，我们代码的预期性会变差。看一下proxy的基本用法：let object = { a:1,

2020-11-03 21:33:44 459

原创字符串算法

字符串算法字符串分析算法字典树字符串分析算法字典树——大量搞重复字符串的存储与分析KMP——在长字符串里找模式Wildcard——带通配符的字符串模式正则——字符串通用模式匹配状态机——通用的字符串分析LL LR——字符串多层级结构分析字典树看一下基础的字典树生成方法：<script> let $ = Symbol("$") class Trie { constructor(){ // 用Object.create的

2020-10-30 21:58:43 170

原创 React案例分析

React案例分析内容介绍React 生命周期高阶组件与函数作为子组件CONTEXT API内容介绍本文是通过对geek-time提供的react课程的案例进行分析，着重强化react知识，附上案例github地址：https://github.com/supnate/react-geek-timeReact 生命周期Render阶段纯净且没有副作用，这个阶段可能会被react暂停，中止或者重新启动Pre-commit 阶段更新dom节点之前，可以读取dom节点内容commit 阶段

2020-10-29 20:15:49 382

原创 React路由配置——React Router

官方文档：React Router 中文文档

2020-10-29 16:36:19 779

原创【黑马程序员】react学习笔记

DOM 浏览器中的概念用JS对象表示页面中的元素并提供操作对象的api虚拟DOM 框架中的概念用JS对象模拟页面上的DOM和DOM嵌套，主要目的是实现页面上元素的高效更新Diff算法：tree diff, component diff, element diffwebpack :快速初始化项目： npm init -y新建目录： dist 产品目录 src 源代码路径在src目录下创建index.html,main.js文件使用cnpm安装webpack，运行 cnp..

2020-10-24 20:56:29 1022

原创 JS实现AST抽象语法树问题

前端中的AST抽象语法树问题四则运算正则表达式词法分析语法分析完整代码github地址:https://github.com/feddiyao/Frontend-05-Template/tree/master/Week%2003四则运算首先明确，此次的代码都是基于LL的语法分析来实现的，实现的是四则混合运算的功能，先看下定义：TokenNumber：· 1 2 3 4 5 6 7 8 9 0 的组合Operator:+ - * / 之一WhiteSpace:<SP>L

2020-10-21 16:48:48 1191

原创寻路问题

寻路问题地图编辑器地图编辑器首先实现一个地图编辑器，随着鼠标在页面上的点击滑动可以进行地图的绘画，并给出了一个save按钮来进行编辑后的地图内容的保存<style> .cell { display: inline-block; line-height: 7px; width: 6px; height: 6px; background-color: gray; border-bottom:

2020-10-16 17:01:34 412

原创微信小程序开发问题汇总

微信小程序开发问题汇总样式如何使用变量video遮罩问题弹幕自动上推信息流软键盘问题样式如何使用变量在wxss中，定义变量：width：var(–width–);在js中，定义变量：viewWidth，并给这个变量赋予想要的值在wxml中，使用wxss中的变量和js中的变量：style="–width–: {{ viewWidth }}px"video遮罩问题在实现直播的功能时，我们需要弹出红包等遮盖video的处理，此时会发现，使用z-index属性在小程序中是无效的，微信开发者文档提供了co

2020-10-15 15:22:22 1212 2

原创 tictactoe与红绿灯问题

训练营第一课tictactoe需求实现红绿灯需求ui设计功能实现tictactoe需求就是一个三子棋的游戏，双方交替落子，率先先连成三子则获胜。实现用一个list来进行棋盘格子的布局，编写对应的show方法<style> .cell { width: 100px; height: 100px; background-color: green; display: inline-block; bord

2020-10-12 20:45:06 147

转载谷歌浏览器跨域问题

https://www.hangge.com/blog/cache/detail_1703.html

2020-10-09 16:30:50 221

原创自己动手搭建一个React框架——toyReact

toyReact框架搭建环境配置JSX 原理和关键实现我们之前在博客上有提到 react的教程中tic-tac-toe游戏的案例，那么在篇博客中，我们主要要实现的是搭建自己的toyReact框架，将tic-tac-toe在toyReact框架中跑起来。环境配置包安装：npm install --save-dev webpack webpack-clinpm install --save-dev babel-loader @babel/core @babel/preset-envnpm insta

2020-09-05 21:59:48 1076

原创 winter重学前端——训练营预习课

重学前端读书笔记模块一javascriptjavascript 类型javascript对象模块一javascriptjavascript 类型javascript类型有以下几种:Undefined；Null；Boolean；String；Number；Symbol；Object。为什么有的编程规范要求用 void 0 代替 undefined？Undefined 类型表示未定义，它的类型只有一个值，就是 undefined。任何变量在赋值前是 Undefined 类型、值为 undefine

2020-09-04 11:11:02 911

原创 JavaScript中的 NaN 与 isNaN

NaNNaN 即 Not a Number ，不是一个数字。在 JavaScript 中，整数和浮点数都统称为 Number 类型。除此之外，Number 类型还有一个很特殊的值，即 NaN 。它是 Number 对象上的一个静态属性，可以通过 Number.NaN 来访问。console.log(Number.NaN); // NaNconsole.log(NaN); // NaNNAN的产生表达式计算一个表达式中如果有减号 (-)、乘号 (*) 或除号 (/) 等运算符时，JS 引

2020-09-03 10:35:22 235

原创 JS手写API实现

API实现jQuery offset 实现递归实现通过 getBoundingClientRect API 实现数组 reduce 方法的相关实现概念reduce的用法简单用法：计算数组中每个元素出现的次数：数组去重：将二维数组转化为一维：将多维数组转化为一维：reduce 实现 runPromiseInSequencereduce 实现 pipe实现一个reducecompose 实现的几种方案compose 概念面向过程的实现方式reduce的实现方式Promise的实现方式jQuery offset

2020-09-03 10:00:49 635

原创 JS中的异步与案例分析

异步setTimeout最小延迟宏任务（macrotask）与微任务（microtask）案例实现功能回调方案导致的回调地狱Promise 方案generator 方案async/await 方案setTimeoutJavaScript 中所有任务分为同步任务和异步任务。同步任务是指：当前主线程将要消化执行的任务，这些任务一起形成执行栈（execution context stack）异步任务是指：不进入主线程，而是进入任务队列（task queue），即不会马上进行的任务。当同步任务全都被消化，

2020-09-02 17:30:16 300

原创环境配置大杂烩

此博客记录一些常用的环境配置参数及遇到的坑，避免每次去翻历史记录，会不定期更新，主要是自娱自乐环境配置大杂烩DevcloudnpmDevcloudDevcloud的wiki地址：https://iwiki.woa.com/display/Devcloud/Devcloudnpmnpm使用腾讯内部源：npm config set registry https://mirrors.tencent.com/npm/npm开代理方式：https://iwiki.woa.com/pages/vie

2020-09-02 15:08:38 524

原创由源码看object.assign的拷贝方式

object.assign的拷贝方式基本用法源码基本用法Object.assign(目标,数据1,数据2…);网上有很多的Object.assign拷贝过程测试，这里放一个例子，就不多说了：//示例1 一层深拷贝let obj = {a:1}let newObj = Object.assign({},obj);console.log(newObj); //{a: 1}newObj.a=2;console.log(obj); //{a:1}console.log(newObj); //{

2020-09-02 11:18:09 307

原创 react官方文档棋盘案例分析

棋盘案例功能介绍井字棋初始状态代码通过 Props 传递数据给组件添加交互功能状态提升函数组件轮流落子判断出胜者时间旅行保存历史记录再次提升状态展示历史步骤记录选择一个 key实现时间旅行最终代码实现功能介绍井字棋tic-tac-toe(三连棋)游戏的所有功能能够判定玩家何时获胜能够记录游戏进程允许玩家查看游戏的历史记录，也可以查看任意一个历史版本的游戏棋盘状态初始状态代码class Square extends React.Component { render() { retu

2020-08-31 19:47:13 294

原创《你不知道的javascript》读书笔记——作用域和闭包（未完）

作用域和闭包程序处理的工具编译的三个步骤程序处理工具工作过程LHS查询和RHS查询词法作用域作用域查找程序处理的工具• 引擎从头到尾负责整个 JavaScript 程序的编译及执行过程。• 编译器引擎的好朋友之一，负责语法分析及代码生成等脏活累活。• 作用域引擎的另一位好朋友，负责收集并维护由所有声明的标识符(变量)组成的一系列查询，并实施一套非常严格的规则，确定当前执行的代码对这些标识符的访问权限。编译的三个步骤1、分词/词法分析(Tokenizing/Lexing)这个过程会将由字

2020-08-30 14:04:10 181

原创 JS面向对象和原型

面向对象和原型new关键字做了什么newFunc的模拟训练对newFunc的实现：如何优雅地实现继承JS原型链prototype`__proto__`prototype与`__proto__`原型链JS原型继承构造函数的继承构造函数绑定prototype模式、直接继承prototype利用空对象作为中介拷贝继承非构造函数的继承object()方法浅拷贝深拷贝JS创建对象的几种方式工厂模式构造函数模式原型模式组合使用构造函数模式和原型模式动态原型模式寄生构造函数模式稳妥构造函数模式总结Babel 编译结果研究

2020-08-28 17:30:22 253

原创 JS基础

JS基础JavaScript 类型及其判断typeofinstanceofObject.prototype.toStringconstructorJavaScript 类型及其转换JS中Number()、parseInt()和parseFloat()Number()parseInt()parseFloat( )JS中的NANNAN概念NAN的产生isNaNJavaScript 函数参数传递cannot read property of undefined 问题解决方案JavaScript 类型及其判断J

2020-08-27 19:07:14 358

yfm120750310的博客